@douyinfe/semi-foundation 2.58.0-beta.0 → 2.58.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.
Files changed (22) hide show
  1. package/button/button.scss +68 -5
  2. package/button/variables.scss +15 -6
  3. package/lib/cjs/button/button.css +56 -7
  4. package/lib/cjs/button/button.scss +68 -5
  5. package/lib/cjs/button/variables.scss +15 -6
  6. package/lib/cjs/tabs/tabs.css +30 -0
  7. package/lib/cjs/tabs/tabs.scss +37 -0
  8. package/lib/cjs/tabs/variables.scss +11 -0
  9. package/lib/cjs/tree/tree.css +20 -20
  10. package/lib/cjs/tree/tree.scss +1 -1
  11. package/lib/es/button/button.css +56 -7
  12. package/lib/es/button/button.scss +68 -5
  13. package/lib/es/button/variables.scss +15 -6
  14. package/lib/es/tabs/tabs.css +30 -0
  15. package/lib/es/tabs/tabs.scss +37 -0
  16. package/lib/es/tabs/variables.scss +11 -0
  17. package/lib/es/tree/tree.css +20 -20
  18. package/lib/es/tree/tree.scss +1 -1
  19. package/package.json +3 -3
  20. package/tabs/tabs.scss +37 -0
  21. package/tabs/variables.scss +11 -0
  22. package/tree/tree.scss +1 -1
package/lib/cjs/tabs/tabs.scss CHANGED
@@ -11,6 +11,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
11
11
  box-sizing: border-box;
12
12
  position: relative;
13
13
 
14
+
14
15
  &-left {
15
16
  display: flex;
16
17
  flex-direction: row;
@@ -30,6 +31,39 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
30
31
  padding: $spacing-tabs_bar_extra-paddingY $spacing-tabs_bar_extra-paddingX;
31
32
  }
32
33
 
34
+ &-more-trigger{
35
+ display: inline-block;
36
+ cursor: pointer;
37
+ color: var(--semi-color-text-2);
38
+
39
+ &-content{
40
+ display: flex;
41
+ align-content: center;
42
+
43
+ &-icon:not(:not(&-icon)){ // increase priority
44
+ margin-top: $spacing-tabs_tab-more_trigger_icon-marginTop;
45
+ margin-bottom: $spacing-tabs_tab-more_trigger_icon-marginBottom;
46
+ margin-left: $spacing-tabs_tab-more_trigger_icon-marginLeft;
47
+ margin-right: $spacing-tabs_tab-more_trigger_icon-marginRight;
48
+ flex-shrink: 0;
49
+ display: flex;
50
+ align-items: center;
51
+ }
52
+ }
53
+
54
+ &-line{
55
+ padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
56
+ }
57
+
58
+ &-card{
59
+ padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
60
+ }
61
+
62
+ &-button{
63
+ padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
64
+ }
65
+ }
66
+
33
67
  .#{$module}-tab {
34
68
  @include font-size-regular;
35
69
  cursor: pointer;
@@ -656,6 +690,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
656
690
  &.#{$module}-tab-top {
657
691
 
658
692
  &.#{$module}-tab {
693
+ font-size: $font-tabs_bar_large-fontSize;
659
694
  padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
660
695
  transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
661
696
  color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
@@ -684,10 +719,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
684
719
  // }
685
720
 
686
721
  &-small {
722
+ font-size: $font-tabs_bar_small-fontSize;
687
723
  padding: $spacing-tabs_bar_line_tab_small-paddingTop $spacing-tabs_bar_line_tab_small-paddingRight $spacing-tabs_bar_line_tab_small-paddingBottom $spacing-tabs_bar_line_tab_small-paddingLeft;
688
724
  }
689
725
 
690
726
  &-medium {
727
+ font-size: $font-tabs_bar_medium-fontSize;
691
728
  padding: $spacing-tabs_bar_line_tab_medium-paddingTop $spacing-tabs_bar_line_tab_medium-paddingRight $spacing-tabs_bar_line_tab_medium-paddingBottom $spacing-tabs_bar_line_tab_medium-paddingLeft;
692
729
  }
693
730
  }
package/lib/cjs/tabs/variables.scss CHANGED
@@ -85,6 +85,11 @@ $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺
85
85
  $height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
86
86
  $font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高
87
87
 
88
+ $spacing-tabs_tab-more_trigger_icon-marginLeft: 8px;
89
+ $spacing-tabs_tab-more_trigger_icon-marginRight: 8px;
90
+ $spacing-tabs_tab-more_trigger_icon-marginTop: 0px;
91
+ $spacing-tabs_tab-more_trigger_icon-marginBottom: 0px;
92
+
88
93
  $spacing-tabs_tab-pane_arrow: 8px; //滚动折叠箭头内边距
89
94
  $spacing-tabs_bar_extra-paddingY: 0px; // 附加操作垂直内边距
90
95
  $spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距
@@ -139,3 +144,9 @@ $radius-tabs_tab_card: var(--semi-border-radius-small) var(--semi-border-radius-
139
144
  $radius-tabs_tab_card_left: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); // 垂直卡片式页签四向圆角
140
145
  $radius-tabs_tab_button: var(--semi-border-radius-small); // 按钮式页签圆角
141
146
 
147
+
148
+ $font-tabs_bar_large-fontSize: $font-size-regular; // 大号模式 字体大小
149
+ $font-tabs_bar_small-fontSize: $font-size-regular; // 小号模式 字体大小
150
+ $font-tabs_bar_medium-fontSize: $font-size-regular; // 中等模式 字体大小
151
+
152
+
package/lib/cjs/tree/tree.css CHANGED
@@ -245,64 +245,64 @@
245
245
  .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:hover, .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:active {
246
246
  background-color: transparent;
247
247
  }
248
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1 {
248
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-1 {
249
249
  padding-left: 8px;
250
250
  }
251
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2 {
251
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-2 {
252
252
  padding-left: 28px;
253
253
  }
254
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3 {
254
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-3 {
255
255
  padding-left: 48px;
256
256
  }
257
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4 {
257
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-4 {
258
258
  padding-left: 68px;
259
259
  }
260
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5 {
260
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-5 {
261
261
  padding-left: 88px;
262
262
  }
263
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6 {
263
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-6 {
264
264
  padding-left: 108px;
265
265
  }
266
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7 {
266
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-7 {
267
267
  padding-left: 128px;
268
268
  }
269
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8 {
269
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-8 {
270
270
  padding-left: 148px;
271
271
  }
272
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9 {
272
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-9 {
273
273
  padding-left: 168px;
274
274
  }
275
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10 {
275
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-10 {
276
276
  padding-left: 188px;
277
277
  }
278
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11 {
278
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-11 {
279
279
  padding-left: 208px;
280
280
  }
281
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12 {
281
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-12 {
282
282
  padding-left: 228px;
283
283
  }
284
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13 {
284
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-13 {
285
285
  padding-left: 248px;
286
286
  }
287
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14 {
287
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-14 {
288
288
  padding-left: 268px;
289
289
  }
290
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15 {
290
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-15 {
291
291
  padding-left: 288px;
292
292
  }
293
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16 {
293
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-16 {
294
294
  padding-left: 308px;
295
295
  }
296
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17 {
296
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-17 {
297
297
  padding-left: 328px;
298
298
  }
299
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18 {
299
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-18 {
300
300
  padding-left: 348px;
301
301
  }
302
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19 {
302
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-19 {
303
303
  padding-left: 368px;
304
304
  }
305
- .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20 {
305
+ .semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-20 {
306
306
  padding-left: 388px;
307
307
  }
308
308
  .semi-tree-option-list .semi-tree-option-empty:hover, .semi-tree-option-list .semi-tree-option-empty:active {
package/lib/cjs/tree/tree.scss CHANGED
@@ -330,7 +330,7 @@ $module: #{$prefix}-tree;
330
330
  }
331
331
 
332
332
  @for $i from 1 through 20 {
333
- li.#{$module}-option.#{$module}-option-fullLabel-level-#{$i} {
333
+ .#{$module}-option.#{$module}-option-fullLabel-level-#{$i} {
334
334
  padding-left: $spacing-tree_option_level-paddingLeft * ($i - 1) + $spacing-tree_option_level1-paddingLeft;
335
335
  }
336
336
  }
package/lib/es/button/button.css CHANGED
@@ -55,6 +55,10 @@
55
55
  .semi-button-danger-disabled {
56
56
  background-color: var(--semi-color-disabled-bg);
57
57
  }
58
+ .semi-button-danger-disabled.semi-button-outline {
59
+ background-color: transparent;
60
+ border: 1px solid var(--semi-color-border);
61
+ }
58
62
  .semi-button-danger-disabled.semi-button-light {
59
63
  background-color: var(--semi-color-fill-0);
60
64
  }
@@ -64,7 +68,11 @@
64
68
  .semi-button-danger:active {
65
69
  background-color: var(--semi-color-danger-active);
66
70
  }
67
- .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
71
+ .semi-button-danger.semi-button-outline {
72
+ background-color: transparent;
73
+ border: 1px solid var(--semi-color-danger);
74
+ }
75
+ .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-outline, .semi-button-danger.semi-button-borderless {
68
76
  color: var(--semi-color-danger);
69
77
  }
70
78
  .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -79,6 +87,10 @@
79
87
  .semi-button-warning-disabled {
80
88
  background-color: var(--semi-color-disabled-bg);
81
89
  }
90
+ .semi-button-warning-disabled.semi-button-outline {
91
+ background-color: transparent;
92
+ border: 1px solid var(--semi-color-border);
93
+ }
82
94
  .semi-button-warning-disabled.semi-button-light {
83
95
  background-color: var(--semi-color-fill-0);
84
96
  }
@@ -88,7 +100,11 @@
88
100
  .semi-button-warning:active {
89
101
  background-color: var(--semi-color-warning-active);
90
102
  }
91
- .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
103
+ .semi-button-warning.semi-button-outline {
104
+ background-color: transparent;
105
+ border: 1px solid var(--semi-color-warning);
106
+ }
107
+ .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-outline, .semi-button-warning.semi-button-borderless {
92
108
  color: var(--semi-color-warning);
93
109
  }
94
110
  .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -103,6 +119,10 @@
103
119
  .semi-button-tertiary-disabled {
104
120
  background-color: var(--semi-color-disabled-bg);
105
121
  }
122
+ .semi-button-tertiary-disabled.semi-button-outline {
123
+ background-color: transparent;
124
+ border: 1px solid var(--semi-color-border);
125
+ }
106
126
  .semi-button-tertiary-disabled.semi-button-light {
107
127
  background-color: var(--semi-color-fill-0);
108
128
  }
@@ -112,7 +132,11 @@
112
132
  .semi-button-tertiary:active {
113
133
  background-color: var(--semi-color-tertiary-active);
114
134
  }
115
- .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-borderless {
135
+ .semi-button-tertiary.semi-button-outline {
136
+ background-color: transparent;
137
+ border: 1px solid var(--semi-color-border);
138
+ }
139
+ .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless {
116
140
  color: var(--semi-color-text-1);
117
141
  }
118
142
  .semi-button-primary {
@@ -127,13 +151,21 @@
127
151
  .semi-button-primary-disabled.semi-button-light {
128
152
  background: var(--semi-color-fill-0);
129
153
  }
130
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
154
+ .semi-button-primary-disabled.semi-button-outline {
155
+ background-color: transparent;
156
+ border: 1px solid var(--semi-color-border);
157
+ }
158
+ .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
131
159
  background-color: var(--semi-color-primary-hover);
132
160
  }
133
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):active {
161
+ .semi-button-primary.semi-button-outline {
162
+ background-color: transparent;
163
+ border: 1px solid var(--semi-color-border);
164
+ }
165
+ .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
134
166
  background-color: var(--semi-color-primary-active);
135
167
  }
136
- .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-borderless {
168
+ .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-outline, .semi-button-primary.semi-button-borderless {
137
169
  color: var(--semi-color-primary);
138
170
  }
139
171
  .semi-button-secondary {
@@ -146,16 +178,24 @@
146
178
  .semi-button-secondary-disabled {
147
179
  background-color: var(--semi-color-disabled-bg);
148
180
  }
181
+ .semi-button-secondary-disabled.semi-button-outline {
182
+ background-color: transparent;
183
+ border: 1px solid var(--semi-color-border);
184
+ }
149
185
  .semi-button-secondary-disabled.semi-button-light {
150
186
  background-color: var(--semi-color-fill-0);
151
187
  }
188
+ .semi-button-secondary.semi-button-outline {
189
+ background-color: transparent;
190
+ border: 1px solid var(--semi-color-border);
191
+ }
152
192
  .semi-button-secondary:hover {
153
193
  background-color: var(--semi-color-secondary-hover);
154
194
  }
155
195
  .semi-button-secondary:active {
156
196
  background-color: var(--semi-color-secondary-active);
157
197
  }
158
- .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-borderless {
198
+ .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless {
159
199
  color: var(--semi-color-secondary);
160
200
  }
161
201
  .semi-button-disabled {
@@ -182,6 +222,15 @@
182
222
  background-color: var(--semi-color-fill-1);
183
223
  border: 0 transparent solid;
184
224
  }
225
+ .semi-button-outline {
226
+ background-color: transparent;
227
+ }
228
+ .semi-button-outline:not(.semi-button-disabled):hover {
229
+ background-color: var(--semi-color-fill-0);
230
+ }
231
+ .semi-button-outline:not(.semi-button-disabled):active {
232
+ background-color: var(--semi-color-fill-1);
233
+ }
185
234
  .semi-button-light {
186
235
  background-color: var(--semi-color-fill-0);
187
236
  border: 0 transparent solid;
package/lib/es/button/button.scss CHANGED
@@ -45,7 +45,10 @@ $module: #{$prefix}-button;
45
45
 
46
46
  &-disabled {
47
47
  background-color: $color-button_disabled_danger-bg-default;
48
-
48
+ &.#{$module}-outline {
49
+ background-color: transparent;
50
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
51
+ }
49
52
  &.#{$module}-light {
50
53
  background-color: $color-button_disabled_light_danger-bg-default;
51
54
  }
@@ -59,7 +62,14 @@ $module: #{$prefix}-button;
59
62
  background-color: $color-button_danger-bg-active;
60
63
  }
61
64
 
65
+ &.#{$module}-outline{
66
+ background-color: transparent;
67
+ border: $width-button_outline-border solid $color-button_danger_outline-border-default;
68
+ }
69
+
70
+
62
71
  &.#{$module}-light,
72
+ &.#{$module}-outline,
63
73
  &.#{$module}-borderless {
64
74
  color: $color-button_danger_borderless-text-default;
65
75
  }
@@ -78,7 +88,10 @@ $module: #{$prefix}-button;
78
88
 
79
89
  &-disabled {
80
90
  background-color: $color-button_disabled_warning-bg-default;
81
-
91
+ &.#{$module}-outline {
92
+ background-color: transparent;
93
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
94
+ }
82
95
  &.#{$module}-light {
83
96
  background-color: $color-button_disabled_light_warning-bg-default;
84
97
  }
@@ -92,7 +105,13 @@ $module: #{$prefix}-button;
92
105
  background-color: $color-button_warning-bg-active;
93
106
  }
94
107
 
108
+ &.#{$module}-outline{
109
+ background-color: transparent;
110
+ border: $width-button_outline-border solid $color-button_warning_outline-border-default;
111
+ }
112
+
95
113
  &.#{$module}-light,
114
+ &.#{$module}-outline,
96
115
  &.#{$module}-borderless {
97
116
  color: $color-button_warning_borderless-text-default;
98
117
  }
@@ -111,7 +130,10 @@ $module: #{$prefix}-button;
111
130
 
112
131
  &-disabled {
113
132
  background-color: $color-button_disabled_tertiary-bg-default;
114
-
133
+ &.#{$module}-outline {
134
+ background-color: transparent;
135
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
136
+ }
115
137
  &.#{$module}-light {
116
138
  background-color: $color-button_disabled_light_tertiary-bg-default;
117
139
  }
@@ -125,7 +147,13 @@ $module: #{$prefix}-button;
125
147
  background-color: $color-button_tertiary-bg-active;
126
148
  }
127
149
 
150
+ &.#{$module}-outline{
151
+ background-color: transparent;
152
+ border: $width-button_outline-border solid $color-button_tertiary_outline-border-default;
153
+ }
154
+
128
155
  &.#{$module}-light,
156
+ &.#{$module}-outline,
129
157
  &.#{$module}-borderless {
130
158
  color: $color-button_tertiary_solid-text-default;
131
159
  }
@@ -144,17 +172,29 @@ $module: #{$prefix}-button;
144
172
  &.#{$module}-light {
145
173
  background: $color-button_disabled_light_primary-bg-default;
146
174
  }
175
+
176
+ &.#{$module}-outline {
177
+ background-color: transparent;
178
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
179
+ }
147
180
  }
148
181
 
149
- &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
182
+ &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):hover {
150
183
  background-color: $color-button_primary-bg-hover;
151
184
  }
152
185
 
153
- &:not(.#{$module}-borderless):not(.#{$module}-light):active {
186
+ &.#{$module}-outline{
187
+ background-color: transparent;
188
+ border: $width-button_outline-border solid $color-button_primary_outline-border-default;
189
+ }
190
+
191
+
192
+ &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):active {
154
193
  background-color: $color-button_primary-bg-active;
155
194
  }
156
195
 
157
196
  &.#{$module}-light,
197
+ &.#{$module}-outline,
158
198
  &.#{$module}-borderless {
159
199
  color: $color-button_primary_borderless-text-default;
160
200
  }
@@ -171,11 +211,21 @@ $module: #{$prefix}-button;
171
211
  &-disabled {
172
212
  background-color: $color-button_disabled_secondary-bg-default;
173
213
 
214
+ &.#{$module}-outline {
215
+ background-color: transparent;
216
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
217
+ }
218
+
174
219
  &.#{$module}-light {
175
220
  background-color: $color-button_disabled_light_secondary-bg-default;
176
221
  }
177
222
  }
178
223
 
224
+ &.#{$module}-outline{
225
+ background-color: transparent;
226
+ border: $width-button_outline-border solid $color-button_secondary_outline-border-default;
227
+ }
228
+
179
229
  &:hover {
180
230
  background-color: $color-button_secondary-bg-hover;
181
231
  }
@@ -185,6 +235,7 @@ $module: #{$prefix}-button;
185
235
  }
186
236
 
187
237
  &.#{$module}-light,
238
+ &.#{$module}-outline,
188
239
  &.#{$module}-borderless {
189
240
  color: $color-button_secondary_borderless-text-default;
190
241
  }
@@ -222,6 +273,18 @@ $module: #{$prefix}-button;
222
273
  }
223
274
  }
224
275
 
276
+ &-outline {
277
+ background-color: transparent;
278
+
279
+ &:not(.#{$module}-disabled):hover {
280
+ background-color: $color-button_outline-bg-hover;
281
+ }
282
+
283
+ &:not(.#{$module}-disabled):active {
284
+ background-color: $color-button_outline-bg-active;
285
+ }
286
+ }
287
+
225
288
  &-light {
226
289
  background-color: $color-button_light-bg-default;
227
290
  border: $width-button_light-border $color-button_light-border-default solid;
package/lib/es/button/variables.scss CHANGED
@@ -11,6 +11,7 @@ $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按
11
11
  $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
12
12
  $color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
13
13
  $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
14
+ $color-button_primary_outline-border-default: var(--semi-color-border); // 边框模式下 primary 边框颜色
14
15
 
15
16
  $color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
16
17
 
@@ -26,6 +27,7 @@ $color-button_secondary-text-hover: rgba(var(--semi-white), 1); // 次要按钮
26
27
  $color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要按钮背景颜色 - 按下
27
28
  $color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
28
29
  $color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
30
+ $color-button_secondary_outline-border-default: var(--semi-color-border); // 边框模式下 secondary 边框颜色
29
31
 
30
32
  $color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
31
33
 
@@ -42,6 +44,7 @@ $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮
42
44
  $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
43
45
  $color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
44
46
  $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
47
+ $color-button_danger_outline-border-default: var(--semi-color-danger); // 边框模式下 danger 边框颜色
45
48
 
46
49
  $color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
47
50
 
@@ -58,7 +61,7 @@ $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按
58
61
  $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
59
62
  $color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
60
63
  $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
61
-
64
+ $color-button_warning_outline-border-default: var(--semi-color-warning); // 边框模式下 warning 边框颜色
62
65
  $color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
63
66
 
64
67
  // tertiary
@@ -73,7 +76,7 @@ $color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮
73
76
  $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
74
77
  $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
75
78
  $color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
76
-
79
+ $color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 danger 边框颜色
77
80
  $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
78
81
 
79
82
  // disabled
@@ -87,7 +90,7 @@ $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default;
87
90
  $color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
88
91
  $color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
89
92
  $color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
90
-
93
+ $color-button_disabled_outline-border-default: var(--semi-color-border); // 边框模式下 disable 边框颜色
91
94
 
92
95
 
93
96
  // light
@@ -114,6 +117,12 @@ $color-button_borderless-border-hover: $color-button_borderless-border-default;
114
117
  $color-button_borderless-border-active: $color-button_borderless-border-hover; // 无背景按钮描边颜色 - 按下
115
118
  $width-button_borderless-border: 0; // 无背景按钮描边宽度
116
119
 
120
+
121
+ // outline
122
+ $width-button_outline-border: 1px; // 边框模式按钮边框宽度
123
+ $color-button_outline-bg-hover: var(--semi-color-fill-0); // 边框模式按钮背景颜色 - 悬浮
124
+ $color-button_outline-bg-active: var(--semi-color-fill-1); // 边框模式按钮背景颜色 - 按下
125
+
117
126
  // buttongroup
118
127
 
119
128
  $color-button_group-border-default: var(--semi-color-border); // 按钮组分割线颜色
@@ -163,6 +172,6 @@ $width-button-outline: 2px; // 按钮轮廓宽度
163
172
 
164
173
 
165
174
  $radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
166
- $radius-button_splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
167
- $radius-button_splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
168
- $radius-button_splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角
175
+ $radius-button_splitButtonGroup_first_bottomLeft: var(--semi-border-radius-small); // split button 左下圆角
176
+ $radius-button_splitButtonGroup_last_topRight: var(--semi-border-radius-small); // split button 右上圆角
177
+ $radius-button_splitButtonGroup_last_bottomRight: var(--semi-border-radius-small); // split button 右下圆角
package/lib/es/tabs/tabs.css CHANGED
@@ -21,6 +21,33 @@
21
21
  .semi-tabs-bar-extra {
22
22
  padding: 0px 5px;
23
23
  }
24
+ .semi-tabs-bar-more-trigger {
25
+ display: inline-block;
26
+ cursor: pointer;
27
+ color: var(--semi-color-text-2);
28
+ }
29
+ .semi-tabs-bar-more-trigger-content {
30
+ display: flex;
31
+ align-content: center;
32
+ }
33
+ .semi-tabs-bar-more-trigger-content-icon:not(:not(.semi-tabs-bar-more-trigger-content-icon)) {
34
+ margin-top: 0px;
35
+ margin-bottom: 0px;
36
+ margin-left: 8px;
37
+ margin-right: 8px;
38
+ flex-shrink: 0;
39
+ display: flex;
40
+ align-items: center;
41
+ }
42
+ .semi-tabs-bar-more-trigger-line {
43
+ padding: 16px 4px 14px 4px;
44
+ }
45
+ .semi-tabs-bar-more-trigger-card {
46
+ padding: 8px 12px;
47
+ }
48
+ .semi-tabs-bar-more-trigger-button {
49
+ padding: 8px 12px;
50
+ }
24
51
  .semi-tabs-bar .semi-tabs-tab {
25
52
  font-size: 14px;
26
53
  line-height: 20px;
@@ -473,6 +500,7 @@
473
500
  animation-fill-mode: forwards;
474
501
  }
475
502
  .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
503
+ font-size: 14px;
476
504
  padding: 16px 4px 14px 4px;
477
505
  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
478
506
  border-bottom: 2px solid transparent;
@@ -491,9 +519,11 @@
491
519
  border-bottom: 2px solid var(--semi-color-fill-1);
492
520
  }
493
521
  .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
522
+ font-size: 14px;
494
523
  padding: 8px 4px 6px 4px;
495
524
  }
496
525
  .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
526
+ font-size: 14px;
497
527
  padding: 12px 4px 10px 4px;
498
528
  }
499
529
  .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover {
package/lib/es/tabs/tabs.scss CHANGED
@@ -11,6 +11,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
11
11
  box-sizing: border-box;
12
12
  position: relative;
13
13
 
14
+
14
15
  &-left {
15
16
  display: flex;
16
17
  flex-direction: row;
@@ -30,6 +31,39 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
30
31
  padding: $spacing-tabs_bar_extra-paddingY $spacing-tabs_bar_extra-paddingX;
31
32
  }
32
33
 
34
+ &-more-trigger{
35
+ display: inline-block;
36
+ cursor: pointer;
37
+ color: var(--semi-color-text-2);
38
+
39
+ &-content{
40
+ display: flex;
41
+ align-content: center;
42
+
43
+ &-icon:not(:not(&-icon)){ // increase priority
44
+ margin-top: $spacing-tabs_tab-more_trigger_icon-marginTop;
45
+ margin-bottom: $spacing-tabs_tab-more_trigger_icon-marginBottom;
46
+ margin-left: $spacing-tabs_tab-more_trigger_icon-marginLeft;
47
+ margin-right: $spacing-tabs_tab-more_trigger_icon-marginRight;
48
+ flex-shrink: 0;
49
+ display: flex;
50
+ align-items: center;
51
+ }
52
+ }
53
+
54
+ &-line{
55
+ padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
56
+ }
57
+
58
+ &-card{
59
+ padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
60
+ }
61
+
62
+ &-button{
63
+ padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
64
+ }
65
+ }
66
+
33
67
  .#{$module}-tab {
34
68
  @include font-size-regular;
35
69
  cursor: pointer;
@@ -656,6 +690,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
656
690
  &.#{$module}-tab-top {
657
691
 
658
692
  &.#{$module}-tab {
693
+ font-size: $font-tabs_bar_large-fontSize;
659
694
  padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
660
695
  transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
661
696
  color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
@@ -684,10 +719,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
684
719
  // }
685
720
 
686
721
  &-small {
722
+ font-size: $font-tabs_bar_small-fontSize;
687
723
  padding: $spacing-tabs_bar_line_tab_small-paddingTop $spacing-tabs_bar_line_tab_small-paddingRight $spacing-tabs_bar_line_tab_small-paddingBottom $spacing-tabs_bar_line_tab_small-paddingLeft;
688
724
  }
689
725
 
690
726
  &-medium {
727
+ font-size: $font-tabs_bar_medium-fontSize;
691
728
  padding: $spacing-tabs_bar_line_tab_medium-paddingTop $spacing-tabs_bar_line_tab_medium-paddingRight $spacing-tabs_bar_line_tab_medium-paddingBottom $spacing-tabs_bar_line_tab_medium-paddingLeft;
692
729
  }
693
730
  }