@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.
@@ -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
+
@@ -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 {
@@ -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/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.58.0-beta.0",
3
+ "version": "2.58.1",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
7
7
  "prepublishOnly": "npm run build:lib"
8
8
  },
9
9
  "dependencies": {
10
- "@douyinfe/semi-animation": "2.58.0-beta.0",
10
+ "@douyinfe/semi-animation": "2.58.1",
11
11
  "async-validator": "^3.5.0",
12
12
  "classnames": "^2.2.6",
13
13
  "date-fns": "^2.29.3",
@@ -24,7 +24,7 @@
24
24
  "*.scss",
25
25
  "*.css"
26
26
  ],
27
- "gitHead": "bd0c5bf8924d1e971746ba88f83c2c8857d307f7",
27
+ "gitHead": "1e48bf7b71e78f49b188ff82c5ab61884a6ec0ab",
28
28
  "devDependencies": {
29
29
  "@babel/plugin-transform-runtime": "^7.15.8",
30
30
  "@babel/preset-env": "^7.15.8",
package/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
  }
@@ -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/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
  }