@douyinfe/semi-foundation 2.23.1 → 2.23.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/form/form.scss +1 -0
- package/form/rtl.scss +1 -0
- package/form/variables.scss +1 -0
- package/input/foundation.ts +0 -5
- package/lib/cjs/form/form.css +2 -0
- package/lib/cjs/form/form.scss +1 -0
- package/lib/cjs/form/rtl.scss +1 -0
- package/lib/cjs/form/variables.scss +1 -0
- package/lib/cjs/input/foundation.d.ts +0 -2
- package/lib/cjs/input/foundation.js +0 -4
- package/lib/cjs/switch/rtl.scss +1 -1
- package/lib/cjs/switch/switch.css +1 -1
- package/lib/cjs/switch/switch.scss +2 -2
- package/lib/cjs/switch/variables.scss +3 -2
- package/lib/cjs/tagInput/tagInput.css +39 -0
- package/lib/cjs/tagInput/tagInput.scss +48 -0
- package/lib/cjs/tagInput/variables.scss +3 -0
- package/lib/es/form/form.css +2 -0
- package/lib/es/form/form.scss +1 -0
- package/lib/es/form/rtl.scss +1 -0
- package/lib/es/form/variables.scss +1 -0
- package/lib/es/input/foundation.d.ts +0 -2
- package/lib/es/input/foundation.js +0 -4
- package/lib/es/switch/rtl.scss +1 -1
- package/lib/es/switch/switch.css +1 -1
- package/lib/es/switch/switch.scss +2 -2
- package/lib/es/switch/variables.scss +3 -2
- package/lib/es/tagInput/tagInput.css +39 -0
- package/lib/es/tagInput/tagInput.scss +48 -0
- package/lib/es/tagInput/variables.scss +3 -0
- package/package.json +2 -2
- package/switch/rtl.scss +1 -1
- package/switch/switch.scss +2 -2
- package/switch/variables.scss +3 -2
- package/tagInput/tagInput.scss +48 -0
- package/tagInput/variables.scss +3 -0
package/form/form.scss
CHANGED
|
@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
|
|
|
92
92
|
font-weight: $font-form_label-fontWeight;
|
|
93
93
|
color: $color-form_label-text-default;
|
|
94
94
|
margin-bottom: $spacing-form_label-marginBottom;
|
|
95
|
+
padding-right: $spacing-form_label-paddingRight;
|
|
95
96
|
display: inline-block;
|
|
96
97
|
vertical-align: middle;
|
|
97
98
|
@include font-size-regular;
|
package/form/rtl.scss
CHANGED
package/form/variables.scss
CHANGED
|
@@ -7,6 +7,7 @@ $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布
|
|
|
7
7
|
$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
|
|
8
8
|
|
|
9
9
|
// form label
|
|
10
|
+
$spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距(水平布局)
|
|
10
11
|
$spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距(水平布局)
|
|
11
12
|
$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
|
|
12
13
|
$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
|
package/input/foundation.ts
CHANGED
|
@@ -21,7 +21,6 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
|
|
|
21
21
|
notifyKeyUp(e: any): void;
|
|
22
22
|
notifyKeyPress(e: any): void;
|
|
23
23
|
notifyEnterPress(e: any): void;
|
|
24
|
-
setPaddingLeft(paddingLeft: string): void;
|
|
25
24
|
isEventTarget(e: any): boolean
|
|
26
25
|
}
|
|
27
26
|
|
|
@@ -266,10 +265,6 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
|
|
|
266
265
|
}
|
|
267
266
|
}
|
|
268
267
|
|
|
269
|
-
setPaddingLeft(paddingLeft: string) {
|
|
270
|
-
this._adapter.setPaddingLeft(paddingLeft);
|
|
271
|
-
}
|
|
272
|
-
|
|
273
268
|
isAllowClear() {
|
|
274
269
|
const { value, isFocus, isHovering } = this._adapter.getStates();
|
|
275
270
|
const { showClear, disabled } = this._adapter.getProps();
|
package/lib/cjs/form/form.css
CHANGED
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
font-weight: 600;
|
|
49
49
|
color: var(--semi-color-text-0);
|
|
50
50
|
margin-bottom: 4px;
|
|
51
|
+
padding-right: 16px;
|
|
51
52
|
display: inline-block;
|
|
52
53
|
vertical-align: middle;
|
|
53
54
|
font-size: 14px;
|
|
@@ -231,6 +232,7 @@
|
|
|
231
232
|
.semi-rtl .semi-form-field-label,
|
|
232
233
|
.semi-portal-rtl .semi-form-field-label {
|
|
233
234
|
padding-right: 0;
|
|
235
|
+
padding-left: 16px;
|
|
234
236
|
}
|
|
235
237
|
.semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra,
|
|
236
238
|
.semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra {
|
package/lib/cjs/form/form.scss
CHANGED
|
@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
|
|
|
92
92
|
font-weight: $font-form_label-fontWeight;
|
|
93
93
|
color: $color-form_label-text-default;
|
|
94
94
|
margin-bottom: $spacing-form_label-marginBottom;
|
|
95
|
+
padding-right: $spacing-form_label-paddingRight;
|
|
95
96
|
display: inline-block;
|
|
96
97
|
vertical-align: middle;
|
|
97
98
|
@include font-size-regular;
|
package/lib/cjs/form/rtl.scss
CHANGED
|
@@ -7,6 +7,7 @@ $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布
|
|
|
7
7
|
$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
|
|
8
8
|
|
|
9
9
|
// form label
|
|
10
|
+
$spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距(水平布局)
|
|
10
11
|
$spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距(水平布局)
|
|
11
12
|
$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
|
|
12
13
|
$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
|
|
@@ -15,7 +15,6 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
|
|
|
15
15
|
notifyKeyUp(e: any): void;
|
|
16
16
|
notifyKeyPress(e: any): void;
|
|
17
17
|
notifyEnterPress(e: any): void;
|
|
18
|
-
setPaddingLeft(paddingLeft: string): void;
|
|
19
18
|
isEventTarget(e: any): boolean;
|
|
20
19
|
}
|
|
21
20
|
declare class InputFoundation extends BaseFoundation<InputAdapter> {
|
|
@@ -67,7 +66,6 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
|
|
|
67
66
|
handleKeyDown(e: any): void;
|
|
68
67
|
handleKeyUp(e: any): void;
|
|
69
68
|
handleKeyPress(e: any): void;
|
|
70
|
-
setPaddingLeft(paddingLeft: string): void;
|
|
71
69
|
isAllowClear(): any;
|
|
72
70
|
handleClickPrefixOrSuffix(e: any): void;
|
|
73
71
|
/**
|
package/lib/cjs/switch/rtl.scss
CHANGED
|
@@ -94,14 +94,14 @@ $module: #{$prefix}-switch;
|
|
|
94
94
|
background-color: $color-switch_knob-bg-default;
|
|
95
95
|
box-sizing: border-box;
|
|
96
96
|
position: absolute;
|
|
97
|
-
left:
|
|
97
|
+
left: $spacing-switch_knob-left;
|
|
98
98
|
right: auto;
|
|
99
99
|
transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
|
|
100
100
|
|
|
101
101
|
width: $width-switch_knob_default;
|
|
102
102
|
height: $width-switch_knob_default;
|
|
103
103
|
top: $spacing-switch_knob-padding;
|
|
104
|
-
transform: translateX($
|
|
104
|
+
transform: translateX($spacing-switch_unchecked-translateX);
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
&-native-control {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Other
|
|
2
|
-
$
|
|
2
|
+
$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
|
|
3
3
|
$motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
|
|
4
4
|
$motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
|
|
5
5
|
$motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
|
|
@@ -62,9 +62,10 @@ $width-switch-outline: 2px; // 开关轮廓宽度
|
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
// Spacing
|
|
65
|
-
$spacing-switch_knob-padding: 2px; //
|
|
65
|
+
$spacing-switch_knob-padding: 2px; // 开关按钮顶部边距
|
|
66
66
|
$spacing-switch_knob_large-padding: 3px; // 大尺寸开关按钮内边距
|
|
67
67
|
$spacing-switch_knob_small-padding: 1px; // 小尺寸开关按钮内边距
|
|
68
|
+
$spacing-switch_knob-left: 0px; // 开关左侧偏移距离
|
|
68
69
|
|
|
69
70
|
// Radius
|
|
70
71
|
$radius-switch: $height-switch * 0.5; // 开关圆角
|
|
@@ -85,6 +85,15 @@
|
|
|
85
85
|
padding-right: 4px;
|
|
86
86
|
overflow: hidden;
|
|
87
87
|
}
|
|
88
|
+
.semi-tagInput-wrapper-small {
|
|
89
|
+
min-height: 24px;
|
|
90
|
+
}
|
|
91
|
+
.semi-tagInput-wrapper-default {
|
|
92
|
+
min-height: 32px;
|
|
93
|
+
}
|
|
94
|
+
.semi-tagInput-wrapper-large {
|
|
95
|
+
min-height: 40px;
|
|
96
|
+
}
|
|
88
97
|
.semi-tagInput-wrapper-tag {
|
|
89
98
|
margin-right: 4px;
|
|
90
99
|
white-space: pre;
|
|
@@ -137,6 +146,36 @@
|
|
|
137
146
|
.semi-tagInput-wrapper .semi-tagInput-wrapper-input:not(:first-child) > input {
|
|
138
147
|
padding-left: 0;
|
|
139
148
|
}
|
|
149
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small {
|
|
150
|
+
height: 20px;
|
|
151
|
+
margin-top: 1px;
|
|
152
|
+
margin-bottom: 1px;
|
|
153
|
+
line-height: 20px;
|
|
154
|
+
}
|
|
155
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small .semi-input-small {
|
|
156
|
+
height: 20px;
|
|
157
|
+
line-height: 20px;
|
|
158
|
+
}
|
|
159
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default {
|
|
160
|
+
height: 24px;
|
|
161
|
+
margin-top: 2px;
|
|
162
|
+
margin-bottom: 2px;
|
|
163
|
+
line-height: 24px;
|
|
164
|
+
}
|
|
165
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default .semi-input-default {
|
|
166
|
+
height: 24px;
|
|
167
|
+
line-height: 24px;
|
|
168
|
+
}
|
|
169
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large {
|
|
170
|
+
height: 24px;
|
|
171
|
+
margin-top: 3px;
|
|
172
|
+
margin-bottom: 3px;
|
|
173
|
+
line-height: 24px;
|
|
174
|
+
}
|
|
175
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large .semi-input-large {
|
|
176
|
+
height: 24px;
|
|
177
|
+
line-height: 24px;
|
|
178
|
+
}
|
|
140
179
|
.semi-tagInput-clearBtn {
|
|
141
180
|
display: flex;
|
|
142
181
|
justify-content: center;
|
|
@@ -106,6 +106,18 @@ $module: #{$prefix}-tagInput;
|
|
|
106
106
|
padding-right: $spacing-extra-tight;
|
|
107
107
|
overflow: hidden;
|
|
108
108
|
|
|
109
|
+
&-small {
|
|
110
|
+
min-height: $height-tagInput-small;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&-default {
|
|
114
|
+
min-height: $height-tagInput-default;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&-large {
|
|
118
|
+
min-height: $height-tagInput-large;
|
|
119
|
+
}
|
|
120
|
+
|
|
109
121
|
&-tag {
|
|
110
122
|
margin-right: $spacing-extra-tight;
|
|
111
123
|
white-space: pre;
|
|
@@ -170,6 +182,42 @@ $module: #{$prefix}-tagInput;
|
|
|
170
182
|
&:not(:first-child) > input {
|
|
171
183
|
padding-left: 0;
|
|
172
184
|
}
|
|
185
|
+
|
|
186
|
+
&-small {
|
|
187
|
+
height: $height-tagInput_input_small;
|
|
188
|
+
margin-top: $spacing-tagInput_small-Y;
|
|
189
|
+
margin-bottom: $spacing-tagInput_small-Y;
|
|
190
|
+
line-height: $height-tagInput_input_small;
|
|
191
|
+
|
|
192
|
+
& .#{$prefix}-input-small {
|
|
193
|
+
height: $height-tagInput_input_small;
|
|
194
|
+
line-height: $height-tagInput_input_small;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&-default {
|
|
199
|
+
height: $height-tagInput_input_default;
|
|
200
|
+
margin-top: $spacing-tagInput_default-Y;
|
|
201
|
+
margin-bottom: $spacing-tagInput_default-Y;
|
|
202
|
+
line-height: $height-tagInput_input_default;
|
|
203
|
+
|
|
204
|
+
& .#{$prefix}-input-default {
|
|
205
|
+
height: $height-tagInput_input_default;
|
|
206
|
+
line-height: $height-tagInput_input_default;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&-large {
|
|
211
|
+
height: $height-tagInput_input_large;
|
|
212
|
+
margin-top: $spacing-tagInput_large-Y;
|
|
213
|
+
margin-bottom: $spacing-tagInput_large-Y;
|
|
214
|
+
line-height: $height-tagInput_input_large;
|
|
215
|
+
|
|
216
|
+
& .#{$prefix}-input-large {
|
|
217
|
+
height: $height-tagInput_input_large;
|
|
218
|
+
line-height: $height-tagInput_input_large;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
173
221
|
}
|
|
174
222
|
}
|
|
175
223
|
|
|
@@ -40,6 +40,9 @@ $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的
|
|
|
40
40
|
$height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
|
|
41
41
|
$height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
|
|
42
42
|
$height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
|
|
43
|
+
$height-tagInput_input_small: 20px; // 小尺寸标签输入框Input框高度
|
|
44
|
+
$height-tagInput_input_default: 24px; // 默认尺寸标签输入框Input框高度
|
|
45
|
+
$height-tagInput_input_large: 24px; // 大尺寸标签输入框Input框高度
|
|
43
46
|
|
|
44
47
|
$width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
|
|
45
48
|
$width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
|
package/lib/es/form/form.css
CHANGED
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
font-weight: 600;
|
|
49
49
|
color: var(--semi-color-text-0);
|
|
50
50
|
margin-bottom: 4px;
|
|
51
|
+
padding-right: 16px;
|
|
51
52
|
display: inline-block;
|
|
52
53
|
vertical-align: middle;
|
|
53
54
|
font-size: 14px;
|
|
@@ -231,6 +232,7 @@
|
|
|
231
232
|
.semi-rtl .semi-form-field-label,
|
|
232
233
|
.semi-portal-rtl .semi-form-field-label {
|
|
233
234
|
padding-right: 0;
|
|
235
|
+
padding-left: 16px;
|
|
234
236
|
}
|
|
235
237
|
.semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra,
|
|
236
238
|
.semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra {
|
package/lib/es/form/form.scss
CHANGED
|
@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
|
|
|
92
92
|
font-weight: $font-form_label-fontWeight;
|
|
93
93
|
color: $color-form_label-text-default;
|
|
94
94
|
margin-bottom: $spacing-form_label-marginBottom;
|
|
95
|
+
padding-right: $spacing-form_label-paddingRight;
|
|
95
96
|
display: inline-block;
|
|
96
97
|
vertical-align: middle;
|
|
97
98
|
@include font-size-regular;
|
package/lib/es/form/rtl.scss
CHANGED
|
@@ -7,6 +7,7 @@ $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布
|
|
|
7
7
|
$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
|
|
8
8
|
|
|
9
9
|
// form label
|
|
10
|
+
$spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距(水平布局)
|
|
10
11
|
$spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距(水平布局)
|
|
11
12
|
$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
|
|
12
13
|
$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
|
|
@@ -15,7 +15,6 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
|
|
|
15
15
|
notifyKeyUp(e: any): void;
|
|
16
16
|
notifyKeyPress(e: any): void;
|
|
17
17
|
notifyEnterPress(e: any): void;
|
|
18
|
-
setPaddingLeft(paddingLeft: string): void;
|
|
19
18
|
isEventTarget(e: any): boolean;
|
|
20
19
|
}
|
|
21
20
|
declare class InputFoundation extends BaseFoundation<InputAdapter> {
|
|
@@ -67,7 +66,6 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
|
|
|
67
66
|
handleKeyDown(e: any): void;
|
|
68
67
|
handleKeyUp(e: any): void;
|
|
69
68
|
handleKeyPress(e: any): void;
|
|
70
|
-
setPaddingLeft(paddingLeft: string): void;
|
|
71
69
|
isAllowClear(): any;
|
|
72
70
|
handleClickPrefixOrSuffix(e: any): void;
|
|
73
71
|
/**
|
package/lib/es/switch/rtl.scss
CHANGED
package/lib/es/switch/switch.css
CHANGED
|
@@ -94,14 +94,14 @@ $module: #{$prefix}-switch;
|
|
|
94
94
|
background-color: $color-switch_knob-bg-default;
|
|
95
95
|
box-sizing: border-box;
|
|
96
96
|
position: absolute;
|
|
97
|
-
left:
|
|
97
|
+
left: $spacing-switch_knob-left;
|
|
98
98
|
right: auto;
|
|
99
99
|
transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
|
|
100
100
|
|
|
101
101
|
width: $width-switch_knob_default;
|
|
102
102
|
height: $width-switch_knob_default;
|
|
103
103
|
top: $spacing-switch_knob-padding;
|
|
104
|
-
transform: translateX($
|
|
104
|
+
transform: translateX($spacing-switch_unchecked-translateX);
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
&-native-control {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Other
|
|
2
|
-
$
|
|
2
|
+
$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
|
|
3
3
|
$motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
|
|
4
4
|
$motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
|
|
5
5
|
$motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
|
|
@@ -62,9 +62,10 @@ $width-switch-outline: 2px; // 开关轮廓宽度
|
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
// Spacing
|
|
65
|
-
$spacing-switch_knob-padding: 2px; //
|
|
65
|
+
$spacing-switch_knob-padding: 2px; // 开关按钮顶部边距
|
|
66
66
|
$spacing-switch_knob_large-padding: 3px; // 大尺寸开关按钮内边距
|
|
67
67
|
$spacing-switch_knob_small-padding: 1px; // 小尺寸开关按钮内边距
|
|
68
|
+
$spacing-switch_knob-left: 0px; // 开关左侧偏移距离
|
|
68
69
|
|
|
69
70
|
// Radius
|
|
70
71
|
$radius-switch: $height-switch * 0.5; // 开关圆角
|
|
@@ -85,6 +85,15 @@
|
|
|
85
85
|
padding-right: 4px;
|
|
86
86
|
overflow: hidden;
|
|
87
87
|
}
|
|
88
|
+
.semi-tagInput-wrapper-small {
|
|
89
|
+
min-height: 24px;
|
|
90
|
+
}
|
|
91
|
+
.semi-tagInput-wrapper-default {
|
|
92
|
+
min-height: 32px;
|
|
93
|
+
}
|
|
94
|
+
.semi-tagInput-wrapper-large {
|
|
95
|
+
min-height: 40px;
|
|
96
|
+
}
|
|
88
97
|
.semi-tagInput-wrapper-tag {
|
|
89
98
|
margin-right: 4px;
|
|
90
99
|
white-space: pre;
|
|
@@ -137,6 +146,36 @@
|
|
|
137
146
|
.semi-tagInput-wrapper .semi-tagInput-wrapper-input:not(:first-child) > input {
|
|
138
147
|
padding-left: 0;
|
|
139
148
|
}
|
|
149
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small {
|
|
150
|
+
height: 20px;
|
|
151
|
+
margin-top: 1px;
|
|
152
|
+
margin-bottom: 1px;
|
|
153
|
+
line-height: 20px;
|
|
154
|
+
}
|
|
155
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small .semi-input-small {
|
|
156
|
+
height: 20px;
|
|
157
|
+
line-height: 20px;
|
|
158
|
+
}
|
|
159
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default {
|
|
160
|
+
height: 24px;
|
|
161
|
+
margin-top: 2px;
|
|
162
|
+
margin-bottom: 2px;
|
|
163
|
+
line-height: 24px;
|
|
164
|
+
}
|
|
165
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default .semi-input-default {
|
|
166
|
+
height: 24px;
|
|
167
|
+
line-height: 24px;
|
|
168
|
+
}
|
|
169
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large {
|
|
170
|
+
height: 24px;
|
|
171
|
+
margin-top: 3px;
|
|
172
|
+
margin-bottom: 3px;
|
|
173
|
+
line-height: 24px;
|
|
174
|
+
}
|
|
175
|
+
.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large .semi-input-large {
|
|
176
|
+
height: 24px;
|
|
177
|
+
line-height: 24px;
|
|
178
|
+
}
|
|
140
179
|
.semi-tagInput-clearBtn {
|
|
141
180
|
display: flex;
|
|
142
181
|
justify-content: center;
|
|
@@ -106,6 +106,18 @@ $module: #{$prefix}-tagInput;
|
|
|
106
106
|
padding-right: $spacing-extra-tight;
|
|
107
107
|
overflow: hidden;
|
|
108
108
|
|
|
109
|
+
&-small {
|
|
110
|
+
min-height: $height-tagInput-small;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&-default {
|
|
114
|
+
min-height: $height-tagInput-default;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&-large {
|
|
118
|
+
min-height: $height-tagInput-large;
|
|
119
|
+
}
|
|
120
|
+
|
|
109
121
|
&-tag {
|
|
110
122
|
margin-right: $spacing-extra-tight;
|
|
111
123
|
white-space: pre;
|
|
@@ -170,6 +182,42 @@ $module: #{$prefix}-tagInput;
|
|
|
170
182
|
&:not(:first-child) > input {
|
|
171
183
|
padding-left: 0;
|
|
172
184
|
}
|
|
185
|
+
|
|
186
|
+
&-small {
|
|
187
|
+
height: $height-tagInput_input_small;
|
|
188
|
+
margin-top: $spacing-tagInput_small-Y;
|
|
189
|
+
margin-bottom: $spacing-tagInput_small-Y;
|
|
190
|
+
line-height: $height-tagInput_input_small;
|
|
191
|
+
|
|
192
|
+
& .#{$prefix}-input-small {
|
|
193
|
+
height: $height-tagInput_input_small;
|
|
194
|
+
line-height: $height-tagInput_input_small;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&-default {
|
|
199
|
+
height: $height-tagInput_input_default;
|
|
200
|
+
margin-top: $spacing-tagInput_default-Y;
|
|
201
|
+
margin-bottom: $spacing-tagInput_default-Y;
|
|
202
|
+
line-height: $height-tagInput_input_default;
|
|
203
|
+
|
|
204
|
+
& .#{$prefix}-input-default {
|
|
205
|
+
height: $height-tagInput_input_default;
|
|
206
|
+
line-height: $height-tagInput_input_default;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&-large {
|
|
211
|
+
height: $height-tagInput_input_large;
|
|
212
|
+
margin-top: $spacing-tagInput_large-Y;
|
|
213
|
+
margin-bottom: $spacing-tagInput_large-Y;
|
|
214
|
+
line-height: $height-tagInput_input_large;
|
|
215
|
+
|
|
216
|
+
& .#{$prefix}-input-large {
|
|
217
|
+
height: $height-tagInput_input_large;
|
|
218
|
+
line-height: $height-tagInput_input_large;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
173
221
|
}
|
|
174
222
|
}
|
|
175
223
|
|
|
@@ -40,6 +40,9 @@ $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的
|
|
|
40
40
|
$height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
|
|
41
41
|
$height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
|
|
42
42
|
$height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
|
|
43
|
+
$height-tagInput_input_small: 20px; // 小尺寸标签输入框Input框高度
|
|
44
|
+
$height-tagInput_input_default: 24px; // 默认尺寸标签输入框Input框高度
|
|
45
|
+
$height-tagInput_input_large: 24px; // 大尺寸标签输入框Input框高度
|
|
43
46
|
|
|
44
47
|
$width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
|
|
45
48
|
$width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-foundation",
|
|
3
|
-
"version": "2.23.
|
|
3
|
+
"version": "2.23.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": "b7fc3d0d2fe9dafb8e3ec4706b9a68212bb5f6bc",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
29
29
|
"@babel/preset-env": "^7.15.8",
|
package/switch/rtl.scss
CHANGED
package/switch/switch.scss
CHANGED
|
@@ -94,14 +94,14 @@ $module: #{$prefix}-switch;
|
|
|
94
94
|
background-color: $color-switch_knob-bg-default;
|
|
95
95
|
box-sizing: border-box;
|
|
96
96
|
position: absolute;
|
|
97
|
-
left:
|
|
97
|
+
left: $spacing-switch_knob-left;
|
|
98
98
|
right: auto;
|
|
99
99
|
transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
|
|
100
100
|
|
|
101
101
|
width: $width-switch_knob_default;
|
|
102
102
|
height: $width-switch_knob_default;
|
|
103
103
|
top: $spacing-switch_knob-padding;
|
|
104
|
-
transform: translateX($
|
|
104
|
+
transform: translateX($spacing-switch_unchecked-translateX);
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
&-native-control {
|
package/switch/variables.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Other
|
|
2
|
-
$
|
|
2
|
+
$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
|
|
3
3
|
$motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
|
|
4
4
|
$motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
|
|
5
5
|
$motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
|
|
@@ -62,9 +62,10 @@ $width-switch-outline: 2px; // 开关轮廓宽度
|
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
// Spacing
|
|
65
|
-
$spacing-switch_knob-padding: 2px; //
|
|
65
|
+
$spacing-switch_knob-padding: 2px; // 开关按钮顶部边距
|
|
66
66
|
$spacing-switch_knob_large-padding: 3px; // 大尺寸开关按钮内边距
|
|
67
67
|
$spacing-switch_knob_small-padding: 1px; // 小尺寸开关按钮内边距
|
|
68
|
+
$spacing-switch_knob-left: 0px; // 开关左侧偏移距离
|
|
68
69
|
|
|
69
70
|
// Radius
|
|
70
71
|
$radius-switch: $height-switch * 0.5; // 开关圆角
|
package/tagInput/tagInput.scss
CHANGED
|
@@ -106,6 +106,18 @@ $module: #{$prefix}-tagInput;
|
|
|
106
106
|
padding-right: $spacing-extra-tight;
|
|
107
107
|
overflow: hidden;
|
|
108
108
|
|
|
109
|
+
&-small {
|
|
110
|
+
min-height: $height-tagInput-small;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&-default {
|
|
114
|
+
min-height: $height-tagInput-default;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&-large {
|
|
118
|
+
min-height: $height-tagInput-large;
|
|
119
|
+
}
|
|
120
|
+
|
|
109
121
|
&-tag {
|
|
110
122
|
margin-right: $spacing-extra-tight;
|
|
111
123
|
white-space: pre;
|
|
@@ -170,6 +182,42 @@ $module: #{$prefix}-tagInput;
|
|
|
170
182
|
&:not(:first-child) > input {
|
|
171
183
|
padding-left: 0;
|
|
172
184
|
}
|
|
185
|
+
|
|
186
|
+
&-small {
|
|
187
|
+
height: $height-tagInput_input_small;
|
|
188
|
+
margin-top: $spacing-tagInput_small-Y;
|
|
189
|
+
margin-bottom: $spacing-tagInput_small-Y;
|
|
190
|
+
line-height: $height-tagInput_input_small;
|
|
191
|
+
|
|
192
|
+
& .#{$prefix}-input-small {
|
|
193
|
+
height: $height-tagInput_input_small;
|
|
194
|
+
line-height: $height-tagInput_input_small;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&-default {
|
|
199
|
+
height: $height-tagInput_input_default;
|
|
200
|
+
margin-top: $spacing-tagInput_default-Y;
|
|
201
|
+
margin-bottom: $spacing-tagInput_default-Y;
|
|
202
|
+
line-height: $height-tagInput_input_default;
|
|
203
|
+
|
|
204
|
+
& .#{$prefix}-input-default {
|
|
205
|
+
height: $height-tagInput_input_default;
|
|
206
|
+
line-height: $height-tagInput_input_default;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&-large {
|
|
211
|
+
height: $height-tagInput_input_large;
|
|
212
|
+
margin-top: $spacing-tagInput_large-Y;
|
|
213
|
+
margin-bottom: $spacing-tagInput_large-Y;
|
|
214
|
+
line-height: $height-tagInput_input_large;
|
|
215
|
+
|
|
216
|
+
& .#{$prefix}-input-large {
|
|
217
|
+
height: $height-tagInput_input_large;
|
|
218
|
+
line-height: $height-tagInput_input_large;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
173
221
|
}
|
|
174
222
|
}
|
|
175
223
|
|
package/tagInput/variables.scss
CHANGED
|
@@ -40,6 +40,9 @@ $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的
|
|
|
40
40
|
$height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
|
|
41
41
|
$height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
|
|
42
42
|
$height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
|
|
43
|
+
$height-tagInput_input_small: 20px; // 小尺寸标签输入框Input框高度
|
|
44
|
+
$height-tagInput_input_default: 24px; // 默认尺寸标签输入框Input框高度
|
|
45
|
+
$height-tagInput_input_large: 24px; // 大尺寸标签输入框Input框高度
|
|
43
46
|
|
|
44
47
|
$width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
|
|
45
48
|
$width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
|