test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +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

91
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,67 +254,72 @@
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);
}
}
input {
&:checked + i {
background: transparent;
&:checked + i {
background: transparent;
top: 0;
left: 0;
width: 0;
height: 0;
border-width: px2rem(8px);
border-color: var(--Checkbox-onHover-color) transparent transparent
var(--Checkbox-onHover-color);
border-radius: 0;
&:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-width: px2rem(8px);
border-color: var(--Checkbox-onHover-color) transparent transparent var(--Checkbox-onHover-color);
border-radius: 0;
&:before {
position: absolute;
top: 0;
left: 0;
width: var(--Checkbox--full-inner-size);
height: calc(var(--Checkbox--full-inner-size) / 2);
transform: translate(-80%, -160%) rotate(-50deg);
background: transparent;
}
}
&[disabled] + i {
border-color: var(--Checkbox-onDisabled-color);
width: var(--Checkbox--full-inner-size);
height: calc(var(--Checkbox--full-inner-size) / 2);
transform: translate(-80%, -160%) rotate(-50deg);
background: transparent;
&:before {
background: transparent;
}
}
}
&:checked[disabled] + i {
&[disabled] + i {
border-color: var(--Checkbox-onDisabled-color);
background: transparent;
&:before {
background: transparent;
border-width: px2rem(8px);
border-color: var(--Checkbox-onHover-color) transparent transparent var(--Checkbox-onHover-color);
}
}
&:checked[disabled] + i {
background: transparent;
border-width: px2rem(8px);
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);
@ -330,14 +333,14 @@
border-color: var(--Checkbox-onHover-color);
color: var(--Checkbox-onHover-color);
&:hover {
border-color: var(--menu-active-color);
color: var(--menu-active-color);
}
&:active {
border-color: var(--Switch-checked-onHover-bgColor);
color: var(--Switch-checked-onHover-bgColor);
}
&:hover {
border-color: var(--menu-active-color);
color: var(--menu-active-color);
}
&:active {
border-color: var(--Switch-checked-onHover-bgColor);
color: var(--Switch-checked-onHover-bgColor);
}
}
&--button--disabled--unchecked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--full {
i {
@ -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 {
@ -464,7 +467,7 @@
display: block;
margin-bottom: var(--Form-label-paddingTop);
}
.#{$ns}Checkbox--button {
margin-bottom: 0;