@douyinfe/semi-foundation 2.23.3 → 2.23.5
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/form/foundation.ts +1 -1
- package/lib/cjs/form/foundation.d.ts +1 -1
- package/lib/cjs/select/option.scss +0 -2
- package/lib/cjs/select/select.scss +1 -1
- package/lib/cjs/switch/rtl.scss +14 -14
- package/lib/cjs/switch/switch.scss +14 -14
- package/lib/cjs/switch/variables.scss +15 -15
- package/lib/es/form/foundation.d.ts +1 -1
- package/lib/es/select/option.scss +0 -2
- package/lib/es/select/select.scss +1 -1
- package/lib/es/switch/rtl.scss +14 -14
- package/lib/es/switch/switch.scss +14 -14
- package/lib/es/switch/variables.scss +15 -15
- package/package.json +2 -2
- package/select/option.scss +0 -2
- package/select/select.scss +1 -1
- package/switch/rtl.scss +14 -14
- package/switch/switch.scss +14 -14
- package/switch/variables.scss +15 -15
package/form/foundation.ts
CHANGED
|
@@ -8,7 +8,7 @@ import scrollIntoView, { Options as scrollIntoViewOptions } from 'scroll-into-vi
|
|
|
8
8
|
|
|
9
9
|
import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
|
|
10
10
|
|
|
11
|
-
export { BaseFormAdapter };
|
|
11
|
+
export type { BaseFormAdapter };
|
|
12
12
|
|
|
13
13
|
export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
|
|
14
14
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import BaseFoundation from '../base/foundation';
|
|
2
2
|
import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
|
|
3
3
|
import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
|
|
4
|
-
export { BaseFormAdapter };
|
|
4
|
+
export type { BaseFormAdapter };
|
|
5
5
|
export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
|
|
6
6
|
data: FormState;
|
|
7
7
|
fields: Map<string, FieldStaff>;
|
package/lib/cjs/switch/rtl.scss
CHANGED
|
@@ -7,12 +7,12 @@ $module: #{$prefix}-switch;
|
|
|
7
7
|
|
|
8
8
|
&-checked {
|
|
9
9
|
.#{$module}-knob {
|
|
10
|
-
transform: translateX(-$
|
|
10
|
+
transform: translateX(-$spacing-switch_checked-translateX);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
&:active {
|
|
14
14
|
.#{$module}-knob {
|
|
15
|
-
transform: translateX($width-switch_knob_expand - $
|
|
15
|
+
transform: translateX($width-switch_knob_expand - $spacing-switch_checked-translateX);
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
}
|
|
@@ -34,51 +34,51 @@ $module: #{$prefix}-switch;
|
|
|
34
34
|
|
|
35
35
|
.#{$module}-loading {
|
|
36
36
|
.#{$module}-loading-spin {
|
|
37
|
-
transform: translateX(-$
|
|
37
|
+
transform: translateX(-$spacing-switch_spin_unchecked-translateX);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&.#{$module}-checked {
|
|
41
41
|
.#{$module}-loading-spin {
|
|
42
|
-
transform: translateX(-$
|
|
42
|
+
transform: translateX(-$spacing-switch_spin_checked-translateX);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.#{$module}-loading.#{$module}-small {
|
|
48
48
|
.#{$module}-loading-spin {
|
|
49
|
-
transform: translateX(-$
|
|
49
|
+
transform: translateX(-$spacing-switch_spin_unchecked_small-translateX);
|
|
50
50
|
}
|
|
51
51
|
&.#{$module}-checked{
|
|
52
52
|
.#{$module}-loading-spin {
|
|
53
|
-
transform: translateX(-$
|
|
53
|
+
transform: translateX(-$spacing-switch_spin_checked_small-translateX);
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.#{$module}-loading.#{$module}-large {
|
|
59
59
|
.#{$module}-loading-spin {
|
|
60
|
-
transform: translateX(-$
|
|
60
|
+
transform: translateX(-$spacing-switch_spin_unchecked_large-translateX);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
&.#{$module}-checked {
|
|
64
64
|
.#{$module}-loading-spin {
|
|
65
|
-
transform: translateX(-$
|
|
65
|
+
transform: translateX(-$spacing-switch_spin_checked_large-translateX);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.#{$module}-large {
|
|
71
71
|
.#{$module}-knob {
|
|
72
|
-
transform: translateX(-$
|
|
72
|
+
transform: translateX(-$spacing-switch_unchecked_large-translateX);
|
|
73
73
|
}
|
|
74
74
|
&.#{$module}-checked {
|
|
75
75
|
.#{$module}-knob {
|
|
76
|
-
transform: translateX(-$
|
|
76
|
+
transform: translateX(-$spacing-switch_checked_large-translateX);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
&:active {
|
|
80
80
|
.#{$module}-knob {
|
|
81
|
-
transform: translateX($
|
|
81
|
+
transform: translateX($spacing-switch_expand_large-translateX - $spacing-switch_checked_large-translateX);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
}
|
|
@@ -86,16 +86,16 @@ $module: #{$prefix}-switch;
|
|
|
86
86
|
|
|
87
87
|
.#{$module}-small {
|
|
88
88
|
.#{$module}-knob {
|
|
89
|
-
transform: translateX(-$
|
|
89
|
+
transform: translateX(-$spacing-switch_unchecked_small-translateX);
|
|
90
90
|
}
|
|
91
91
|
&.#{$module}-checked {
|
|
92
92
|
.#{$module}-knob {
|
|
93
|
-
transform: translateX(-$
|
|
93
|
+
transform: translateX(-$spacing-switch_checked_small-translateX);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
&:active {
|
|
97
97
|
.#{$module}-knob {
|
|
98
|
-
transform: translateX($
|
|
98
|
+
transform: translateX($spacing-switch_expand_small-translateX - $spacing-switch_checked_small-translateX);
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
}
|
|
@@ -44,12 +44,12 @@ $module: #{$prefix}-switch;
|
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.#{$module}-knob {
|
|
47
|
-
transform: translateX($
|
|
47
|
+
transform: translateX($spacing-switch_checked-translateX);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&:active {
|
|
51
51
|
.#{$module}-knob {
|
|
52
|
-
transform: translateX($
|
|
52
|
+
transform: translateX($spacing-switch_checked-translateX - $width-switch_knob_expand);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
}
|
|
@@ -157,7 +157,7 @@ $module: #{$prefix}-switch;
|
|
|
157
157
|
.#{$module}-loading {
|
|
158
158
|
|
|
159
159
|
.#{$module}-loading-spin {
|
|
160
|
-
transform: translateX($
|
|
160
|
+
transform: translateX($spacing-switch_spin_unchecked-translateX);
|
|
161
161
|
|
|
162
162
|
&>.#{$prefix}-spin-wrapper>svg{
|
|
163
163
|
width: $width-switch_spin-default;
|
|
@@ -169,7 +169,7 @@ $module: #{$prefix}-switch;
|
|
|
169
169
|
background-color: $color-switch_spin_checked-bg-default;
|
|
170
170
|
|
|
171
171
|
.#{$module}-loading-spin {
|
|
172
|
-
transform: translateX($
|
|
172
|
+
transform: translateX($spacing-switch_spin_checked-translateX);
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
}
|
|
@@ -177,7 +177,7 @@ $module: #{$prefix}-switch;
|
|
|
177
177
|
.#{$module}-loading.#{$module}-small {
|
|
178
178
|
|
|
179
179
|
.#{$module}-loading-spin {
|
|
180
|
-
transform: translateX($
|
|
180
|
+
transform: translateX($spacing-switch_spin_unchecked_small-translateX);
|
|
181
181
|
|
|
182
182
|
&>.#{$prefix}-spin-wrapper>svg{
|
|
183
183
|
width: $width-switch_spin-small;
|
|
@@ -187,7 +187,7 @@ $module: #{$prefix}-switch;
|
|
|
187
187
|
&.#{$module}-checked{
|
|
188
188
|
|
|
189
189
|
.#{$module}-loading-spin {
|
|
190
|
-
transform: translateX($
|
|
190
|
+
transform: translateX($spacing-switch_spin_checked_small-translateX);
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
}
|
|
@@ -195,7 +195,7 @@ $module: #{$prefix}-switch;
|
|
|
195
195
|
.#{$module}-loading.#{$module}-large {
|
|
196
196
|
|
|
197
197
|
.#{$module}-loading-spin {
|
|
198
|
-
transform: translateX($
|
|
198
|
+
transform: translateX($spacing-switch_spin_unchecked_large-translateX);
|
|
199
199
|
|
|
200
200
|
&>.#{$prefix}-spin-wrapper>svg{
|
|
201
201
|
width: $width-switch_spin-large;
|
|
@@ -206,7 +206,7 @@ $module: #{$prefix}-switch;
|
|
|
206
206
|
&.#{$module}-checked {
|
|
207
207
|
|
|
208
208
|
.#{$module}-loading-spin {
|
|
209
|
-
transform: translateX($
|
|
209
|
+
transform: translateX($spacing-switch_spin_checked_large-translateX);
|
|
210
210
|
}
|
|
211
211
|
}
|
|
212
212
|
}
|
|
@@ -224,16 +224,16 @@ $module: #{$prefix}-switch;
|
|
|
224
224
|
height: $width-switch_knob_large;
|
|
225
225
|
top: $spacing-switch_knob_large-padding;
|
|
226
226
|
border-radius: $width-switch_knob_large * 0.5;
|
|
227
|
-
transform: translateX($
|
|
227
|
+
transform: translateX($spacing-switch_unchecked_large-translateX);
|
|
228
228
|
}
|
|
229
229
|
&.#{$module}-checked {
|
|
230
230
|
.#{$module}-knob {
|
|
231
|
-
transform: translateX($
|
|
231
|
+
transform: translateX($spacing-switch_checked_large-translateX);
|
|
232
232
|
}
|
|
233
233
|
|
|
234
234
|
&:active {
|
|
235
235
|
.#{$module}-knob {
|
|
236
|
-
transform: translateX($
|
|
236
|
+
transform: translateX($spacing-switch_checked_large-translateX - $spacing-switch_expand_large-translateX);
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
239
|
}
|
|
@@ -259,16 +259,16 @@ $module: #{$prefix}-switch;
|
|
|
259
259
|
height: $width-switch_knob_large_small;
|
|
260
260
|
top: $spacing-switch_knob_small-padding;
|
|
261
261
|
border-radius: $width-switch_knob_large_small * 0.5;
|
|
262
|
-
transform: translateX($
|
|
262
|
+
transform: translateX($spacing-switch_unchecked_small-translateX);
|
|
263
263
|
}
|
|
264
264
|
&.#{$module}-checked {
|
|
265
265
|
.#{$module}-knob {
|
|
266
|
-
transform: translateX($
|
|
266
|
+
transform: translateX($spacing-switch_checked_small-translateX);
|
|
267
267
|
}
|
|
268
268
|
|
|
269
269
|
&:active {
|
|
270
270
|
.#{$module}-knob {
|
|
271
|
-
transform: translateX($
|
|
271
|
+
transform: translateX($spacing-switch_checked_small-translateX - $spacing-switch_expand_small-translateX);
|
|
272
272
|
}
|
|
273
273
|
}
|
|
274
274
|
}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
// Other
|
|
2
2
|
$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
|
|
3
|
-
$
|
|
4
|
-
$
|
|
5
|
-
$
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
$
|
|
12
|
-
$
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$
|
|
3
|
+
$spacing-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量
|
|
4
|
+
$spacing-switch_checked-translateX: 18px; // 选中开关右侧偏移量
|
|
5
|
+
$spacing-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
|
|
6
|
+
$spacing-switch_expand_large-translateX: 10px;
|
|
7
|
+
$spacing-switch_unchecked_large-translateX: 3px; // 大尺寸未选中开关右侧偏移量
|
|
8
|
+
$spacing-switch_spin_unchecked_large-translateX: 2px; // 大尺寸未选中开关加载图标右侧偏移量
|
|
9
|
+
$spacing-switch_checked_large-translateX: 26px; // 大尺寸选中开关右侧偏移量
|
|
10
|
+
$spacing-switch_spin_checked_large-translateX: 22px; // 大尺寸选中开关加载图标右侧偏移量
|
|
11
|
+
$spacing-switch_expand_small-translateX: 2px;
|
|
12
|
+
$spacing-switch_unchecked_small-translateX: 1px; // 小尺寸未选中开关右侧偏移量
|
|
13
|
+
$spacing-switch_spin_unchecked_small-translateX: 2px; // 小尺寸未选中开关加载图标右侧偏移量
|
|
14
|
+
$spacing-switch_checked_small-translateX: 11px; // 小尺寸选中开关右侧偏移量
|
|
15
|
+
$spacing-switch_spin_checked_small-translateX: 10px; // 小尺寸选中开关加载图标右侧偏移量
|
|
16
16
|
$motion-switch-transitionDuration: 200ms; // 开关动画时长
|
|
17
17
|
|
|
18
18
|
// Color
|
|
@@ -48,11 +48,11 @@ $width-switch_knob_active: $width-switch_knob_default + $width-switch_knob_expan
|
|
|
48
48
|
$height-switch_large: 32px; // 大尺寸开关高度
|
|
49
49
|
$width-switch_large: 54px; // 大尺寸开关宽度
|
|
50
50
|
$width-switch_knob_large: 24px; // 大尺寸开关按钮宽度
|
|
51
|
-
$width-switch_knob_large_active: $width-switch_knob_large + $
|
|
51
|
+
$width-switch_knob_large_active: $width-switch_knob_large + $spacing-switch_expand_large-translateX; // 大尺寸开关按钮按下态宽度
|
|
52
52
|
$height-switch_small: 16px; // 小尺寸开关高度
|
|
53
53
|
$width-switch_small: 26px; // 小尺寸开关宽度
|
|
54
54
|
$width-switch_knob_large_small: 12px; // 小尺寸开关按钮宽度
|
|
55
|
-
$width-switch_knob_small_active: $width-switch_knob_large_small + $
|
|
55
|
+
$width-switch_knob_small_active: $width-switch_knob_large_small + $spacing-switch_expand_small-translateX; // 小尺寸开关按钮按下态宽度
|
|
56
56
|
$width-switch_knob_disabled-border: 1px; // 小尺寸开关按钮宽度
|
|
57
57
|
$width-switch_checked_unchecked_text: 26px; // 开关按钮文字宽度
|
|
58
58
|
$width-switch_spin-small: 10px; // 小尺寸开关加载 spin 宽度
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import BaseFoundation from '../base/foundation';
|
|
2
2
|
import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
|
|
3
3
|
import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
|
|
4
|
-
export { BaseFormAdapter };
|
|
4
|
+
export type { BaseFormAdapter };
|
|
5
5
|
export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
|
|
6
6
|
data: FormState;
|
|
7
7
|
fields: Map<string, FieldStaff>;
|
package/lib/es/switch/rtl.scss
CHANGED
|
@@ -7,12 +7,12 @@ $module: #{$prefix}-switch;
|
|
|
7
7
|
|
|
8
8
|
&-checked {
|
|
9
9
|
.#{$module}-knob {
|
|
10
|
-
transform: translateX(-$
|
|
10
|
+
transform: translateX(-$spacing-switch_checked-translateX);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
&:active {
|
|
14
14
|
.#{$module}-knob {
|
|
15
|
-
transform: translateX($width-switch_knob_expand - $
|
|
15
|
+
transform: translateX($width-switch_knob_expand - $spacing-switch_checked-translateX);
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
}
|
|
@@ -34,51 +34,51 @@ $module: #{$prefix}-switch;
|
|
|
34
34
|
|
|
35
35
|
.#{$module}-loading {
|
|
36
36
|
.#{$module}-loading-spin {
|
|
37
|
-
transform: translateX(-$
|
|
37
|
+
transform: translateX(-$spacing-switch_spin_unchecked-translateX);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&.#{$module}-checked {
|
|
41
41
|
.#{$module}-loading-spin {
|
|
42
|
-
transform: translateX(-$
|
|
42
|
+
transform: translateX(-$spacing-switch_spin_checked-translateX);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.#{$module}-loading.#{$module}-small {
|
|
48
48
|
.#{$module}-loading-spin {
|
|
49
|
-
transform: translateX(-$
|
|
49
|
+
transform: translateX(-$spacing-switch_spin_unchecked_small-translateX);
|
|
50
50
|
}
|
|
51
51
|
&.#{$module}-checked{
|
|
52
52
|
.#{$module}-loading-spin {
|
|
53
|
-
transform: translateX(-$
|
|
53
|
+
transform: translateX(-$spacing-switch_spin_checked_small-translateX);
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.#{$module}-loading.#{$module}-large {
|
|
59
59
|
.#{$module}-loading-spin {
|
|
60
|
-
transform: translateX(-$
|
|
60
|
+
transform: translateX(-$spacing-switch_spin_unchecked_large-translateX);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
&.#{$module}-checked {
|
|
64
64
|
.#{$module}-loading-spin {
|
|
65
|
-
transform: translateX(-$
|
|
65
|
+
transform: translateX(-$spacing-switch_spin_checked_large-translateX);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.#{$module}-large {
|
|
71
71
|
.#{$module}-knob {
|
|
72
|
-
transform: translateX(-$
|
|
72
|
+
transform: translateX(-$spacing-switch_unchecked_large-translateX);
|
|
73
73
|
}
|
|
74
74
|
&.#{$module}-checked {
|
|
75
75
|
.#{$module}-knob {
|
|
76
|
-
transform: translateX(-$
|
|
76
|
+
transform: translateX(-$spacing-switch_checked_large-translateX);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
&:active {
|
|
80
80
|
.#{$module}-knob {
|
|
81
|
-
transform: translateX($
|
|
81
|
+
transform: translateX($spacing-switch_expand_large-translateX - $spacing-switch_checked_large-translateX);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
}
|
|
@@ -86,16 +86,16 @@ $module: #{$prefix}-switch;
|
|
|
86
86
|
|
|
87
87
|
.#{$module}-small {
|
|
88
88
|
.#{$module}-knob {
|
|
89
|
-
transform: translateX(-$
|
|
89
|
+
transform: translateX(-$spacing-switch_unchecked_small-translateX);
|
|
90
90
|
}
|
|
91
91
|
&.#{$module}-checked {
|
|
92
92
|
.#{$module}-knob {
|
|
93
|
-
transform: translateX(-$
|
|
93
|
+
transform: translateX(-$spacing-switch_checked_small-translateX);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
&:active {
|
|
97
97
|
.#{$module}-knob {
|
|
98
|
-
transform: translateX($
|
|
98
|
+
transform: translateX($spacing-switch_expand_small-translateX - $spacing-switch_checked_small-translateX);
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
}
|
|
@@ -44,12 +44,12 @@ $module: #{$prefix}-switch;
|
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.#{$module}-knob {
|
|
47
|
-
transform: translateX($
|
|
47
|
+
transform: translateX($spacing-switch_checked-translateX);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&:active {
|
|
51
51
|
.#{$module}-knob {
|
|
52
|
-
transform: translateX($
|
|
52
|
+
transform: translateX($spacing-switch_checked-translateX - $width-switch_knob_expand);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
}
|
|
@@ -157,7 +157,7 @@ $module: #{$prefix}-switch;
|
|
|
157
157
|
.#{$module}-loading {
|
|
158
158
|
|
|
159
159
|
.#{$module}-loading-spin {
|
|
160
|
-
transform: translateX($
|
|
160
|
+
transform: translateX($spacing-switch_spin_unchecked-translateX);
|
|
161
161
|
|
|
162
162
|
&>.#{$prefix}-spin-wrapper>svg{
|
|
163
163
|
width: $width-switch_spin-default;
|
|
@@ -169,7 +169,7 @@ $module: #{$prefix}-switch;
|
|
|
169
169
|
background-color: $color-switch_spin_checked-bg-default;
|
|
170
170
|
|
|
171
171
|
.#{$module}-loading-spin {
|
|
172
|
-
transform: translateX($
|
|
172
|
+
transform: translateX($spacing-switch_spin_checked-translateX);
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
}
|
|
@@ -177,7 +177,7 @@ $module: #{$prefix}-switch;
|
|
|
177
177
|
.#{$module}-loading.#{$module}-small {
|
|
178
178
|
|
|
179
179
|
.#{$module}-loading-spin {
|
|
180
|
-
transform: translateX($
|
|
180
|
+
transform: translateX($spacing-switch_spin_unchecked_small-translateX);
|
|
181
181
|
|
|
182
182
|
&>.#{$prefix}-spin-wrapper>svg{
|
|
183
183
|
width: $width-switch_spin-small;
|
|
@@ -187,7 +187,7 @@ $module: #{$prefix}-switch;
|
|
|
187
187
|
&.#{$module}-checked{
|
|
188
188
|
|
|
189
189
|
.#{$module}-loading-spin {
|
|
190
|
-
transform: translateX($
|
|
190
|
+
transform: translateX($spacing-switch_spin_checked_small-translateX);
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
}
|
|
@@ -195,7 +195,7 @@ $module: #{$prefix}-switch;
|
|
|
195
195
|
.#{$module}-loading.#{$module}-large {
|
|
196
196
|
|
|
197
197
|
.#{$module}-loading-spin {
|
|
198
|
-
transform: translateX($
|
|
198
|
+
transform: translateX($spacing-switch_spin_unchecked_large-translateX);
|
|
199
199
|
|
|
200
200
|
&>.#{$prefix}-spin-wrapper>svg{
|
|
201
201
|
width: $width-switch_spin-large;
|
|
@@ -206,7 +206,7 @@ $module: #{$prefix}-switch;
|
|
|
206
206
|
&.#{$module}-checked {
|
|
207
207
|
|
|
208
208
|
.#{$module}-loading-spin {
|
|
209
|
-
transform: translateX($
|
|
209
|
+
transform: translateX($spacing-switch_spin_checked_large-translateX);
|
|
210
210
|
}
|
|
211
211
|
}
|
|
212
212
|
}
|
|
@@ -224,16 +224,16 @@ $module: #{$prefix}-switch;
|
|
|
224
224
|
height: $width-switch_knob_large;
|
|
225
225
|
top: $spacing-switch_knob_large-padding;
|
|
226
226
|
border-radius: $width-switch_knob_large * 0.5;
|
|
227
|
-
transform: translateX($
|
|
227
|
+
transform: translateX($spacing-switch_unchecked_large-translateX);
|
|
228
228
|
}
|
|
229
229
|
&.#{$module}-checked {
|
|
230
230
|
.#{$module}-knob {
|
|
231
|
-
transform: translateX($
|
|
231
|
+
transform: translateX($spacing-switch_checked_large-translateX);
|
|
232
232
|
}
|
|
233
233
|
|
|
234
234
|
&:active {
|
|
235
235
|
.#{$module}-knob {
|
|
236
|
-
transform: translateX($
|
|
236
|
+
transform: translateX($spacing-switch_checked_large-translateX - $spacing-switch_expand_large-translateX);
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
239
|
}
|
|
@@ -259,16 +259,16 @@ $module: #{$prefix}-switch;
|
|
|
259
259
|
height: $width-switch_knob_large_small;
|
|
260
260
|
top: $spacing-switch_knob_small-padding;
|
|
261
261
|
border-radius: $width-switch_knob_large_small * 0.5;
|
|
262
|
-
transform: translateX($
|
|
262
|
+
transform: translateX($spacing-switch_unchecked_small-translateX);
|
|
263
263
|
}
|
|
264
264
|
&.#{$module}-checked {
|
|
265
265
|
.#{$module}-knob {
|
|
266
|
-
transform: translateX($
|
|
266
|
+
transform: translateX($spacing-switch_checked_small-translateX);
|
|
267
267
|
}
|
|
268
268
|
|
|
269
269
|
&:active {
|
|
270
270
|
.#{$module}-knob {
|
|
271
|
-
transform: translateX($
|
|
271
|
+
transform: translateX($spacing-switch_checked_small-translateX - $spacing-switch_expand_small-translateX);
|
|
272
272
|
}
|
|
273
273
|
}
|
|
274
274
|
}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
// Other
|
|
2
2
|
$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
|
|
3
|
-
$
|
|
4
|
-
$
|
|
5
|
-
$
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
$
|
|
12
|
-
$
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$
|
|
3
|
+
$spacing-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量
|
|
4
|
+
$spacing-switch_checked-translateX: 18px; // 选中开关右侧偏移量
|
|
5
|
+
$spacing-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
|
|
6
|
+
$spacing-switch_expand_large-translateX: 10px;
|
|
7
|
+
$spacing-switch_unchecked_large-translateX: 3px; // 大尺寸未选中开关右侧偏移量
|
|
8
|
+
$spacing-switch_spin_unchecked_large-translateX: 2px; // 大尺寸未选中开关加载图标右侧偏移量
|
|
9
|
+
$spacing-switch_checked_large-translateX: 26px; // 大尺寸选中开关右侧偏移量
|
|
10
|
+
$spacing-switch_spin_checked_large-translateX: 22px; // 大尺寸选中开关加载图标右侧偏移量
|
|
11
|
+
$spacing-switch_expand_small-translateX: 2px;
|
|
12
|
+
$spacing-switch_unchecked_small-translateX: 1px; // 小尺寸未选中开关右侧偏移量
|
|
13
|
+
$spacing-switch_spin_unchecked_small-translateX: 2px; // 小尺寸未选中开关加载图标右侧偏移量
|
|
14
|
+
$spacing-switch_checked_small-translateX: 11px; // 小尺寸选中开关右侧偏移量
|
|
15
|
+
$spacing-switch_spin_checked_small-translateX: 10px; // 小尺寸选中开关加载图标右侧偏移量
|
|
16
16
|
$motion-switch-transitionDuration: 200ms; // 开关动画时长
|
|
17
17
|
|
|
18
18
|
// Color
|
|
@@ -48,11 +48,11 @@ $width-switch_knob_active: $width-switch_knob_default + $width-switch_knob_expan
|
|
|
48
48
|
$height-switch_large: 32px; // 大尺寸开关高度
|
|
49
49
|
$width-switch_large: 54px; // 大尺寸开关宽度
|
|
50
50
|
$width-switch_knob_large: 24px; // 大尺寸开关按钮宽度
|
|
51
|
-
$width-switch_knob_large_active: $width-switch_knob_large + $
|
|
51
|
+
$width-switch_knob_large_active: $width-switch_knob_large + $spacing-switch_expand_large-translateX; // 大尺寸开关按钮按下态宽度
|
|
52
52
|
$height-switch_small: 16px; // 小尺寸开关高度
|
|
53
53
|
$width-switch_small: 26px; // 小尺寸开关宽度
|
|
54
54
|
$width-switch_knob_large_small: 12px; // 小尺寸开关按钮宽度
|
|
55
|
-
$width-switch_knob_small_active: $width-switch_knob_large_small + $
|
|
55
|
+
$width-switch_knob_small_active: $width-switch_knob_large_small + $spacing-switch_expand_small-translateX; // 小尺寸开关按钮按下态宽度
|
|
56
56
|
$width-switch_knob_disabled-border: 1px; // 小尺寸开关按钮宽度
|
|
57
57
|
$width-switch_checked_unchecked_text: 26px; // 开关按钮文字宽度
|
|
58
58
|
$width-switch_spin-small: 10px; // 小尺寸开关加载 spin 宽度
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-foundation",
|
|
3
|
-
"version": "2.23.
|
|
3
|
+
"version": "2.23.5",
|
|
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": "c3cd98419912c96831a20c5a9f8ce33295b19d5d",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
29
29
|
"@babel/preset-env": "^7.15.8",
|
package/select/option.scss
CHANGED
package/select/select.scss
CHANGED
package/switch/rtl.scss
CHANGED
|
@@ -7,12 +7,12 @@ $module: #{$prefix}-switch;
|
|
|
7
7
|
|
|
8
8
|
&-checked {
|
|
9
9
|
.#{$module}-knob {
|
|
10
|
-
transform: translateX(-$
|
|
10
|
+
transform: translateX(-$spacing-switch_checked-translateX);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
&:active {
|
|
14
14
|
.#{$module}-knob {
|
|
15
|
-
transform: translateX($width-switch_knob_expand - $
|
|
15
|
+
transform: translateX($width-switch_knob_expand - $spacing-switch_checked-translateX);
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
}
|
|
@@ -34,51 +34,51 @@ $module: #{$prefix}-switch;
|
|
|
34
34
|
|
|
35
35
|
.#{$module}-loading {
|
|
36
36
|
.#{$module}-loading-spin {
|
|
37
|
-
transform: translateX(-$
|
|
37
|
+
transform: translateX(-$spacing-switch_spin_unchecked-translateX);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&.#{$module}-checked {
|
|
41
41
|
.#{$module}-loading-spin {
|
|
42
|
-
transform: translateX(-$
|
|
42
|
+
transform: translateX(-$spacing-switch_spin_checked-translateX);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.#{$module}-loading.#{$module}-small {
|
|
48
48
|
.#{$module}-loading-spin {
|
|
49
|
-
transform: translateX(-$
|
|
49
|
+
transform: translateX(-$spacing-switch_spin_unchecked_small-translateX);
|
|
50
50
|
}
|
|
51
51
|
&.#{$module}-checked{
|
|
52
52
|
.#{$module}-loading-spin {
|
|
53
|
-
transform: translateX(-$
|
|
53
|
+
transform: translateX(-$spacing-switch_spin_checked_small-translateX);
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.#{$module}-loading.#{$module}-large {
|
|
59
59
|
.#{$module}-loading-spin {
|
|
60
|
-
transform: translateX(-$
|
|
60
|
+
transform: translateX(-$spacing-switch_spin_unchecked_large-translateX);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
&.#{$module}-checked {
|
|
64
64
|
.#{$module}-loading-spin {
|
|
65
|
-
transform: translateX(-$
|
|
65
|
+
transform: translateX(-$spacing-switch_spin_checked_large-translateX);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.#{$module}-large {
|
|
71
71
|
.#{$module}-knob {
|
|
72
|
-
transform: translateX(-$
|
|
72
|
+
transform: translateX(-$spacing-switch_unchecked_large-translateX);
|
|
73
73
|
}
|
|
74
74
|
&.#{$module}-checked {
|
|
75
75
|
.#{$module}-knob {
|
|
76
|
-
transform: translateX(-$
|
|
76
|
+
transform: translateX(-$spacing-switch_checked_large-translateX);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
&:active {
|
|
80
80
|
.#{$module}-knob {
|
|
81
|
-
transform: translateX($
|
|
81
|
+
transform: translateX($spacing-switch_expand_large-translateX - $spacing-switch_checked_large-translateX);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
}
|
|
@@ -86,16 +86,16 @@ $module: #{$prefix}-switch;
|
|
|
86
86
|
|
|
87
87
|
.#{$module}-small {
|
|
88
88
|
.#{$module}-knob {
|
|
89
|
-
transform: translateX(-$
|
|
89
|
+
transform: translateX(-$spacing-switch_unchecked_small-translateX);
|
|
90
90
|
}
|
|
91
91
|
&.#{$module}-checked {
|
|
92
92
|
.#{$module}-knob {
|
|
93
|
-
transform: translateX(-$
|
|
93
|
+
transform: translateX(-$spacing-switch_checked_small-translateX);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
&:active {
|
|
97
97
|
.#{$module}-knob {
|
|
98
|
-
transform: translateX($
|
|
98
|
+
transform: translateX($spacing-switch_expand_small-translateX - $spacing-switch_checked_small-translateX);
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
}
|
package/switch/switch.scss
CHANGED
|
@@ -44,12 +44,12 @@ $module: #{$prefix}-switch;
|
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.#{$module}-knob {
|
|
47
|
-
transform: translateX($
|
|
47
|
+
transform: translateX($spacing-switch_checked-translateX);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&:active {
|
|
51
51
|
.#{$module}-knob {
|
|
52
|
-
transform: translateX($
|
|
52
|
+
transform: translateX($spacing-switch_checked-translateX - $width-switch_knob_expand);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
}
|
|
@@ -157,7 +157,7 @@ $module: #{$prefix}-switch;
|
|
|
157
157
|
.#{$module}-loading {
|
|
158
158
|
|
|
159
159
|
.#{$module}-loading-spin {
|
|
160
|
-
transform: translateX($
|
|
160
|
+
transform: translateX($spacing-switch_spin_unchecked-translateX);
|
|
161
161
|
|
|
162
162
|
&>.#{$prefix}-spin-wrapper>svg{
|
|
163
163
|
width: $width-switch_spin-default;
|
|
@@ -169,7 +169,7 @@ $module: #{$prefix}-switch;
|
|
|
169
169
|
background-color: $color-switch_spin_checked-bg-default;
|
|
170
170
|
|
|
171
171
|
.#{$module}-loading-spin {
|
|
172
|
-
transform: translateX($
|
|
172
|
+
transform: translateX($spacing-switch_spin_checked-translateX);
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
}
|
|
@@ -177,7 +177,7 @@ $module: #{$prefix}-switch;
|
|
|
177
177
|
.#{$module}-loading.#{$module}-small {
|
|
178
178
|
|
|
179
179
|
.#{$module}-loading-spin {
|
|
180
|
-
transform: translateX($
|
|
180
|
+
transform: translateX($spacing-switch_spin_unchecked_small-translateX);
|
|
181
181
|
|
|
182
182
|
&>.#{$prefix}-spin-wrapper>svg{
|
|
183
183
|
width: $width-switch_spin-small;
|
|
@@ -187,7 +187,7 @@ $module: #{$prefix}-switch;
|
|
|
187
187
|
&.#{$module}-checked{
|
|
188
188
|
|
|
189
189
|
.#{$module}-loading-spin {
|
|
190
|
-
transform: translateX($
|
|
190
|
+
transform: translateX($spacing-switch_spin_checked_small-translateX);
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
}
|
|
@@ -195,7 +195,7 @@ $module: #{$prefix}-switch;
|
|
|
195
195
|
.#{$module}-loading.#{$module}-large {
|
|
196
196
|
|
|
197
197
|
.#{$module}-loading-spin {
|
|
198
|
-
transform: translateX($
|
|
198
|
+
transform: translateX($spacing-switch_spin_unchecked_large-translateX);
|
|
199
199
|
|
|
200
200
|
&>.#{$prefix}-spin-wrapper>svg{
|
|
201
201
|
width: $width-switch_spin-large;
|
|
@@ -206,7 +206,7 @@ $module: #{$prefix}-switch;
|
|
|
206
206
|
&.#{$module}-checked {
|
|
207
207
|
|
|
208
208
|
.#{$module}-loading-spin {
|
|
209
|
-
transform: translateX($
|
|
209
|
+
transform: translateX($spacing-switch_spin_checked_large-translateX);
|
|
210
210
|
}
|
|
211
211
|
}
|
|
212
212
|
}
|
|
@@ -224,16 +224,16 @@ $module: #{$prefix}-switch;
|
|
|
224
224
|
height: $width-switch_knob_large;
|
|
225
225
|
top: $spacing-switch_knob_large-padding;
|
|
226
226
|
border-radius: $width-switch_knob_large * 0.5;
|
|
227
|
-
transform: translateX($
|
|
227
|
+
transform: translateX($spacing-switch_unchecked_large-translateX);
|
|
228
228
|
}
|
|
229
229
|
&.#{$module}-checked {
|
|
230
230
|
.#{$module}-knob {
|
|
231
|
-
transform: translateX($
|
|
231
|
+
transform: translateX($spacing-switch_checked_large-translateX);
|
|
232
232
|
}
|
|
233
233
|
|
|
234
234
|
&:active {
|
|
235
235
|
.#{$module}-knob {
|
|
236
|
-
transform: translateX($
|
|
236
|
+
transform: translateX($spacing-switch_checked_large-translateX - $spacing-switch_expand_large-translateX);
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
239
|
}
|
|
@@ -259,16 +259,16 @@ $module: #{$prefix}-switch;
|
|
|
259
259
|
height: $width-switch_knob_large_small;
|
|
260
260
|
top: $spacing-switch_knob_small-padding;
|
|
261
261
|
border-radius: $width-switch_knob_large_small * 0.5;
|
|
262
|
-
transform: translateX($
|
|
262
|
+
transform: translateX($spacing-switch_unchecked_small-translateX);
|
|
263
263
|
}
|
|
264
264
|
&.#{$module}-checked {
|
|
265
265
|
.#{$module}-knob {
|
|
266
|
-
transform: translateX($
|
|
266
|
+
transform: translateX($spacing-switch_checked_small-translateX);
|
|
267
267
|
}
|
|
268
268
|
|
|
269
269
|
&:active {
|
|
270
270
|
.#{$module}-knob {
|
|
271
|
-
transform: translateX($
|
|
271
|
+
transform: translateX($spacing-switch_checked_small-translateX - $spacing-switch_expand_small-translateX);
|
|
272
272
|
}
|
|
273
273
|
}
|
|
274
274
|
}
|
package/switch/variables.scss
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
// Other
|
|
2
2
|
$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
|
|
3
|
-
$
|
|
4
|
-
$
|
|
5
|
-
$
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
$
|
|
12
|
-
$
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$
|
|
3
|
+
$spacing-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量
|
|
4
|
+
$spacing-switch_checked-translateX: 18px; // 选中开关右侧偏移量
|
|
5
|
+
$spacing-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
|
|
6
|
+
$spacing-switch_expand_large-translateX: 10px;
|
|
7
|
+
$spacing-switch_unchecked_large-translateX: 3px; // 大尺寸未选中开关右侧偏移量
|
|
8
|
+
$spacing-switch_spin_unchecked_large-translateX: 2px; // 大尺寸未选中开关加载图标右侧偏移量
|
|
9
|
+
$spacing-switch_checked_large-translateX: 26px; // 大尺寸选中开关右侧偏移量
|
|
10
|
+
$spacing-switch_spin_checked_large-translateX: 22px; // 大尺寸选中开关加载图标右侧偏移量
|
|
11
|
+
$spacing-switch_expand_small-translateX: 2px;
|
|
12
|
+
$spacing-switch_unchecked_small-translateX: 1px; // 小尺寸未选中开关右侧偏移量
|
|
13
|
+
$spacing-switch_spin_unchecked_small-translateX: 2px; // 小尺寸未选中开关加载图标右侧偏移量
|
|
14
|
+
$spacing-switch_checked_small-translateX: 11px; // 小尺寸选中开关右侧偏移量
|
|
15
|
+
$spacing-switch_spin_checked_small-translateX: 10px; // 小尺寸选中开关加载图标右侧偏移量
|
|
16
16
|
$motion-switch-transitionDuration: 200ms; // 开关动画时长
|
|
17
17
|
|
|
18
18
|
// Color
|
|
@@ -48,11 +48,11 @@ $width-switch_knob_active: $width-switch_knob_default + $width-switch_knob_expan
|
|
|
48
48
|
$height-switch_large: 32px; // 大尺寸开关高度
|
|
49
49
|
$width-switch_large: 54px; // 大尺寸开关宽度
|
|
50
50
|
$width-switch_knob_large: 24px; // 大尺寸开关按钮宽度
|
|
51
|
-
$width-switch_knob_large_active: $width-switch_knob_large + $
|
|
51
|
+
$width-switch_knob_large_active: $width-switch_knob_large + $spacing-switch_expand_large-translateX; // 大尺寸开关按钮按下态宽度
|
|
52
52
|
$height-switch_small: 16px; // 小尺寸开关高度
|
|
53
53
|
$width-switch_small: 26px; // 小尺寸开关宽度
|
|
54
54
|
$width-switch_knob_large_small: 12px; // 小尺寸开关按钮宽度
|
|
55
|
-
$width-switch_knob_small_active: $width-switch_knob_large_small + $
|
|
55
|
+
$width-switch_knob_small_active: $width-switch_knob_large_small + $spacing-switch_expand_small-translateX; // 小尺寸开关按钮按下态宽度
|
|
56
56
|
$width-switch_knob_disabled-border: 1px; // 小尺寸开关按钮宽度
|
|
57
57
|
$width-switch_checked_unchecked_text: 26px; // 开关按钮文字宽度
|
|
58
58
|
$width-switch_spin-small: 10px; // 小尺寸开关加载 spin 宽度
|