test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:48:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

styles：修复checkbox按钮模式下文字被遮挡问题 (#4441)

Browse Source
This commit is contained in:
qinhaoyan 2022-05-25 11:17:50 +08:00 committed by GitHub
parent 05c0bd5264
commit 31fbd06bff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
scss/components/form/_checks.scss
View File

@ -230,14 +230,12 @@
}
}
&:checked[disabled] + i{
&:checked[disabled] + i {
width: var(--Checkbox-inner-size);
height: var(--Checkbox-inner-size);
background: var(--Checkbox-onDisabled-bg);
}
}
}
&--button.#{$ns}Checkbox--checkbox {
text-align: center;
@ -256,21 +254,23 @@
border-radius: calc(var(--Checkbox-borderRadius) * 2);
min-width: var(--Checkbox-button-min-width);
&:hover:not(:disabled){
&:hover:not(:disabled) {
color: var(--Checkbox-onHover-color);
}
&:hover {
input:checked + i {
background: transparent;
border-color: var(--Button--primary-onHover-bg) transparent transparent var(--Button--primary-onHover-bg);
border-color: var(--Button--primary-onHover-bg) transparent transparent
var(--Button--primary-onHover-bg);
}
}
&:active {
input:checked + i {
background: transparent;
border-color: var(--Switch-checked-onHover-bgColor) transparent transparent var(--Switch-checked-onHover-bgColor);
border-color: var(--Switch-checked-onHover-bgColor) transparent
transparent var(--Switch-checked-onHover-bgColor);
}
}
@ -282,7 +282,8 @@
width: 0;
height: 0;
border-width: px2rem(8px);
border-color: var(--Checkbox-onHover-color) transparent transparent var(--Checkbox-onHover-color);
border-color: var(--Checkbox-onHover-color) transparent transparent
var(--Checkbox-onHover-color);
border-radius: 0;
&:before {
@ -307,16 +308,18 @@
&:checked[disabled] + i {
background: transparent;
border-width: px2rem(8px);
border-color: var(--Checkbox-onHover-color) transparent transparent var(--Checkbox-onHover-color);
border-color: var(--Checkbox-onHover-color) transparent transparent
var(--Checkbox-onHover-color);
}
}
> i {
position: absolute;
top: 0;
left:0;
left: 0;
margin-left: 0;
border: 0;
border-style: solid;
background: transparent;
+ span {
max-width: px2rem(100px);
@ -391,7 +394,7 @@
border-radius: 50%;
}
&.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full{
&.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full {
background: none;
i {