_steps.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. // Steps
  2. .step {
  3. display: flex;
  4. flex-wrap: nowrap;
  5. list-style: none;
  6. margin: $unit-1 0;
  7. width: 100%;
  8. .step-item {
  9. flex: 1 1 0;
  10. margin-top: 0;
  11. min-height: 1rem;
  12. text-align: center;
  13. position: relative;
  14. &:not(:first-child)::before {
  15. background: $primary-color;
  16. content: "";
  17. height: 2px;
  18. left: -50%;
  19. position: absolute;
  20. top: 9px;
  21. width: 100%;
  22. }
  23. a {
  24. color: $gray-color;
  25. display: inline-block;
  26. padding: 20px 10px 0;
  27. text-decoration: none;
  28. &::before {
  29. background: $primary-color;
  30. border: $border-width-lg solid $light-color;
  31. border-radius: 50%;
  32. content: "";
  33. display: block;
  34. height: $unit-3;
  35. left: 50%;
  36. position: absolute;
  37. top: $unit-1;
  38. transform: translateX(-50%);
  39. width: $unit-3;
  40. z-index: $zindex-0;
  41. }
  42. }
  43. &.active {
  44. a {
  45. &::before {
  46. background: $light-color;
  47. border: $border-width-lg solid $primary-color;
  48. }
  49. }
  50. & ~ .step-item {
  51. &::before {
  52. background: $border-color;
  53. }
  54. a {
  55. &::before {
  56. background: $gray-color-light;
  57. }
  58. }
  59. }
  60. }
  61. }
  62. }