progress-dot.less 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. .@{steps-prefix-cls}-dot,
  2. .@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
  3. .@{steps-prefix-cls}-item {
  4. &-title {
  5. line-height: @line-height-base;
  6. }
  7. &-tail {
  8. top: @steps-dot-top;
  9. width: 100%;
  10. margin: 0 0 0 (@steps-description-max-width / 2);
  11. padding: 0;
  12. &::after {
  13. width: ~'calc(100% - 20px)';
  14. height: 3px;
  15. margin-left: 12px;
  16. }
  17. }
  18. &:first-child .@{steps-prefix-cls}-icon-dot {
  19. left: 2px;
  20. }
  21. &-icon {
  22. width: @steps-dot-size;
  23. height: @steps-dot-size;
  24. margin-left: 67px;
  25. padding-right: 0;
  26. line-height: @steps-dot-size;
  27. background: transparent;
  28. border: 0;
  29. .@{steps-prefix-cls}-icon-dot {
  30. position: relative;
  31. float: left;
  32. width: 100%;
  33. height: 100%;
  34. border-radius: 100px;
  35. transition: all 0.3s;
  36. /* expand hover area */
  37. &::after {
  38. position: absolute;
  39. top: -12px;
  40. left: -26px;
  41. width: 60px;
  42. height: 32px;
  43. background: fade(@black, 0.1%);
  44. content: '';
  45. }
  46. }
  47. }
  48. &-content {
  49. width: @steps-description-max-width;
  50. }
  51. &-process .@{steps-prefix-cls}-item-icon {
  52. position: relative;
  53. top: -1px;
  54. width: @steps-current-dot-size;
  55. height: @steps-current-dot-size;
  56. line-height: @steps-current-dot-size;
  57. background: none;
  58. }
  59. &-process .@{steps-prefix-cls}-icon {
  60. &:first-child .@{steps-prefix-cls}-icon-dot {
  61. left: 0;
  62. }
  63. }
  64. }
  65. }
  66. .@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
  67. .@{steps-prefix-cls}-item-icon {
  68. margin-top: 13px;
  69. margin-left: 0;
  70. background: none;
  71. }
  72. // https://github.com/ant-design/ant-design/issues/18354
  73. .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
  74. top: 6.5px;
  75. left: -9px;
  76. margin: 0;
  77. padding: 22px 0 4px;
  78. }
  79. &.@{steps-prefix-cls}-small {
  80. .@{steps-prefix-cls}-item-icon {
  81. margin-top: 10px;
  82. }
  83. .@{steps-prefix-cls}-item
  84. > .@{steps-prefix-cls}-item-container
  85. > .@{steps-prefix-cls}-item-tail {
  86. top: 3.5px;
  87. }
  88. }
  89. .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
  90. left: 0;
  91. }
  92. .@{steps-prefix-cls}-item-content {
  93. width: inherit;
  94. }
  95. .@{steps-prefix-cls}-item-process
  96. .@{steps-prefix-cls}-item-container
  97. .@{steps-prefix-cls}-item-icon
  98. .@{steps-prefix-cls}-icon-dot {
  99. top: -1px;
  100. left: -1px;
  101. }
  102. }