naive-ui/styles/InputNumber.scss

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

@mixin input-number-size-mixin ($size) {
  @include m($size + '-size') {
    $height: map-get($--n-height, $size);
    height: $height;
    line-height: $height;
    @include e(minus-button, add-button, input) {
      height: $height;
      line-height: $height;
    }
  }
}

@include themes-mixin {
  @include b(input-number) {
    position: relative;
    border-radius: $--input-number-border-radius;
    box-sizing: border-box;
    width: 152px;
    display: inline-block;
    outline: none;
    @include m(disabled) {
      // background: map-get($--input-number-background-color, 'disabled');
      @include e(minus-button, add-button) {
        background: map-get($--input-number-button-background-color, 'disabled');
        @include b(icon) {
          fill: map-get($--input-number-button-text-color, 'disabled');
        }
        pointer-events: none;
      }
      @include e(input) {
        background: map-get($--input-number-background-color, 'disabled');
        color: map-get($--input-number-button-text-color, 'disabled');
        pointer-events: none;
      }
      cursor: not-allowed;
    }
    @include input-number-size-mixin('small');
    @include input-number-size-mixin('medium');
    @include input-number-size-mixin('large');
    @include e(border-layer) {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
      border-radius: $--input-number-border-radius;
      transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
      pointer-events: none;
    }
    @include e(minus-button, add-button) {
      outline: none;
      position: absolute;
      cursor: pointer;
      top: 0;
      padding: 0;
      width: 28px;
      border: none;
      background-color: map-get($--input-number-button-background-color, 'default');
      display: flex;
      align-items: center;
      justify-content: center;
      @include b(icon) {
        fill: map-get($--input-number-button-text-color, 'default');
      }
      font-size: 14px;
      transition: background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
      box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
      &:hover ~ {
        @include e(border-layer) {
          box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
        }
      }
      &:hover {
        background-color: map-get($--input-number-button-background-color, 'hover');
        color: map-get($--input-number-button-text-color, 'hover');
      }
      &:active {
        transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .15s $--n-ease-in-out-cubic-bezier;
        background-color: map-get($--input-number-button-background-color, 'active')
      }
      @include m(disabled) {
        cursor: not-allowed;
        background-color: map-get($--input-number-button-background-color, 'disabled');
        @include b(icon) {
          fill: map-get($--input-number-button-text-color, 'disabled');
        }
      }
    }
    @include e(minus-button) {
      left: 0;
      border-top-left-radius: $--input-number-border-radius;
      border-bottom-left-radius: $--input-number-border-radius;
    }
    @include e(add-button) {
      right: 0;
      border-top-right-radius: $--input-number-border-radius;
      border-bottom-right-radius: $--input-number-border-radius;
    }
    @include e(input) {
      outline: none;
      box-sizing: border-box;
      border-radius: $--input-number-border-radius;
      background-color: map-get($--input-number-background-color, 'default');
      box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
      &:hover ~ {
        @include e(border-layer) {
          box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
        }
      }
      &:focus {
        background-color: map-get($--input-number-background-color, 'focus');
        & ~ {
          @include e(border-layer) {
            box-shadow: map-get($--input-number-box-shadow, 'focus');
          }
        }
      }
      transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
      border: none;
      color: map-get($--input-number-text-color, 'default');
      width: 100%;
      text-align: center;
      padding: 0 34px;
      caret-color: $--input-number-caret-color;
    }
  }
  @include as-form-item {
    @include with-status(error) {
      @include b(input-number) {
        @include e(border-layer) {
          box-shadow: map-get($--input-number-box-shadow, 'error-default');
        }
        @include e(input) {
          &:hover ~ {
            @include e(border-layer) {
              box-shadow: map-get($--input-number-box-shadow, 'error-hover');
            }
          }
          &:focus {
            background-color: map-get($--input-number-background-color, 'error-focus');
            & ~ {
              @include e(border-layer) {
                box-shadow: map-get($--input-number-box-shadow, 'error-focus');
              }
            }
          }
        }
      }
    }
  }
}