naive-ui/styles/Checkbox.scss

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

@mixin checkbox-size-mixin ($size) {
  @include m($size + '-size') {
    height: map-get($--n-font-size, $size);
    line-height: map-get($--n-font-size, $size);
    font-size: map-get($--n-font-size, $size);
    @include b(checkbox-box) {
      height: map-get($--n-checkbox-size, $size);
      width: map-get($--n-checkbox-size, $size);
    }
  }
}

@include themes-mixin {
  @include once {
    @include b(checkbox-group) {
      font-size: 14px;
      line-height: 14px;
      @include b(checkbox) {
        margin-right: 18px;
      }
    }
    @include b(checkbox) {
      @include checkbox-size-mixin('small');
      @include checkbox-size-mixin('medium');
      @include checkbox-size-mixin('large');
      outline: none;
      cursor: pointer;
      display: inline-block;
      white-space: nowrap;
      @include b(checkbox-box) {
        display: inline-block;
        box-sizing: border-box;
        vertical-align: bottom;
        border-radius: 4px;
        position: relative;
        transition:
          box-shadow 0.3s $--n-ease-in-out-cubic-bezier,
          background-color 0.3s $--n-ease-in-out-cubic-bezier;
        @include e(line-mark, check-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:
            fill 0.3s $--n-ease-in-out-cubic-bezier,
            transform 0.3s $--n-ease-in-out-cubic-bezier,
            opacity 0.3s $--n-ease-in-out-cubic-bezier,
            border-color 0.3s $--n-ease-in-out-cubic-bezier;
        }
      }
      @include e(label) {
        transition: color .3s $--n-ease-in-out-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 as-modal-content {
    @include b(checkbox) {
      @include m(table-header) {
        @include not-m(checked) {
          @include not-m(indeterminate) {
            @include not-m(disabled) {
              @include b(checkbox-box) {
                background-color: map-get($--checkbox-background-color, 'modal-table');
              }
            }
          }
        }
      }
    }
  }
  @include b(checkbox) {
    &:hover {
      @include b(checkbox-box) {
        box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
      }
    }
    &:focus {
      @include b(checkbox-box) {
        box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
      }
    }
    @include b(checkbox-box) {
      background-color: map-get($--checkbox-background-color, 'default');
      box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'default');
      @include e(line-mark, check-mark) {
        fill: map-get($--checkbox-icon-color, 'default');
      }
    }
    @include e(label) {
      color: map-get($--checkbox-label-text-color, 'default');
    }
    @include m(table-header) {
      @include b(checkbox-box) {
        background-color: map-get($--checkbox-background-color, 'table');
      }
    }
    @include m(checked, indeterminate) {
      &:focus {
        @include b(checkbox-box) {
          box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'), 0 0 0 2px change-color(map-get($--checkbox-border-color, 'active'), $alpha: .3);
        }
      }
      @include b(checkbox-box) {
        background-color: map-get($--checkbox-border-color, 'active');
        box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active');
        @include once {
          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 map-get($--checkbox-border-color, 'disabled');
        @include e(check-mark, line-mark) {
          fill: map-get($--checkbox-icon-color, 'disabled');
        }
      }
      @include e(label) {
        color: map-get($--checkbox-label-text-color, 'disabled');
      }
    }
  }
}