@perfma/heaven/es/checkbox/index.less

An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.

@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 !important;
  }
}
.@{ant-prefix}-checkbox-checked.@{ant-prefix}-checkbox-disabled {
  span {
    opacity: 50%;
  }
  .@{ant-prefix}-checkbox-inner {
    background-color: @blue-base;
    border-color: @blue-base !important;
    &::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 !important;
}
.@{ant-prefix}-checkbox-disabled.@{ant-prefix}-checkbox-checked
  .@{ant-prefix}-checkbox-inner::after {
  color: #b6b6b6 !important;
}