tdesign-react/esm/common/style/web/components/checkbox/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_layout.less";

@import "../../mixins/_reset.less";

@import "../../mixins/_focus.less";

// <name> 替换为组件名
.@{checkbox-cls}-group {
  .reset;

  display: inline-flex;
  flex-wrap: wrap;
  gap: @checkbox-group-gap;
}

.@{checkbox-cls} {
  .reset;

  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  color: @checkbox-label-color;

  & + .@{checkbox-cls} {
    margin-left: @checkbox-margin;
  }

  &__former {
    .input-visually-hidden();
  }

  &__input {
    position: relative;
    display: inline-block;
    width: @checkbox-size;
    height: @checkbox-size;
    vertical-align: middle;
    border: 1px solid @checkbox-border-color;
    border-radius: @checkbox-border-radius;
    background-color: @checkbox-input-color;
    box-sizing: border-box;
    flex-shrink: 0;

    &::after {
      content: "";
      position: absolute;
      opacity: 0;
      box-sizing: border-box;
    }
  }

  &__label {
    display: inline-block;
    margin-left: @checkbox-input-label-spacer;
    vertical-align: middle;
    font: @checkbox-font;
  }

  &:hover {

    .@{checkbox-cls}__input {
      border-color: @checkbox-border-color-hover;
      transition: border-color @anim-duration-base linear;
    }
  }

  &.@{prefix}-is-checked {

    .@{checkbox-cls}__input {
      border-color: @checkbox-border-color-checked;
      background-color: @checkbox-input-color-checked;
      transition: background-color @anim-duration-base @anim-time-fn-ease-in;

      &::after {
        opacity: 1;
        top: ((@checkbox-size) / 2 - 2px);
        left: @checkbox-check-left;
        width: @checkbox-check-width;
        height: @checkbox-check-height;
        border: 2px solid @checkbox-check-color;
        border-radius: 0 0 1px;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(1) translate(-50%, -50%);
        background: transparent;
      }
    }
  }

  &.@{prefix}-is-indeterminate {

    .@{checkbox-cls}__input {
      border-color: @checkbox-input-color-indeterminate;
      background-color: @checkbox-input-color-indeterminate;
      transition: background-color @anim-duration-base @anim-time-fn-ease-in;

      &::after {
        opacity: 1;
        width: @checkbox-indeterminate-width;
        height: @checkbox-indeterminate-height;
        left: -1px;
        right: 0;
        top: ((@checkbox-size - 2 - @checkbox-indeterminate-height) * .5);
        border: unset;
        transform: scale(.5);
        background-color: @checkbox-indeterminate-color;
      }
    }
  }

  &.@{prefix}-is-disabled {
    cursor: not-allowed;

    .@{checkbox-cls}__label {
      color: @checkbox-check-color-disabled;
    }

    .@{checkbox-cls}__input {
      background-color: @checkbox-input-color-disabled;
    }

    &:hover {

      .@{checkbox-cls}__input {
        border-color: @checkbox-border-color;
      }
    }

    &.@{prefix}-is-checked {

      .@{checkbox-cls}__input {
        border-color: @checkbox-border-color;

        &::after {
          border-color: @checkbox-check-icon-disabled-color;
        }
      }
    }

    &.@{prefix}-is-indeterminate {

      .@{checkbox-cls}__input {
        border-color: @checkbox-border-color;

        &::after {
          background-color: @checkbox-indeterminate-color-disabled;
        }
      }
    }
  }
}

.@{prefix}-checkbox:focus-visible {
  .tab-focus-style-rect();
}