@douyinfe/semi-foundation 2.30.0-alpha.0 → 2.30.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/steps/fillSteps.scss +10 -6
- package/lib/cjs/steps/steps.css +5 -4
- package/lib/cjs/timeline/timeline.css +36 -0
- package/lib/cjs/timeline/timeline.scss +126 -46
- package/lib/cjs/tree/treeUtil.d.ts +1 -1
- package/lib/cjs/upload/constants.d.ts +1 -1
- package/lib/es/steps/fillSteps.scss +10 -6
- package/lib/es/steps/steps.css +5 -4
- package/lib/es/timeline/timeline.css +36 -0
- package/lib/es/timeline/timeline.scss +126 -46
- package/lib/es/tree/treeUtil.d.ts +1 -1
- package/lib/es/upload/constants.d.ts +1 -1
- package/package.json +2 -2
- package/steps/fillSteps.scss +10 -6
- package/timeline/timeline.scss +126 -46
|
@@ -7,14 +7,15 @@ $fill: #{$module}-item-fill;
|
|
|
7
7
|
height: $height-steps_item;
|
|
8
8
|
position: relative;
|
|
9
9
|
overflow: hidden;
|
|
10
|
-
margin-right: $spacing-steps_item-marginRight;
|
|
10
|
+
// margin-right: $spacing-steps_item-marginRight;
|
|
11
11
|
border: $width-steps_item-border solid $color-steps-border-default;
|
|
12
12
|
border-radius: $radius-steps_item;
|
|
13
13
|
padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
|
|
14
14
|
transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
|
|
15
15
|
transform:scale($transform_scale-step-item);
|
|
16
16
|
transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
|
|
17
|
-
|
|
17
|
+
column-gap: $spacing-steps_item_content-marginLeft;
|
|
18
|
+
|
|
18
19
|
.#{$module}-item-title {
|
|
19
20
|
position: relative;
|
|
20
21
|
// display: inline-block;
|
|
@@ -137,9 +138,8 @@ $fill: #{$module}-item-fill;
|
|
|
137
138
|
|
|
138
139
|
&-clickable {
|
|
139
140
|
cursor: pointer;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
};
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
143
|
|
|
144
144
|
@mixin steps-item-left {
|
|
145
145
|
&-left {
|
|
@@ -167,7 +167,7 @@ $fill: #{$module}-item-fill;
|
|
|
167
167
|
|
|
168
168
|
@mixin steps-item-content {
|
|
169
169
|
&-content {
|
|
170
|
-
margin-left: $spacing-steps_item_content-marginLeft;
|
|
170
|
+
// margin-left: $spacing-steps_item_content-marginLeft;
|
|
171
171
|
flex: 1;
|
|
172
172
|
overflow: hidden;
|
|
173
173
|
}
|
|
@@ -178,6 +178,10 @@ $fill: #{$module}-item-fill;
|
|
|
178
178
|
flex: 1;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
+
.#{$prefix}-row-flex {
|
|
182
|
+
column-gap: $spacing-steps_item-marginRight;
|
|
183
|
+
}
|
|
184
|
+
|
|
181
185
|
&-vertical {
|
|
182
186
|
.#{$prefix}-row-flex {
|
|
183
187
|
flex-direction: column;
|
package/lib/cjs/steps/steps.css
CHANGED
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
.semi-steps .semi-col {
|
|
5
5
|
flex: 1;
|
|
6
6
|
}
|
|
7
|
+
.semi-steps .semi-row-flex {
|
|
8
|
+
column-gap: 16px;
|
|
9
|
+
}
|
|
7
10
|
.semi-steps-vertical .semi-row-flex {
|
|
8
11
|
flex-direction: column;
|
|
9
12
|
}
|
|
@@ -13,13 +16,13 @@
|
|
|
13
16
|
height: 72px;
|
|
14
17
|
position: relative;
|
|
15
18
|
overflow: hidden;
|
|
16
|
-
margin-right: 16px;
|
|
17
19
|
border: 1px solid transparent;
|
|
18
20
|
border-radius: var(--semi-border-radius-medium);
|
|
19
21
|
padding: 12px 16px;
|
|
20
22
|
transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
21
23
|
transform: scale(var(--semi-transform_scale-small));
|
|
22
24
|
transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
25
|
+
column-gap: 16px;
|
|
23
26
|
}
|
|
24
27
|
.semi-steps .semi-steps-item .semi-steps-item-title {
|
|
25
28
|
position: relative;
|
|
@@ -139,7 +142,6 @@
|
|
|
139
142
|
background: var(--semi-color-primary-light-default);
|
|
140
143
|
}
|
|
141
144
|
.semi-steps .semi-steps-item-content {
|
|
142
|
-
margin-left: 16px;
|
|
143
145
|
flex: 1;
|
|
144
146
|
overflow: hidden;
|
|
145
147
|
}
|
|
@@ -150,13 +152,13 @@
|
|
|
150
152
|
height: 72px;
|
|
151
153
|
position: relative;
|
|
152
154
|
overflow: hidden;
|
|
153
|
-
margin-right: 16px;
|
|
154
155
|
border: 1px solid transparent;
|
|
155
156
|
border-radius: var(--semi-border-radius-medium);
|
|
156
157
|
padding: 12px 16px;
|
|
157
158
|
transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
158
159
|
transform: scale(var(--semi-transform_scale-small));
|
|
159
160
|
transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
161
|
+
column-gap: 16px;
|
|
160
162
|
}
|
|
161
163
|
.semi-steps-item-fill.semi-steps-item .semi-steps-item-title {
|
|
162
164
|
position: relative;
|
|
@@ -276,7 +278,6 @@
|
|
|
276
278
|
background: var(--semi-color-primary-light-default);
|
|
277
279
|
}
|
|
278
280
|
.semi-steps-item-fill .semi-steps-item-content {
|
|
279
|
-
margin-left: 16px;
|
|
280
281
|
flex: 1;
|
|
281
282
|
overflow: hidden;
|
|
282
283
|
}
|
|
@@ -126,6 +126,42 @@
|
|
|
126
126
|
width: calc(100% - 28px);
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
+
.semi-timeline-item-alternate .semi-timeline-item-tail, .semi-timeline-item-alternate .semi-timeline-item-head, .semi-timeline-item-alternate .semi-timeline-item-head-custom, .semi-timeline-item-mode-right .semi-timeline-item-tail, .semi-timeline-item-mode-right .semi-timeline-item-head, .semi-timeline-item-mode-right .semi-timeline-item-head-custom, .semi-timeline-item-center .semi-timeline-item-tail, .semi-timeline-item-center .semi-timeline-item-head, .semi-timeline-item-center .semi-timeline-item-head-custom {
|
|
130
|
+
left: 50%;
|
|
131
|
+
}
|
|
132
|
+
.semi-timeline-item-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-item-mode-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-item-center .semi-timeline-item-head.semi-timeline-item-head-custom {
|
|
133
|
+
margin-left: 0;
|
|
134
|
+
}
|
|
135
|
+
.semi-timeline-item-alternate .semi-timeline-item-head, .semi-timeline-item-mode-right .semi-timeline-item-head, .semi-timeline-item-center .semi-timeline-item-head {
|
|
136
|
+
margin-left: -4px;
|
|
137
|
+
}
|
|
138
|
+
.semi-timeline-item-alternate.semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-item-mode-right.semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-item-center.semi-timeline-item-left .semi-timeline-item-content {
|
|
139
|
+
left: calc(50% - 4px);
|
|
140
|
+
width: calc(50% - 14px);
|
|
141
|
+
text-align: left;
|
|
142
|
+
}
|
|
143
|
+
.semi-timeline-item-alternate.semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-item-center.semi-timeline-item-right .semi-timeline-item-content {
|
|
144
|
+
width: calc(50% - 20px);
|
|
145
|
+
margin: 0;
|
|
146
|
+
text-align: right;
|
|
147
|
+
}
|
|
148
|
+
.semi-timeline-item-alternate.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail, .semi-timeline-item-mode-right.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail, .semi-timeline-item-center.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail, .semi-timeline-item-left.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail {
|
|
149
|
+
border-left: 1px solid var(--semi-color-text-3);
|
|
150
|
+
}
|
|
151
|
+
.semi-timeline-item-center .semi-timeline-item-content-time {
|
|
152
|
+
position: absolute;
|
|
153
|
+
top: -2px;
|
|
154
|
+
margin-left: calc(-40px - 100%);
|
|
155
|
+
width: 100%;
|
|
156
|
+
text-align: right;
|
|
157
|
+
}
|
|
158
|
+
.semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-tail, .semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-head, .semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-head-custom {
|
|
159
|
+
left: calc(100% - 9px);
|
|
160
|
+
}
|
|
161
|
+
.semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-content {
|
|
162
|
+
width: calc(100% - 28px);
|
|
163
|
+
}
|
|
164
|
+
|
|
129
165
|
.semi-rtl .semi-timeline,
|
|
130
166
|
.semi-portal-rtl .semi-timeline {
|
|
131
167
|
direction: rtl;
|
|
@@ -2,6 +2,98 @@
|
|
|
2
2
|
|
|
3
3
|
$module: #{$prefix}-timeline;
|
|
4
4
|
|
|
5
|
+
@mixin item-children {
|
|
6
|
+
&-tail,
|
|
7
|
+
&-head,
|
|
8
|
+
&-head-custom {
|
|
9
|
+
left: $spacing-timeline_item_head_custom-left;
|
|
10
|
+
}
|
|
11
|
+
&-head{
|
|
12
|
+
&.#{$module}-item-head-custom{
|
|
13
|
+
margin-left: 0;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
&-head {
|
|
17
|
+
margin-left: $spacing-timeline_item_head-marginLeft;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@mixin item-direction {
|
|
22
|
+
&-left {
|
|
23
|
+
.#{$module}-item-content {
|
|
24
|
+
left: $spacing-timeline_item_left_item_content-left;
|
|
25
|
+
width: $width-timeline_item_left_item_content;
|
|
26
|
+
text-align: left;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&-right {
|
|
31
|
+
.#{$module}-item-content {
|
|
32
|
+
width: $width-timeline_item_right_item_content;
|
|
33
|
+
margin: $spacing-timeline_item_right_item_content;
|
|
34
|
+
text-align: right;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// @mixin item-other{
|
|
40
|
+
// &-center {
|
|
41
|
+
// .#{$module}-item {
|
|
42
|
+
// &-content-time {
|
|
43
|
+
// position: absolute;
|
|
44
|
+
// top: $spacing-timeline_time-top;
|
|
45
|
+
// margin-left: $spacing-timeline_item_content_time-marginLeft;
|
|
46
|
+
// width: $width-timeline_item_content_time;
|
|
47
|
+
// text-align: right;
|
|
48
|
+
// }
|
|
49
|
+
// }
|
|
50
|
+
// }
|
|
51
|
+
|
|
52
|
+
// &-right {
|
|
53
|
+
// .#{$module}-item-right {
|
|
54
|
+
// .#{$module}-item {
|
|
55
|
+
// &-tail,
|
|
56
|
+
// &-head,
|
|
57
|
+
// &-head-custom {
|
|
58
|
+
// left: $spacing-timeline_item_right_item-left;
|
|
59
|
+
// }
|
|
60
|
+
|
|
61
|
+
// &-content {
|
|
62
|
+
// width: $width-timeline_item_right_content;
|
|
63
|
+
// }
|
|
64
|
+
// }
|
|
65
|
+
// }
|
|
66
|
+
// }
|
|
67
|
+
// }
|
|
68
|
+
|
|
69
|
+
@mixin item-center {
|
|
70
|
+
&-center {
|
|
71
|
+
.#{$module}-item {
|
|
72
|
+
&-content-time {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: $spacing-timeline_time-top;
|
|
75
|
+
margin-left: $spacing-timeline_item_content_time-marginLeft;
|
|
76
|
+
width: $width-timeline_item_content_time;
|
|
77
|
+
text-align: right;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@mixin item-right {
|
|
84
|
+
.#{$module}-item {
|
|
85
|
+
&-tail,
|
|
86
|
+
&-head,
|
|
87
|
+
&-head-custom {
|
|
88
|
+
left: $spacing-timeline_item_right_item-left;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&-content {
|
|
92
|
+
width: $width-timeline_item_right_content;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
5
97
|
.#{$module} {
|
|
6
98
|
margin: $spacing-timeline-margin;
|
|
7
99
|
padding: $spacing-timeline-padding;
|
|
@@ -115,65 +207,53 @@ $module: #{$prefix}-timeline;
|
|
|
115
207
|
&-right,
|
|
116
208
|
&-center {
|
|
117
209
|
.#{$module}-item {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
&-head{
|
|
124
|
-
&.#{$module}-item-head-custom{
|
|
125
|
-
margin-left: 0;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
&-head {
|
|
129
|
-
margin-left: $spacing-timeline_item_head-marginLeft;
|
|
130
|
-
}
|
|
210
|
+
@include item-children;
|
|
211
|
+
@include item-direction;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
131
214
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
left: $spacing-timeline_item_left_item_content-left;
|
|
135
|
-
width: $width-timeline_item_left_item_content;
|
|
136
|
-
text-align: left;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
215
|
+
|
|
216
|
+
@include item-center;
|
|
139
217
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
margin: $spacing-timeline_item_right_item_content;
|
|
144
|
-
text-align: right;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
218
|
+
&-right {
|
|
219
|
+
.#{$module}-item-right {
|
|
220
|
+
@include item-right;
|
|
147
221
|
}
|
|
148
222
|
}
|
|
223
|
+
}
|
|
149
224
|
|
|
225
|
+
// for c2d
|
|
226
|
+
.#{$module}-item {
|
|
227
|
+
&-alternate,
|
|
228
|
+
&-mode-right,
|
|
150
229
|
&-center {
|
|
151
230
|
.#{$module}-item {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
width: $width-timeline_item_content_time;
|
|
157
|
-
text-align: right;
|
|
158
|
-
}
|
|
231
|
+
@include item-children;
|
|
232
|
+
}
|
|
233
|
+
&.#{$module}-item {
|
|
234
|
+
@include item-direction;
|
|
159
235
|
}
|
|
160
236
|
}
|
|
161
237
|
|
|
162
|
-
&-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
&-content {
|
|
172
|
-
width: $width-timeline_item_right_content;
|
|
238
|
+
&-alternate,
|
|
239
|
+
&-mode-right,
|
|
240
|
+
&-center,
|
|
241
|
+
&-left {
|
|
242
|
+
&.#{$module}-item {
|
|
243
|
+
&.#{$module}-item-not-last-child {
|
|
244
|
+
& > .#{$module}-item-tail {
|
|
245
|
+
border-left: $width-timeline_tail-border solid $color-timeline_tail-border;
|
|
173
246
|
}
|
|
174
247
|
}
|
|
175
248
|
}
|
|
176
249
|
}
|
|
177
|
-
}
|
|
178
250
|
|
|
251
|
+
@include item-center;
|
|
252
|
+
|
|
253
|
+
&-mode-right {
|
|
254
|
+
&.#{$module}-item-right {
|
|
255
|
+
@include item-right;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
}
|
|
179
259
|
@import './rtl.scss';
|
|
@@ -75,6 +75,6 @@ export declare function getValueOrKey(data: any): any;
|
|
|
75
75
|
export declare function normalizeValue(value: any, withObject: boolean): any;
|
|
76
76
|
export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
|
|
77
77
|
export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
|
|
78
|
-
export declare function calcDropRelativePosition(event: any, treeNode: any):
|
|
78
|
+
export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
|
|
79
79
|
export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
|
|
80
80
|
export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;
|
|
@@ -18,7 +18,7 @@ declare const strings: {
|
|
|
18
18
|
DRAG_AREA_ILLEGAL: string;
|
|
19
19
|
TRIGGER_AUTO: "auto";
|
|
20
20
|
TRIGGER_CUSTOM: "custom";
|
|
21
|
-
UPLOAD_TRIGGER: ("
|
|
21
|
+
UPLOAD_TRIGGER: ("auto" | "custom")[];
|
|
22
22
|
VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
|
|
23
23
|
PROMPT_POSITION: readonly ["left", "right", "bottom"];
|
|
24
24
|
};
|
|
@@ -7,14 +7,15 @@ $fill: #{$module}-item-fill;
|
|
|
7
7
|
height: $height-steps_item;
|
|
8
8
|
position: relative;
|
|
9
9
|
overflow: hidden;
|
|
10
|
-
margin-right: $spacing-steps_item-marginRight;
|
|
10
|
+
// margin-right: $spacing-steps_item-marginRight;
|
|
11
11
|
border: $width-steps_item-border solid $color-steps-border-default;
|
|
12
12
|
border-radius: $radius-steps_item;
|
|
13
13
|
padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
|
|
14
14
|
transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
|
|
15
15
|
transform:scale($transform_scale-step-item);
|
|
16
16
|
transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
|
|
17
|
-
|
|
17
|
+
column-gap: $spacing-steps_item_content-marginLeft;
|
|
18
|
+
|
|
18
19
|
.#{$module}-item-title {
|
|
19
20
|
position: relative;
|
|
20
21
|
// display: inline-block;
|
|
@@ -137,9 +138,8 @@ $fill: #{$module}-item-fill;
|
|
|
137
138
|
|
|
138
139
|
&-clickable {
|
|
139
140
|
cursor: pointer;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
};
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
143
|
|
|
144
144
|
@mixin steps-item-left {
|
|
145
145
|
&-left {
|
|
@@ -167,7 +167,7 @@ $fill: #{$module}-item-fill;
|
|
|
167
167
|
|
|
168
168
|
@mixin steps-item-content {
|
|
169
169
|
&-content {
|
|
170
|
-
margin-left: $spacing-steps_item_content-marginLeft;
|
|
170
|
+
// margin-left: $spacing-steps_item_content-marginLeft;
|
|
171
171
|
flex: 1;
|
|
172
172
|
overflow: hidden;
|
|
173
173
|
}
|
|
@@ -178,6 +178,10 @@ $fill: #{$module}-item-fill;
|
|
|
178
178
|
flex: 1;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
+
.#{$prefix}-row-flex {
|
|
182
|
+
column-gap: $spacing-steps_item-marginRight;
|
|
183
|
+
}
|
|
184
|
+
|
|
181
185
|
&-vertical {
|
|
182
186
|
.#{$prefix}-row-flex {
|
|
183
187
|
flex-direction: column;
|
package/lib/es/steps/steps.css
CHANGED
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
.semi-steps .semi-col {
|
|
5
5
|
flex: 1;
|
|
6
6
|
}
|
|
7
|
+
.semi-steps .semi-row-flex {
|
|
8
|
+
column-gap: 16px;
|
|
9
|
+
}
|
|
7
10
|
.semi-steps-vertical .semi-row-flex {
|
|
8
11
|
flex-direction: column;
|
|
9
12
|
}
|
|
@@ -13,13 +16,13 @@
|
|
|
13
16
|
height: 72px;
|
|
14
17
|
position: relative;
|
|
15
18
|
overflow: hidden;
|
|
16
|
-
margin-right: 16px;
|
|
17
19
|
border: 1px solid transparent;
|
|
18
20
|
border-radius: var(--semi-border-radius-medium);
|
|
19
21
|
padding: 12px 16px;
|
|
20
22
|
transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
21
23
|
transform: scale(var(--semi-transform_scale-small));
|
|
22
24
|
transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
25
|
+
column-gap: 16px;
|
|
23
26
|
}
|
|
24
27
|
.semi-steps .semi-steps-item .semi-steps-item-title {
|
|
25
28
|
position: relative;
|
|
@@ -139,7 +142,6 @@
|
|
|
139
142
|
background: var(--semi-color-primary-light-default);
|
|
140
143
|
}
|
|
141
144
|
.semi-steps .semi-steps-item-content {
|
|
142
|
-
margin-left: 16px;
|
|
143
145
|
flex: 1;
|
|
144
146
|
overflow: hidden;
|
|
145
147
|
}
|
|
@@ -150,13 +152,13 @@
|
|
|
150
152
|
height: 72px;
|
|
151
153
|
position: relative;
|
|
152
154
|
overflow: hidden;
|
|
153
|
-
margin-right: 16px;
|
|
154
155
|
border: 1px solid transparent;
|
|
155
156
|
border-radius: var(--semi-border-radius-medium);
|
|
156
157
|
padding: 12px 16px;
|
|
157
158
|
transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
158
159
|
transform: scale(var(--semi-transform_scale-small));
|
|
159
160
|
transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
161
|
+
column-gap: 16px;
|
|
160
162
|
}
|
|
161
163
|
.semi-steps-item-fill.semi-steps-item .semi-steps-item-title {
|
|
162
164
|
position: relative;
|
|
@@ -276,7 +278,6 @@
|
|
|
276
278
|
background: var(--semi-color-primary-light-default);
|
|
277
279
|
}
|
|
278
280
|
.semi-steps-item-fill .semi-steps-item-content {
|
|
279
|
-
margin-left: 16px;
|
|
280
281
|
flex: 1;
|
|
281
282
|
overflow: hidden;
|
|
282
283
|
}
|
|
@@ -126,6 +126,42 @@
|
|
|
126
126
|
width: calc(100% - 28px);
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
+
.semi-timeline-item-alternate .semi-timeline-item-tail, .semi-timeline-item-alternate .semi-timeline-item-head, .semi-timeline-item-alternate .semi-timeline-item-head-custom, .semi-timeline-item-mode-right .semi-timeline-item-tail, .semi-timeline-item-mode-right .semi-timeline-item-head, .semi-timeline-item-mode-right .semi-timeline-item-head-custom, .semi-timeline-item-center .semi-timeline-item-tail, .semi-timeline-item-center .semi-timeline-item-head, .semi-timeline-item-center .semi-timeline-item-head-custom {
|
|
130
|
+
left: 50%;
|
|
131
|
+
}
|
|
132
|
+
.semi-timeline-item-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-item-mode-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-item-center .semi-timeline-item-head.semi-timeline-item-head-custom {
|
|
133
|
+
margin-left: 0;
|
|
134
|
+
}
|
|
135
|
+
.semi-timeline-item-alternate .semi-timeline-item-head, .semi-timeline-item-mode-right .semi-timeline-item-head, .semi-timeline-item-center .semi-timeline-item-head {
|
|
136
|
+
margin-left: -4px;
|
|
137
|
+
}
|
|
138
|
+
.semi-timeline-item-alternate.semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-item-mode-right.semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-item-center.semi-timeline-item-left .semi-timeline-item-content {
|
|
139
|
+
left: calc(50% - 4px);
|
|
140
|
+
width: calc(50% - 14px);
|
|
141
|
+
text-align: left;
|
|
142
|
+
}
|
|
143
|
+
.semi-timeline-item-alternate.semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-item-center.semi-timeline-item-right .semi-timeline-item-content {
|
|
144
|
+
width: calc(50% - 20px);
|
|
145
|
+
margin: 0;
|
|
146
|
+
text-align: right;
|
|
147
|
+
}
|
|
148
|
+
.semi-timeline-item-alternate.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail, .semi-timeline-item-mode-right.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail, .semi-timeline-item-center.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail, .semi-timeline-item-left.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail {
|
|
149
|
+
border-left: 1px solid var(--semi-color-text-3);
|
|
150
|
+
}
|
|
151
|
+
.semi-timeline-item-center .semi-timeline-item-content-time {
|
|
152
|
+
position: absolute;
|
|
153
|
+
top: -2px;
|
|
154
|
+
margin-left: calc(-40px - 100%);
|
|
155
|
+
width: 100%;
|
|
156
|
+
text-align: right;
|
|
157
|
+
}
|
|
158
|
+
.semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-tail, .semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-head, .semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-head-custom {
|
|
159
|
+
left: calc(100% - 9px);
|
|
160
|
+
}
|
|
161
|
+
.semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-content {
|
|
162
|
+
width: calc(100% - 28px);
|
|
163
|
+
}
|
|
164
|
+
|
|
129
165
|
.semi-rtl .semi-timeline,
|
|
130
166
|
.semi-portal-rtl .semi-timeline {
|
|
131
167
|
direction: rtl;
|
|
@@ -2,6 +2,98 @@
|
|
|
2
2
|
|
|
3
3
|
$module: #{$prefix}-timeline;
|
|
4
4
|
|
|
5
|
+
@mixin item-children {
|
|
6
|
+
&-tail,
|
|
7
|
+
&-head,
|
|
8
|
+
&-head-custom {
|
|
9
|
+
left: $spacing-timeline_item_head_custom-left;
|
|
10
|
+
}
|
|
11
|
+
&-head{
|
|
12
|
+
&.#{$module}-item-head-custom{
|
|
13
|
+
margin-left: 0;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
&-head {
|
|
17
|
+
margin-left: $spacing-timeline_item_head-marginLeft;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@mixin item-direction {
|
|
22
|
+
&-left {
|
|
23
|
+
.#{$module}-item-content {
|
|
24
|
+
left: $spacing-timeline_item_left_item_content-left;
|
|
25
|
+
width: $width-timeline_item_left_item_content;
|
|
26
|
+
text-align: left;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&-right {
|
|
31
|
+
.#{$module}-item-content {
|
|
32
|
+
width: $width-timeline_item_right_item_content;
|
|
33
|
+
margin: $spacing-timeline_item_right_item_content;
|
|
34
|
+
text-align: right;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// @mixin item-other{
|
|
40
|
+
// &-center {
|
|
41
|
+
// .#{$module}-item {
|
|
42
|
+
// &-content-time {
|
|
43
|
+
// position: absolute;
|
|
44
|
+
// top: $spacing-timeline_time-top;
|
|
45
|
+
// margin-left: $spacing-timeline_item_content_time-marginLeft;
|
|
46
|
+
// width: $width-timeline_item_content_time;
|
|
47
|
+
// text-align: right;
|
|
48
|
+
// }
|
|
49
|
+
// }
|
|
50
|
+
// }
|
|
51
|
+
|
|
52
|
+
// &-right {
|
|
53
|
+
// .#{$module}-item-right {
|
|
54
|
+
// .#{$module}-item {
|
|
55
|
+
// &-tail,
|
|
56
|
+
// &-head,
|
|
57
|
+
// &-head-custom {
|
|
58
|
+
// left: $spacing-timeline_item_right_item-left;
|
|
59
|
+
// }
|
|
60
|
+
|
|
61
|
+
// &-content {
|
|
62
|
+
// width: $width-timeline_item_right_content;
|
|
63
|
+
// }
|
|
64
|
+
// }
|
|
65
|
+
// }
|
|
66
|
+
// }
|
|
67
|
+
// }
|
|
68
|
+
|
|
69
|
+
@mixin item-center {
|
|
70
|
+
&-center {
|
|
71
|
+
.#{$module}-item {
|
|
72
|
+
&-content-time {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: $spacing-timeline_time-top;
|
|
75
|
+
margin-left: $spacing-timeline_item_content_time-marginLeft;
|
|
76
|
+
width: $width-timeline_item_content_time;
|
|
77
|
+
text-align: right;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@mixin item-right {
|
|
84
|
+
.#{$module}-item {
|
|
85
|
+
&-tail,
|
|
86
|
+
&-head,
|
|
87
|
+
&-head-custom {
|
|
88
|
+
left: $spacing-timeline_item_right_item-left;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&-content {
|
|
92
|
+
width: $width-timeline_item_right_content;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
5
97
|
.#{$module} {
|
|
6
98
|
margin: $spacing-timeline-margin;
|
|
7
99
|
padding: $spacing-timeline-padding;
|
|
@@ -115,65 +207,53 @@ $module: #{$prefix}-timeline;
|
|
|
115
207
|
&-right,
|
|
116
208
|
&-center {
|
|
117
209
|
.#{$module}-item {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
&-head{
|
|
124
|
-
&.#{$module}-item-head-custom{
|
|
125
|
-
margin-left: 0;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
&-head {
|
|
129
|
-
margin-left: $spacing-timeline_item_head-marginLeft;
|
|
130
|
-
}
|
|
210
|
+
@include item-children;
|
|
211
|
+
@include item-direction;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
131
214
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
left: $spacing-timeline_item_left_item_content-left;
|
|
135
|
-
width: $width-timeline_item_left_item_content;
|
|
136
|
-
text-align: left;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
215
|
+
|
|
216
|
+
@include item-center;
|
|
139
217
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
margin: $spacing-timeline_item_right_item_content;
|
|
144
|
-
text-align: right;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
218
|
+
&-right {
|
|
219
|
+
.#{$module}-item-right {
|
|
220
|
+
@include item-right;
|
|
147
221
|
}
|
|
148
222
|
}
|
|
223
|
+
}
|
|
149
224
|
|
|
225
|
+
// for c2d
|
|
226
|
+
.#{$module}-item {
|
|
227
|
+
&-alternate,
|
|
228
|
+
&-mode-right,
|
|
150
229
|
&-center {
|
|
151
230
|
.#{$module}-item {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
width: $width-timeline_item_content_time;
|
|
157
|
-
text-align: right;
|
|
158
|
-
}
|
|
231
|
+
@include item-children;
|
|
232
|
+
}
|
|
233
|
+
&.#{$module}-item {
|
|
234
|
+
@include item-direction;
|
|
159
235
|
}
|
|
160
236
|
}
|
|
161
237
|
|
|
162
|
-
&-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
&-content {
|
|
172
|
-
width: $width-timeline_item_right_content;
|
|
238
|
+
&-alternate,
|
|
239
|
+
&-mode-right,
|
|
240
|
+
&-center,
|
|
241
|
+
&-left {
|
|
242
|
+
&.#{$module}-item {
|
|
243
|
+
&.#{$module}-item-not-last-child {
|
|
244
|
+
& > .#{$module}-item-tail {
|
|
245
|
+
border-left: $width-timeline_tail-border solid $color-timeline_tail-border;
|
|
173
246
|
}
|
|
174
247
|
}
|
|
175
248
|
}
|
|
176
249
|
}
|
|
177
|
-
}
|
|
178
250
|
|
|
251
|
+
@include item-center;
|
|
252
|
+
|
|
253
|
+
&-mode-right {
|
|
254
|
+
&.#{$module}-item-right {
|
|
255
|
+
@include item-right;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
}
|
|
179
259
|
@import './rtl.scss';
|
|
@@ -75,6 +75,6 @@ export declare function getValueOrKey(data: any): any;
|
|
|
75
75
|
export declare function normalizeValue(value: any, withObject: boolean): any;
|
|
76
76
|
export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
|
|
77
77
|
export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
|
|
78
|
-
export declare function calcDropRelativePosition(event: any, treeNode: any):
|
|
78
|
+
export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
|
|
79
79
|
export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
|
|
80
80
|
export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;
|
|
@@ -18,7 +18,7 @@ declare const strings: {
|
|
|
18
18
|
DRAG_AREA_ILLEGAL: string;
|
|
19
19
|
TRIGGER_AUTO: "auto";
|
|
20
20
|
TRIGGER_CUSTOM: "custom";
|
|
21
|
-
UPLOAD_TRIGGER: ("
|
|
21
|
+
UPLOAD_TRIGGER: ("auto" | "custom")[];
|
|
22
22
|
VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
|
|
23
23
|
PROMPT_POSITION: readonly ["left", "right", "bottom"];
|
|
24
24
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-foundation",
|
|
3
|
-
"version": "2.30.0-alpha.
|
|
3
|
+
"version": "2.30.0-alpha.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build:lib": "node ./scripts/compileLib.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"*.scss",
|
|
24
24
|
"*.css"
|
|
25
25
|
],
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "22568ce0c431646136c6823016342214cac447ca",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
29
29
|
"@babel/preset-env": "^7.15.8",
|
package/steps/fillSteps.scss
CHANGED
|
@@ -7,14 +7,15 @@ $fill: #{$module}-item-fill;
|
|
|
7
7
|
height: $height-steps_item;
|
|
8
8
|
position: relative;
|
|
9
9
|
overflow: hidden;
|
|
10
|
-
margin-right: $spacing-steps_item-marginRight;
|
|
10
|
+
// margin-right: $spacing-steps_item-marginRight;
|
|
11
11
|
border: $width-steps_item-border solid $color-steps-border-default;
|
|
12
12
|
border-radius: $radius-steps_item;
|
|
13
13
|
padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
|
|
14
14
|
transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
|
|
15
15
|
transform:scale($transform_scale-step-item);
|
|
16
16
|
transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
|
|
17
|
-
|
|
17
|
+
column-gap: $spacing-steps_item_content-marginLeft;
|
|
18
|
+
|
|
18
19
|
.#{$module}-item-title {
|
|
19
20
|
position: relative;
|
|
20
21
|
// display: inline-block;
|
|
@@ -137,9 +138,8 @@ $fill: #{$module}-item-fill;
|
|
|
137
138
|
|
|
138
139
|
&-clickable {
|
|
139
140
|
cursor: pointer;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
};
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
143
|
|
|
144
144
|
@mixin steps-item-left {
|
|
145
145
|
&-left {
|
|
@@ -167,7 +167,7 @@ $fill: #{$module}-item-fill;
|
|
|
167
167
|
|
|
168
168
|
@mixin steps-item-content {
|
|
169
169
|
&-content {
|
|
170
|
-
margin-left: $spacing-steps_item_content-marginLeft;
|
|
170
|
+
// margin-left: $spacing-steps_item_content-marginLeft;
|
|
171
171
|
flex: 1;
|
|
172
172
|
overflow: hidden;
|
|
173
173
|
}
|
|
@@ -178,6 +178,10 @@ $fill: #{$module}-item-fill;
|
|
|
178
178
|
flex: 1;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
+
.#{$prefix}-row-flex {
|
|
182
|
+
column-gap: $spacing-steps_item-marginRight;
|
|
183
|
+
}
|
|
184
|
+
|
|
181
185
|
&-vertical {
|
|
182
186
|
.#{$prefix}-row-flex {
|
|
183
187
|
flex-direction: column;
|
package/timeline/timeline.scss
CHANGED
|
@@ -2,6 +2,98 @@
|
|
|
2
2
|
|
|
3
3
|
$module: #{$prefix}-timeline;
|
|
4
4
|
|
|
5
|
+
@mixin item-children {
|
|
6
|
+
&-tail,
|
|
7
|
+
&-head,
|
|
8
|
+
&-head-custom {
|
|
9
|
+
left: $spacing-timeline_item_head_custom-left;
|
|
10
|
+
}
|
|
11
|
+
&-head{
|
|
12
|
+
&.#{$module}-item-head-custom{
|
|
13
|
+
margin-left: 0;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
&-head {
|
|
17
|
+
margin-left: $spacing-timeline_item_head-marginLeft;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@mixin item-direction {
|
|
22
|
+
&-left {
|
|
23
|
+
.#{$module}-item-content {
|
|
24
|
+
left: $spacing-timeline_item_left_item_content-left;
|
|
25
|
+
width: $width-timeline_item_left_item_content;
|
|
26
|
+
text-align: left;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&-right {
|
|
31
|
+
.#{$module}-item-content {
|
|
32
|
+
width: $width-timeline_item_right_item_content;
|
|
33
|
+
margin: $spacing-timeline_item_right_item_content;
|
|
34
|
+
text-align: right;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// @mixin item-other{
|
|
40
|
+
// &-center {
|
|
41
|
+
// .#{$module}-item {
|
|
42
|
+
// &-content-time {
|
|
43
|
+
// position: absolute;
|
|
44
|
+
// top: $spacing-timeline_time-top;
|
|
45
|
+
// margin-left: $spacing-timeline_item_content_time-marginLeft;
|
|
46
|
+
// width: $width-timeline_item_content_time;
|
|
47
|
+
// text-align: right;
|
|
48
|
+
// }
|
|
49
|
+
// }
|
|
50
|
+
// }
|
|
51
|
+
|
|
52
|
+
// &-right {
|
|
53
|
+
// .#{$module}-item-right {
|
|
54
|
+
// .#{$module}-item {
|
|
55
|
+
// &-tail,
|
|
56
|
+
// &-head,
|
|
57
|
+
// &-head-custom {
|
|
58
|
+
// left: $spacing-timeline_item_right_item-left;
|
|
59
|
+
// }
|
|
60
|
+
|
|
61
|
+
// &-content {
|
|
62
|
+
// width: $width-timeline_item_right_content;
|
|
63
|
+
// }
|
|
64
|
+
// }
|
|
65
|
+
// }
|
|
66
|
+
// }
|
|
67
|
+
// }
|
|
68
|
+
|
|
69
|
+
@mixin item-center {
|
|
70
|
+
&-center {
|
|
71
|
+
.#{$module}-item {
|
|
72
|
+
&-content-time {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: $spacing-timeline_time-top;
|
|
75
|
+
margin-left: $spacing-timeline_item_content_time-marginLeft;
|
|
76
|
+
width: $width-timeline_item_content_time;
|
|
77
|
+
text-align: right;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@mixin item-right {
|
|
84
|
+
.#{$module}-item {
|
|
85
|
+
&-tail,
|
|
86
|
+
&-head,
|
|
87
|
+
&-head-custom {
|
|
88
|
+
left: $spacing-timeline_item_right_item-left;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&-content {
|
|
92
|
+
width: $width-timeline_item_right_content;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
5
97
|
.#{$module} {
|
|
6
98
|
margin: $spacing-timeline-margin;
|
|
7
99
|
padding: $spacing-timeline-padding;
|
|
@@ -115,65 +207,53 @@ $module: #{$prefix}-timeline;
|
|
|
115
207
|
&-right,
|
|
116
208
|
&-center {
|
|
117
209
|
.#{$module}-item {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
&-head{
|
|
124
|
-
&.#{$module}-item-head-custom{
|
|
125
|
-
margin-left: 0;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
&-head {
|
|
129
|
-
margin-left: $spacing-timeline_item_head-marginLeft;
|
|
130
|
-
}
|
|
210
|
+
@include item-children;
|
|
211
|
+
@include item-direction;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
131
214
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
left: $spacing-timeline_item_left_item_content-left;
|
|
135
|
-
width: $width-timeline_item_left_item_content;
|
|
136
|
-
text-align: left;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
215
|
+
|
|
216
|
+
@include item-center;
|
|
139
217
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
margin: $spacing-timeline_item_right_item_content;
|
|
144
|
-
text-align: right;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
218
|
+
&-right {
|
|
219
|
+
.#{$module}-item-right {
|
|
220
|
+
@include item-right;
|
|
147
221
|
}
|
|
148
222
|
}
|
|
223
|
+
}
|
|
149
224
|
|
|
225
|
+
// for c2d
|
|
226
|
+
.#{$module}-item {
|
|
227
|
+
&-alternate,
|
|
228
|
+
&-mode-right,
|
|
150
229
|
&-center {
|
|
151
230
|
.#{$module}-item {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
width: $width-timeline_item_content_time;
|
|
157
|
-
text-align: right;
|
|
158
|
-
}
|
|
231
|
+
@include item-children;
|
|
232
|
+
}
|
|
233
|
+
&.#{$module}-item {
|
|
234
|
+
@include item-direction;
|
|
159
235
|
}
|
|
160
236
|
}
|
|
161
237
|
|
|
162
|
-
&-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
&-content {
|
|
172
|
-
width: $width-timeline_item_right_content;
|
|
238
|
+
&-alternate,
|
|
239
|
+
&-mode-right,
|
|
240
|
+
&-center,
|
|
241
|
+
&-left {
|
|
242
|
+
&.#{$module}-item {
|
|
243
|
+
&.#{$module}-item-not-last-child {
|
|
244
|
+
& > .#{$module}-item-tail {
|
|
245
|
+
border-left: $width-timeline_tail-border solid $color-timeline_tail-border;
|
|
173
246
|
}
|
|
174
247
|
}
|
|
175
248
|
}
|
|
176
249
|
}
|
|
177
|
-
}
|
|
178
250
|
|
|
251
|
+
@include item-center;
|
|
252
|
+
|
|
253
|
+
&-mode-right {
|
|
254
|
+
&.#{$module}-item-right {
|
|
255
|
+
@include item-right;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
}
|
|
179
259
|
@import './rtl.scss';
|