UNPKG

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