ten-design-vue/lib/theme/components/checkbox.less

ten-vue

@import "../vars.less";

.ten-checkbox+.ten-checkbox {
  margin-left: 8px;
}

.ten-checkbox {
  font-family: @font-family;
  line-height: 16px;

  * {
    box-sizing: border-box;
  }

  cursor: pointer;

  &__checkbox {
    position: relative;
    top: -0.09em;
    display: inline-block;
    width: 16px;
    height: 16px;
    transition: border-color 0.3s;
    vertical-align: middle;
    color: @text-color;

    input {
      cursor: pointer;
      position: absolute;
      z-index: 9999;
      left: 0;
      top: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }

    &-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: inherit;
      height: inherit;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      border-collapse: separate;
      -webkit-transition: all .3s;
      transition: all .3s;

      &::after {
        opacity: 0;
        top: 50%;
        left: 18.5%;
        width: 4px;
        height: 8px;
        position: absolute;
        display: inline-block;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
        -ms-transform: rotate(45deg) scale(1) translate(-50%, -50%);
        transform: rotate(45deg) scale(1) translate(-50%, -50%);
        -webkit-transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
        transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
        -webkit-transition: all .2s .1s;
        transition: all .2s .1s;
        content: ' ';
      }
    }

    &+span {
      padding-right: @check-span-padding-right;
      padding-left: @check-span-padding-left;
    }

    input {

      // 选中
      &:checked+span {
        border-color: @primary-color;
        background: @primary-color;

        &::after {
          opacity: 1;
        }
      }

      // 半选中
      &[indeterminate]+span,
      &[indeterminate]+span {
        border-color: @primary-color;
        background: @primary-color;

        &::after {
          width: 8px;
          height: 0px;
          left: 50%;
          -webkit-transform: translate(-50%, -50%) scale(1);
          -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
          background: #fff;
          opacity: 1;
          -webkit-transition: all .2s .1s;
          transition: all .2s .1s;
        }
      }
    }

  }

  &--checked {
    .ten-checkbox__checkbox {
      &-inner {
        border-color: @primary-color;
        background: @primary-color;

        &::after {
          opacity: 1;
        }
      }
    }
  }

  &--indeterminate {
    .ten-checkbox__checkbox {
      &-inner {
        border-color: @primary-color;
        background: @primary-color;

        &::after {
          width: 8px;
          height: 0px;
          left: 50%;
          -webkit-transform: translate(-50%, -50%) scale(1);
          -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
          background: #fff;
          opacity: 1;
          -webkit-transition: all .2s .1s;
          transition: all .2s .1s;
        }
      }
    }
  }

  &--focus &__checkbox,
  &:hover &__checkbox {
    &-inner {
      border-color: #6697e8;
    }
  }

  &--disabled {
    color: #c0c0c0;

    .ten-checkbox__checkbox {
      &-inner {
        border-color: @disabled-color  !important;
        background-color: #f5f5f5;

        &::after {
          border-color: rgba(0, 0, 0, 0.25);
        }
      }

      input,
      &+span {
        cursor: not-allowed;
      }
    }

    input:checked+span,
    input[indeterminate]+span {
      border-color: @disabled-color  !important;
      background-color: #f5f5f5;

      &::after {
        border-color: rgba(0, 0, 0, 0.25);
      }
    }
  }
}