@arco-design/web-vue/lib/input/style/index.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import '../../style/mixins/index.less';
@import './input.less';
@import './token.less';

@input-prefix-cls: ~'@{prefix}-input';

.get-padding(@input-size-height, @input-font-size) {
  /* prettier-ignore */
  padding-top: (round(@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2);

  /* prettier-ignore */
  padding-bottom: (round(@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2);
}

.disabled-style() {
  color: @input-color-text_disabled;
  background-color: @input-color-bg_disabled;
  border-color: @input-color-border_disabled;
  cursor: not-allowed;

  &:hover {
    color: @input-color-text_disabled;
    background-color: @input-color-bg_disabled;
    border-color: @input-color-border_disabled;
  }

  &::placeholder {
    color: @input-color-text_disabled;
  }
}

.@{input-prefix-cls}-wrapper {
  .input-wrapper-style(@input-prefix-cls);

  .@{input-prefix-cls} {
    .input-style();

    &.@{input-prefix-cls}-size-mini {
      .input-size(mini);
    }

    &.@{input-prefix-cls}-size-small {
      .input-size(small);
    }

    &.@{input-prefix-cls}-size-medium {
      .input-size(medium);
    }

    &.@{input-prefix-cls}-size-large {
      .input-size(large);
    }
  }

  .@{input-prefix-cls}-word-limit {
    color: @input-color-tip-text;
    font-size: @input-font-tip-size;
  }
}

.@{input-prefix-cls}-outer {
  display: inline-flex;
  width: 100%;

  > .@{input-prefix-cls}-wrapper {
    border-radius: 0;
  }

  > :first-child {
    border-top-left-radius: @input-border-radius;
    border-bottom-left-radius: @input-border-radius;
  }

  > :last-child {
    border-top-right-radius: @input-border-radius;
    border-bottom-right-radius: @input-border-radius;
  }

  .outer-size();

  &-disabled {
    cursor: not-allowed;
  }
}

.@{input-prefix-cls}-prepend,
.@{input-prefix-cls}-append {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  box-sizing: border-box;
  padding: 0 @input-padding-horizontal;
  color: @input-color-text;
  white-space: nowrap;
  background-color: @input-color-addon-bg;
  border: 1px solid @input-color-addon-border_default;

  > svg {
    font-size: @input-size-default-icon-addon-size;
  }
}

.@{input-prefix-cls}-prepend {
  border-right: @input-border-addon-separator-width solid
    @input-color-addon-border;

  .addon(before, @input-size-default-height, @input-size-default-font-size);
}

.@{input-prefix-cls}-append {
  border-left: @input-border-addon-separator-width solid
    @input-color-addon-border;

  .addon(after, @input-size-default-height, @input-size-default-font-size);
}

@import './group.less';
@import './size.less';
@import './textarea.less';
@import './search.less';
@import './password.less';