@douyinfe/semi-foundation 2.16.0-beta.0 → 2.16.0

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.
Files changed (21) hide show
  1. package/input/input.scss +39 -9
  2. package/input/textarea.scss +2 -2
  3. package/lib/cjs/input/input.css +29 -1
  4. package/lib/cjs/input/input.scss +39 -9
  5. package/lib/cjs/input/textarea.css +2 -2
  6. package/lib/cjs/input/textarea.scss +2 -2
  7. package/lib/cjs/select/select.css +2 -2
  8. package/lib/cjs/select/variables.scss +4 -4
  9. package/lib/cjs/typography/typography.css +0 -7
  10. package/lib/cjs/typography/typography.scss +1 -9
  11. package/lib/es/input/input.css +29 -1
  12. package/lib/es/input/input.scss +39 -9
  13. package/lib/es/input/textarea.css +2 -2
  14. package/lib/es/input/textarea.scss +2 -2
  15. package/lib/es/select/select.css +2 -2
  16. package/lib/es/select/variables.scss +4 -4
  17. package/lib/es/typography/typography.css +0 -7
  18. package/lib/es/typography/typography.scss +1 -9
  19. package/package.json +2 -2
  20. package/select/variables.scss +4 -4
  21. package/typography/typography.scss +1 -9
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-focus;
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
- // &:active {
104
- // background-color: $color-input_danger-bg-active;
105
- // border-color: $color-input_danger-border-active;
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
- // &:active {
124
- // background-color: $color-input_warning-bg-active;
125
- // border-color: $color-input_warning-border-active;
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,
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-active;
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-active;
113
+ border-color: $color-input_warning-border-focus;
114
114
  }
115
115
  }
116
116
 
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-0);
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
  }
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-focus;
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
- // &:active {
104
- // background-color: $color-input_danger-bg-active;
105
- // border-color: $color-input_danger-border-active;
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
- // &:active {
124
- // background-color: $color-input_warning-bg-active;
125
- // border-color: $color-input_warning-border-active;
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,
package/lib/cjs/input/textarea.css CHANGED
@@ -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-light-active);
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-light-active);
91
+ border-color: var(--semi-color-warning);
92
92
  }
93
93
 
94
94
  .semi-input-textarea {
package/lib/cjs/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-active;
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-active;
113
+ border-color: $color-input_warning-border-focus;
114
114
  }
115
115
  }
116
116
 
package/lib/cjs/select/select.css CHANGED
@@ -283,11 +283,11 @@
283
283
  align-items: center;
284
284
  }
285
285
  .semi-select-prefix-text, .semi-select-suffix-text {
286
- margin: 0 12px;
286
+ margin: 0px 12px;
287
287
  }
288
288
  .semi-select-prefix-icon, .semi-select-suffix-icon {
289
289
  color: var(--semi-color-text-2);
290
- margin: 0 8px;
290
+ margin: 0px 8px;
291
291
  }
292
292
  .semi-select-suffix {
293
293
  display: flex;
package/lib/cjs/select/variables.scss CHANGED
@@ -58,16 +58,16 @@ $width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
58
58
  $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
59
59
  $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
60
60
  $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
61
- $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
61
+ $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小宽度
62
62
  $width-select-border-hover: $width-select-border; // 选择器输入框描边宽度 - 悬浮
63
63
  $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
64
64
  $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
65
65
  // Spacing
66
66
  $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
67
67
  $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
68
- $spacing-select_prefix_suffix_text-marginY: 0; // 选择器输入框前后缀文本垂直内边距
68
+ $spacing-select_prefix_suffix_text-marginY: 0px; // 选择器输入框前后缀文本垂直内边距
69
69
  $spacing-select_prefix_suffix_icon-marginX: $spacing-tight; // 选择器输入框前后缀图标水平内边距
70
- $spacing-select_prefix_suffix_icon-marginY: 0; // 选择器输入框前后缀图标垂直内边距
70
+ $spacing-select_prefix_suffix_icon-marginY: 0px; // 选择器输入框前后缀图标垂直内边距
71
71
  $spacing-select_create_tips-marginRight: $spacing-extra-tight; // 创建新选项右侧外边距
72
72
  $spacing-select_group-marginTop: $spacing-extra-tight; // 选择器菜单分组标题顶部外边距
73
73
  $spacing-select_group-paddingTop: $spacing-base-tight; // 选择器菜单分组标题顶部内边距
@@ -106,5 +106,5 @@ $font-select_inset_label-fontWeight: 600; // 选择器内嵌标签文本字重
106
106
  $font-select_keyword-fontWeight: 600; // 选择器搜索结果命关键词中文本字重
107
107
 
108
108
  // Other
109
- $opacity-select_selection_text_inactive: .4;
109
+ $opacity-select_selection_text_inactive: 0.4;
110
110
 
package/lib/cjs/typography/typography.css CHANGED
@@ -7,12 +7,6 @@
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
9
  }
10
- .semi-typography-text {
11
- display: inline-block;
12
- }
13
- .semi-typography-text-icon {
14
- display: inline-flex;
15
- }
16
10
  .semi-typography.semi-typography-secondary {
17
11
  color: var(--semi-color-text-1);
18
12
  }
@@ -44,7 +38,6 @@
44
38
  color: var(--semi-color-link);
45
39
  }
46
40
  .semi-typography-icon {
47
- display: inline-flex;
48
41
  margin-right: 4px;
49
42
  vertical-align: middle;
50
43
  color: inherit;
package/lib/cjs/typography/typography.scss CHANGED
@@ -6,14 +6,6 @@ $module: #{$prefix}-typography;
6
6
  color: $color-typography_default-text-default;
7
7
  @include font-size-regular;
8
8
 
9
- &-text {
10
- display: inline-block;
11
-
12
- &-icon {
13
- display: inline-flex;
14
- }
15
- }
16
-
17
9
  &.#{$module}-secondary {
18
10
  color: $color-typography_secondary-text-default;
19
11
  }
@@ -53,7 +45,7 @@ $module: #{$prefix}-typography;
53
45
  }
54
46
 
55
47
  &-icon {
56
- display: inline-flex;
48
+ // display: inline-flex;
57
49
  margin-right: $spacing-typography_iconPrefix-marginRight;
58
50
  vertical-align: middle;
59
51
  color: inherit;
package/lib/es/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-0);
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
  }
package/lib/es/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-focus;
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
- // &:active {
104
- // background-color: $color-input_danger-bg-active;
105
- // border-color: $color-input_danger-border-active;
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
- // &:active {
124
- // background-color: $color-input_warning-bg-active;
125
- // border-color: $color-input_warning-border-active;
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,
package/lib/es/input/textarea.css CHANGED
@@ -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-light-active);
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-light-active);
91
+ border-color: var(--semi-color-warning);
92
92
  }
93
93
 
94
94
  .semi-input-textarea {
package/lib/es/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-active;
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-active;
113
+ border-color: $color-input_warning-border-focus;
114
114
  }
115
115
  }
116
116
 
package/lib/es/select/select.css CHANGED
@@ -283,11 +283,11 @@
283
283
  align-items: center;
284
284
  }
285
285
  .semi-select-prefix-text, .semi-select-suffix-text {
286
- margin: 0 12px;
286
+ margin: 0px 12px;
287
287
  }
288
288
  .semi-select-prefix-icon, .semi-select-suffix-icon {
289
289
  color: var(--semi-color-text-2);
290
- margin: 0 8px;
290
+ margin: 0px 8px;
291
291
  }
292
292
  .semi-select-suffix {
293
293
  display: flex;
package/lib/es/select/variables.scss CHANGED
@@ -58,16 +58,16 @@ $width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
58
58
  $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
59
59
  $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
60
60
  $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
61
- $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
61
+ $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小宽度
62
62
  $width-select-border-hover: $width-select-border; // 选择器输入框描边宽度 - 悬浮
63
63
  $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
64
64
  $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
65
65
  // Spacing
66
66
  $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
67
67
  $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
68
- $spacing-select_prefix_suffix_text-marginY: 0; // 选择器输入框前后缀文本垂直内边距
68
+ $spacing-select_prefix_suffix_text-marginY: 0px; // 选择器输入框前后缀文本垂直内边距
69
69
  $spacing-select_prefix_suffix_icon-marginX: $spacing-tight; // 选择器输入框前后缀图标水平内边距
70
- $spacing-select_prefix_suffix_icon-marginY: 0; // 选择器输入框前后缀图标垂直内边距
70
+ $spacing-select_prefix_suffix_icon-marginY: 0px; // 选择器输入框前后缀图标垂直内边距
71
71
  $spacing-select_create_tips-marginRight: $spacing-extra-tight; // 创建新选项右侧外边距
72
72
  $spacing-select_group-marginTop: $spacing-extra-tight; // 选择器菜单分组标题顶部外边距
73
73
  $spacing-select_group-paddingTop: $spacing-base-tight; // 选择器菜单分组标题顶部内边距
@@ -106,5 +106,5 @@ $font-select_inset_label-fontWeight: 600; // 选择器内嵌标签文本字重
106
106
  $font-select_keyword-fontWeight: 600; // 选择器搜索结果命关键词中文本字重
107
107
 
108
108
  // Other
109
- $opacity-select_selection_text_inactive: .4;
109
+ $opacity-select_selection_text_inactive: 0.4;
110
110
 
package/lib/es/typography/typography.css CHANGED
@@ -7,12 +7,6 @@
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
9
  }
10
- .semi-typography-text {
11
- display: inline-block;
12
- }
13
- .semi-typography-text-icon {
14
- display: inline-flex;
15
- }
16
10
  .semi-typography.semi-typography-secondary {
17
11
  color: var(--semi-color-text-1);
18
12
  }
@@ -44,7 +38,6 @@
44
38
  color: var(--semi-color-link);
45
39
  }
46
40
  .semi-typography-icon {
47
- display: inline-flex;
48
41
  margin-right: 4px;
49
42
  vertical-align: middle;
50
43
  color: inherit;
package/lib/es/typography/typography.scss CHANGED
@@ -6,14 +6,6 @@ $module: #{$prefix}-typography;
6
6
  color: $color-typography_default-text-default;
7
7
  @include font-size-regular;
8
8
 
9
- &-text {
10
- display: inline-block;
11
-
12
- &-icon {
13
- display: inline-flex;
14
- }
15
- }
16
-
17
9
  &.#{$module}-secondary {
18
10
  color: $color-typography_secondary-text-default;
19
11
  }
@@ -53,7 +45,7 @@ $module: #{$prefix}-typography;
53
45
  }
54
46
 
55
47
  &-icon {
56
- display: inline-flex;
48
+ // display: inline-flex;
57
49
  margin-right: $spacing-typography_iconPrefix-marginRight;
58
50
  vertical-align: middle;
59
51
  color: inherit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.16.0-beta.0",
3
+ "version": "2.16.0",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
@@ -24,7 +24,7 @@
24
24
  "*.scss",
25
25
  "*.css"
26
26
  ],
27
- "gitHead": "e2cb837fd9d77bd14f32f8bee74c16bcdf0d9196",
27
+ "gitHead": "71f3e6a9ae6f7794c993617dd3d94f565539ac49",
28
28
  "devDependencies": {
29
29
  "@babel/plugin-proposal-decorators": "^7.15.8",
30
30
  "@babel/plugin-transform-runtime": "^7.15.8",
package/select/variables.scss CHANGED
@@ -58,16 +58,16 @@ $width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
58
58
  $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
59
59
  $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
60
60
  $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
61
- $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
61
+ $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小宽度
62
62
  $width-select-border-hover: $width-select-border; // 选择器输入框描边宽度 - 悬浮
63
63
  $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
64
64
  $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
65
65
  // Spacing
66
66
  $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
67
67
  $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
68
- $spacing-select_prefix_suffix_text-marginY: 0; // 选择器输入框前后缀文本垂直内边距
68
+ $spacing-select_prefix_suffix_text-marginY: 0px; // 选择器输入框前后缀文本垂直内边距
69
69
  $spacing-select_prefix_suffix_icon-marginX: $spacing-tight; // 选择器输入框前后缀图标水平内边距
70
- $spacing-select_prefix_suffix_icon-marginY: 0; // 选择器输入框前后缀图标垂直内边距
70
+ $spacing-select_prefix_suffix_icon-marginY: 0px; // 选择器输入框前后缀图标垂直内边距
71
71
  $spacing-select_create_tips-marginRight: $spacing-extra-tight; // 创建新选项右侧外边距
72
72
  $spacing-select_group-marginTop: $spacing-extra-tight; // 选择器菜单分组标题顶部外边距
73
73
  $spacing-select_group-paddingTop: $spacing-base-tight; // 选择器菜单分组标题顶部内边距
@@ -106,5 +106,5 @@ $font-select_inset_label-fontWeight: 600; // 选择器内嵌标签文本字重
106
106
  $font-select_keyword-fontWeight: 600; // 选择器搜索结果命关键词中文本字重
107
107
 
108
108
  // Other
109
- $opacity-select_selection_text_inactive: .4;
109
+ $opacity-select_selection_text_inactive: 0.4;
110
110
 
package/typography/typography.scss CHANGED
@@ -6,14 +6,6 @@ $module: #{$prefix}-typography;
6
6
  color: $color-typography_default-text-default;
7
7
  @include font-size-regular;
8
8
 
9
- &-text {
10
- display: inline-block;
11
-
12
- &-icon {
13
- display: inline-flex;
14
- }
15
- }
16
-
17
9
  &.#{$module}-secondary {
18
10
  color: $color-typography_secondary-text-default;
19
11
  }
@@ -53,7 +45,7 @@ $module: #{$prefix}-typography;
53
45
  }
54
46
 
55
47
  &-icon {
56
- display: inline-flex;
48
+ // display: inline-flex;
57
49
  margin-right: $spacing-typography_iconPrefix-marginRight;
58
50
  vertical-align: middle;
59
51
  color: inherit;