1 | @import '../../style/themes/index';
|
2 | @import '../../style/mixins/index';
|
3 |
|
4 | @timeline-prefix-cls: ~'@{ant-prefix}-timeline';
|
5 |
|
6 | .@{timeline-prefix-cls} {
|
7 | .reset-component();
|
8 |
|
9 | margin: 0;
|
10 | padding: 0;
|
11 | list-style: none;
|
12 |
|
13 | &-item {
|
14 | position: relative;
|
15 | margin: 0;
|
16 | padding-bottom: @timeline-item-padding-bottom;
|
17 | font-size: @font-size-base;
|
18 | list-style: none;
|
19 |
|
20 | &-tail {
|
21 | position: absolute;
|
22 | top: 10px;
|
23 | left: 4px;
|
24 | height: calc(100% - 10px);
|
25 | border-left: @timeline-width solid @timeline-color;
|
26 | }
|
27 |
|
28 | &-pending &-head {
|
29 | font-size: @font-size-sm;
|
30 | background-color: transparent;
|
31 | }
|
32 |
|
33 | &-pending &-tail {
|
34 | display: none;
|
35 | }
|
36 |
|
37 | &-head {
|
38 | position: absolute;
|
39 | width: 10px;
|
40 | height: 10px;
|
41 | background-color: @timeline-dot-bg;
|
42 | border: @timeline-dot-border-width solid transparent;
|
43 | border-radius: 100px;
|
44 |
|
45 | &-blue {
|
46 | color: @primary-color;
|
47 | border-color: @primary-color;
|
48 | }
|
49 |
|
50 | &-red {
|
51 | color: @error-color;
|
52 | border-color: @error-color;
|
53 | }
|
54 |
|
55 | &-green {
|
56 | color: @success-color;
|
57 | border-color: @success-color;
|
58 | }
|
59 |
|
60 | &-gray {
|
61 | color: @disabled-color;
|
62 | border-color: @disabled-color;
|
63 | }
|
64 | }
|
65 |
|
66 | &-head-custom {
|
67 | position: absolute;
|
68 | top: 5.5px;
|
69 | left: 5px;
|
70 | width: auto;
|
71 | height: auto;
|
72 | margin-top: 0;
|
73 | padding: 3px 1px;
|
74 | line-height: 1;
|
75 | text-align: center;
|
76 | border: 0;
|
77 | border-radius: 0;
|
78 | transform: translate(-50%, -50%);
|
79 | }
|
80 |
|
81 | &-content {
|
82 | position: relative;
|
83 | top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
|
84 | margin: 0 0 0 @margin-lg + 2px;
|
85 | word-break: break-word;
|
86 | }
|
87 |
|
88 | &-last {
|
89 | > .@{timeline-prefix-cls}-item-tail {
|
90 | display: none;
|
91 | }
|
92 | > .@{timeline-prefix-cls}-item-content {
|
93 | min-height: 48px;
|
94 | }
|
95 | }
|
96 | }
|
97 |
|
98 | &.@{timeline-prefix-cls}-alternate,
|
99 | &.@{timeline-prefix-cls}-right,
|
100 | &.@{timeline-prefix-cls}-label {
|
101 | .@{timeline-prefix-cls}-item {
|
102 | &-tail,
|
103 | &-head,
|
104 | &-head-custom {
|
105 | left: 50%;
|
106 | }
|
107 |
|
108 | &-head {
|
109 | margin-left: -4px;
|
110 |
|
111 | &-custom {
|
112 | margin-left: 1px;
|
113 | }
|
114 | }
|
115 |
|
116 | &-left {
|
117 | .@{timeline-prefix-cls}-item-content {
|
118 | left: calc(50% - 4px);
|
119 | width: calc(50% - 14px);
|
120 | text-align: left;
|
121 | }
|
122 | }
|
123 |
|
124 | &-right {
|
125 | .@{timeline-prefix-cls}-item-content {
|
126 | width: calc(50% - 12px);
|
127 | margin: 0;
|
128 | text-align: right;
|
129 | }
|
130 | }
|
131 | }
|
132 | }
|
133 |
|
134 | &.@{timeline-prefix-cls}-right {
|
135 | .@{timeline-prefix-cls}-item-right {
|
136 | .@{timeline-prefix-cls}-item-tail,
|
137 | .@{timeline-prefix-cls}-item-head,
|
138 | .@{timeline-prefix-cls}-item-head-custom {
|
139 |
|
140 | left: calc(100% - 4px - @timeline-width);
|
141 | }
|
142 | .@{timeline-prefix-cls}-item-content {
|
143 | width: calc(100% - 18px);
|
144 | }
|
145 | }
|
146 | }
|
147 |
|
148 | &&-pending &-item-last &-item-tail {
|
149 | display: block;
|
150 | height: calc(100% - 14px);
|
151 | border-left: 2px dotted @timeline-color;
|
152 | }
|
153 |
|
154 | &&-reverse &-item-last &-item-tail {
|
155 | display: none;
|
156 | }
|
157 |
|
158 | &&-reverse &-item-pending {
|
159 | .@{timeline-prefix-cls}-item-tail {
|
160 | top: 15px;
|
161 | display: block;
|
162 | height: calc(100% - 15px);
|
163 | border-left: 2px dotted @timeline-color;
|
164 | }
|
165 | .@{timeline-prefix-cls}-item-content {
|
166 | min-height: 48px;
|
167 | }
|
168 | }
|
169 | &.@{timeline-prefix-cls}-label {
|
170 | .@{timeline-prefix-cls}-item-label {
|
171 | position: absolute;
|
172 | top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
|
173 | width: calc(50% - 12px);
|
174 | text-align: right;
|
175 | }
|
176 | .@{timeline-prefix-cls}-item-right {
|
177 | .@{timeline-prefix-cls}-item-label {
|
178 | left: calc(50% + 14px);
|
179 | width: calc(50% - 14px);
|
180 | text-align: left;
|
181 | }
|
182 | }
|
183 | }
|
184 | }
|
185 |
|
186 | @import './rtl';
|