naive-ui/styles/Input.scss

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

@mixin input-group-label-size-mixin ($size) {
  $font-size: map-get($map: $--n-font-size, $key: $size);
  $height: map-get($map: $--n-height, $key: $size);
  @include m($size + '-size') {
    font-size: $font-size;
    line-height: $height;
    height: $height;
  }
}

@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, splitor, placeholder) {
      padding-left: 14px;
      padding-right: 14px;
      line-height: $line-height;
      font-size: $font-size;
      padding-top: ($height - $line-height) / 2;
      padding-bottom: ($height - $line-height) / 2;
    }
    @include e(placeholder) {
      left: 14px;
      right: 14px;
    }
    @include m(suffix, clearable) {
      @include not-m(split) {
        @include e(input) {
          @include m(first) {
            padding-right: 38px!important;
          }
        }
        @include e(placeholder) {
          right: 38px!important;
        }
      }
      @include m(split) {
        @include e(input) {
          @include m(second) {
            padding-right: 38px!important;
            & + {
              @include e(placeholder) {
                right: 38px!important;
              }
            }
          }
        }
      }
    }
    @include m(prefix) {
      @include e(input) {
        @include m(first) {
          padding-left: 38px!important;
        }
      }
      @include not-m(split) {
        @include e(placeholder) {
          left: 38px!important;
        }
      }
      @include m(split) {
        @include e(input) {
          @include m(first) {
            & + {
              @include e(placeholder) {
                left: 38px!important;
              }
            }
          }
        }
      }
    }
    @include m(round) {
      @include not-m(textarea) {
        @include e(input) {
          padding-left: $height / 2;
          padding-right: $height / 2;
        }
        @include e(placeholder) {
          left: $height / 2;
          right: $height / 2;
        }
        border-radius: $height / 2;
        @include e(border-mask) {
          border-radius: $height / 2;
        }
      }
    }
  }
}

@include themes-mixin {
  @include b(input) {
    @include once {
      z-index: auto;
      outline: none;
      box-sizing: border-box;
      position: relative;
      width: 100%;
      display: inline-block;
      border-radius: $--n-input-border-radius;
      transition: box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
      @include input-size-mixin("small");
      @include input-size-mixin("medium");
      @include input-size-mixin("large");
      @include e(border-mask) {
        z-index: 1;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        pointer-events: none;
        border-radius: $--n-input-border-radius;
        transition: border-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
      }
      @include e(placeholder) {
        white-space: nowrap;
        pointer-events: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        transition: color .3s $--n-ease-in-out-cubic-bezier;
        overflow: hidden;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      @include e(suffix, prefix) {
        position: absolute;
        line-height: 1.75;
        height: 0;
        width: $--n-input-icon-size;
        white-space: nowrap;
        display: flex;
        align-items: center;
        top: 50%;
        @include b(icon) {
          justify-self: center;
          font-size: $--n-input-icon-size;
        }
      }
      @include e(suffix) {
        @include fade-in-scale-up-transition(button-suffix);
        justify-content: flex-end;
        right: 12px;
      }
      @include e(prefix) {
        justify-content: flex-start;
        left: 12px;
      }
      @include b(input-clear) {
        display: flex;
        margin-right: 4px;
      }
      @include e(textarea, textarea-mirror) {
        display: inline-block;
        vertical-align: bottom;
        box-sizing: border-box;
        font-family: inherit;
        font-size: inherit;
        line-height: 1.75;
        margin: 0;
        resize: vertical;
      }
      @include e(textarea) {
        @include m(autosize) {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          resize: none;
        }
      }
      @include e(textarea-mirror) {
        overflow: hidden;
        visibility: hidden;
        position: static;
        white-space: pre-wrap;
        overflow-wrap: break-word;
      }
      @include m(split) {
        display: inline-flex;
        @include e(input, placeholder) {
          text-align: center;
        }
      }
    }
    @include e(placeholder) {
      color: map-get($--input-placeholder-color, 'default');
    }
    background-color: map-get($--input-background-color, 'default');
    box-shadow: map-get($--input-box-shadow, 'default');
    @include e(border-mask) {
      border: 1px solid map-get($--input-border-mask-border-color, 'default');
    }
    &:hover {
      @include e(border-mask) {
        border-color: map-get($--input-border-mask-border-color, 'hover');
      }
    }
    @include m(focus) {
      @include e(border-mask) {
        border-color: map-get($--input-border-mask-border-color, 'focus');
        box-shadow: map-get($--input-border-mask-box-shadow, 'focus');
      }
      background-color: map-get($--input-background-color, 'focus');
    }
    @include once {
      @include m(textarea) {
        padding-left: 0;
        padding-right: 0;
        @include e(textarea, textarea-mirror) {
          padding-left: 14px;
          padding-right: 14px;
        }
        @include e(placeholder) {
          white-space: unset;
        }
      }
    }
    @include e(suffix, prefix) {
      @include b(icon) {
        fill: map-get($--input-icon-color, 'default');
        stroke: map-get($--input-icon-color, 'default');
      }
    }
    @include e(input, textarea) {
      @include once {
        -webkit-appearance: none;
        box-sizing: border-box;
        border: none;
        font-size: inherit;
        outline: none;
        font-family: inherit;
        width: 100%;
        transition: color .3s $--n-ease-in-out-cubic-bezier, text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
        background-color: transparent;
        min-width: 0;
      }
      color: map-get($--input-color, 'default');
      caret-color: map-get($--input-caret-color, 'default');
      &::placeholder {
        color: transparent;
      }
    }
    @include e(splitor) {
      transition: color .3s $--n-ease-in-out-cubic-bezier;
      color: map-get($--input-color, 'default');
      @include once {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
    @include m(disabled) {
      @include once {
        cursor: not-allowed;
      }
      box-shadow: map-get($--input-box-shadow, 'disabled') !important;
      @include e(border-mask) {
        border-color: map-get($--input-border-mask-border-color, 'disabled') !important;
      }
      background-color: map-get($--input-background-color, 'disabled');
      @include e(input, textarea) {
        @include once {
          cursor: not-allowed;
        }
        color: map-get($--input-color, 'disabled');
      }
      @include e(placeholder) {
        color: map-get($--input-placeholder-color, 'disabled');
      }
      @include e(suffix, prefix) {
        @include b(icon) {
          fill: map-get($--input-icon-color, 'disabled');
          stroke: map-get($--input-icon-color, 'disabled');
        }
      }
      @include e(splitor) {
        color: map-get($--input-color, 'disabled');
      }
    }
  }
  @include b(input-group-label) {
    @include once {
      user-select: none;
      box-sizing: border-box;
      padding: 0 12px;
      display: inline-block;
      border-radius: $--n-input-border-radius;
      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;
      @include input-group-label-size-mixin("small");
      @include input-group-label-size-mixin("medium");
      @include input-group-label-size-mixin("large");
    }
    background-color: $--input-group-label-background-color;
    color: map-get($--input-color, 'default');
    box-shadow: map-get($--input-box-shadow, 'default');
  }
  @include as-form-item {
    @include with-status(error) {
      @include b(input) {
        @include m(stateful) {
          box-shadow: map-get($--input-box-shadow, 'error-default');
          @include e(border-mask) {
            border-color: map-get($--input-border-mask-border-color, 'error-default');
          }
          &:hover {
            @include e(border-mask) {
              border-color: map-get($--input-border-mask-border-color, 'error-hover');
            }
          }
          @include m(focus) {
            @include e(border-mask) {
              border-color: map-get($--input-border-mask-border-color, 'error-focus');
              box-shadow: map-get($--input-border-mask-box-shadow, 'error-focus');
            }
          }
          @include e(input, textarea) {
            caret-color: map-get($--input-caret-color, 'error');
          }
        }
      }
    }
  }
  @include once {
    @include b(input-group) {
      display: inline-flex;
      width: 100%;
      flex-wrap: nowrap;
      vertical-align: bottom;
      & > {
        @include b(input) {
          &:not(:last-child) {
            border-top-right-radius: 0!important;
            border-bottom-right-radius: 0!important;
            @include e(border-mask) {
              border-top-right-radius: 0!important;
              border-bottom-right-radius: 0!important;
            }
          }
          &:not(:first-child) {
            border-top-left-radius: 0!important;
            border-bottom-left-radius: 0!important;
            @include e(border-mask) {
              border-top-left-radius: 0!important;
              border-bottom-left-radius: 0!important;
            }
            margin-left: -1px!important;
          }
        }
        @include b(input-number) {
          &:not(:last-child) {
            border-top-right-radius: 0!important;
            border-bottom-right-radius: 0!important;
            @include e(input, add-button, border-mask) {
              border-top-right-radius: 0!important;
              border-bottom-right-radius: 0!important;
            }
          }
          &:not(:first-child) {
            border-top-left-radius: 0!important;
            border-bottom-left-radius: 0!important;
            @include e(input, minus-button, border-mask) {
              border-top-left-radius: 0!important;
              border-bottom-left-radius: 0!important;
            }
          }
        }
        @include b(button) {
          &:not(:last-child) {
            border-top-right-radius: 0!important;
            border-bottom-right-radius: 0!important;
            @include e(border-mask) {
              border-top-right-radius: 0!important;
              border-bottom-right-radius: 0!important;
            }
          }
          &:not(:first-child) {
            border-top-left-radius: 0!important;
            border-bottom-left-radius: 0!important;
            @include e(border-mask) {
              border-top-left-radius: 0!important;
              border-bottom-left-radius: 0!important;
            }
            @include not-m(default-type) {
              margin-left: 0!important;
            }
          }
        }
        * {
          &:not(:last-child) {
            border-top-right-radius: 0!important;
            border-bottom-right-radius: 0!important;
            & > {
              @include b(input) {
                border-top-right-radius: 0!important;
                border-bottom-right-radius: 0!important;
                @include e(border-mask) {
                  border-top-right-radius: 0!important;
                  border-bottom-right-radius: 0!important;
                }
              }
              @include b(base-selection) {
                @include b(base-selection-label) {
                  border-top-right-radius: 0!important;
                  border-bottom-right-radius: 0!important;
                }
                @include b(base-selection-tags) {
                  border-top-right-radius: 0!important;
                  border-bottom-right-radius: 0!important;
                } 
                @include b(base-selection-border-mask)  {
                  border-top-right-radius: 0!important;
                  border-bottom-right-radius: 0!important;
                }
              }
            }
          }
          &:not(:first-child) {
            margin-left: -1px!important;
            border-top-left-radius: 0!important;
            border-bottom-left-radius: 0!important;
            & > {
              @include b(input) {
                border-top-left-radius: 0!important;
                border-bottom-left-radius: 0!important;
                @include e(border-mask) {
                  border-top-left-radius: 0!important;
                  border-bottom-left-radius: 0!important;
                }
              }
              @include b(base-selection) {
                @include b(base-selection-label) {
                  border-top-left-radius: 0!important;
                  border-bottom-left-radius: 0!important;
                }
                @include b(base-selection-tags) {
                  border-top-left-radius: 0!important;
                  border-bottom-left-radius: 0!important;
                }
                @include b(base-selection-border-mask)  {
                  border-top-left-radius: 0!important;
                  border-bottom-left-radius: 0!important;
                }
              }
            }
          }
        }
      }
    }
  }
}