@douyinfe/semi-foundation 2.59.1 → 2.60.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/form/form.scss +4 -0
  2. package/input/input.scss +1 -1
  3. package/lib/cjs/form/form.css +3 -0
  4. package/lib/cjs/form/form.scss +4 -0
  5. package/lib/cjs/input/input.css +2 -2
  6. package/lib/cjs/input/input.scss +1 -1
  7. package/lib/cjs/spin/spin.css +1 -0
  8. package/lib/cjs/spin/spin.scss +1 -0
  9. package/lib/cjs/tabs/tabs.css +6 -6
  10. package/lib/cjs/tabs/tabs.scss +2 -2
  11. package/lib/es/form/form.css +3 -0
  12. package/lib/es/form/form.scss +4 -0
  13. package/lib/es/input/input.css +2 -2
  14. package/lib/es/input/input.scss +1 -1
  15. package/lib/es/spin/spin.css +1 -0
  16. package/lib/es/spin/spin.scss +1 -0
  17. package/lib/es/tabs/tabs.css +6 -6
  18. package/lib/es/tabs/tabs.scss +2 -2
  19. package/package.json +3 -3
  20. package/spin/spin.scss +1 -0
  21. package/tabs/tabs.scss +2 -2
package/form/form.scss CHANGED
@@ -200,6 +200,10 @@ $rating: #{$prefix}-rating;
200
200
  display: flex;
201
201
  align-items: center;
202
202
  }
203
+ // labelAlign = right
204
+ .#{$field}-label-with-extra.#{$field}-label-right{
205
+ justify-content: flex-end;
206
+ }
203
207
  .#{$checkboxGroup},
204
208
  .#{$radioGroup} {
205
209
  padding-top: $spacing-form_label-paddingTop;
package/input/input.scss CHANGED
@@ -61,7 +61,7 @@ $module: #{$prefix}-input;
61
61
 
62
62
  &-small {
63
63
  height: $height-input_wrapper_small;
64
- @include font-size-header-6;
64
+ @include font-size-regular;
65
65
  line-height: $height-input_small;
66
66
  }
67
67
 
package/lib/cjs/form/form.css CHANGED
@@ -132,6 +132,9 @@
132
132
  display: flex;
133
133
  align-items: center;
134
134
  }
135
+ .semi-form-field[x-label-pos=left] .semi-form-field-label-with-extra.semi-form-field-label-right {
136
+ justify-content: flex-end;
137
+ }
135
138
  .semi-form-field[x-label-pos=left] .semi-checkboxGroup,
136
139
  .semi-form-field[x-label-pos=left] .semi-radioGroup {
137
140
  padding-top: 6px;
package/lib/cjs/form/form.scss CHANGED
@@ -200,6 +200,10 @@ $rating: #{$prefix}-rating;
200
200
  display: flex;
201
201
  align-items: center;
202
202
  }
203
+ // labelAlign = right
204
+ .#{$field}-label-with-extra.#{$field}-label-right{
205
+ justify-content: flex-end;
206
+ }
203
207
  .#{$checkboxGroup},
204
208
  .#{$radioGroup} {
205
209
  padding-top: $spacing-form_label-paddingTop;
package/lib/cjs/input/input.css CHANGED
@@ -50,8 +50,8 @@
50
50
  }
51
51
  .semi-input-wrapper-small {
52
52
  height: 24px;
53
- font-size: 16px;
54
- line-height: 22px;
53
+ font-size: 14px;
54
+ line-height: 20px;
55
55
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
56
56
  line-height: 22px;
57
57
  }
package/lib/cjs/input/input.scss CHANGED
@@ -61,7 +61,7 @@ $module: #{$prefix}-input;
61
61
 
62
62
  &-small {
63
63
  height: $height-input_wrapper_small;
64
- @include font-size-header-6;
64
+ @include font-size-regular;
65
65
  line-height: $height-input_small;
66
66
  }
67
67
 
package/lib/cjs/spin/spin.css CHANGED
@@ -24,6 +24,7 @@
24
24
  color: var(--semi-color-primary);
25
25
  }
26
26
  .semi-spin-wrapper > svg {
27
+ display: inline;
27
28
  animation: 600ms linear infinite semi-animation-rotate;
28
29
  animation-fill-mode: forwards;
29
30
  vertical-align: top;
package/lib/cjs/spin/spin.scss CHANGED
@@ -27,6 +27,7 @@ $module: #{$prefix}-spin;
27
27
  color: $color-spin-bg;
28
28
 
29
29
  & > svg {
30
+ display: inline;
30
31
  animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
31
32
  animation-fill-mode: forwards;
32
33
  vertical-align: top;
package/lib/cjs/tabs/tabs.css CHANGED
@@ -201,18 +201,18 @@
201
201
  .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
202
202
  margin-right: 4px;
203
203
  }
204
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button {
204
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false] {
205
205
  color: var(--semi-color-primary);
206
206
  padding: 8px;
207
207
  border: 0px solid transparent;
208
208
  background-color: transparent;
209
209
  }
210
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:hover {
210
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:hover {
211
211
  background-color: var(--semi-color-fill-0);
212
212
  color: var(--semi-color-primary);
213
213
  border-color: transparent;
214
214
  }
215
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:active {
215
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:active {
216
216
  background-color: var(--semi-color-fill-1);
217
217
  color: var(--semi-color-primary);
218
218
  border-color: transparent;
@@ -220,18 +220,18 @@
220
220
  .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
221
221
  margin-left: 4px;
222
222
  }
223
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button {
223
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false] {
224
224
  color: var(--semi-color-primary);
225
225
  padding: 8px;
226
226
  border: 0px solid transparent;
227
227
  background-color: transparent;
228
228
  }
229
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:hover {
229
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:hover {
230
230
  background-color: var(--semi-color-fill-0);
231
231
  color: var(--semi-color-primary);
232
232
  border-color: transparent;
233
233
  }
234
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:active {
234
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:active {
235
235
  background-color: var(--semi-color-fill-1);
236
236
  color: var(--semi-color-primary);
237
237
  border-color: transparent;
package/lib/cjs/tabs/tabs.scss CHANGED
@@ -264,7 +264,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
264
264
 
265
265
  .#{$module}-bar-arrow-start {
266
266
  margin-right: $spacing-tabs_overflow_icon-marginRight;
267
- & > .#{$prefix}-button {
267
+ & > .#{$prefix}-button[aria-disabled=false] {
268
268
  color: $color-tabs_tab-pane_arrow-text-default;
269
269
  padding: $spacing-tabs_tab-pane_arrow;
270
270
  border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
@@ -285,7 +285,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
285
285
 
286
286
  .#{$module}-bar-arrow-end {
287
287
  margin-left: $spacing-tabs_overflow_icon-marginLeft;
288
- & > .#{$prefix}-button {
288
+ & > .#{$prefix}-button[aria-disabled=false] {
289
289
  color: $color-tabs_tab-pane_arrow-text-default;
290
290
  padding: $spacing-tabs_tab-pane_arrow;
291
291
  border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
package/lib/es/form/form.css CHANGED
@@ -132,6 +132,9 @@
132
132
  display: flex;
133
133
  align-items: center;
134
134
  }
135
+ .semi-form-field[x-label-pos=left] .semi-form-field-label-with-extra.semi-form-field-label-right {
136
+ justify-content: flex-end;
137
+ }
135
138
  .semi-form-field[x-label-pos=left] .semi-checkboxGroup,
136
139
  .semi-form-field[x-label-pos=left] .semi-radioGroup {
137
140
  padding-top: 6px;
package/lib/es/form/form.scss CHANGED
@@ -200,6 +200,10 @@ $rating: #{$prefix}-rating;
200
200
  display: flex;
201
201
  align-items: center;
202
202
  }
203
+ // labelAlign = right
204
+ .#{$field}-label-with-extra.#{$field}-label-right{
205
+ justify-content: flex-end;
206
+ }
203
207
  .#{$checkboxGroup},
204
208
  .#{$radioGroup} {
205
209
  padding-top: $spacing-form_label-paddingTop;
package/lib/es/input/input.css CHANGED
@@ -50,8 +50,8 @@
50
50
  }
51
51
  .semi-input-wrapper-small {
52
52
  height: 24px;
53
- font-size: 16px;
54
- line-height: 22px;
53
+ font-size: 14px;
54
+ line-height: 20px;
55
55
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
56
56
  line-height: 22px;
57
57
  }
package/lib/es/input/input.scss CHANGED
@@ -61,7 +61,7 @@ $module: #{$prefix}-input;
61
61
 
62
62
  &-small {
63
63
  height: $height-input_wrapper_small;
64
- @include font-size-header-6;
64
+ @include font-size-regular;
65
65
  line-height: $height-input_small;
66
66
  }
67
67
 
package/lib/es/spin/spin.css CHANGED
@@ -24,6 +24,7 @@
24
24
  color: var(--semi-color-primary);
25
25
  }
26
26
  .semi-spin-wrapper > svg {
27
+ display: inline;
27
28
  animation: 600ms linear infinite semi-animation-rotate;
28
29
  animation-fill-mode: forwards;
29
30
  vertical-align: top;
package/lib/es/spin/spin.scss CHANGED
@@ -27,6 +27,7 @@ $module: #{$prefix}-spin;
27
27
  color: $color-spin-bg;
28
28
 
29
29
  & > svg {
30
+ display: inline;
30
31
  animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
31
32
  animation-fill-mode: forwards;
32
33
  vertical-align: top;
package/lib/es/tabs/tabs.css CHANGED
@@ -201,18 +201,18 @@
201
201
  .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
202
202
  margin-right: 4px;
203
203
  }
204
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button {
204
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false] {
205
205
  color: var(--semi-color-primary);
206
206
  padding: 8px;
207
207
  border: 0px solid transparent;
208
208
  background-color: transparent;
209
209
  }
210
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:hover {
210
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:hover {
211
211
  background-color: var(--semi-color-fill-0);
212
212
  color: var(--semi-color-primary);
213
213
  border-color: transparent;
214
214
  }
215
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:active {
215
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:active {
216
216
  background-color: var(--semi-color-fill-1);
217
217
  color: var(--semi-color-primary);
218
218
  border-color: transparent;
@@ -220,18 +220,18 @@
220
220
  .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
221
221
  margin-left: 4px;
222
222
  }
223
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button {
223
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false] {
224
224
  color: var(--semi-color-primary);
225
225
  padding: 8px;
226
226
  border: 0px solid transparent;
227
227
  background-color: transparent;
228
228
  }
229
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:hover {
229
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:hover {
230
230
  background-color: var(--semi-color-fill-0);
231
231
  color: var(--semi-color-primary);
232
232
  border-color: transparent;
233
233
  }
234
- .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:active {
234
+ .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:active {
235
235
  background-color: var(--semi-color-fill-1);
236
236
  color: var(--semi-color-primary);
237
237
  border-color: transparent;
package/lib/es/tabs/tabs.scss CHANGED
@@ -264,7 +264,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
264
264
 
265
265
  .#{$module}-bar-arrow-start {
266
266
  margin-right: $spacing-tabs_overflow_icon-marginRight;
267
- & > .#{$prefix}-button {
267
+ & > .#{$prefix}-button[aria-disabled=false] {
268
268
  color: $color-tabs_tab-pane_arrow-text-default;
269
269
  padding: $spacing-tabs_tab-pane_arrow;
270
270
  border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
@@ -285,7 +285,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
285
285
 
286
286
  .#{$module}-bar-arrow-end {
287
287
  margin-left: $spacing-tabs_overflow_icon-marginLeft;
288
- & > .#{$prefix}-button {
288
+ & > .#{$prefix}-button[aria-disabled=false] {
289
289
  color: $color-tabs_tab-pane_arrow-text-default;
290
290
  padding: $spacing-tabs_tab-pane_arrow;
291
291
  border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.59.1",
3
+ "version": "2.60.0",
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.59.1",
10
+ "@douyinfe/semi-animation": "2.60.0",
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": "8a6430348ea43876d481711b00d30360b6d62948",
27
+ "gitHead": "4002a3053726ca7c3d5175cad3cd7bc36cf0daf1",
28
28
  "devDependencies": {
29
29
  "@babel/plugin-transform-runtime": "^7.15.8",
30
30
  "@babel/preset-env": "^7.15.8",
package/spin/spin.scss CHANGED
@@ -27,6 +27,7 @@ $module: #{$prefix}-spin;
27
27
  color: $color-spin-bg;
28
28
 
29
29
  & > svg {
30
+ display: inline;
30
31
  animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
31
32
  animation-fill-mode: forwards;
32
33
  vertical-align: top;
package/tabs/tabs.scss CHANGED
@@ -264,7 +264,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
264
264
 
265
265
  .#{$module}-bar-arrow-start {
266
266
  margin-right: $spacing-tabs_overflow_icon-marginRight;
267
- & > .#{$prefix}-button {
267
+ & > .#{$prefix}-button[aria-disabled=false] {
268
268
  color: $color-tabs_tab-pane_arrow-text-default;
269
269
  padding: $spacing-tabs_tab-pane_arrow;
270
270
  border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
@@ -285,7 +285,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
285
285
 
286
286
  .#{$module}-bar-arrow-end {
287
287
  margin-left: $spacing-tabs_overflow_icon-marginLeft;
288
- & > .#{$prefix}-button {
288
+ & > .#{$prefix}-button[aria-disabled=false] {
289
289
  color: $color-tabs_tab-pane_arrow-text-default;
290
290
  padding: $spacing-tabs_tab-pane_arrow;
291
291
  border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;