naive-ui/styles/Input.scss

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

@mixin input-size-mixin ($size) {
  $font-size: map-get($map: $--n-font-size, $key: $size);
  $height: map-get($map: $--n-height, $key: $size);
  $line-height: round($font-size * 1.5);
  @include m($size + "-size") {
    font-size: $font-size;
    line-height: $line-height;
    @include e(input) {
      height: $height;
    }
    @include e(input, textarea, textarea-mirror) {
      line-height: $line-height;
      font-size: $font-size;
      padding-top: ($height - $line-height) / 2;
      padding-bottom: ($height - $line-height) / 2;
    }
    @include m(round) {
      @include e(input) {
        border-radius: $height / 2;
        padding-left: $height / 2;
      }
    }
  }
}

@include themes-mixin {
  @include b(input) {
    @include once {
      position: relative;
      width: 100%;
      display: inline-block;
      @include input-size-mixin("small");
      @include input-size-mixin("medium");
      @include input-size-mixin("large");
      @include e(icon) {
        position: absolute;
        line-height: $--input-icon-size;
        height: $--input-icon-size;
        width: $--input-icon-size;
        i {
          height: $--input-icon-size;
          width: $--input-icon-size;
          &::before {
            font-size: $--input-icon-size;
            line-height: $--input-icon-size;
            height: $--input-icon-size;
            width: $--input-icon-size;
          }
        }
        left: 0;
        top: calc(50% - 9px);
        margin-left: 12px;
      }
      @include e(cancel-mark) {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        line-height: 12px;
      }
      @include e(textarea, textarea-mirror) {
        box-sizing: border-box;
        font-family: inherit;
        font-size: inherit;
        line-height: 1.5;
        margin: 0;
        padding-left: 14px;
        padding-right: 14px;
        resize: vertical;
      }
      @include e(textarea) {
        @include m(autosize) {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
        }
      }
      @include e(textarea-mirror) {
        visibility: hidden;
        position: static;
        white-space: pre-wrap;
        overflow-wrap: break-word;
      }
      @include m(clearable) {
        @include e(input, textarea, textarea-mirror) {
          padding-right: 32px;
        }
      }
      @include m(icon) {
        @include e(input) {
          padding-left: 38px!important;
        }
      }
    }
    @include e(icon) {
      i {
        &::before {
          color: $--input-icon-color;
        }
      }
    }
    @include e(input, textarea) {
      @include once {
        -webkit-appearance: none;
        box-sizing: border-box;
        border: none;
        font-size: inherit;
        padding-left: 14px;
        padding-right: 14px;
        border-radius: $--input-border-radius;
        outline: none;
        font-family: $--n-font-family;
        width: 100%;
        transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
        vertical-align: bottom;
      }
      color: map-get($--input-color, 'default');
      background-color: map-get($--input-background-color, 'default');
      caret-color: $--input-caret-color;
      box-shadow: map-get($--input-box-shadow, 'default');
      &:hover {
        box-shadow: map-get($--input-box-shadow, 'hover');
      }
      &:focus {
        box-shadow: map-get($--input-box-shadow, 'focus');
        background-color: map-get($--input-background-color, 'focus');
      }
      &::placeholder {
        transition: color .3s $default-cubic-bezier;
        color: map-get($--input-placeholder-color, 'default');
        opacity: 1;
      }
    }
    @include m(disabled) {
      cursor: not-allowed;
      @include e(input, textarea) {
        cursor: not-allowed;
        background-color: map-get($--input-background-color, 'disabled');
        color: map-get($--input-color, 'disabled');
        box-shadow: map-get($--input-box-shadow, 'disabled') !important;
        &::placeholder {
          color: map-get($--input-placeholder-color, 'disabled');
        }
      }
    }
  }
}