javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(style): [radio-button,checkbox-button] scope css vars

Browse Source
This commit is contained in:
Dsaquel
2026-02-18 22:28:09 +01:00
parent 69db3d92b8
commit 3632abc090
3 changed files with 37 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/theme-chalk/src/checkbox-button.scss
View File

@@ -20,14 +20,14 @@
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background: var(
#{getCssVarName('button-bg-color')},
map.get($button, 'bg-color')
background: getCssVarWithDefault(
('checkbox-button', 'bg-color'),
map.get($checkbox-button, 'bg-color')
);
outline: getCssVar('border');
color: var(
#{getCssVarName('button-text-color')},
map.get($button, 'text-color')
color: getCssVarWithDefault(
('checkbox-button', 'text-color'),
map.get($checkbox-button, 'text-color')
);
-webkit-appearance: none;
text-align: center;
@@ -82,20 +82,20 @@
color: getCssVar('disabled-text-color');
cursor: not-allowed;
background-image: none;
background-color: var(
#{getCssVarName('button-disabled-bg-color')},
map.get($button, 'disabled-bg-color')
background-color: getCssVarWithDefault(
('checkbox-button', 'disabled-bg-color'),
map.get($checkbox-button, 'disabled-bg-color')
);
border-color: var(
#{getCssVarName('button-disabled-border-color')},
map.get($button, 'disabled-border-color')
border-color: getCssVarWithDefault(
('checkbox-button', 'disabled-border-color'),
map.get($checkbox-button, 'disabled-border-color')
);
box-shadow: none;
}
&:first-child .#{$namespace}-checkbox-button__inner {
border-left-color: var(
#{getCssVarName('button-disabled-border-color')},
map.get($button, 'disabled-border-color')
border-left-color: getCssVarWithDefault(
('checkbox-button', 'disabled-border-color'),
map.get($checkbox-button, 'disabled-border-color')
);
}

9
packages/theme-chalk/src/common/var.scss
View File

@@ -294,10 +294,14 @@ $checkbox: map.merge(
$checkbox-button: () !default;
$checkbox-button: map.merge(
(
'bg-color': getCssVar('fill-color', 'blank'),
'text-color': getCssVar('text-color', 'regular'),
'checked-bg-color': getCssVar('color-primary'),
'checked-text-color': getCssVar('color-white'),
'checked-border-color': getCssVar('color-primary'),
'disabled-checked-fill': getCssVar('border-color-extra-light'),
'disabled-bg-color': getCssVar('fill-color', 'blank'),
'disabled-border-color': getCssVar('border-color-light'),
),
$checkbox-button
);
@@ -347,9 +351,14 @@ $radio-height: map.merge($common-component-size, $radio-height);
$radio-button: () !default;
$radio-button: map.merge(
(
'bg-color': getCssVar('fill-color', 'blank'),
'font-weight': getCssVar('font-weight-primary'),
'text-color': getCssVar('text-color', 'regular'),
'checked-bg-color': getCssVar('color-primary'),
'checked-text-color': getCssVar('color-white'),
'checked-border-color': getCssVar('color-primary'),
'disabled-bg-color': getCssVar('fill-color', 'blank'),
'disabled-border-color': getCssVar('border-color-light'),
'disabled-checked-fill': getCssVar('border-color-extra-light'),
),
$radio-button

26
packages/theme-chalk/src/radio-button.scss
View File

@@ -19,18 +19,18 @@
line-height: 1;
white-space: nowrap;
vertical-align: middle;
background: var(
#{getCssVarName('button-bg-color')},
map.get($button, 'bg-color')
background: getCssVarWithDefault(
('radio-button', 'bg-color'),
map.get($radio-button, 'bg-color')
);
outline: getCssVar('border');
font-weight: var(
#{getCssVarName('button-font-weight')},
map.get($button, 'font-weight')
font-weight: getCssVarWithDefault(
('radio-button', 'font-weight'),
map.get($radio-button, 'font-weight')
);
color: var(
#{getCssVarName('button-text-color')},
map.get($button, 'text-color')
color: getCssVarWithDefault(
('radio-button', 'text-color'),
map.get($radio-button, 'text-color')
);
-webkit-appearance: none;
text-align: center;
@@ -122,12 +122,12 @@
cursor: not-allowed;
background-image: none;
background-color: getCssVarWithDefault(
'button-disabled-bg-color',
map.get($button, 'disabled-bg-color')
('radio-button', 'disabled-bg-color'),
map.get($radio-button, 'disabled-bg-color')
);
border-color: getCssVarWithDefault(
'button-disabled-border-color',
map.get($button, 'disabled-border-color')
('radio-button', 'disabled-border-color'),
map.get($radio-button, 'disabled-border-color')
);
box-shadow: none;
}