deer-ui
Version:
React.js UI components for PC Web
86 lines (81 loc) • 2.76 kB
text/less
@import '../styles/themes.less';
@prefixCls: deer-ui-checkbox;
.@{prefixCls}{
&-wrapper{
cursor: pointer;
padding: 0px 10px;
&-content{
position: relative;
.@{prefixCls}-checkbox{
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.@{prefixCls}-inner{
display: inline-block;
transition: all @animation-time @animation-type;
position: relative;
left: 0;
top: 2px;
border-radius: @border-radius;
width: @default-checkbox-width;
height: @default-checkbox-height;
background: @default-checkbox-bg-color;
border: 1px solid @border-color;
margin-right: @default-checkbox-margin-right;
&::after {
//画一个矩形 旋转45° 形成一个 √
transform: rotate(45deg) scale(0);
position: absolute;
left: 4px;
top: 1px;
display: table;
width: 5px;
height: 8px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
content: ' ';
transition: all @default-checkbox-transition-time @default-checkbox-transition-type;
}
}
}
&-content-checked {
.@{prefixCls}-inner{
border-color: @default-checkbox-border-color;
background-color: @default-checkbox-border-color;
&::after{
transform: rotate(45deg) scale(1);
}
}
}
&-content-indeterminate{
.@{prefixCls}-inner{
border-color: @default-checkbox-border-color;
&::after{
width: 0;
transform: rotate(90deg) scale(1) translate(1px, -2px);
}
}
}
&-disabled{
.@{prefixCls}-wrapper-content-checked{
.@{prefixCls}-inner{
background-color: @default-checkbox-bg-color ;
&::after{
border-color: @border-color;
}
}
}
cursor: not-allowed;
.@{prefixCls}-inner{
border-color: @border-color ;
background-color: @default-checkbox-bg-color ;
}
}
}
}
.checkboxGroup{
display: flex;
}