@douyinfe/semi-foundation 2.19.0-alpha.3 → 2.19.0-alpha.6

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 (19) hide show
  1. package/checkbox/checkbox.scss +4 -9
  2. package/lib/cjs/checkbox/checkbox.css +4 -8
  3. package/lib/cjs/checkbox/checkbox.scss +4 -9
  4. package/lib/cjs/popconfirm/popconfirmFoundation.d.ts +2 -4
  5. package/lib/cjs/popconfirm/popconfirmFoundation.js +4 -30
  6. package/lib/cjs/radio/radio.css +21 -83
  7. package/lib/cjs/radio/radio.scss +23 -40
  8. package/lib/cjs/radio/rtl.scss +0 -53
  9. package/lib/es/checkbox/checkbox.css +4 -8
  10. package/lib/es/checkbox/checkbox.scss +4 -9
  11. package/lib/es/popconfirm/popconfirmFoundation.d.ts +2 -4
  12. package/lib/es/popconfirm/popconfirmFoundation.js +4 -29
  13. package/lib/es/radio/radio.css +21 -83
  14. package/lib/es/radio/radio.scss +23 -40
  15. package/lib/es/radio/rtl.scss +0 -53
  16. package/package.json +2 -2
  17. package/popconfirm/popconfirmFoundation.ts +6 -35
  18. package/radio/radio.scss +23 -40
  19. package/radio/rtl.scss +0 -53
package/checkbox/checkbox.scss CHANGED
@@ -11,14 +11,13 @@ $module: #{$prefix}-checkbox;
11
11
  // box-sizing: border-box;
12
12
  position: relative;
13
13
  display: flex;
14
- align-items: flex-start;
14
+ align-items: center;
15
15
  flex-wrap: wrap;
16
16
  @include font-size-regular;
17
17
  cursor: pointer;
18
18
  transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
19
19
  border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
20
20
  transform: scale($transform_scale-checkbox);
21
- column-gap: $spacing-checkbox_label-paddingLeft;
22
21
 
23
22
  input[type="checkbox"] {
24
23
  position: absolute;
@@ -30,17 +29,11 @@ $module: #{$prefix}-checkbox;
30
29
  opacity: 0;
31
30
  }
32
31
 
33
- &-content {
34
- flex: 1;
35
- display: flex;
36
- flex-direction: column;
37
- row-gap: $spacing-checkbox_extra-marginTop;
38
- }
39
-
40
32
  &-addon {
41
33
  display: flex;
42
34
  flex: 1;
43
35
  align-items: center;
36
+ padding-left: $spacing-checkbox_label-paddingLeft;
44
37
  color: $color-checkbox_label-text-default;
45
38
  line-height: $font-checkbox_label-lineHeight;
46
39
  user-select: none;
@@ -366,7 +359,9 @@ $module: #{$prefix}-checkbox;
366
359
  flex-grow: 1;
367
360
  flex-basis: 100%;
368
361
  box-sizing: border-box;
362
+ padding-left: $spacing-checkbox_extra-paddingLeft;
369
363
  color: $color-checkbox_extra-text-default;
364
+ margin-top: $spacing-checkbox_extra-marginTop;
370
365
  }
371
366
 
372
367
  &-focus {
package/lib/cjs/checkbox/checkbox.css CHANGED
@@ -5,7 +5,7 @@
5
5
  box-sizing: border-box;
6
6
  position: relative;
7
7
  display: flex;
8
- align-items: flex-start;
8
+ align-items: center;
9
9
  flex-wrap: wrap;
10
10
  font-size: 14px;
11
11
  line-height: 20px;
@@ -13,7 +13,6 @@
13
13
  cursor: pointer;
14
14
  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
15
15
  transform: scale(var(--semi-transform_scale-none));
16
- column-gap: 8px;
17
16
  }
18
17
  .semi-checkbox input[type=checkbox] {
19
18
  position: absolute;
@@ -24,16 +23,11 @@
24
23
  margin: 0;
25
24
  opacity: 0;
26
25
  }
27
- .semi-checkbox-content {
28
- flex: 1;
29
- display: flex;
30
- flex-direction: column;
31
- row-gap: 4px;
32
- }
33
26
  .semi-checkbox-addon {
34
27
  display: flex;
35
28
  flex: 1;
36
29
  align-items: center;
30
+ padding-left: 8px;
37
31
  color: var(--semi-color-text-0);
38
32
  line-height: 20px;
39
33
  user-select: none;
@@ -262,7 +256,9 @@
262
256
  flex-grow: 1;
263
257
  flex-basis: 100%;
264
258
  box-sizing: border-box;
259
+ padding-left: 24px;
265
260
  color: var(--semi-color-text-2);
261
+ margin-top: 4px;
266
262
  }
267
263
  .semi-checkbox-focus {
268
264
  outline: 2px solid var(--semi-color-primary-light-active);
package/lib/cjs/checkbox/checkbox.scss CHANGED
@@ -11,14 +11,13 @@ $module: #{$prefix}-checkbox;
11
11
  // box-sizing: border-box;
12
12
  position: relative;
13
13
  display: flex;
14
- align-items: flex-start;
14
+ align-items: center;
15
15
  flex-wrap: wrap;
16
16
  @include font-size-regular;
17
17
  cursor: pointer;
18
18
  transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
19
19
  border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
20
20
  transform: scale($transform_scale-checkbox);
21
- column-gap: $spacing-checkbox_label-paddingLeft;
22
21
 
23
22
  input[type="checkbox"] {
24
23
  position: absolute;
@@ -30,17 +29,11 @@ $module: #{$prefix}-checkbox;
30
29
  opacity: 0;
31
30
  }
32
31
 
33
- &-content {
34
- flex: 1;
35
- display: flex;
36
- flex-direction: column;
37
- row-gap: $spacing-checkbox_extra-marginTop;
38
- }
39
-
40
32
  &-addon {
41
33
  display: flex;
42
34
  flex: 1;
43
35
  align-items: center;
36
+ padding-left: $spacing-checkbox_label-paddingLeft;
44
37
  color: $color-checkbox_label-text-default;
45
38
  line-height: $font-checkbox_label-lineHeight;
46
39
  user-select: none;
@@ -366,7 +359,9 @@ $module: #{$prefix}-checkbox;
366
359
  flex-grow: 1;
367
360
  flex-basis: 100%;
368
361
  box-sizing: border-box;
362
+ padding-left: $spacing-checkbox_extra-paddingLeft;
369
363
  color: $color-checkbox_extra-text-default;
364
+ margin-top: $spacing-checkbox_extra-marginTop;
370
365
  }
371
366
 
372
367
  &-focus {
package/lib/cjs/popconfirm/popconfirmFoundation.d.ts CHANGED
@@ -1,10 +1,8 @@
1
1
  import BaseFoundation, { DefaultAdapter } from '../base/foundation';
2
2
  export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
3
3
  setVisible: (visible: boolean) => void;
4
- updateConfirmLoading: (loading: boolean) => void;
5
- updateCancelLoading: (loading: boolean) => void;
6
- notifyConfirm: (e: any) => Promise<any> | void;
7
- notifyCancel: (e: any) => Promise<any> | void;
4
+ notifyConfirm: (e: any) => void;
5
+ notifyCancel: (e: any) => void;
8
6
  notifyVisibleChange: (visible: boolean) => void;
9
7
  notifyClickOutSide: (e: any) => void;
10
8
  }
package/lib/cjs/popconfirm/popconfirmFoundation.js CHANGED
@@ -12,8 +12,6 @@ exports.default = void 0;
12
12
 
13
13
  var _foundation = _interopRequireDefault(require("../base/foundation"));
14
14
 
15
- var _isPromise = _interopRequireDefault(require("../utils/isPromise"));
16
-
17
15
  /* eslint-disable @typescript-eslint/no-empty-function */
18
16
  class PopConfirmFoundation extends _foundation.default {
19
17
  init() {}
@@ -21,39 +19,15 @@ class PopConfirmFoundation extends _foundation.default {
21
19
  destroy() {}
22
20
 
23
21
  handleCancel(e) {
24
- const maybePromise = this._adapter.notifyCancel(e);
25
-
26
- if ((0, _isPromise.default)(maybePromise)) {
27
- this._adapter.updateCancelLoading(true);
22
+ this._adapter.notifyCancel(e);
28
23
 
29
- maybePromise.then(result => {
30
- this.handleVisibleChange(false);
31
-
32
- this._adapter.updateCancelLoading(false);
33
- }, errors => {
34
- this._adapter.updateCancelLoading(false);
35
- });
36
- } else {
37
- this.handleVisibleChange(false);
38
- }
24
+ this.handleVisibleChange(false);
39
25
  }
40
26
 
41
27
  handleConfirm(e) {
42
- const maybePromise = this._adapter.notifyConfirm(e);
28
+ this._adapter.notifyConfirm(e);
43
29
 
44
- if ((0, _isPromise.default)(maybePromise)) {
45
- this._adapter.updateConfirmLoading(true);
46
-
47
- maybePromise.then(result => {
48
- this._adapter.updateConfirmLoading(false);
49
-
50
- this.handleVisibleChange(false);
51
- }, errors => {
52
- this._adapter.updateConfirmLoading(false);
53
- });
54
- } else {
55
- this.handleVisibleChange(false);
56
- }
30
+ this.handleVisibleChange(false);
57
31
  }
58
32
 
59
33
  handleClickOutSide(e) {
package/lib/cjs/radio/radio.css CHANGED
@@ -6,9 +6,8 @@
6
6
  font-size: 14px;
7
7
  line-height: 20px;
8
8
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
9
- position: relative;
10
9
  display: inline-flex;
11
- flex-wrap: wrap;
10
+ column-gap: 8px;
12
11
  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
13
12
  min-height: 20px;
14
13
  min-width: 16px;
@@ -57,6 +56,7 @@
57
56
  border-radius: var(--semi-border-radius-small);
58
57
  }
59
58
  .semi-radio-buttonRadioGroup {
59
+ position: relative;
60
60
  padding: 4px;
61
61
  border-radius: var(--semi-border-radius-small);
62
62
  line-height: 16px;
@@ -81,8 +81,6 @@
81
81
  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
82
82
  }
83
83
  .semi-radio-cardRadioGroup .semi-radio-inner {
84
- position: relative;
85
- margin-right: 8px;
86
84
  flex-shrink: 0;
87
85
  }
88
86
  .semi-radio-cardRadioGroup .semi-radio-inner-display {
@@ -93,8 +91,6 @@
93
91
  font-size: 14px;
94
92
  line-height: 20px;
95
93
  color: var(--semi-color-text-0);
96
- margin-left: 0;
97
- padding-left: 0;
98
94
  }
99
95
  .semi-radio-cardRadioGroup .semi-radio-extra {
100
96
  font-weight: normal;
@@ -151,19 +147,18 @@
151
147
  border-color: var(--semi-color-primary-disabled);
152
148
  }
153
149
  .semi-radio-inner {
154
- position: absolute;
155
- display: inline-block;
156
- top: 2px;
157
- left: 0;
150
+ display: inline-flex;
151
+ margin-top: 2px;
152
+ position: relative;
158
153
  width: 16px;
159
154
  height: 16px;
160
155
  vertical-align: sub;
161
156
  user-select: none;
162
157
  }
163
158
  .semi-radio-inner-display {
164
- position: absolute;
165
- left: 0;
166
- top: 0;
159
+ display: inline-flex;
160
+ align-items: center;
161
+ justify-content: center;
167
162
  box-sizing: border-box;
168
163
  width: 16px;
169
164
  height: 16px;
@@ -173,11 +168,14 @@
173
168
  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
174
169
  }
175
170
  .semi-radio-inner-display .semi-icon {
176
- position: absolute;
177
171
  width: 100%;
178
172
  height: 100%;
179
173
  font-size: 14px;
180
174
  }
175
+ .semi-radio-content {
176
+ display: flex;
177
+ flex-direction: column;
178
+ }
181
179
  .semi-radio:hover .semi-radio-inner-display {
182
180
  background: var(--semi-color-fill-0);
183
181
  }
@@ -186,14 +184,11 @@
186
184
  }
187
185
  .semi-radio-addon {
188
186
  user-select: none;
189
- padding-left: 8px;
190
- margin-left: 16px;
191
187
  color: var(--semi-color-text-0);
192
188
  display: inline-flex;
193
189
  align-items: center;
194
190
  }
195
191
  .semi-radio-addon-buttonRadio {
196
- margin-left: 0;
197
192
  text-align: center;
198
193
  border-radius: var(--semi-border-radius-small);
199
194
  font-weight: 600;
@@ -277,11 +272,7 @@
277
272
  color: var(--semi-color-disabled-text);
278
273
  }
279
274
  .semi-radio-extra {
280
- flex-grow: 1;
281
- flex-basis: 100%;
282
- flex-shrink: 0;
283
275
  color: var(--semi-color-text-2);
284
- padding-left: 24px;
285
276
  box-sizing: border-box;
286
277
  }
287
278
  .semi-radio-focus {
@@ -296,25 +287,21 @@
296
287
  line-height: 20px;
297
288
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
298
289
  }
299
- .semi-radioGroup-vertical .semi-radio:last-of-type {
300
- margin-bottom: 0;
290
+ .semi-radioGroup-vertical {
291
+ display: flex;
292
+ flex-direction: column;
293
+ row-gap: 12px;
301
294
  }
302
295
  .semi-radioGroup-vertical-default .semi-radio {
303
- display: block;
304
- margin-bottom: 12px;
296
+ display: flex;
305
297
  }
306
298
  .semi-radioGroup-vertical-card .semi-radio {
307
299
  display: flex;
308
- margin-bottom: 16px;
309
- }
310
- .semi-radioGroup-horizontal .semi-radio {
311
- margin-right: 16px;
312
300
  }
313
- .semi-radioGroup-horizontal .semi-radio:last-of-type {
314
- margin-right: 0;
315
- }
316
- .semi-radioGroup-horizontal-default {
317
- display: inline-block;
301
+ .semi-radioGroup-horizontal {
302
+ display: inline-flex;
303
+ flex-wrap: wrap;
304
+ gap: 16px;
318
305
  }
319
306
  .semi-radioGroup-buttonRadio {
320
307
  display: inline-block;
@@ -338,56 +325,7 @@
338
325
  .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
339
326
  padding-left: 0;
340
327
  }
341
- .semi-rtl .semi-radio-inner,
342
- .semi-portal-rtl .semi-radio-inner {
343
- left: auto;
344
- right: 0;
345
- }
346
- .semi-rtl .semi-radio-inner-display,
347
- .semi-portal-rtl .semi-radio-inner-display {
348
- left: auto;
349
- right: 0;
350
- }
351
- .semi-rtl .semi-radio-addon,
352
- .semi-portal-rtl .semi-radio-addon {
353
- padding-left: 0;
354
- margin-left: 0;
355
- padding-right: 8px;
356
- margin-right: 16px;
357
- }
358
- .semi-rtl .semi-radio-addon-buttonRadio,
359
- .semi-portal-rtl .semi-radio-addon-buttonRadio {
360
- margin-right: 0;
361
- }
362
- .semi-rtl .semi-radio-extra,
363
- .semi-portal-rtl .semi-radio-extra {
364
- padding-left: 0;
365
- padding-right: 24px;
366
- }
367
- .semi-rtl-isCardRadioGroup .semi-radio-inner,
368
- .semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
369
- margin-right: 0;
370
- margin-left: 8px;
371
- }
372
- .semi-rtl-isCardRadioGroup .semi-radio-addon,
373
- .semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
374
- margin-right: 0;
375
- padding-right: 0;
376
- }
377
- .semi-rtl-isCardRadioGroup .semi-radio-extra,
378
- .semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
379
- padding-right: 0;
380
- }
381
328
  .semi-rtl .semi-radioGroup,
382
329
  .semi-portal-rtl .semi-radioGroup {
383
330
  direction: rtl;
384
- }
385
- .semi-rtl .semi-radioGroup-horizontal .semi-radio,
386
- .semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
387
- margin-right: 0;
388
- margin-left: 16px;
389
- }
390
- .semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
391
- .semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
392
- margin-left: 0;
393
331
  }
package/lib/cjs/radio/radio.scss CHANGED
@@ -7,9 +7,8 @@ $inner-width: $width-icon-medium;
7
7
  .#{$module} {
8
8
  @include box-sizing;
9
9
  @include font-size-regular;
10
- position: relative;
11
10
  display: inline-flex;
12
- flex-wrap: wrap;
11
+ column-gap: $spacing-radio_addon-paddingLeft;
13
12
  transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
14
13
  border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
15
14
 
@@ -81,6 +80,8 @@ $inner-width: $width-icon-medium;
81
80
  }
82
81
 
83
82
  &-buttonRadioGroup {
83
+ // Button needs to be positioned relative to parent
84
+ position: relative;
84
85
  padding: $spacing-radio_buttonRadioGroup_middle-padding;
85
86
  border-radius: $radius-radio_buttonRadio;
86
87
  line-height: $font-radio_buttonRadioGroup_middle-lineHeight;
@@ -111,11 +112,9 @@ $inner-width: $width-icon-medium;
111
112
  border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
112
113
 
113
114
  .#{$module}-inner {
114
- position: relative;
115
115
  &-display {
116
116
  background: $color-radio_card-bg-default;
117
117
  }
118
- margin-right: $spacing-radio_cardRadioGroup_inner-marginRight;
119
118
  flex-shrink: 0;
120
119
  }
121
120
 
@@ -124,8 +123,6 @@ $inner-width: $width-icon-medium;
124
123
  font-size: $font-radio_cardRadioGroup_addon-size;
125
124
  line-height: $font-radio_cardRadioGroup_addon-lineHeight;
126
125
  color: $color-radio_cardRadioGroup_addon-text-default;
127
- margin-left: 0;
128
- padding-left: 0;
129
126
  }
130
127
 
131
128
  .#{$module}-extra {
@@ -210,19 +207,19 @@ $inner-width: $width-icon-medium;
210
207
  }
211
208
 
212
209
  &-inner {
213
- position: absolute;
214
- display: inline-block;
215
- top: 2px;
216
- left: 0;
210
+ display: inline-flex;
211
+ margin-top: 2px;
212
+ // WARN: The absolute positioning used by the input does not occupy space, and relative cannot be removed here.
213
+ position: relative;
217
214
  width: $width-radio_inner;
218
215
  height: $width-radio_inner;
219
216
  vertical-align: sub;
220
217
  user-select: none; // prevent text under it will be selected when double click
221
218
 
222
219
  &-display {
223
- position: absolute;
224
- left: 0;
225
- top: 0;
220
+ display: inline-flex;
221
+ align-items: center;
222
+ justify-content: center;
226
223
  @include box-sizing;
227
224
  width: $width-radio_inner;
228
225
  height: $width-radio_inner;
@@ -233,7 +230,6 @@ $inner-width: $width-icon-medium;
233
230
  border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
234
231
 
235
232
  .#{$prefix}-icon {
236
- position: absolute;
237
233
  width: 100%;
238
234
  height: 100%;
239
235
  font-size: 14px;
@@ -241,6 +237,11 @@ $inner-width: $width-icon-medium;
241
237
  }
242
238
  }
243
239
 
240
+ &-content {
241
+ display: flex;
242
+ flex-direction: column;
243
+ }
244
+
244
245
  &:hover {
245
246
  .#{$module}-inner-display {
246
247
  background: $color-radio_default-bg-hover;
@@ -255,14 +256,11 @@ $inner-width: $width-icon-medium;
255
256
 
256
257
  &-addon {
257
258
  user-select: none;
258
- padding-left: $spacing-radio_addon-paddingLeft;
259
- margin-left: $spacing-radio_addon-marginLeft;
260
259
  color: $color-radio_default-text-default;
261
260
  display: inline-flex;
262
261
  align-items: center;
263
262
 
264
263
  &-buttonRadio {
265
- margin-left: $spacing-radio_addon_buttonRadio_marginLeft;
266
264
  text-align: center;
267
265
  border-radius: $radius-radio_addon_buttonRadio;
268
266
  font-weight: $font-radio_buttonRadio-default-fontWeight;
@@ -381,11 +379,7 @@ $inner-width: $width-icon-medium;
381
379
  }
382
380
 
383
381
  &-extra {
384
- flex-grow: 1;
385
- flex-basis: 100%;
386
- flex-shrink: 0;
387
382
  color: $color-radio_extra-text-default;
388
- padding-left: $spacing-radio_extra-paddingLeft;
389
383
  box-sizing: border-box;
390
384
  }
391
385
 
@@ -402,37 +396,26 @@ $inner-width: $width-icon-medium;
402
396
  @include font-size-regular;
403
397
 
404
398
  &-vertical {
405
- .#{$module} {
406
- &:last-of-type {
407
- margin-bottom: 0;
408
- }
409
- }
399
+ display: flex;
400
+ flex-direction: column;
401
+ row-gap: $spacing-radio_group_vertical-marginBottom;
402
+
410
403
  &-default {
411
404
  .#{$module} {
412
- display: block;
413
- margin-bottom: $spacing-radio_group_vertical-marginBottom;
414
-
405
+ display: flex;
415
406
  }
416
407
  }
417
408
  &-card {
418
409
  .#{$module} {
419
410
  display: flex;
420
- margin-bottom: $spacing-radio_card_group_vertical-marginBottom;
421
411
  }
422
412
  }
423
413
  }
424
414
 
425
415
  &-horizontal {
426
- .#{$module} {
427
- margin-right: $spacing-radio_group_horizontal-marginRight;
428
-
429
- &:last-of-type {
430
- margin-right: 0;
431
- }
432
- }
433
- &-default {
434
- display: inline-block;
435
- }
416
+ display: inline-flex;
417
+ flex-wrap: wrap;
418
+ gap: $spacing-radio_group_horizontal-marginRight;
436
419
  }
437
420
 
438
421
  &-buttonRadio {
package/lib/cjs/radio/rtl.scss CHANGED
@@ -17,62 +17,9 @@ $inner-width: $width-icon-medium;
17
17
  padding-left: $spacing-radio_buttonRadioGroup-paddingRight;
18
18
  }
19
19
  }
20
-
21
- &-inner {
22
- left: auto;
23
- right: 0;
24
-
25
- &-display {
26
- left: auto;
27
- right: 0;
28
- }
29
- }
30
-
31
- &-addon {
32
- padding-left: 0;
33
- margin-left: 0;
34
- padding-right: $spacing-radio_addon-paddingLeft;
35
- margin-right: $spacing-radio_addon-marginLeft;
36
-
37
- &-buttonRadio {
38
- margin-right: $spacing-none;
39
- }
40
- }
41
-
42
- &-extra {
43
- padding-left: 0;
44
- padding-right: $spacing-radio_extra-paddingLeft;
45
- }
46
- }
47
-
48
- &-isCardRadioGroup {
49
- .#{$module}-inner {
50
- margin-right: 0;
51
- margin-left: $spacing-radio_cardRadioGroup_inner-marginRight;
52
- }
53
-
54
- .#{$module}-addon {
55
- margin-right: 0;
56
- padding-right: 0;
57
- }
58
-
59
- .#{$module}-extra {
60
- padding-right: 0;
61
- }
62
20
  }
63
21
 
64
22
  .#{$module}Group {
65
23
  direction: rtl;
66
-
67
- &-horizontal {
68
- .#{$module} {
69
- margin-right: 0;
70
- margin-left: $spacing-radio_group_horizontal-marginRight;
71
-
72
- &:last-of-type {
73
- margin-left: 0;
74
- }
75
- }
76
- }
77
24
  }
78
25
  }
package/lib/es/checkbox/checkbox.css CHANGED
@@ -5,7 +5,7 @@
5
5
  box-sizing: border-box;
6
6
  position: relative;
7
7
  display: flex;
8
- align-items: flex-start;
8
+ align-items: center;
9
9
  flex-wrap: wrap;
10
10
  font-size: 14px;
11
11
  line-height: 20px;
@@ -13,7 +13,6 @@
13
13
  cursor: pointer;
14
14
  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
15
15
  transform: scale(var(--semi-transform_scale-none));
16
- column-gap: 8px;
17
16
  }
18
17
  .semi-checkbox input[type=checkbox] {
19
18
  position: absolute;
@@ -24,16 +23,11 @@
24
23
  margin: 0;
25
24
  opacity: 0;
26
25
  }
27
- .semi-checkbox-content {
28
- flex: 1;
29
- display: flex;
30
- flex-direction: column;
31
- row-gap: 4px;
32
- }
33
26
  .semi-checkbox-addon {
34
27
  display: flex;
35
28
  flex: 1;
36
29
  align-items: center;
30
+ padding-left: 8px;
37
31
  color: var(--semi-color-text-0);
38
32
  line-height: 20px;
39
33
  user-select: none;
@@ -262,7 +256,9 @@
262
256
  flex-grow: 1;
263
257
  flex-basis: 100%;
264
258
  box-sizing: border-box;
259
+ padding-left: 24px;
265
260
  color: var(--semi-color-text-2);
261
+ margin-top: 4px;
266
262
  }
267
263
  .semi-checkbox-focus {
268
264
  outline: 2px solid var(--semi-color-primary-light-active);