index.module.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. .stepsHeader {
  2. @apply flex items-center px-6 py-6;
  3. color: #344054;
  4. font-weight: 600;
  5. font-size: 14px;
  6. line-height: 20px;
  7. }
  8. .navBack {
  9. @apply box-border flex justify-center items-center mr-3 w-8 h-8 bg-white bg-center bg-no-repeat cursor-pointer hover:border-gray-300;
  10. border: 0.5px solid #F2F4F7;
  11. box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  12. border-radius: 32px;
  13. background-image: url(../assets/arrow-narrow-left.svg);
  14. background-size: 16px;
  15. }
  16. .stepList {
  17. @apply p-4 relative;
  18. line-height: 18px;
  19. }
  20. .stepItem {
  21. @apply relative flex justify-items-start pt-3 pr-0 pb-3 box-content;
  22. padding-left: 52px;
  23. font-size: 13px;
  24. height: 18px;
  25. }
  26. .stepItem.step1::before {
  27. content: '';
  28. position: absolute;
  29. bottom: 0;
  30. left: 23px;
  31. width: 2px;
  32. height: 7px;
  33. background-color: #f2f4f7;
  34. }
  35. .stepItem.step2::before {
  36. content: '';
  37. position: absolute;
  38. top: 0;
  39. left: 23px;
  40. width: 2px;
  41. height: 100%;
  42. background-color: #f2f4f7;
  43. }
  44. .stepItem.step2::after {
  45. content: '';
  46. position: absolute;
  47. top: 6px;
  48. left: 23px;
  49. width: 2px;
  50. height: 28px;
  51. background-color: #fff;
  52. }
  53. .stepItem.step3::before {
  54. content: '';
  55. position: absolute;
  56. top: 0;
  57. left: 23px;
  58. width: 2px;
  59. height: 7px;
  60. background-color: #f2f4f7;
  61. }
  62. .stepNum {
  63. @apply box-border absolute top-2 left-3 flex justify-center items-center w-6 h-6;
  64. color: #98a2b3;
  65. font-size: 12px;
  66. border: 1px solid #F2F4F7;
  67. border-radius: 24px;
  68. z-index: 1;
  69. }
  70. .stepName {
  71. color: #98a2b3;
  72. }
  73. .stepItem.active .stepNum {
  74. color: #1c64f2;
  75. background-color: #EFF4FF;
  76. border: none;
  77. }
  78. .stepItem.active .stepName {
  79. color: #1c64f2;
  80. }
  81. .stepItem.done .stepNum {
  82. color: #667085;
  83. background-color: #f2f4f7;
  84. border: none;
  85. }
  86. .stepItem.done .stepNum::after {
  87. content: '';
  88. display: flex;
  89. width: 12px;
  90. height: 12px;
  91. background: center no-repeat url(../assets/check.svg);
  92. background-size: 12px;
  93. }
  94. .stepItem.done .stepName {
  95. color: #667085;
  96. }