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 |
|
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 |
|
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 | }
|