@douyinfe/semi-foundation 2.15.2-alpha.0 → 2.16.1
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/dropdown/menuFoundation.ts +4 -2
- package/input/input.scss +44 -9
- package/input/textarea.scss +2 -2
- package/lib/cjs/dropdown/menuFoundation.js +6 -3
- package/lib/cjs/input/input.css +32 -1
- package/lib/cjs/input/input.scss +44 -9
- package/lib/cjs/input/textarea.css +2 -2
- package/lib/cjs/input/textarea.scss +2 -2
- package/lib/cjs/radio/radio.css +75 -20
- package/lib/cjs/radio/radio.scss +36 -22
- package/lib/cjs/radio/rtl.scss +47 -0
- package/lib/cjs/select/select.css +2 -2
- package/lib/cjs/select/variables.scss +4 -4
- package/lib/cjs/slider/foundation.d.ts +9 -2
- package/lib/cjs/slider/foundation.js +195 -5
- package/lib/cjs/slider/slider.css +3 -0
- package/lib/cjs/slider/slider.scss +7 -5
- package/lib/cjs/slider/variables.scss +4 -4
- package/lib/cjs/switch/switch.css +2 -2
- package/lib/cjs/switch/switch.scss +2 -2
- package/lib/cjs/timePicker/foundation.d.ts +1 -1
- package/lib/cjs/timePicker/foundation.js +1 -1
- package/lib/cjs/tooltip/variables.scss +1 -1
- package/lib/cjs/treeSelect/treeSelect.css +2 -0
- package/lib/cjs/treeSelect/treeSelect.scss +2 -0
- package/lib/es/dropdown/menuFoundation.js +6 -3
- package/lib/es/input/input.css +32 -1
- package/lib/es/input/input.scss +44 -9
- package/lib/es/input/textarea.css +2 -2
- package/lib/es/input/textarea.scss +2 -2
- package/lib/es/radio/radio.css +75 -20
- package/lib/es/radio/radio.scss +36 -22
- package/lib/es/radio/rtl.scss +47 -0
- package/lib/es/select/select.css +2 -2
- package/lib/es/select/variables.scss +4 -4
- package/lib/es/slider/foundation.d.ts +9 -2
- package/lib/es/slider/foundation.js +192 -5
- package/lib/es/slider/slider.css +3 -0
- package/lib/es/slider/slider.scss +7 -5
- package/lib/es/slider/variables.scss +4 -4
- package/lib/es/switch/switch.css +2 -2
- package/lib/es/switch/switch.scss +2 -2
- package/lib/es/timePicker/foundation.d.ts +1 -1
- package/lib/es/timePicker/foundation.js +1 -1
- package/lib/es/tooltip/variables.scss +1 -1
- package/lib/es/treeSelect/treeSelect.css +2 -0
- package/lib/es/treeSelect/treeSelect.scss +2 -0
- package/package.json +2 -2
- package/radio/radio.scss +36 -22
- package/radio/rtl.scss +47 -0
- package/select/variables.scss +4 -4
- package/slider/foundation.ts +141 -9
- package/slider/slider.scss +7 -5
- package/slider/variables.scss +4 -4
- package/switch/switch.scss +2 -2
- package/timePicker/foundation.ts +1 -1
- package/tooltip/variables.scss +1 -1
- package/treeSelect/treeSelect.scss +2 -0
- package/utils/a11y.ts +2 -2
|
@@ -42,7 +42,8 @@ export default class DropdownMenuFoundation extends BaseFoundation<Partial<Defau
|
|
|
42
42
|
|
|
43
43
|
if (this.firstChars.length === 0){
|
|
44
44
|
this.menuItemNodes.forEach((item: Element) => {
|
|
45
|
-
|
|
45
|
+
// the menuItemNodes can be an component and not exit textContent
|
|
46
|
+
this.firstChars.push(item.textContent.trim()[0]?.toLowerCase());
|
|
46
47
|
});
|
|
47
48
|
}
|
|
48
49
|
|
|
@@ -69,7 +70,8 @@ export default class DropdownMenuFoundation extends BaseFoundation<Partial<Defau
|
|
|
69
70
|
default:
|
|
70
71
|
if (isPrintableCharacter(event.key)) {
|
|
71
72
|
this.setFocusByFirstCharacter(curItem, event.key);
|
|
72
|
-
handlePrevent
|
|
73
|
+
// it can be an input on Dropdown, handlePrevent may affect the input of the component
|
|
74
|
+
// handlePrevent(event);
|
|
73
75
|
}
|
|
74
76
|
break;
|
|
75
77
|
}
|
package/input/input.scss
CHANGED
|
@@ -77,7 +77,7 @@ $module: #{$prefix}-input;
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
&:active {
|
|
80
|
-
background-color: $color-input_default-bg-
|
|
80
|
+
background-color: $color-input_default-bg-active;
|
|
81
81
|
border-color: $color-input_default-border-focus;
|
|
82
82
|
}
|
|
83
83
|
}
|
|
@@ -100,10 +100,10 @@ $module: #{$prefix}-input;
|
|
|
100
100
|
border-color: $color-input_danger-border-focus;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
103
|
+
&:active {
|
|
104
|
+
background-color: $color-input_danger-bg-active;
|
|
105
|
+
border-color: $color-input_danger-border-focus;
|
|
106
|
+
}
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
&-warning {
|
|
@@ -120,10 +120,10 @@ $module: #{$prefix}-input;
|
|
|
120
120
|
border-color: $color-input_warning-border-focus;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
123
|
+
&:active {
|
|
124
|
+
background-color: $color-input_warning-bg-active;
|
|
125
|
+
border-color: $color-input_warning-border-focus;
|
|
126
|
+
}
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
&__with-prefix {
|
|
@@ -288,6 +288,16 @@ $module: #{$prefix}-input;
|
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
290
|
|
|
291
|
+
// when have prepend and append, only make the input have active bg color
|
|
292
|
+
&:active {
|
|
293
|
+
background-color: $color-input_default-bg-active;
|
|
294
|
+
|
|
295
|
+
& + .#{$module}-clearbtn,
|
|
296
|
+
& ~ .#{$module}-modebtn {
|
|
297
|
+
background-color: $color-input_default-bg-active;
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
|
|
291
301
|
&-clearbtn,
|
|
292
302
|
&-modebtn,
|
|
293
303
|
&-clearbtn:hover,
|
|
@@ -328,6 +338,16 @@ $module: #{$prefix}-input;
|
|
|
328
338
|
}
|
|
329
339
|
}
|
|
330
340
|
|
|
341
|
+
&:active {
|
|
342
|
+
background-color: $color-input_danger-bg-active;
|
|
343
|
+
|
|
344
|
+
& + .#{$module}-clearbtn,
|
|
345
|
+
& + .#{$module}-modebtn {
|
|
346
|
+
background-color: $color-input_danger-bg-active;
|
|
347
|
+
border-color: $color-input_danger-border-focus;
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
|
|
331
351
|
&-clearbtn,
|
|
332
352
|
&-modebtn,
|
|
333
353
|
&-clearbtn:hover,
|
|
@@ -369,6 +389,16 @@ $module: #{$prefix}-input;
|
|
|
369
389
|
}
|
|
370
390
|
}
|
|
371
391
|
|
|
392
|
+
&:active {
|
|
393
|
+
background-color: $color-input_warning-bg-active;
|
|
394
|
+
|
|
395
|
+
& + .#{$module}-clearbtn,
|
|
396
|
+
& + .#{$module}-modebtn {
|
|
397
|
+
background-color: $color-input_warning-bg-active;
|
|
398
|
+
border-color: $color-input_warning-border-focus;
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
|
|
372
402
|
&-clearbtn,
|
|
373
403
|
&-modebtn,
|
|
374
404
|
&-clearbtn:hover,
|
|
@@ -415,6 +445,11 @@ $module: #{$prefix}-input;
|
|
|
415
445
|
background-color: transparent;
|
|
416
446
|
box-sizing: border-box;
|
|
417
447
|
|
|
448
|
+
&[type="password"]::-ms-reveal,
|
|
449
|
+
&[type="password"]::-ms-clear {
|
|
450
|
+
display: none;
|
|
451
|
+
}
|
|
452
|
+
|
|
418
453
|
&::placeholder {
|
|
419
454
|
color: $color-input_placeholder-text-default;
|
|
420
455
|
}
|
package/input/textarea.scss
CHANGED
|
@@ -90,7 +90,7 @@ $module: #{$prefix}-input;
|
|
|
90
90
|
|
|
91
91
|
&:active {
|
|
92
92
|
background-color: $color-input_danger-bg-active;
|
|
93
|
-
border-color: $color-input_danger-border-
|
|
93
|
+
border-color: $color-input_danger-border-focus;
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
@@ -110,7 +110,7 @@ $module: #{$prefix}-input;
|
|
|
110
110
|
|
|
111
111
|
&:active {
|
|
112
112
|
background-color: $color-input_warning-bg-active;
|
|
113
|
-
border-color: $color-input_warning-border-
|
|
113
|
+
border-color: $color-input_warning-border-focus;
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
|
|
@@ -76,7 +76,10 @@ class DropdownMenuFoundation extends _foundation.default {
|
|
|
76
76
|
(0, _forEach.default)(_context3 = this.menuItemNodes).call(_context3, item => {
|
|
77
77
|
var _context4;
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
var _a; // the menuItemNodes can be an component and not exit textContent
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
this.firstChars.push((_a = (0, _trim.default)(_context4 = item.textContent).call(_context4)[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
|
|
80
83
|
});
|
|
81
84
|
} // get the currently focused menu item
|
|
82
85
|
|
|
@@ -106,8 +109,8 @@ class DropdownMenuFoundation extends _foundation.default {
|
|
|
106
109
|
|
|
107
110
|
default:
|
|
108
111
|
if ((0, _a11y.isPrintableCharacter)(event.key)) {
|
|
109
|
-
this.setFocusByFirstCharacter(curItem, event.key);
|
|
110
|
-
|
|
112
|
+
this.setFocusByFirstCharacter(curItem, event.key); // it can be an input on Dropdown, handlePrevent may affect the input of the component
|
|
113
|
+
// handlePrevent(event);
|
|
111
114
|
}
|
|
112
115
|
|
|
113
116
|
break;
|
package/lib/cjs/input/input.css
CHANGED
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
border-color: var(--semi-color-focus-border);
|
|
69
69
|
}
|
|
70
70
|
.semi-input-wrapper-focus:active {
|
|
71
|
-
background-color: var(--semi-color-fill-
|
|
71
|
+
background-color: var(--semi-color-fill-2);
|
|
72
72
|
border-color: var(--semi-color-focus-border);
|
|
73
73
|
}
|
|
74
74
|
.semi-input-wrapper.semi-input-readonly {
|
|
@@ -86,6 +86,10 @@
|
|
|
86
86
|
background-color: var(--semi-color-danger-light-default);
|
|
87
87
|
border-color: var(--semi-color-danger);
|
|
88
88
|
}
|
|
89
|
+
.semi-input-wrapper-error:active {
|
|
90
|
+
background-color: var(--semi-color-danger-light-active);
|
|
91
|
+
border-color: var(--semi-color-danger);
|
|
92
|
+
}
|
|
89
93
|
.semi-input-wrapper-warning {
|
|
90
94
|
background-color: var(--semi-color-warning-light-default);
|
|
91
95
|
border-color: var(--semi-color-warning-light-default);
|
|
@@ -98,6 +102,10 @@
|
|
|
98
102
|
background-color: var(--semi-color-warning-light-default);
|
|
99
103
|
border-color: var(--semi-color-warning);
|
|
100
104
|
}
|
|
105
|
+
.semi-input-wrapper-warning:active {
|
|
106
|
+
background-color: var(--semi-color-warning-light-active);
|
|
107
|
+
border-color: var(--semi-color-warning);
|
|
108
|
+
}
|
|
101
109
|
.semi-input-wrapper__with-prefix {
|
|
102
110
|
display: inline-flex;
|
|
103
111
|
align-items: center;
|
|
@@ -218,6 +226,12 @@
|
|
|
218
226
|
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
|
|
219
227
|
border-radius: 0;
|
|
220
228
|
}
|
|
229
|
+
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
|
|
230
|
+
background-color: var(--semi-color-fill-2);
|
|
231
|
+
}
|
|
232
|
+
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
|
|
233
|
+
background-color: var(--semi-color-fill-2);
|
|
234
|
+
}
|
|
221
235
|
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
|
|
222
236
|
background-color: var(--semi-color-fill-0);
|
|
223
237
|
}
|
|
@@ -246,6 +260,13 @@
|
|
|
246
260
|
background-color: var(--semi-color-danger-light-default);
|
|
247
261
|
border-color: var(--semi-color-danger);
|
|
248
262
|
}
|
|
263
|
+
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active {
|
|
264
|
+
background-color: var(--semi-color-danger-light-active);
|
|
265
|
+
}
|
|
266
|
+
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn {
|
|
267
|
+
background-color: var(--semi-color-danger-light-active);
|
|
268
|
+
border-color: var(--semi-color-danger);
|
|
269
|
+
}
|
|
249
270
|
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover {
|
|
250
271
|
background-color: var(--semi-color-danger-light-default);
|
|
251
272
|
}
|
|
@@ -274,6 +295,13 @@
|
|
|
274
295
|
background-color: var(--semi-color-warning-light-default);
|
|
275
296
|
border-color: var(--semi-color-warning);
|
|
276
297
|
}
|
|
298
|
+
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active {
|
|
299
|
+
background-color: var(--semi-color-warning-light-active);
|
|
300
|
+
}
|
|
301
|
+
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn {
|
|
302
|
+
background-color: var(--semi-color-warning-light-active);
|
|
303
|
+
border-color: var(--semi-color-warning);
|
|
304
|
+
}
|
|
277
305
|
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover {
|
|
278
306
|
background-color: var(--semi-color-warning-light-default);
|
|
279
307
|
}
|
|
@@ -307,6 +335,9 @@
|
|
|
307
335
|
background-color: transparent;
|
|
308
336
|
box-sizing: border-box;
|
|
309
337
|
}
|
|
338
|
+
.semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear {
|
|
339
|
+
display: none;
|
|
340
|
+
}
|
|
310
341
|
.semi-input::placeholder {
|
|
311
342
|
color: var(--semi-color-text-2);
|
|
312
343
|
}
|
package/lib/cjs/input/input.scss
CHANGED
|
@@ -77,7 +77,7 @@ $module: #{$prefix}-input;
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
&:active {
|
|
80
|
-
background-color: $color-input_default-bg-
|
|
80
|
+
background-color: $color-input_default-bg-active;
|
|
81
81
|
border-color: $color-input_default-border-focus;
|
|
82
82
|
}
|
|
83
83
|
}
|
|
@@ -100,10 +100,10 @@ $module: #{$prefix}-input;
|
|
|
100
100
|
border-color: $color-input_danger-border-focus;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
103
|
+
&:active {
|
|
104
|
+
background-color: $color-input_danger-bg-active;
|
|
105
|
+
border-color: $color-input_danger-border-focus;
|
|
106
|
+
}
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
&-warning {
|
|
@@ -120,10 +120,10 @@ $module: #{$prefix}-input;
|
|
|
120
120
|
border-color: $color-input_warning-border-focus;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
123
|
+
&:active {
|
|
124
|
+
background-color: $color-input_warning-bg-active;
|
|
125
|
+
border-color: $color-input_warning-border-focus;
|
|
126
|
+
}
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
&__with-prefix {
|
|
@@ -288,6 +288,16 @@ $module: #{$prefix}-input;
|
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
290
|
|
|
291
|
+
// when have prepend and append, only make the input have active bg color
|
|
292
|
+
&:active {
|
|
293
|
+
background-color: $color-input_default-bg-active;
|
|
294
|
+
|
|
295
|
+
& + .#{$module}-clearbtn,
|
|
296
|
+
& ~ .#{$module}-modebtn {
|
|
297
|
+
background-color: $color-input_default-bg-active;
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
|
|
291
301
|
&-clearbtn,
|
|
292
302
|
&-modebtn,
|
|
293
303
|
&-clearbtn:hover,
|
|
@@ -328,6 +338,16 @@ $module: #{$prefix}-input;
|
|
|
328
338
|
}
|
|
329
339
|
}
|
|
330
340
|
|
|
341
|
+
&:active {
|
|
342
|
+
background-color: $color-input_danger-bg-active;
|
|
343
|
+
|
|
344
|
+
& + .#{$module}-clearbtn,
|
|
345
|
+
& + .#{$module}-modebtn {
|
|
346
|
+
background-color: $color-input_danger-bg-active;
|
|
347
|
+
border-color: $color-input_danger-border-focus;
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
|
|
331
351
|
&-clearbtn,
|
|
332
352
|
&-modebtn,
|
|
333
353
|
&-clearbtn:hover,
|
|
@@ -369,6 +389,16 @@ $module: #{$prefix}-input;
|
|
|
369
389
|
}
|
|
370
390
|
}
|
|
371
391
|
|
|
392
|
+
&:active {
|
|
393
|
+
background-color: $color-input_warning-bg-active;
|
|
394
|
+
|
|
395
|
+
& + .#{$module}-clearbtn,
|
|
396
|
+
& + .#{$module}-modebtn {
|
|
397
|
+
background-color: $color-input_warning-bg-active;
|
|
398
|
+
border-color: $color-input_warning-border-focus;
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
|
|
372
402
|
&-clearbtn,
|
|
373
403
|
&-modebtn,
|
|
374
404
|
&-clearbtn:hover,
|
|
@@ -415,6 +445,11 @@ $module: #{$prefix}-input;
|
|
|
415
445
|
background-color: transparent;
|
|
416
446
|
box-sizing: border-box;
|
|
417
447
|
|
|
448
|
+
&[type="password"]::-ms-reveal,
|
|
449
|
+
&[type="password"]::-ms-clear {
|
|
450
|
+
display: none;
|
|
451
|
+
}
|
|
452
|
+
|
|
418
453
|
&::placeholder {
|
|
419
454
|
color: $color-input_placeholder-text-default;
|
|
420
455
|
}
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
}
|
|
73
73
|
.semi-input-textarea-wrapper-error:active {
|
|
74
74
|
background-color: var(--semi-color-danger-light-active);
|
|
75
|
-
border-color: var(--semi-color-danger
|
|
75
|
+
border-color: var(--semi-color-danger);
|
|
76
76
|
}
|
|
77
77
|
.semi-input-textarea-wrapper-warning {
|
|
78
78
|
background-color: var(--semi-color-warning-light-default);
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
}
|
|
89
89
|
.semi-input-textarea-wrapper-warning:active {
|
|
90
90
|
background-color: var(--semi-color-warning-light-active);
|
|
91
|
-
border-color: var(--semi-color-warning
|
|
91
|
+
border-color: var(--semi-color-warning);
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
.semi-input-textarea {
|
|
@@ -90,7 +90,7 @@ $module: #{$prefix}-input;
|
|
|
90
90
|
|
|
91
91
|
&:active {
|
|
92
92
|
background-color: $color-input_danger-bg-active;
|
|
93
|
-
border-color: $color-input_danger-border-
|
|
93
|
+
border-color: $color-input_danger-border-focus;
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
@@ -110,7 +110,7 @@ $module: #{$prefix}-input;
|
|
|
110
110
|
|
|
111
111
|
&:active {
|
|
112
112
|
background-color: $color-input_warning-bg-active;
|
|
113
|
-
border-color: $color-input_warning-border-
|
|
113
|
+
border-color: $color-input_warning-border-focus;
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
|
package/lib/cjs/radio/radio.css
CHANGED
|
@@ -6,8 +6,9 @@
|
|
|
6
6
|
font-size: 14px;
|
|
7
7
|
line-height: 20px;
|
|
8
8
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
9
|
+
position: relative;
|
|
9
10
|
display: inline-flex;
|
|
10
|
-
|
|
11
|
+
flex-wrap: wrap;
|
|
11
12
|
min-height: 20px;
|
|
12
13
|
min-width: 16px;
|
|
13
14
|
cursor: pointer;
|
|
@@ -55,7 +56,6 @@
|
|
|
55
56
|
border-radius: var(--semi-border-radius-small);
|
|
56
57
|
}
|
|
57
58
|
.semi-radio-buttonRadioGroup {
|
|
58
|
-
position: relative;
|
|
59
59
|
padding: 4px;
|
|
60
60
|
border-radius: var(--semi-border-radius-small);
|
|
61
61
|
line-height: 16px;
|
|
@@ -79,6 +79,7 @@
|
|
|
79
79
|
border: 1px solid transparent;
|
|
80
80
|
}
|
|
81
81
|
.semi-radio-cardRadioGroup .semi-radio-inner {
|
|
82
|
+
position: relative;
|
|
82
83
|
margin-right: 8px;
|
|
83
84
|
flex-shrink: 0;
|
|
84
85
|
}
|
|
@@ -148,18 +149,19 @@
|
|
|
148
149
|
border-color: var(--semi-color-primary-disabled);
|
|
149
150
|
}
|
|
150
151
|
.semi-radio-inner {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
152
|
+
position: absolute;
|
|
153
|
+
display: inline-block;
|
|
154
|
+
top: 2px;
|
|
155
|
+
left: 0;
|
|
154
156
|
width: 16px;
|
|
155
157
|
height: 16px;
|
|
156
158
|
vertical-align: sub;
|
|
157
159
|
user-select: none;
|
|
158
160
|
}
|
|
159
161
|
.semi-radio-inner-display {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
162
|
+
position: absolute;
|
|
163
|
+
left: 0;
|
|
164
|
+
top: 0;
|
|
163
165
|
box-sizing: border-box;
|
|
164
166
|
width: 16px;
|
|
165
167
|
height: 16px;
|
|
@@ -168,14 +170,11 @@
|
|
|
168
170
|
background: transparent;
|
|
169
171
|
}
|
|
170
172
|
.semi-radio-inner-display .semi-icon {
|
|
173
|
+
position: absolute;
|
|
171
174
|
width: 100%;
|
|
172
175
|
height: 100%;
|
|
173
176
|
font-size: 14px;
|
|
174
177
|
}
|
|
175
|
-
.semi-radio-content {
|
|
176
|
-
display: flex;
|
|
177
|
-
flex-direction: column;
|
|
178
|
-
}
|
|
179
178
|
.semi-radio:hover .semi-radio-inner-display {
|
|
180
179
|
background: var(--semi-color-fill-0);
|
|
181
180
|
}
|
|
@@ -184,6 +183,8 @@
|
|
|
184
183
|
}
|
|
185
184
|
.semi-radio-addon {
|
|
186
185
|
user-select: none;
|
|
186
|
+
padding-left: 8px;
|
|
187
|
+
margin-left: 16px;
|
|
187
188
|
color: var(--semi-color-text-0);
|
|
188
189
|
display: inline-flex;
|
|
189
190
|
align-items: center;
|
|
@@ -272,7 +273,11 @@
|
|
|
272
273
|
color: var(--semi-color-disabled-text);
|
|
273
274
|
}
|
|
274
275
|
.semi-radio-extra {
|
|
276
|
+
flex-grow: 1;
|
|
277
|
+
flex-basis: 100%;
|
|
278
|
+
flex-shrink: 0;
|
|
275
279
|
color: var(--semi-color-text-2);
|
|
280
|
+
padding-left: 24px;
|
|
276
281
|
box-sizing: border-box;
|
|
277
282
|
}
|
|
278
283
|
.semi-radio-focus {
|
|
@@ -287,20 +292,25 @@
|
|
|
287
292
|
line-height: 20px;
|
|
288
293
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
289
294
|
}
|
|
290
|
-
.semi-radioGroup-vertical {
|
|
291
|
-
|
|
292
|
-
flex-direction: column;
|
|
293
|
-
row-gap: 12px;
|
|
295
|
+
.semi-radioGroup-vertical .semi-radio:last-of-type {
|
|
296
|
+
margin-bottom: 0;
|
|
294
297
|
}
|
|
295
298
|
.semi-radioGroup-vertical-default .semi-radio {
|
|
296
|
-
display:
|
|
299
|
+
display: block;
|
|
300
|
+
margin-bottom: 12px;
|
|
297
301
|
}
|
|
298
302
|
.semi-radioGroup-vertical-card .semi-radio {
|
|
299
303
|
display: flex;
|
|
304
|
+
margin-bottom: 16px;
|
|
300
305
|
}
|
|
301
|
-
.semi-radioGroup-horizontal {
|
|
302
|
-
|
|
303
|
-
|
|
306
|
+
.semi-radioGroup-horizontal .semi-radio {
|
|
307
|
+
margin-right: 16px;
|
|
308
|
+
}
|
|
309
|
+
.semi-radioGroup-horizontal .semi-radio:last-of-type {
|
|
310
|
+
margin-right: 0;
|
|
311
|
+
}
|
|
312
|
+
.semi-radioGroup-horizontal-default {
|
|
313
|
+
display: inline-block;
|
|
304
314
|
}
|
|
305
315
|
.semi-radioGroup-buttonRadio {
|
|
306
316
|
display: inline-block;
|
|
@@ -324,11 +334,56 @@
|
|
|
324
334
|
.semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
|
|
325
335
|
padding-left: 0;
|
|
326
336
|
}
|
|
337
|
+
.semi-rtl .semi-radio-inner,
|
|
338
|
+
.semi-portal-rtl .semi-radio-inner {
|
|
339
|
+
left: auto;
|
|
340
|
+
right: 0;
|
|
341
|
+
}
|
|
342
|
+
.semi-rtl .semi-radio-inner-display,
|
|
343
|
+
.semi-portal-rtl .semi-radio-inner-display {
|
|
344
|
+
left: auto;
|
|
345
|
+
right: 0;
|
|
346
|
+
}
|
|
347
|
+
.semi-rtl .semi-radio-addon,
|
|
348
|
+
.semi-portal-rtl .semi-radio-addon {
|
|
349
|
+
padding-left: 0;
|
|
350
|
+
margin-left: 0;
|
|
351
|
+
padding-right: 8px;
|
|
352
|
+
margin-right: 16px;
|
|
353
|
+
}
|
|
327
354
|
.semi-rtl .semi-radio-addon-buttonRadio,
|
|
328
355
|
.semi-portal-rtl .semi-radio-addon-buttonRadio {
|
|
329
356
|
margin-right: 0;
|
|
330
357
|
}
|
|
358
|
+
.semi-rtl .semi-radio-extra,
|
|
359
|
+
.semi-portal-rtl .semi-radio-extra {
|
|
360
|
+
padding-left: 0;
|
|
361
|
+
padding-right: 24px;
|
|
362
|
+
}
|
|
363
|
+
.semi-rtl-isCardRadioGroup .semi-radio-inner,
|
|
364
|
+
.semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
|
|
365
|
+
margin-right: 0;
|
|
366
|
+
margin-left: 8px;
|
|
367
|
+
}
|
|
368
|
+
.semi-rtl-isCardRadioGroup .semi-radio-addon,
|
|
369
|
+
.semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
|
|
370
|
+
margin-right: 0;
|
|
371
|
+
padding-right: 0;
|
|
372
|
+
}
|
|
373
|
+
.semi-rtl-isCardRadioGroup .semi-radio-extra,
|
|
374
|
+
.semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
|
|
375
|
+
padding-right: 0;
|
|
376
|
+
}
|
|
331
377
|
.semi-rtl .semi-radioGroup,
|
|
332
378
|
.semi-portal-rtl .semi-radioGroup {
|
|
333
379
|
direction: rtl;
|
|
380
|
+
}
|
|
381
|
+
.semi-rtl .semi-radioGroup-horizontal .semi-radio,
|
|
382
|
+
.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
|
|
383
|
+
margin-right: 0;
|
|
384
|
+
margin-left: 16px;
|
|
385
|
+
}
|
|
386
|
+
.semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
|
|
387
|
+
.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
|
|
388
|
+
margin-left: 0;
|
|
334
389
|
}
|