@douyinfe/semi-foundation 2.1.3 → 2.1.4

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 (29) hide show
  1. package/checkbox/checkbox.scss +25 -1
  2. package/checkbox/checkboxFoundation.ts +14 -4
  3. package/checkbox/variables.scss +6 -1
  4. package/lib/cjs/checkbox/checkbox.css +21 -2
  5. package/lib/cjs/checkbox/checkbox.scss +25 -1
  6. package/lib/cjs/checkbox/checkboxFoundation.d.ts +10 -4
  7. package/lib/cjs/checkbox/checkboxFoundation.js +7 -0
  8. package/lib/cjs/checkbox/variables.scss +6 -1
  9. package/lib/cjs/radio/radio.css +33 -2
  10. package/lib/cjs/radio/radio.scss +44 -1
  11. package/lib/cjs/radio/variables.scss +12 -2
  12. package/lib/cjs/rating/rating.css +3 -0
  13. package/lib/cjs/rating/rating.scss +4 -0
  14. package/lib/es/checkbox/checkbox.css +21 -2
  15. package/lib/es/checkbox/checkbox.scss +25 -1
  16. package/lib/es/checkbox/checkboxFoundation.d.ts +10 -4
  17. package/lib/es/checkbox/checkboxFoundation.js +7 -0
  18. package/lib/es/checkbox/variables.scss +6 -1
  19. package/lib/es/radio/radio.css +33 -2
  20. package/lib/es/radio/radio.scss +44 -1
  21. package/lib/es/radio/variables.scss +12 -2
  22. package/lib/es/rating/rating.css +3 -0
  23. package/lib/es/rating/rating.scss +4 -0
  24. package/package.json +3 -3
  25. package/radio/radio.scss +44 -1
  26. package/radio/variables.scss +12 -2
  27. package/rating/rating.scss +4 -0
  28. package/tree/treeUtil.ts +1 -1
  29. package/tsconfig.json +2 -1
package/checkbox/checkbox.scss CHANGED
@@ -44,6 +44,7 @@ $module: #{$prefix}-checkbox;
44
44
  .#{$module}-inner-checked {
45
45
  .#{$module}-inner-display {
46
46
  background: $color-checkbox_checked-bg-hover;
47
+ box-shadow: none;
47
48
  }
48
49
  }
49
50
  }
@@ -56,6 +57,7 @@ $module: #{$prefix}-checkbox;
56
57
  .#{$module}-inner-checked {
57
58
  .#{$module}-inner-display {
58
59
  background: $color-checkbox_checked-bg-active;
60
+ box-shadow: none;
59
61
  }
60
62
  }
61
63
  }
@@ -70,6 +72,7 @@ $module: #{$prefix}-checkbox;
70
72
  .#{$module}-inner-checked {
71
73
  .#{$module}-inner-display {
72
74
  background: $color-checkbox_checked-bg-disabled;
75
+ box-shadow: none;
73
76
  }
74
77
  }
75
78
  }
@@ -125,7 +128,7 @@ $module: #{$prefix}-checkbox;
125
128
 
126
129
  &.#{$module}-indeterminate .#{$module}-inner-display {
127
130
  background: $color-checkbox_checked-bg-hover;
128
- box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
131
+ box-shadow: none;
129
132
  color: $color-checkbox_checked-icon-hover;
130
133
  }
131
134
 
@@ -153,6 +156,7 @@ $module: #{$prefix}-checkbox;
153
156
  background: $color-checkbox_checked-bg-active;
154
157
  border-color: $color-checkbox_checked-border-active;
155
158
  color: $color-checkbox_checked-icon-active;
159
+ box-shadow: none;
156
160
  }
157
161
 
158
162
  .#{$module}-inner-checked {
@@ -222,6 +226,15 @@ $module: #{$prefix}-checkbox;
222
226
 
223
227
  &:hover {
224
228
  background: $color-checkbox_cardType_checked-bg;
229
+ border-color: $color-checkbox_cardType_checked_border-hover;
230
+ .#{$module}-inner-checked .#{$module}-inner-display {
231
+ box-shadow: none;
232
+ }
233
+ }
234
+
235
+ &:active {
236
+ background: $color-checkbox_cardType_checked-bg;
237
+ border-color: $color-checkbox_cardType_checked_border-active;
225
238
  }
226
239
  }
227
240
 
@@ -233,6 +246,17 @@ $module: #{$prefix}-checkbox;
233
246
  background: transparent;
234
247
  }
235
248
  }
249
+
250
+ &_checked_disabled.#{$module}-cardType {
251
+ background: $color-checkbox_cardType_checked_disabled-bg;
252
+ border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
253
+
254
+ &:hover {
255
+ .#{$module}-inner-checked .#{$module}-inner-display {
256
+ box-shadow: none;
257
+ }
258
+ }
259
+ }
236
260
  }
237
261
 
238
262
  &-indeterminate,
package/checkbox/checkboxFoundation.ts CHANGED
@@ -8,6 +8,9 @@ export interface BasicCheckboxEvent {
8
8
  target: BasicTargetObject;
9
9
  stopPropagation: () => void;
10
10
  preventDefault: () => void;
11
+ nativeEvent: {
12
+ stopImmediatePropagation: () => void;
13
+ }
11
14
  }
12
15
  export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
13
16
  getIsInGroup: () => boolean;
@@ -28,7 +31,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
28
31
  // eslint-disable-next-line @typescript-eslint/no-empty-function
29
32
  init() {}
30
33
 
31
- getEvent(checked: boolean, e: MouseEvent) {
34
+ getEvent(checked: boolean, e: any) {
32
35
  const props = this.getProps();
33
36
  const cbValue = {
34
37
  target: {
@@ -41,16 +44,23 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
41
44
  preventDefault: () => {
42
45
  e.preventDefault();
43
46
  },
47
+ nativeEvent: {
48
+ stopImmediatePropagation: () => {
49
+ if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
50
+ e.nativeEvent.stopImmediatePropagation();
51
+ }
52
+ }
53
+ },
44
54
  };
45
55
  return cbValue;
46
56
  }
47
57
 
48
- notifyChange(checked: boolean, e: MouseEvent) {
58
+ notifyChange(checked: boolean, e: any) {
49
59
  const cbValue = this.getEvent(checked, e);
50
60
  this._adapter.notifyChange(cbValue);
51
61
  }
52
62
 
53
- handleChange(e: MouseEvent) {
63
+ handleChange(e: any) {
54
64
  const disabled = this.getProp('disabled');
55
65
 
56
66
  if (disabled) {
@@ -78,7 +88,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
78
88
  }
79
89
  }
80
90
 
81
- handleChangeInGroup(e: MouseEvent) {
91
+ handleChangeInGroup(e: any) {
82
92
  const { value } = this.getProps();
83
93
  const groupValue = this._adapter.getGroupValue();
84
94
  const checked = groupValue.includes(value);
package/checkbox/variables.scss CHANGED
@@ -19,9 +19,13 @@ $color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选
19
19
  $color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
20
20
  $color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
21
21
  $color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
22
+ $color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
22
23
  $color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
23
24
  $color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
24
- $color-checkbox_cardType_checked_border-default: var(--semi-color-focus-border); //卡片类型复选框选中时的边框颜色 - 默认
25
+ $color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
26
+ $color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
27
+ $color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
28
+ $color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
25
29
  $color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
26
30
  $color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
27
31
  $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
@@ -37,6 +41,7 @@ $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
37
41
  $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
38
42
  $height-checkbox_inner: 20px; // 选框对勾 icon 高度
39
43
  $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
44
+ $width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
40
45
 
41
46
  $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
42
47
  $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角
package/lib/cjs/checkbox/checkbox.css CHANGED
@@ -36,12 +36,14 @@
36
36
  }
37
37
  .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
38
38
  background: var(--semi-color-primary-hover);
39
+ box-shadow: none;
39
40
  }
40
41
  .semi-checkbox:active .semi-checkbox-inner-display {
41
42
  background: var(--semi-color-fill-1);
42
43
  }
43
44
  .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
44
45
  background: var(--semi-color-primary-active);
46
+ box-shadow: none;
45
47
  }
46
48
  .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display {
47
49
  background: var(--semi-color-disabled-fill);
@@ -49,6 +51,7 @@
49
51
  }
50
52
  .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
51
53
  background: var(--semi-color-primary-disabled);
54
+ box-shadow: none;
52
55
  }
53
56
  .semi-checkbox-inner {
54
57
  position: relative;
@@ -89,7 +92,7 @@
89
92
  }
90
93
  .semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display {
91
94
  background: var(--semi-color-primary-hover);
92
- box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
95
+ box-shadow: none;
93
96
  color: var(--semi-color-white);
94
97
  }
95
98
  .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
@@ -107,6 +110,7 @@
107
110
  background: var(--semi-color-primary-active);
108
111
  border-color: var(--semi-color-primary-active);
109
112
  color: var(--semi-color-white);
113
+ box-shadow: none;
110
114
  }
111
115
  .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
112
116
  background: var(--semi-color-primary-active);
@@ -158,10 +162,18 @@
158
162
  }
159
163
  .semi-checkbox-cardType_checked {
160
164
  background: var(--semi-color-primary-light-default);
161
- border: 1px solid var(--semi-color-focus-border);
165
+ border: 1px solid var(--semi-color-primary);
162
166
  }
163
167
  .semi-checkbox-cardType_checked:hover {
164
168
  background: var(--semi-color-primary-light-default);
169
+ border-color: var(--semi-color-primary-hover);
170
+ }
171
+ .semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
172
+ box-shadow: none;
173
+ }
174
+ .semi-checkbox-cardType_checked:active {
175
+ background: var(--semi-color-primary-light-default);
176
+ border-color: var(--semi-color-primary-active);
165
177
  }
166
178
  .semi-checkbox-cardType_disabled:active {
167
179
  background: transparent;
@@ -169,6 +181,13 @@
169
181
  .semi-checkbox-cardType_disabled:hover {
170
182
  background: transparent;
171
183
  }
184
+ .semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType {
185
+ background: var(--semi-color-primary-light-default);
186
+ border: 1px solid var(--semi-color-primary-disabled);
187
+ }
188
+ .semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
189
+ box-shadow: none;
190
+ }
172
191
  .semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display {
173
192
  background: var(--semi-color-primary);
174
193
  color: var(--semi-color-white);
package/lib/cjs/checkbox/checkbox.scss CHANGED
@@ -44,6 +44,7 @@ $module: #{$prefix}-checkbox;
44
44
  .#{$module}-inner-checked {
45
45
  .#{$module}-inner-display {
46
46
  background: $color-checkbox_checked-bg-hover;
47
+ box-shadow: none;
47
48
  }
48
49
  }
49
50
  }
@@ -56,6 +57,7 @@ $module: #{$prefix}-checkbox;
56
57
  .#{$module}-inner-checked {
57
58
  .#{$module}-inner-display {
58
59
  background: $color-checkbox_checked-bg-active;
60
+ box-shadow: none;
59
61
  }
60
62
  }
61
63
  }
@@ -70,6 +72,7 @@ $module: #{$prefix}-checkbox;
70
72
  .#{$module}-inner-checked {
71
73
  .#{$module}-inner-display {
72
74
  background: $color-checkbox_checked-bg-disabled;
75
+ box-shadow: none;
73
76
  }
74
77
  }
75
78
  }
@@ -125,7 +128,7 @@ $module: #{$prefix}-checkbox;
125
128
 
126
129
  &.#{$module}-indeterminate .#{$module}-inner-display {
127
130
  background: $color-checkbox_checked-bg-hover;
128
- box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
131
+ box-shadow: none;
129
132
  color: $color-checkbox_checked-icon-hover;
130
133
  }
131
134
 
@@ -153,6 +156,7 @@ $module: #{$prefix}-checkbox;
153
156
  background: $color-checkbox_checked-bg-active;
154
157
  border-color: $color-checkbox_checked-border-active;
155
158
  color: $color-checkbox_checked-icon-active;
159
+ box-shadow: none;
156
160
  }
157
161
 
158
162
  .#{$module}-inner-checked {
@@ -222,6 +226,15 @@ $module: #{$prefix}-checkbox;
222
226
 
223
227
  &:hover {
224
228
  background: $color-checkbox_cardType_checked-bg;
229
+ border-color: $color-checkbox_cardType_checked_border-hover;
230
+ .#{$module}-inner-checked .#{$module}-inner-display {
231
+ box-shadow: none;
232
+ }
233
+ }
234
+
235
+ &:active {
236
+ background: $color-checkbox_cardType_checked-bg;
237
+ border-color: $color-checkbox_cardType_checked_border-active;
225
238
  }
226
239
  }
227
240
 
@@ -233,6 +246,17 @@ $module: #{$prefix}-checkbox;
233
246
  background: transparent;
234
247
  }
235
248
  }
249
+
250
+ &_checked_disabled.#{$module}-cardType {
251
+ background: $color-checkbox_cardType_checked_disabled-bg;
252
+ border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
253
+
254
+ &:hover {
255
+ .#{$module}-inner-checked .#{$module}-inner-display {
256
+ box-shadow: none;
257
+ }
258
+ }
259
+ }
236
260
  }
237
261
 
238
262
  &-indeterminate,
package/lib/cjs/checkbox/checkboxFoundation.d.ts CHANGED
@@ -7,6 +7,9 @@ export interface BasicCheckboxEvent {
7
7
  target: BasicTargetObject;
8
8
  stopPropagation: () => void;
9
9
  preventDefault: () => void;
10
+ nativeEvent: {
11
+ stopImmediatePropagation: () => void;
12
+ };
10
13
  }
11
14
  export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
12
15
  getIsInGroup: () => boolean;
@@ -20,14 +23,17 @@ export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any
20
23
  declare class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
21
24
  constructor(adapter: CheckboxAdapter<P, S>);
22
25
  init(): void;
23
- getEvent(checked: boolean, e: MouseEvent): {
26
+ getEvent(checked: boolean, e: any): {
24
27
  target: any;
25
28
  stopPropagation: () => void;
26
29
  preventDefault: () => void;
30
+ nativeEvent: {
31
+ stopImmediatePropagation: () => void;
32
+ };
27
33
  };
28
- notifyChange(checked: boolean, e: MouseEvent): void;
29
- handleChange(e: MouseEvent): void;
30
- handleChangeInGroup(e: MouseEvent): void;
34
+ notifyChange(checked: boolean, e: any): void;
35
+ handleChange(e: any): void;
36
+ handleChangeInGroup(e: any): void;
31
37
  setChecked(checked: boolean): void;
32
38
  destroy(): void;
33
39
  }
package/lib/cjs/checkbox/checkboxFoundation.js CHANGED
@@ -35,6 +35,13 @@ class CheckboxFoundation extends _foundation.default {
35
35
  },
36
36
  preventDefault: () => {
37
37
  e.preventDefault();
38
+ },
39
+ nativeEvent: {
40
+ stopImmediatePropagation: () => {
41
+ if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
42
+ e.nativeEvent.stopImmediatePropagation();
43
+ }
44
+ }
38
45
  }
39
46
  };
40
47
  return cbValue;
package/lib/cjs/checkbox/variables.scss CHANGED
@@ -19,9 +19,13 @@ $color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选
19
19
  $color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
20
20
  $color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
21
21
  $color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
22
+ $color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
22
23
  $color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
23
24
  $color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
24
- $color-checkbox_cardType_checked_border-default: var(--semi-color-focus-border); //卡片类型复选框选中时的边框颜色 - 默认
25
+ $color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
26
+ $color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
27
+ $color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
28
+ $color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
25
29
  $color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
26
30
  $color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
27
31
  $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
@@ -37,6 +41,7 @@ $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
37
41
  $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
38
42
  $height-checkbox_inner: 20px; // 选框对勾 icon 高度
39
43
  $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
44
+ $width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
40
45
 
41
46
  $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
42
47
  $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角
package/lib/cjs/radio/radio.css CHANGED
@@ -27,6 +27,7 @@
27
27
  width: 100%;
28
28
  height: 100%;
29
29
  margin: 0;
30
+ cursor: pointer;
30
31
  }
31
32
  .semi-radio:hover .semi-radio-inner-display {
32
33
  background: var(--semi-color-fill-0);
@@ -37,6 +38,7 @@
37
38
  }
38
39
  .semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display {
39
40
  background: var(--semi-color-primary-hover);
41
+ border-color: var(--semi-color-primary-hover);
40
42
  }
41
43
  .semi-radio:active .semi-radio-inner-display {
42
44
  background: var(--semi-color-fill-1);
@@ -46,6 +48,7 @@
46
48
  }
47
49
  .semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display {
48
50
  background: var(--semi-color-primary-active);
51
+ border-color: var(--semi-color-primary-active);
49
52
  }
50
53
  .semi-radio-buttonRadioComponent {
51
54
  padding: 4px;
@@ -103,7 +106,23 @@
103
106
  }
104
107
  .semi-radio-cardRadioGroup_checked {
105
108
  background: var(--semi-color-primary-light-default);
106
- border: 1px solid var(--semi-color-focus-border);
109
+ border: 1px solid var(--semi-color-primary);
110
+ }
111
+ .semi-radio-cardRadioGroup_checked:hover {
112
+ border: 1px solid var(--semi-color-primary-hover);
113
+ }
114
+ .semi-radio-cardRadioGroup_checked:hover .semi-radio-inner-checked .semi-radio-inner-display {
115
+ border-color: var(--semi-color-primary-hover);
116
+ }
117
+ .semi-radio-cardRadioGroup_checked:active {
118
+ background: var(--semi-color-primary-light-default);
119
+ border: 1px solid var(--semi-color-primary-active);
120
+ }
121
+ .semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked .semi-radio-inner-display {
122
+ border-color: var(--semi-color-primary-active);
123
+ }
124
+ .semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked:hover .semi-radio-inner-display {
125
+ background: var(--semi-color-primary-active);
107
126
  }
108
127
  .semi-radio-cardRadioGroup_hover {
109
128
  background: var(--semi-color-fill-0);
@@ -111,12 +130,23 @@
111
130
  .semi-radio-cardRadioGroup_disabled:active {
112
131
  background: transparent;
113
132
  }
133
+ .semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup {
134
+ background: var(--semi-color-primary-light-default);
135
+ border: 1px solid var(--semi-color-primary-disabled);
136
+ }
137
+ .semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup .semi-radio-inner-checked .semi-radio-inner-display {
138
+ border-color: var(--semi-color-primary-disabled);
139
+ }
140
+ .semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup:hover .semi-radio-inner-checked .semi-radio-inner-display {
141
+ border-color: var(--semi-color-primary-disabled);
142
+ }
114
143
  .semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display {
115
144
  background: var(--semi-color-disabled-fill);
116
145
  border: solid 1px var(--semi-color-border);
117
146
  }
118
147
  .semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display {
119
148
  background: var(--semi-color-primary-disabled);
149
+ border-color: var(--semi-color-primary-disabled);
120
150
  }
121
151
  .semi-radio-inner {
122
152
  position: absolute;
@@ -224,10 +254,11 @@
224
254
  }
225
255
  .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display {
226
256
  background: var(--semi-color-primary-disabled);
227
- border-color: var(--semi-color-border);
257
+ border-color: var(--semi-color-primary-disabled);
228
258
  }
229
259
  .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover {
230
260
  background: var(--semi-color-primary-disabled);
261
+ border-color: var(--semi-color-primary-disabled);
231
262
  }
232
263
  .semi-radio-disabled .semi-radio-addon {
233
264
  color: var(--semi-color-disabled-text);
package/lib/cjs/radio/radio.scss CHANGED
@@ -29,6 +29,7 @@ $inner-width: $width-icon-medium;
29
29
  width: 100%;
30
30
  height: 100%;
31
31
  margin: 0;
32
+ cursor: pointer;
32
33
  }
33
34
 
34
35
  &:hover {
@@ -46,6 +47,7 @@ $inner-width: $width-icon-medium;
46
47
  .#{$module}-inner-checked {
47
48
  .#{$module}-inner-display {
48
49
  background: $color-radio_primary-bg-hover;
50
+ border-color: $color-radio_checked-border-hover;
49
51
  }
50
52
  }
51
53
  }
@@ -64,6 +66,7 @@ $inner-width: $width-icon-medium;
64
66
  .#{$module}-inner-checked {
65
67
  .#{$module}-inner-display {
66
68
  background: $color-radio_primary-bg-active;
69
+ border-color: $color-radio_checked-border-active;
67
70
  }
68
71
  }
69
72
  }
@@ -135,6 +138,29 @@ $inner-width: $width-icon-medium;
135
138
  &_checked {
136
139
  background: $color-radio_cardRadioGroup-bg-checked;
137
140
  border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-active;
141
+
142
+ &:hover {
143
+ border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-hover;
144
+
145
+ .#{$module}-inner-checked .#{$module}-inner-display {
146
+ border-color: $color-radio_cardRadioGroup_checked_border-hover;
147
+ }
148
+ }
149
+
150
+ &:active {
151
+ background: $color-radio_cardRadioGroup-bg-checked;
152
+ border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-active;
153
+
154
+ .#{$module}-inner-checked {
155
+ .#{$module}-inner-display {
156
+ border-color: $color-radio_cardRadioGroup_checked_border-active;
157
+ }
158
+
159
+ &:hover .#{$module}-inner-display {
160
+ background: $color-radio_primary-bg-active;
161
+ }
162
+ }
163
+ }
138
164
  }
139
165
 
140
166
  &_hover {
@@ -146,6 +172,21 @@ $inner-width: $width-icon-medium;
146
172
  background: transparent;
147
173
  }
148
174
  }
175
+
176
+ &_checked_disabled.#{$module}-cardRadioGroup {
177
+ background: $color-radio_cardRadioGroup_disabled-bg-checked;
178
+ border: $width-radio_cardRadioGroup_checked_disabled-border solid $color-radio_cardRadioGroup_border_disabled-active;
179
+
180
+ .#{$module}-inner-checked .#{$module}-inner-display {
181
+ border-color: $color-radio_cardRadioGroup_checked_disabled-border-default;
182
+ }
183
+
184
+ &:hover {
185
+ .#{$module}-inner-checked .#{$module}-inner-display {
186
+ border-color: $color-radio_cardRadioGroup_checked_disabled-border-hover;
187
+ }
188
+ }
189
+ }
149
190
  }
150
191
 
151
192
  &.#{$module}-disabled:hover,
@@ -158,6 +199,7 @@ $inner-width: $width-icon-medium;
158
199
  .#{$module}-inner-checked {
159
200
  .#{$module}-inner-display {
160
201
  background: $color-radio_checked-bg-disabled;
202
+ border-color: $color-radio_checked-border-disabled;
161
203
  }
162
204
  }
163
205
  }
@@ -293,7 +335,7 @@ $inner-width: $width-icon-medium;
293
335
  &-display {
294
336
  opacity: 0.75;
295
337
  background: $color-radio_disabled-bg-default;
296
- border-color: $color-radio_checked-border-disabled;
338
+ border-color: $color-radio_default-border-disabled;
297
339
 
298
340
  &:hover {
299
341
  background: $color-radio_disabled-bg-hover;
@@ -308,6 +350,7 @@ $inner-width: $width-icon-medium;
308
350
 
309
351
  &:hover {
310
352
  background: $color-radio_checked-bg-disabled;
353
+ border-color: $color-radio_checked-border-disabled;
311
354
  }
312
355
  }
313
356
  }
package/lib/cjs/radio/variables.scss CHANGED
@@ -3,6 +3,8 @@ $color-radio_default-bg-default: transparent; // 默认态背景颜色
3
3
  $color-radio_default-bg-hover: var(--semi-color-fill-0); // 悬浮态背景颜色
4
4
  $color-radio_default-bg-active: var(--semi-color-fill-1); // 按下态背景颜色
5
5
  $color-radio_default-border-hover: var(--semi-color-focus-border); // 悬浮态描边颜色
6
+ $color-radio_checked-border-hover: var(--semi-color-primary-hover); // 选中时悬浮态描边颜色
7
+ $color-radio_checked-border-active: var(--semi-color-primary-active); // 选中时按下态描边颜色
6
8
 
7
9
  $color-radio_default-text-default: var(--semi-color-text-0); // 选项文本颜色
8
10
  $color-radio_extra-text-default: var(--semi-color-text-2); // 辅助文本颜色
@@ -14,7 +16,8 @@ $color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景
14
16
  $color-radio_primary-text-default: white; // 选中项原点颜色
15
17
 
16
18
  $color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
17
- $color-radio_checked-border-disabled: var(--semi-color-border); // 选中项禁用态描边颜色
19
+ $color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色
20
+ $color-radio_checked-border-disabled: var(--semi-color-primary-disabled); // 选中项禁用态描边颜色
18
21
 
19
22
  $color-radio_disabled-bg-default: var(--semi-color-disabled-fill); // 禁用态背景颜色
20
23
  $color-radio_disabled-bg-hover: transparent;
@@ -30,11 +33,17 @@ $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-1); // 按钮样
30
33
  $color-radio_addon_buttonRadio-text-checked: var(--semi-color-primary); // 按钮样式单选选中项文字颜色
31
34
  $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-bg-3); // 按钮样式单选选中项背景颜色
32
35
  $color-radio_cardRadioGroup-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
36
+ $color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
33
37
  $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
34
38
  $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
35
- $color-radio_cardRadioGroup_border-active: var(--semi-color-focus-border); // 卡片样式单选选中态描边颜色
39
+ $color-radio_cardRadioGroup_border-active: var(--semi-color-primary); // 卡片样式单选选中态描边颜色
40
+ $color-radio_cardRadioGroup_checked_border-active: var(--semi-color-primary-active); // 卡片样式单选选中态描边颜色 - 按下态
41
+ $color-radio_cardRadioGroup_checked_border-hover: var(--semi-color-primary-hover); // 卡片样式单选选中态描边颜色 - 悬浮态
42
+ $color-radio_cardRadioGroup_border_disabled-active: var(--semi-color-primary-disabled); // 卡片样式单选选中且禁用时的描边颜色
36
43
  $color-radio_cardRadioGroup_addon-text-default: var(--semi-color-text-0); // 卡片样式单选标题文字颜色
37
44
  $color-radio_cardRadioGroup_extra-text-default: var(--semi-color-text-2); // 卡片样式单选辅助文字颜色
45
+ $color-radio_cardRadioGroup_checked_disabled-border-default: var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 默认态
46
+ $color-radio_cardRadioGroup_checked_disabled-border-hover: var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 悬浮态
38
47
  $color-radio_card-bg-hover: var(--semi-color-white); // 单选圆点颜色
39
48
  $color-radio_card-bg-active: var(--semi-color-white); // 单选圆点颜色 - 按下态
40
49
  $color-radio_card-bg-default: var(--semi-color-white); // 单选圆点颜色 - 悬浮态
@@ -44,6 +53,7 @@ $radius-radio_addon_buttonRadio: var(--semi-border-radius-small); // 按钮式
44
53
  $radius-radio_buttonRadio: var(--semi-border-radius-small); // 按钮式单选圆角大小
45
54
 
46
55
  $width-radio_cardRadioGroup_checked-border: 1px; // 卡片式单选描边宽度
56
+ $width-radio_cardRadioGroup_checked_disabled-border: 1px; // 卡片式单选选中且禁用时的描边宽度
47
57
  $width-radio_hover-border: $border-thickness-control; // 描边宽度 - 悬浮态
48
58
  $width-radio_disabled-border: $border-thickness-control; // 描边宽度 - 禁用态
49
59
  $width-radio_innder-border: $border-thickness-control; // 描边宽度 - 禁用态
package/lib/cjs/rating/rating.css CHANGED
@@ -45,6 +45,9 @@
45
45
  height: 24px;
46
46
  font-size: 24px;
47
47
  }
48
+ .semi-rating-star-wrapper {
49
+ position: relative;
50
+ }
48
51
  .semi-rating-star-first, .semi-rating-star-second {
49
52
  color: var(--semi-color-fill-0);
50
53
  user-select: none;
package/lib/cjs/rating/rating.scss CHANGED
@@ -56,6 +56,10 @@ $module: #{$prefix}-rating;
56
56
  font-size: $font-rating_item_default-fontSize;
57
57
  }
58
58
 
59
+ &-wrapper {
60
+ position: relative;
61
+ }
62
+
59
63
  &-first,
60
64
  &-second {
61
65
  color: $color-rating-bg-default;