@douyinfe/semi-foundation 2.15.1 → 2.15.2-alpha.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 (9) hide show
  1. package/lib/cjs/radio/radio.css +20 -75
  2. package/lib/cjs/radio/radio.scss +22 -36
  3. package/lib/cjs/radio/rtl.scss +0 -47
  4. package/lib/es/radio/radio.css +20 -75
  5. package/lib/es/radio/radio.scss +22 -36
  6. package/lib/es/radio/rtl.scss +0 -47
  7. package/package.json +2 -2
  8. package/radio/radio.scss +22 -36
  9. package/radio/rtl.scss +0 -47
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
  min-height: 20px;
13
12
  min-width: 16px;
14
13
  cursor: pointer;
@@ -56,6 +55,7 @@
56
55
  border-radius: var(--semi-border-radius-small);
57
56
  }
58
57
  .semi-radio-buttonRadioGroup {
58
+ position: relative;
59
59
  padding: 4px;
60
60
  border-radius: var(--semi-border-radius-small);
61
61
  line-height: 16px;
@@ -79,7 +79,6 @@
79
79
  border: 1px solid transparent;
80
80
  }
81
81
  .semi-radio-cardRadioGroup .semi-radio-inner {
82
- position: relative;
83
82
  margin-right: 8px;
84
83
  flex-shrink: 0;
85
84
  }
@@ -149,19 +148,18 @@
149
148
  border-color: var(--semi-color-primary-disabled);
150
149
  }
151
150
  .semi-radio-inner {
152
- position: absolute;
153
- display: inline-block;
154
- top: 2px;
155
- left: 0;
151
+ display: inline-flex;
152
+ margin-top: 2px;
153
+ position: relative;
156
154
  width: 16px;
157
155
  height: 16px;
158
156
  vertical-align: sub;
159
157
  user-select: none;
160
158
  }
161
159
  .semi-radio-inner-display {
162
- position: absolute;
163
- left: 0;
164
- top: 0;
160
+ display: inline-flex;
161
+ align-items: center;
162
+ justify-content: center;
165
163
  box-sizing: border-box;
166
164
  width: 16px;
167
165
  height: 16px;
@@ -170,11 +168,14 @@
170
168
  background: transparent;
171
169
  }
172
170
  .semi-radio-inner-display .semi-icon {
173
- position: absolute;
174
171
  width: 100%;
175
172
  height: 100%;
176
173
  font-size: 14px;
177
174
  }
175
+ .semi-radio-content {
176
+ display: flex;
177
+ flex-direction: column;
178
+ }
178
179
  .semi-radio:hover .semi-radio-inner-display {
179
180
  background: var(--semi-color-fill-0);
180
181
  }
@@ -183,8 +184,6 @@
183
184
  }
184
185
  .semi-radio-addon {
185
186
  user-select: none;
186
- padding-left: 8px;
187
- margin-left: 16px;
188
187
  color: var(--semi-color-text-0);
189
188
  display: inline-flex;
190
189
  align-items: center;
@@ -273,11 +272,7 @@
273
272
  color: var(--semi-color-disabled-text);
274
273
  }
275
274
  .semi-radio-extra {
276
- flex-grow: 1;
277
- flex-basis: 100%;
278
- flex-shrink: 0;
279
275
  color: var(--semi-color-text-2);
280
- padding-left: 24px;
281
276
  box-sizing: border-box;
282
277
  }
283
278
  .semi-radio-focus {
@@ -292,25 +287,20 @@
292
287
  line-height: 20px;
293
288
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
294
289
  }
295
- .semi-radioGroup-vertical .semi-radio:last-of-type {
296
- margin-bottom: 0;
290
+ .semi-radioGroup-vertical {
291
+ display: flex;
292
+ flex-direction: column;
293
+ row-gap: 12px;
297
294
  }
298
295
  .semi-radioGroup-vertical-default .semi-radio {
299
- display: block;
300
- margin-bottom: 12px;
296
+ display: flex;
301
297
  }
302
298
  .semi-radioGroup-vertical-card .semi-radio {
303
299
  display: flex;
304
- margin-bottom: 16px;
305
- }
306
- .semi-radioGroup-horizontal .semi-radio {
307
- margin-right: 16px;
308
300
  }
309
- .semi-radioGroup-horizontal .semi-radio:last-of-type {
310
- margin-right: 0;
311
- }
312
- .semi-radioGroup-horizontal-default {
313
- display: inline-block;
301
+ .semi-radioGroup-horizontal {
302
+ display: inline-flex;
303
+ column-gap: 16px;
314
304
  }
315
305
  .semi-radioGroup-buttonRadio {
316
306
  display: inline-block;
@@ -334,56 +324,11 @@
334
324
  .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
335
325
  padding-left: 0;
336
326
  }
337
- .semi-rtl .semi-radio-inner,
338
- .semi-portal-rtl .semi-radio-inner {
339
- left: auto;
340
- right: 0;
341
- }
342
- .semi-rtl .semi-radio-inner-display,
343
- .semi-portal-rtl .semi-radio-inner-display {
344
- left: auto;
345
- right: 0;
346
- }
347
- .semi-rtl .semi-radio-addon,
348
- .semi-portal-rtl .semi-radio-addon {
349
- padding-left: 0;
350
- margin-left: 0;
351
- padding-right: 8px;
352
- margin-right: 16px;
353
- }
354
327
  .semi-rtl .semi-radio-addon-buttonRadio,
355
328
  .semi-portal-rtl .semi-radio-addon-buttonRadio {
356
329
  margin-right: 0;
357
330
  }
358
- .semi-rtl .semi-radio-extra,
359
- .semi-portal-rtl .semi-radio-extra {
360
- padding-left: 0;
361
- padding-right: 24px;
362
- }
363
- .semi-rtl-isCardRadioGroup .semi-radio-inner,
364
- .semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
365
- margin-right: 0;
366
- margin-left: 8px;
367
- }
368
- .semi-rtl-isCardRadioGroup .semi-radio-addon,
369
- .semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
370
- margin-right: 0;
371
- padding-right: 0;
372
- }
373
- .semi-rtl-isCardRadioGroup .semi-radio-extra,
374
- .semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
375
- padding-right: 0;
376
- }
377
331
  .semi-rtl .semi-radioGroup,
378
332
  .semi-portal-rtl .semi-radioGroup {
379
333
  direction: rtl;
380
- }
381
- .semi-rtl .semi-radioGroup-horizontal .semi-radio,
382
- .semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
383
- margin-right: 0;
384
- margin-left: 16px;
385
- }
386
- .semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
387
- .semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
388
- margin-left: 0;
389
334
  }
package/lib/cjs/radio/radio.scss CHANGED
@@ -6,9 +6,8 @@ $inner-width: $width-icon-medium;
6
6
  .#{$module} {
7
7
  @include box-sizing;
8
8
  @include font-size-regular;
9
- position: relative;
10
9
  display: inline-flex;
11
- flex-wrap: wrap;
10
+ column-gap: $spacing-radio_addon-paddingLeft;
12
11
 
13
12
  &.#{$module}-vertical {
14
13
  display: block;
@@ -78,6 +77,8 @@ $inner-width: $width-icon-medium;
78
77
  }
79
78
 
80
79
  &-buttonRadioGroup {
80
+ // Button needs to be positioned relative to parent
81
+ position: relative;
81
82
  padding: $spacing-radio_buttonRadioGroup_middle-padding;
82
83
  border-radius: $radius-radio_buttonRadio;
83
84
  line-height: $font-radio_buttonRadioGroup_middle-lineHeight;
@@ -106,7 +107,6 @@ $inner-width: $width-icon-medium;
106
107
  border: $width-radio_cardRadioGroup_checked-border solid transparent;
107
108
 
108
109
  .#{$module}-inner {
109
- position: relative;
110
110
  &-display {
111
111
  background: $color-radio_card-bg-default;
112
112
  }
@@ -205,19 +205,19 @@ $inner-width: $width-icon-medium;
205
205
  }
206
206
 
207
207
  &-inner {
208
- position: absolute;
209
- display: inline-block;
210
- top: 2px;
211
- left: 0;
208
+ display: inline-flex;
209
+ margin-top: 2px;
210
+ // WARN: The absolute positioning used by the input does not occupy space, and relative cannot be removed here.
211
+ position: relative;
212
212
  width: $width-radio_inner;
213
213
  height: $width-radio_inner;
214
214
  vertical-align: sub;
215
215
  user-select: none; // prevent text under it will be selected when double click
216
216
 
217
217
  &-display {
218
- position: absolute;
219
- left: 0;
220
- top: 0;
218
+ display: inline-flex;
219
+ align-items: center;
220
+ justify-content: center;
221
221
  @include box-sizing;
222
222
  width: $width-radio_inner;
223
223
  height: $width-radio_inner;
@@ -226,7 +226,6 @@ $inner-width: $width-icon-medium;
226
226
  background: $color-radio_default-bg-default;
227
227
 
228
228
  .#{$prefix}-icon {
229
- position: absolute;
230
229
  width: 100%;
231
230
  height: 100%;
232
231
  font-size: 14px;
@@ -234,6 +233,11 @@ $inner-width: $width-icon-medium;
234
233
  }
235
234
  }
236
235
 
236
+ &-content {
237
+ display: flex;
238
+ flex-direction: column;
239
+ }
240
+
237
241
  &:hover {
238
242
  .#{$module}-inner-display {
239
243
  background: $color-radio_default-bg-hover;
@@ -248,8 +252,6 @@ $inner-width: $width-icon-medium;
248
252
 
249
253
  &-addon {
250
254
  user-select: none;
251
- padding-left: $spacing-radio_addon-paddingLeft;
252
- margin-left: $spacing-radio_addon-marginLeft;
253
255
  color: $color-radio_default-text-default;
254
256
  display: inline-flex;
255
257
  align-items: center;
@@ -372,11 +374,7 @@ $inner-width: $width-icon-medium;
372
374
  }
373
375
 
374
376
  &-extra {
375
- flex-grow: 1;
376
- flex-basis: 100%;
377
- flex-shrink: 0;
378
377
  color: $color-radio_extra-text-default;
379
- padding-left: $spacing-radio_extra-paddingLeft;
380
378
  box-sizing: border-box;
381
379
  }
382
380
 
@@ -393,37 +391,25 @@ $inner-width: $width-icon-medium;
393
391
  @include font-size-regular;
394
392
 
395
393
  &-vertical {
396
- .#{$module} {
397
- &:last-of-type {
398
- margin-bottom: 0;
399
- }
400
- }
394
+ display: flex;
395
+ flex-direction: column;
396
+ row-gap: $spacing-radio_group_vertical-marginBottom;
397
+
401
398
  &-default {
402
399
  .#{$module} {
403
- display: block;
404
- margin-bottom: $spacing-radio_group_vertical-marginBottom;
405
-
400
+ display: flex;
406
401
  }
407
402
  }
408
403
  &-card {
409
404
  .#{$module} {
410
405
  display: flex;
411
- margin-bottom: $spacing-radio_card_group_vertical-marginBottom;
412
406
  }
413
407
  }
414
408
  }
415
409
 
416
410
  &-horizontal {
417
- .#{$module} {
418
- margin-right: $spacing-radio_group_horizontal-marginRight;
419
-
420
- &:last-of-type {
421
- margin-right: 0;
422
- }
423
- }
424
- &-default {
425
- display: inline-block;
426
- }
411
+ display: inline-flex;
412
+ column-gap: $spacing-radio_group_horizontal-marginRight;
427
413
  }
428
414
 
429
415
  &-buttonRadio {
package/lib/cjs/radio/rtl.scss CHANGED
@@ -18,61 +18,14 @@ $inner-width: $width-icon-medium;
18
18
  }
19
19
  }
20
20
 
21
- &-inner {
22
- left: auto;
23
- right: 0;
24
-
25
- &-display {
26
- left: auto;
27
- right: 0;
28
- }
29
- }
30
-
31
21
  &-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
22
  &-buttonRadio {
38
23
  margin-right: $spacing-none;
39
24
  }
40
25
  }
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
26
  }
63
27
 
64
28
  .#{$module}Group {
65
29
  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
30
  }
78
31
  }
package/lib/es/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
  min-height: 20px;
13
12
  min-width: 16px;
14
13
  cursor: pointer;
@@ -56,6 +55,7 @@
56
55
  border-radius: var(--semi-border-radius-small);
57
56
  }
58
57
  .semi-radio-buttonRadioGroup {
58
+ position: relative;
59
59
  padding: 4px;
60
60
  border-radius: var(--semi-border-radius-small);
61
61
  line-height: 16px;
@@ -79,7 +79,6 @@
79
79
  border: 1px solid transparent;
80
80
  }
81
81
  .semi-radio-cardRadioGroup .semi-radio-inner {
82
- position: relative;
83
82
  margin-right: 8px;
84
83
  flex-shrink: 0;
85
84
  }
@@ -149,19 +148,18 @@
149
148
  border-color: var(--semi-color-primary-disabled);
150
149
  }
151
150
  .semi-radio-inner {
152
- position: absolute;
153
- display: inline-block;
154
- top: 2px;
155
- left: 0;
151
+ display: inline-flex;
152
+ margin-top: 2px;
153
+ position: relative;
156
154
  width: 16px;
157
155
  height: 16px;
158
156
  vertical-align: sub;
159
157
  user-select: none;
160
158
  }
161
159
  .semi-radio-inner-display {
162
- position: absolute;
163
- left: 0;
164
- top: 0;
160
+ display: inline-flex;
161
+ align-items: center;
162
+ justify-content: center;
165
163
  box-sizing: border-box;
166
164
  width: 16px;
167
165
  height: 16px;
@@ -170,11 +168,14 @@
170
168
  background: transparent;
171
169
  }
172
170
  .semi-radio-inner-display .semi-icon {
173
- position: absolute;
174
171
  width: 100%;
175
172
  height: 100%;
176
173
  font-size: 14px;
177
174
  }
175
+ .semi-radio-content {
176
+ display: flex;
177
+ flex-direction: column;
178
+ }
178
179
  .semi-radio:hover .semi-radio-inner-display {
179
180
  background: var(--semi-color-fill-0);
180
181
  }
@@ -183,8 +184,6 @@
183
184
  }
184
185
  .semi-radio-addon {
185
186
  user-select: none;
186
- padding-left: 8px;
187
- margin-left: 16px;
188
187
  color: var(--semi-color-text-0);
189
188
  display: inline-flex;
190
189
  align-items: center;
@@ -273,11 +272,7 @@
273
272
  color: var(--semi-color-disabled-text);
274
273
  }
275
274
  .semi-radio-extra {
276
- flex-grow: 1;
277
- flex-basis: 100%;
278
- flex-shrink: 0;
279
275
  color: var(--semi-color-text-2);
280
- padding-left: 24px;
281
276
  box-sizing: border-box;
282
277
  }
283
278
  .semi-radio-focus {
@@ -292,25 +287,20 @@
292
287
  line-height: 20px;
293
288
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
294
289
  }
295
- .semi-radioGroup-vertical .semi-radio:last-of-type {
296
- margin-bottom: 0;
290
+ .semi-radioGroup-vertical {
291
+ display: flex;
292
+ flex-direction: column;
293
+ row-gap: 12px;
297
294
  }
298
295
  .semi-radioGroup-vertical-default .semi-radio {
299
- display: block;
300
- margin-bottom: 12px;
296
+ display: flex;
301
297
  }
302
298
  .semi-radioGroup-vertical-card .semi-radio {
303
299
  display: flex;
304
- margin-bottom: 16px;
305
- }
306
- .semi-radioGroup-horizontal .semi-radio {
307
- margin-right: 16px;
308
300
  }
309
- .semi-radioGroup-horizontal .semi-radio:last-of-type {
310
- margin-right: 0;
311
- }
312
- .semi-radioGroup-horizontal-default {
313
- display: inline-block;
301
+ .semi-radioGroup-horizontal {
302
+ display: inline-flex;
303
+ column-gap: 16px;
314
304
  }
315
305
  .semi-radioGroup-buttonRadio {
316
306
  display: inline-block;
@@ -334,56 +324,11 @@
334
324
  .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
335
325
  padding-left: 0;
336
326
  }
337
- .semi-rtl .semi-radio-inner,
338
- .semi-portal-rtl .semi-radio-inner {
339
- left: auto;
340
- right: 0;
341
- }
342
- .semi-rtl .semi-radio-inner-display,
343
- .semi-portal-rtl .semi-radio-inner-display {
344
- left: auto;
345
- right: 0;
346
- }
347
- .semi-rtl .semi-radio-addon,
348
- .semi-portal-rtl .semi-radio-addon {
349
- padding-left: 0;
350
- margin-left: 0;
351
- padding-right: 8px;
352
- margin-right: 16px;
353
- }
354
327
  .semi-rtl .semi-radio-addon-buttonRadio,
355
328
  .semi-portal-rtl .semi-radio-addon-buttonRadio {
356
329
  margin-right: 0;
357
330
  }
358
- .semi-rtl .semi-radio-extra,
359
- .semi-portal-rtl .semi-radio-extra {
360
- padding-left: 0;
361
- padding-right: 24px;
362
- }
363
- .semi-rtl-isCardRadioGroup .semi-radio-inner,
364
- .semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
365
- margin-right: 0;
366
- margin-left: 8px;
367
- }
368
- .semi-rtl-isCardRadioGroup .semi-radio-addon,
369
- .semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
370
- margin-right: 0;
371
- padding-right: 0;
372
- }
373
- .semi-rtl-isCardRadioGroup .semi-radio-extra,
374
- .semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
375
- padding-right: 0;
376
- }
377
331
  .semi-rtl .semi-radioGroup,
378
332
  .semi-portal-rtl .semi-radioGroup {
379
333
  direction: rtl;
380
- }
381
- .semi-rtl .semi-radioGroup-horizontal .semi-radio,
382
- .semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
383
- margin-right: 0;
384
- margin-left: 16px;
385
- }
386
- .semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
387
- .semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
388
- margin-left: 0;
389
334
  }
package/lib/es/radio/radio.scss CHANGED
@@ -6,9 +6,8 @@ $inner-width: $width-icon-medium;
6
6
  .#{$module} {
7
7
  @include box-sizing;
8
8
  @include font-size-regular;
9
- position: relative;
10
9
  display: inline-flex;
11
- flex-wrap: wrap;
10
+ column-gap: $spacing-radio_addon-paddingLeft;
12
11
 
13
12
  &.#{$module}-vertical {
14
13
  display: block;
@@ -78,6 +77,8 @@ $inner-width: $width-icon-medium;
78
77
  }
79
78
 
80
79
  &-buttonRadioGroup {
80
+ // Button needs to be positioned relative to parent
81
+ position: relative;
81
82
  padding: $spacing-radio_buttonRadioGroup_middle-padding;
82
83
  border-radius: $radius-radio_buttonRadio;
83
84
  line-height: $font-radio_buttonRadioGroup_middle-lineHeight;
@@ -106,7 +107,6 @@ $inner-width: $width-icon-medium;
106
107
  border: $width-radio_cardRadioGroup_checked-border solid transparent;
107
108
 
108
109
  .#{$module}-inner {
109
- position: relative;
110
110
  &-display {
111
111
  background: $color-radio_card-bg-default;
112
112
  }
@@ -205,19 +205,19 @@ $inner-width: $width-icon-medium;
205
205
  }
206
206
 
207
207
  &-inner {
208
- position: absolute;
209
- display: inline-block;
210
- top: 2px;
211
- left: 0;
208
+ display: inline-flex;
209
+ margin-top: 2px;
210
+ // WARN: The absolute positioning used by the input does not occupy space, and relative cannot be removed here.
211
+ position: relative;
212
212
  width: $width-radio_inner;
213
213
  height: $width-radio_inner;
214
214
  vertical-align: sub;
215
215
  user-select: none; // prevent text under it will be selected when double click
216
216
 
217
217
  &-display {
218
- position: absolute;
219
- left: 0;
220
- top: 0;
218
+ display: inline-flex;
219
+ align-items: center;
220
+ justify-content: center;
221
221
  @include box-sizing;
222
222
  width: $width-radio_inner;
223
223
  height: $width-radio_inner;
@@ -226,7 +226,6 @@ $inner-width: $width-icon-medium;
226
226
  background: $color-radio_default-bg-default;
227
227
 
228
228
  .#{$prefix}-icon {
229
- position: absolute;
230
229
  width: 100%;
231
230
  height: 100%;
232
231
  font-size: 14px;
@@ -234,6 +233,11 @@ $inner-width: $width-icon-medium;
234
233
  }
235
234
  }
236
235
 
236
+ &-content {
237
+ display: flex;
238
+ flex-direction: column;
239
+ }
240
+
237
241
  &:hover {
238
242
  .#{$module}-inner-display {
239
243
  background: $color-radio_default-bg-hover;
@@ -248,8 +252,6 @@ $inner-width: $width-icon-medium;
248
252
 
249
253
  &-addon {
250
254
  user-select: none;
251
- padding-left: $spacing-radio_addon-paddingLeft;
252
- margin-left: $spacing-radio_addon-marginLeft;
253
255
  color: $color-radio_default-text-default;
254
256
  display: inline-flex;
255
257
  align-items: center;
@@ -372,11 +374,7 @@ $inner-width: $width-icon-medium;
372
374
  }
373
375
 
374
376
  &-extra {
375
- flex-grow: 1;
376
- flex-basis: 100%;
377
- flex-shrink: 0;
378
377
  color: $color-radio_extra-text-default;
379
- padding-left: $spacing-radio_extra-paddingLeft;
380
378
  box-sizing: border-box;
381
379
  }
382
380
 
@@ -393,37 +391,25 @@ $inner-width: $width-icon-medium;
393
391
  @include font-size-regular;
394
392
 
395
393
  &-vertical {
396
- .#{$module} {
397
- &:last-of-type {
398
- margin-bottom: 0;
399
- }
400
- }
394
+ display: flex;
395
+ flex-direction: column;
396
+ row-gap: $spacing-radio_group_vertical-marginBottom;
397
+
401
398
  &-default {
402
399
  .#{$module} {
403
- display: block;
404
- margin-bottom: $spacing-radio_group_vertical-marginBottom;
405
-
400
+ display: flex;
406
401
  }
407
402
  }
408
403
  &-card {
409
404
  .#{$module} {
410
405
  display: flex;
411
- margin-bottom: $spacing-radio_card_group_vertical-marginBottom;
412
406
  }
413
407
  }
414
408
  }
415
409
 
416
410
  &-horizontal {
417
- .#{$module} {
418
- margin-right: $spacing-radio_group_horizontal-marginRight;
419
-
420
- &:last-of-type {
421
- margin-right: 0;
422
- }
423
- }
424
- &-default {
425
- display: inline-block;
426
- }
411
+ display: inline-flex;
412
+ column-gap: $spacing-radio_group_horizontal-marginRight;
427
413
  }
428
414
 
429
415
  &-buttonRadio {
package/lib/es/radio/rtl.scss CHANGED
@@ -18,61 +18,14 @@ $inner-width: $width-icon-medium;
18
18
  }
19
19
  }
20
20
 
21
- &-inner {
22
- left: auto;
23
- right: 0;
24
-
25
- &-display {
26
- left: auto;
27
- right: 0;
28
- }
29
- }
30
-
31
21
  &-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
22
  &-buttonRadio {
38
23
  margin-right: $spacing-none;
39
24
  }
40
25
  }
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
26
  }
63
27
 
64
28
  .#{$module}Group {
65
29
  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
30
  }
78
31
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.15.1",
3
+ "version": "2.15.2-alpha.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": "c17dbc08573d010f8ecfe60834412acd9e7ca154",
27
+ "gitHead": "2a0f381a9b559286fe9891093222198792fe5313",
28
28
  "devDependencies": {
29
29
  "@babel/plugin-proposal-decorators": "^7.15.8",
30
30
  "@babel/plugin-transform-runtime": "^7.15.8",
package/radio/radio.scss CHANGED
@@ -6,9 +6,8 @@ $inner-width: $width-icon-medium;
6
6
  .#{$module} {
7
7
  @include box-sizing;
8
8
  @include font-size-regular;
9
- position: relative;
10
9
  display: inline-flex;
11
- flex-wrap: wrap;
10
+ column-gap: $spacing-radio_addon-paddingLeft;
12
11
 
13
12
  &.#{$module}-vertical {
14
13
  display: block;
@@ -78,6 +77,8 @@ $inner-width: $width-icon-medium;
78
77
  }
79
78
 
80
79
  &-buttonRadioGroup {
80
+ // Button needs to be positioned relative to parent
81
+ position: relative;
81
82
  padding: $spacing-radio_buttonRadioGroup_middle-padding;
82
83
  border-radius: $radius-radio_buttonRadio;
83
84
  line-height: $font-radio_buttonRadioGroup_middle-lineHeight;
@@ -106,7 +107,6 @@ $inner-width: $width-icon-medium;
106
107
  border: $width-radio_cardRadioGroup_checked-border solid transparent;
107
108
 
108
109
  .#{$module}-inner {
109
- position: relative;
110
110
  &-display {
111
111
  background: $color-radio_card-bg-default;
112
112
  }
@@ -205,19 +205,19 @@ $inner-width: $width-icon-medium;
205
205
  }
206
206
 
207
207
  &-inner {
208
- position: absolute;
209
- display: inline-block;
210
- top: 2px;
211
- left: 0;
208
+ display: inline-flex;
209
+ margin-top: 2px;
210
+ // WARN: The absolute positioning used by the input does not occupy space, and relative cannot be removed here.
211
+ position: relative;
212
212
  width: $width-radio_inner;
213
213
  height: $width-radio_inner;
214
214
  vertical-align: sub;
215
215
  user-select: none; // prevent text under it will be selected when double click
216
216
 
217
217
  &-display {
218
- position: absolute;
219
- left: 0;
220
- top: 0;
218
+ display: inline-flex;
219
+ align-items: center;
220
+ justify-content: center;
221
221
  @include box-sizing;
222
222
  width: $width-radio_inner;
223
223
  height: $width-radio_inner;
@@ -226,7 +226,6 @@ $inner-width: $width-icon-medium;
226
226
  background: $color-radio_default-bg-default;
227
227
 
228
228
  .#{$prefix}-icon {
229
- position: absolute;
230
229
  width: 100%;
231
230
  height: 100%;
232
231
  font-size: 14px;
@@ -234,6 +233,11 @@ $inner-width: $width-icon-medium;
234
233
  }
235
234
  }
236
235
 
236
+ &-content {
237
+ display: flex;
238
+ flex-direction: column;
239
+ }
240
+
237
241
  &:hover {
238
242
  .#{$module}-inner-display {
239
243
  background: $color-radio_default-bg-hover;
@@ -248,8 +252,6 @@ $inner-width: $width-icon-medium;
248
252
 
249
253
  &-addon {
250
254
  user-select: none;
251
- padding-left: $spacing-radio_addon-paddingLeft;
252
- margin-left: $spacing-radio_addon-marginLeft;
253
255
  color: $color-radio_default-text-default;
254
256
  display: inline-flex;
255
257
  align-items: center;
@@ -372,11 +374,7 @@ $inner-width: $width-icon-medium;
372
374
  }
373
375
 
374
376
  &-extra {
375
- flex-grow: 1;
376
- flex-basis: 100%;
377
- flex-shrink: 0;
378
377
  color: $color-radio_extra-text-default;
379
- padding-left: $spacing-radio_extra-paddingLeft;
380
378
  box-sizing: border-box;
381
379
  }
382
380
 
@@ -393,37 +391,25 @@ $inner-width: $width-icon-medium;
393
391
  @include font-size-regular;
394
392
 
395
393
  &-vertical {
396
- .#{$module} {
397
- &:last-of-type {
398
- margin-bottom: 0;
399
- }
400
- }
394
+ display: flex;
395
+ flex-direction: column;
396
+ row-gap: $spacing-radio_group_vertical-marginBottom;
397
+
401
398
  &-default {
402
399
  .#{$module} {
403
- display: block;
404
- margin-bottom: $spacing-radio_group_vertical-marginBottom;
405
-
400
+ display: flex;
406
401
  }
407
402
  }
408
403
  &-card {
409
404
  .#{$module} {
410
405
  display: flex;
411
- margin-bottom: $spacing-radio_card_group_vertical-marginBottom;
412
406
  }
413
407
  }
414
408
  }
415
409
 
416
410
  &-horizontal {
417
- .#{$module} {
418
- margin-right: $spacing-radio_group_horizontal-marginRight;
419
-
420
- &:last-of-type {
421
- margin-right: 0;
422
- }
423
- }
424
- &-default {
425
- display: inline-block;
426
- }
411
+ display: inline-flex;
412
+ column-gap: $spacing-radio_group_horizontal-marginRight;
427
413
  }
428
414
 
429
415
  &-buttonRadio {
package/radio/rtl.scss CHANGED
@@ -18,61 +18,14 @@ $inner-width: $width-icon-medium;
18
18
  }
19
19
  }
20
20
 
21
- &-inner {
22
- left: auto;
23
- right: 0;
24
-
25
- &-display {
26
- left: auto;
27
- right: 0;
28
- }
29
- }
30
-
31
21
  &-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
22
  &-buttonRadio {
38
23
  margin-right: $spacing-none;
39
24
  }
40
25
  }
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
26
  }
63
27
 
64
28
  .#{$module}Group {
65
29
  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
30
  }
78
31
  }