naive-ui/styles/InputNumber.scss

@import './mixins/mixins.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 e(minus-button, add-button) {
      width: map-get($--n-input-number-button-width, $size);
    }
    @include e(input) {
      font-size: map-get($--n-font-size, $size);
      padding: 0 map-get($--n-input-number-button-width, $size);
    }
  }
}

@include themes-mixin {
  @include b(input-number) {
    @include once {
      position: relative;
      border-radius: $--n-input-number-border-radius;
      box-sizing: border-box;
      width: 152px;
      display: inline-block;
      outline: none;
      z-index: auto;
      @include input-number-size-mixin('small');
      @include input-number-size-mixin('medium');
      @include input-number-size-mixin('large');
      @include e(border-mask) {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        box-shadow: inset 0 0 0px 1px transparent;
        border-radius: $--n-input-number-border-radius;
        transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
        pointer-events: none;
      }
      @include e(minus-button) {
        left: 0;
        border-top-left-radius: $--n-input-number-border-radius;
        border-bottom-left-radius: $--n-input-number-border-radius;
        @include b(input-number-button-border-mask) {
          border-top-left-radius: $--n-input-number-border-radius;
          border-bottom-left-radius: $--n-input-number-border-radius;
        }
        @include b(input-number-button-body) {
          left: 1px;
          right: 0;
          @include b(icon) {
            transform: translateX(-1px);
          }
        }
        @include b(input-number-button-boundary) {
          left: 0;
        }
      }
      @include e(add-button) {
        right: 0;
        border-top-right-radius: $--n-input-number-border-radius;
        border-bottom-right-radius: $--n-input-number-border-radius;
        @include b(input-number-button-border-mask) {
          border-top-right-radius: $--n-input-number-border-radius;
          border-bottom-right-radius: $--n-input-number-border-radius;
        }
        @include b(input-number-button-body) {
          right: 1px;
          left: 0;
          @include b(icon) {
            transform: translateX(1px);
          }
        }
        @include b(input-number-button-boundary) {
          right: 0;
        }
      }
    }
    @include m(disabled) {
      @include e(minus-button, add-button) {
        @include b(input-number-button-body) {
          background-color: map-get($--input-number-button-background-color, 'disabled');
        }
        @include b(input-number-button-boundary) {
          background-color: map-get($--input-number-button-background-color, 'disabled');
        }
        @include b(icon) {
          fill: map-get($--input-number-button-text-color, 'disabled');
          stroke: map-get($--input-number-button-text-color, 'disabled');
        }
        @include once {
          pointer-events: none;
        }
      }
      @include e(input) {
        &::placeholder {
          color: map-get( $--input-placeholder-color, 'disabled');
        }
        background: map-get($--input-number-background-color, 'disabled');
        color: map-get($--input-number-text-color, 'disabled');
        @include once {
          pointer-events: none;
        }
      }
      @include once {
        cursor: not-allowed;
      }
    }
    @include m(invalid) {
      @include e(input) {
        @include once {
          text-decoration: line-through;
        }
        text-decoration-color: $--input-number-text-decoration-color;
      }
    }
    @include e(minus-button, add-button) {
      @include once {
        background-color: transparent;
        overflow: hidden;
        outline: none;
        position: absolute;
        cursor: pointer;
        z-index: auto;
        top: 0;
        padding: 0;
        border: none;
        font-size: 14px;
      }
      @include b(input-number-button-border-mask) {
        @include once {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          transition:
            box-shadow .3s $--n-ease-in-out-cubic-bezier;
        }
        box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
      }
      @include b(input-number-button-body) {
        @include once {
          position: absolute;
          top: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color .3s $--n-ease-in-out-cubic-bezier;
        }
        background-color: map-get($--input-number-button-background-color, 'default');
      }
      @include b(input-number-button-boundary) {
        @include once {
          width: 1px;
          position: absolute;
          top: 0;
          bottom: 0;
          transition: background-color .3s $--n-ease-in-out-cubic-bezier;
        }
        background-color: map-get($--input-number-button-background-color, 'default');
      }
      @include b(icon) {
        fill: map-get($--input-number-button-text-color, 'default');
        stroke: map-get($--input-number-button-text-color, 'default');
      }
      &:hover ~ {
        @include e(border-mask) {
          box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
        }
      }
      &:hover {
        @include b(input-number-button-body) {
          background-color: map-get($--input-number-button-background-color, 'hover');
        }
        @include b(input-number-button-boundary) {
          background-color: map-get($--input-number-button-background-color, 'hover');
        }
        @include b(icon) {
          fill:map-get($--input-number-button-text-color, 'hover');
          stroke: map-get($--input-number-button-text-color, 'hover');
        }
      }
      &:active {
        @include once {
          transition:
            color .3s $--n-ease-in-out-cubic-bezier,
            background-color .15s $--n-ease-in-out-cubic-bezier;
        }
        @include b(input-number-button-body) {
          background-color: map-get($--input-number-button-background-color, 'active');
        }
        @include b(input-number-button-boundary) {
          background-color: map-get($--input-number-button-background-color, 'active');
        }
        @include b(icon) {
          fill:map-get($--input-number-button-text-color, 'active');
          stroke: map-get($--input-number-button-text-color, 'active');
        }
      }
      @include m(disabled) {
        @include once {
          cursor: not-allowed;
        }
        @include b(input-number-button-body) {
          background-color: map-get($--input-number-button-background-color, 'disabled');
        }
        @include b(input-number-button-boundary) {
          background-color: map-get($--input-number-button-background-color, 'disabled');
        }
        @include b(icon) {
          fill: map-get($--input-number-button-text-color, 'disabled');
          stroke: map-get($--input-number-button-text-color, 'disabled');
        }
      }
    }
    @include e(input) {
      @include once {
        outline: none;
        box-sizing: border-box;
        border-radius: $--n-input-number-border-radius;
        transition:
          color .3s $--n-ease-in-out-cubic-bezier,
          caret-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,
          text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
        border: none;
        width: 100%;
        text-align: center;
      }
      background-color: map-get($--input-number-background-color, 'default');
      box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
      color: map-get($--input-number-text-color, 'default');
      caret-color: $--input-number-caret-color;
      &::placeholder {
        @include once {
          transition: color .3s $--n-ease-in-out-cubic-bezier;
        }
        color: map-get( $--input-placeholder-color, 'default');
      }
      &:hover ~ {
        @include e(border-mask) {
          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-mask) {
            box-shadow: map-get($--input-number-box-shadow, 'focus');
          }
        }
      }
    }
  }
  @include as-form-item {
    @include with-status(error) {
      @include b(input-number) {
        @include e(border-mask) {
          box-shadow: map-get($--input-number-box-shadow, 'error-default');
        }
        @include e(input) {
          &:hover ~ {
            @include e(border-mask) {
              box-shadow: map-get($--input-number-box-shadow, 'error-hover');
            }
          }
          &:focus {
            background-color: map-get($--input-number-background-color, 'error-focus');
            & ~ {
              @include e(border-mask) {
                box-shadow: map-get($--input-number-box-shadow, 'error-focus');
              }
            }
          }
        }
      }
    }
  }
}