@perfma/heaven
Version:
An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.
107 lines (99 loc) • 2.51 kB
text/less
@import '~antd/es/checkbox/style/index.less';
@import '../style/vars.less';
.@{ant-prefix}-checkbox-inner{
border-color: #ADB6CC;
}
.@{ant-prefix}-checkbox-disabled {
.@{ant-prefix}-checkbox-inner{
background-color: #F2F4F9;
border-color: #ADB6CC ;
}
}
.@{ant-prefix}-checkbox-checked.@{ant-prefix}-checkbox-disabled {
span {
opacity: 50%;
}
.@{ant-prefix}-checkbox-inner {
background-color: @blue-base;
border-color: @blue-base ;
&::after {
border-color: #fff;
}
}
}
.@{ant-prefix}-checkbox-disabled{
+span{
color:@text-color;
opacity: 50%;
}
}
.img-checkbox {
position: relative;
width: 96px;
height: 128px;
.@{ant-prefix}-checkbox {
position: absolute;
top: 112px;
left: 50%;
transform: translateX(-50%);
}
> span > img {
width: 96px;
height: 96px;
position: absolute;
top: 0;
right: 0;
}
}
// Checkbox
.@{ant-prefix}-checkbox {
top: 0.2em;
}
.@{ant-prefix}-checkbox-wrapper:not(.img-checkbox) {
display: inline-flex;
align-items: flex-start;
> span:not(.@{ant-prefix}-checkbox) {
overflow: hidden;
display: inline-block;
}
}
.@{ant-prefix}-checkbox-inner,
.@{ant-prefix}-tree-checkbox-inner {
border-radius: 2px;
}
.@{ant-prefix}-checkbox-checked .@{ant-prefix}-checkbox-inner::after,
.@{ant-prefix}-tree-checkbox-checked .@{ant-prefix}-tree-checkbox-inner::after {
border-width: 1px;
top: 42%;
left: 25%;
}
.@{ant-prefix}-checkbox-indeterminate .@{ant-prefix}-checkbox-inner,
.@{ant-prefix}-tree-checkbox-indeterminate .@{ant-prefix}-tree-checkbox-inner {
background-color: @primary-color;
border-color: @primary-color;
}
.@{ant-prefix}-checkbox-indeterminate .@{ant-prefix}-checkbox-inner::after,
.@{ant-prefix}-tree-checkbox-indeterminate
.@{ant-prefix}-tree-checkbox-inner::after {
content: '';
position: absolute;
width: 8px;
height: 1px;
background-color: #fff;
border-radius: 0.5px;
}
.@{ant-prefix}-checkbox-disabled.@{ant-prefix}-checkbox-indeterminate
.@{ant-prefix}-checkbox-inner,
.@{ant-prefix}-tree-checkbox-disabled.@{ant-prefix}-tree-checkbox-indeterminate
.@{ant-prefix}-tree-checkbox-inner {
background-color: #f5f5f5;
border-color: #d4d9dc;
}
.@{ant-prefix}-checkbox-inner::after,
.@{ant-prefix}-tree-checkbox-inner::after {
transition: none ;
}
.@{ant-prefix}-checkbox-disabled.@{ant-prefix}-checkbox-checked
.@{ant-prefix}-checkbox-inner::after {
color: #b6b6b6 ;
}