checkbox 补充 disabled 样式 (#1414)

This commit is contained in:
liaoxuezhi 2021-01-21 18:13:42 +08:00 committed by GitHub
parent 2be472580b
commit 94fcb285ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 12 deletions

View File

@ -429,6 +429,8 @@
--Checkbox-gb: #fff;
--Checkbox-inner-size: calc(var(--Checkbox-size) / 2);
--Checkbox-onHover-color: var(--info);
--Checkbox-onDisabled-gb: #{$gray500};
--Checkbxo-onDisabled-color: lighten($info, 5%);
--Checkbox-size: #{px2rem(20px)};
--ColorPicker-bg: var(--white);

View File

@ -76,12 +76,12 @@
}
&[disabled] + i {
// border-color: lighten(var(--Checkbox-color), 5%);
border-color: var(--Checkbxo-onDisabled-color);
cursor: not-allowed;
&:before {
// background: lighten(var(--Checkbox-color), 5%);
border-color: var(--white);
background: var(--Checkbxo-onDisabled-color);
border-color: var(--Checkbox-gb);
}
}
@ -114,21 +114,27 @@
&:before {
width: var(--Checkbox--full-inner-size);
height: calc(var(--Checkbox--full-inner-size) / 2);
border-color: var(--white);
border-color: var(--Checkbox-gb);
}
}
// &[disabled] + i {
// border-color: lighten(var(--Checkbox-color), 5%);
&[disabled] + i {
border-color: var(--Checkbxo-onDisabled-color);
// &:before {
// background: lighten(var(--Checkbox-color), 5%);
// }
// }
&:before {
background: var(--Checkbxo-onDisabled-color);
}
}
&[disabled]:checked + i {
&:before {
border-color: var(--Checkbox-onDisabled-gb);
}
}
&:checked[disabled] + i {
// border-color: lighten(var(--Checkbox-color), 5%);
// background: lighten(var(--Checkbox-color), 5%);
border-color: var(--Checkbxo-onDisabled-color);
background: var(--Checkbxo-onDisabled-color);
}
}

View File

@ -151,6 +151,9 @@ $Wizard-steps-liAfterBorder: none !important;
--Number-handler--up-transform: rotate(180deg);
--Number-handler--down-content: '\e6dd';
--Checkbxo-onDisabled-color: #ebebeb;
--Checkbox-onDisabled-gb: #cccccc;
--Checkbox-size: #{px2rem(14px)};
--Checkbox-inner-size: #{px2rem(8px)};
--Checkbox--full-inner-size: #{px2rem(10px)};