tdesign-mobile-vue/esm/_common/style/mobile/components/checkbox/_index.less

tdesign-mobile-vue

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

@import "./_var.less";

.@{prefix}-checkbox {
  display: flex;
  align-items: center;
  padding: 16px;
  position: relative;
  color: @checkbox-icon-unchecked-color;

  &__label {
    width: 100%;
    display: block;
    margin-left: @checkbox-icon-margin;
    font-size: @checkbox-title-font-size;
    color: @checkbox-title-color;
    line-height: 24px;

    &-left {
      margin-right: @spacer;
      //padding-right: @checkbox-label-wrap-left-padding;
    }
  }

  &__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    &--disabled {
      color: @gray-color-4;
    }
  }

  &__description:not(:empty) {
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 40%);
    margin-top: 8px;
  }

  &.@{prefix}-is-checked, &.@{prefix}-is-indeterminate {
    color: @checkbox-icon-checked-color;
    &.@{prefix}-is-disabled {
      color: @checkbox-icon-unchecked-color;
    }
  }

  &.@{prefix}-is-disabled {
    color: @checkbox-icon-unchecked-color;

    .@{prefix}-checkbox_label {
      color: @checkbox-title-color-disabled;
    }
  }

  &__content-wrap {
    display: flex;
    align-items: flex-start;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  &__original-left,
  &__original-right {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  &__icon-left,
  &__icon-right {
    font-size: @checkbox-icon-size;
    text-align: center;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    justify-content: center;
  }

  &__border {
    position: absolute;
    bottom: 0;
    border-top: 1px solid @gray-color-3;

    &--left {
      left: 48px;
      right: 0;
    }

    &--right {
      left: 0;
      right: 48px;
    }
  }
}