tntd/lib/checkbox/checkbox.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox';
@checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';

.tnt-checkbox,
.tnt-checkbox-group {
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
      background-color: @checkbox-color;
      border-color: @checkbox-color;
    }
    .@{checkbox-inner-prefix-cls}::after {
      @indeterminate-width: calc(@checkbox-size - 8px);
      @indeterminate-height: 1.4px;

      width: @indeterminate-width;
      height: @indeterminate-height;
      background-color: @component-background;
      border-radius: 2px;
      transition: none;
    }

    &.@{checkbox-prefix-cls}-disabled {
      .@{checkbox-inner-prefix-cls} {
        background: @checkbox-check-disabled-color;
        border-color: @checkbox-check-disabled-color !important;

        &::after {
          background-color: #fff;
        }
      }
    }
  }

  .@{checkbox-prefix-cls}-checked {
    &.@{checkbox-prefix-cls}-disabled {
      .@{checkbox-inner-prefix-cls} {
        background: @checkbox-check-disabled-color;
        border-color: @checkbox-check-disabled-color !important;
        &::after {
          border-color: #fff;
        }
      }
    }

    .@{checkbox-inner-prefix-cls}::after {
      width: 16px;
      height: 16px;
      border-width: 0;
      background-image: url(./check.png);
      background-size: contain;
      transform: translate(-25%, -50%);
      transition: none;
    }
  }
}

.tnt-checkbox {
  & > span:nth-of-type(2) {
    display: inline-block;
  }
  &-children {
    display: flex;
    flex-direction: column;
  }
  &-desc {
    font-size: @font-size-sm;
    color: @bg-color-spotilight-tint-50;
  }
}