src/style/checkbox.less
.@{prefix-cls}-checkbox-label{
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
line-height: 1;
position: relative;
vertical-align: middle;
margin-right: 10px;
}
.@{prefix-cls}-checkbox-inner{
position: relative;
top: 0;
left: 0;
display: inline-block;
width: @checkboxSize;
height: @checkboxSize;
border-width: 1px;
border-style: solid;
border-radius: @checkboxRadius;
border-color: @lightGrayColor;
background-color: @whiteColor;
transition: all 0.3s ease;
&-check{
font-size: @checkboxCheckSize;
position: relative;
top: @checkboxCheckOffset;
left: @checkboxCheckOffset;
}
}
.@{prefix-cls}-checkbox-input {
position: absolute!important;
left: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
opacity: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.@{prefix-cls}-checkbox-checked .@{prefix-cls}-checkbox-inner {
border-color: @primaryColor;
background-color: @primaryColor;
}
.@{prefix-cls}-checkbox-disabled .@{prefix-cls}-checkbox-inner {
border-color: @lightGrayColor;
background-color: @lightGrayColor;
}
.@{prefix-cls}-checkbox-disabled .@{prefix-cls}-checkbox-inner:after{
display: none;
}
.@{prefix-cls}-checkbox-label span{
vertical-align: top;
}
.@{prefix-cls}-checkbox-btn input[type=checkbox] {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
}