naive-ui/styles/Checkbox.scss

@import "./mixins/mixins.scss";
@import "./themes/vars.scss";

@include themes-mixin {
  @include once {
    @include b(checkbox-group) {
      font-size: 14px;
      @include b(checkbox) {
        margin-right: 18px;
      }
    }
    @include b(checkbox) {
      outline: none;
      font-size: 14px;
      cursor: pointer;
      display: inline-block;
      white-space: nowrap;
      @include b(checkbox-box) {
        display: inline-block;
        height: 14px;
        width: 14px;
        vertical-align: middle;
        box-sizing: border-box;
        border-radius: 4px;
        position: relative;
        transition: box-shadow 0.3s $default-cubic-bezier,
          background-color 0.3s $default-cubic-bezier;
        @include e(line-mark, check-mark) {
          path {
            transition: fill .3s $default-cubic-bezier;
            fill: $--checkbox-icon-fill;
          }
        }
        @include e(line-mark) {
          position: absolute;
          top: 1px;
          left: 1px;
          right: 1px;
          bottom: 1px;
          width: calc(100% - 2px);
          opacity: 0;
          transform: scale(0.5);
          transform-origin: center;
          transition: transform 0.3s $default-cubic-bezier,
          opacity 0.3s $default-cubic-bezier,
          border-color 0.3s $default-cubic-bezier;
        }
        @include e(check-mark) {
          content: "";
          position: absolute;
          top: 1px;
          left: 1px;
          right: 1px;
          bottom: 1px;
          width: calc(100% - 2px);
          opacity: 0;
          transform: scale(0.5);
          transform-origin: center;
          transition: transform 0.3s $default-cubic-bezier,
          opacity 0.3s $default-cubic-bezier,
          border-color 0.3s $default-cubic-bezier;
        }
      }
      @include e(label) {
        transition: color .3s $default-cubic-bezier;
        user-select: none;
        padding-left: 8px;
      }
      @include m(checked) {
        @include b(checkbox-box) {
          @include e(check-mark) {
            opacity: 1;
            transform: scale(1);
          }
        }
      }
      @include m(indeterminate) {
        @include b(checkbox-box) {
          @include e(check-mark) {
            opacity: 0;
            transform: scale(.5);
          }
          @include e(line-mark) {
            opacity: 1;
            transform: scale(1);
          }
        }
      }
      @include m(disabled) {
        cursor: not-allowed;
      }
    }
  }
  @include b(checkbox) {
    &:hover {
      @include b(checkbox-box) {
        box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
      }
    }
    &:focus {
      @include b(checkbox-box) {
        box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
      }
    }
    @include b(checkbox-box) {
      background-color: map-get($--checkbox-background-color, 'default');
      box-shadow: inset 0 0 0 1px $--checkbox-border-color;
      @include e(line-mark) {
        path {
          fill: $--checkbox-indeterminate-color;
        }
      }
      @include e(check-mark) {
        path {
          fill: $--checkbox-indeterminate-color;
        }
      }
    }
    @include e(label) {
      color: $--n-secondary-text-color;
    }
    @include m(checked, indeterminate) {
      &:focus {
        @include b(checkbox-box) {
          box-shadow: inset 0 0 0 1px $--checkbox-border-color--active, 0 0 0 2px change-color($--checkbox-border-color--active, $alpha: .3);
        }
      }
      @include b(checkbox-box) {
        background-color: $--checkbox-border-color--active;
        box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
        border-left: 0;
        border-top: 0;
      }
    }
    @include m(disabled) {
      @include b(checkbox-box) {
        background-color: map-get($--checkbox-background-color, 'disabled');
        box-shadow: inset 0 0 0 1px $--checkbox-disabled;
        @include e(check-mark) {
          path {
            fill: $--checkbox-disabled;
          }
        }
        @include e(line-mark) {
          path {
            fill: $--checkbox-disabled;
          }
        }
      }
      @include e(label) {
        color: $--n-disabled-text-color;
      }
    }
  }
}