ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 02:31:21 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Improvement] Checkbox: remove unnecessary DOM (#636)

Browse Source
This commit is contained in:
neverland
2018-02-12 10:35:20 +08:00
committed by GitHub
parent 24a50034b6
commit 9673da4131
6 changed files with 93 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/vant-css/src/checkbox.css
View File

@@ -6,70 +6,45 @@ $van-checkbox-size: 20px;
overflow: hidden;
user-select: none;
.van-icon-success {
color: $white;
display: block;
&__icon,
&__label {
display: inline-block;
vertical-align: middle;
line-height: $van-checkbox-size;
}
&__icon {
font-size: 12px;
color: transparent;
text-align: center;
pointer-events: none;
border: 1px solid #aaa;
width: $van-checkbox-size;
height: $van-checkbox-size;
box-sizing: border-box;
&::before {
margin: 0 auto;
line-height: $van-checkbox-size;
}
}
&__input,
&__label {
display: inline-block;
vertical-align: middle;
}
&__input {
position: relative;
height: $van-checkbox-size;
}
&__control {
position: absolute;
top: 0;
left: 0;
opacity: 0;
margin: 0;
width: 100%;
height: 100%;
}
&__label {
margin-left: 10px;
line-height: $van-checkbox-size;
}
&--round {
.van-icon-success {
border-radius: 100%;
}
border-radius: 100%;
}
&__control:checked + .van-icon-success {
&--checked {
color: #fff;
border-color: $green;
background-color: $green;
}
&--disabled {
.van-icon-success {
color: $background-color;
border-color: $gray-light;
background-color: currentColor;
}
color: $background-color;
border-color: $gray-light;
background-color: currentColor;
}
.van-checkbox__control:checked + .van-icon-success {
border-color: $gray-light;
background-color: $gray-light;
}
&--disabled&--checked {
border-color: $gray-light;
background-color: $gray-light;
}
}