index.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. @import '../style/var';
  2. .van-step {
  3. position: relative;
  4. flex: 1;
  5. color: @step-text-color;
  6. font-size: @step-font-size;
  7. &__circle {
  8. display: block;
  9. width: @step-circle-size;
  10. height: @step-circle-size;
  11. background-color: @step-circle-color;
  12. border-radius: 50%;
  13. }
  14. &__line {
  15. position: absolute;
  16. background-color: @step-line-color;
  17. transition: background-color @animation-duration-base;
  18. }
  19. &--horizontal {
  20. float: left;
  21. &:first-child {
  22. .van-step__title {
  23. margin-left: 0;
  24. transform: none;
  25. }
  26. }
  27. &:last-child {
  28. position: absolute;
  29. right: 1px;
  30. width: auto;
  31. .van-step__title {
  32. margin-left: 0;
  33. transform: none;
  34. }
  35. .van-step__circle-container {
  36. right: -9px;
  37. left: auto;
  38. }
  39. }
  40. .van-step__circle-container {
  41. position: absolute;
  42. top: 30px;
  43. left: -@padding-xs;
  44. z-index: 1;
  45. padding: 0 @padding-xs;
  46. background-color: @white;
  47. transform: translateY(-50%);
  48. }
  49. .van-step__title {
  50. display: inline-block;
  51. margin-left: 3px;
  52. font-size: @step-horizontal-title-font-size;
  53. transform: translateX(-50%);
  54. @media (max-width: 321px) {
  55. font-size: @step-horizontal-title-font-size - 1px;
  56. }
  57. }
  58. .van-step__line {
  59. top: 30px;
  60. left: 0;
  61. width: 100%;
  62. height: 1px;
  63. }
  64. .van-step__icon {
  65. display: block;
  66. font-size: @step-icon-size;
  67. }
  68. .van-step--process {
  69. color: @step-process-text-color;
  70. }
  71. }
  72. &--vertical {
  73. display: block;
  74. float: none;
  75. padding: 10px 10px 10px 0;
  76. line-height: @line-height-sm;
  77. &:not(:last-child)::after {
  78. border-bottom-width: 1px;
  79. }
  80. .van-step__circle-container {
  81. position: absolute;
  82. top: 19px;
  83. left: -15px;
  84. z-index: 1;
  85. font-size: @step-icon-size;
  86. line-height: 1;
  87. transform: translate(-50%, -50%);
  88. }
  89. .van-step__line {
  90. top: 16px;
  91. left: -15px;
  92. width: 1px;
  93. height: 100%;
  94. }
  95. }
  96. &:last-child {
  97. .van-step__line {
  98. width: 0;
  99. }
  100. }
  101. &--finish {
  102. color: @step-finish-text-color;
  103. .van-step__circle,
  104. .van-step__line {
  105. background-color: @step-finish-line-color;
  106. }
  107. }
  108. &__icon,
  109. &__title {
  110. transition: color @animation-duration-base;
  111. &--active,
  112. &--finish {
  113. color: @step-active-color;
  114. }
  115. }
  116. }