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

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

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

.input-tag-style(@cls) {
  .input-wrapper-style(@cls);

  &.@{cls}-has-tag {
    padding-right: @input-tag-padding-horizontal;
    padding-left: @input-tag-padding-horizontal;
  }

  &.@{cls}-has-prefix {
    padding-left: @input-padding-horizontal;
  }

  &.@{cls}-has-suffix {
    padding-right: @input-padding-horizontal;
  }

  .@{cls}-inner {
    flex: 1;
    overflow: hidden;
    line-height: 0;

    &.@{cls}-nowrap {
      display: flex;
      flex-wrap: wrap;
    }

    .@{cls}-tag {
      display: inline-flex;
      align-items: center;
      margin-right: @input-tag-tag-margin-right;
      color: @input-tag-color-text_default;
      font-size: @input-tag-tag-font-size;
      white-space: pre-wrap;
      word-break: break-word;
      background-color: @input-tag-tag-color-bg;
      border-color: @input-tag-tag-color-border;

      .@{prefix}-icon-hover:hover::before {
        background-color: @input-tag-tag-remove-icon-color-bg;
      }

      &.@{prefix}-tag-custom-color {
        color: @tag-custom-color-text;

        .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);
      }
    }

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

      box-sizing: border-box;
    }
  }

  .@{cls}-mirror {
    position: absolute;
    top: 0;
    left: 0;
    white-space: pre;
    visibility: hidden;
    pointer-events: none;
  }

  &.@{cls}-focus {
    .@{cls}-tag {
      background-color: @input-tag-tag-color-bg_focus;
      border-color: @input-tag-tag-color-border_focus;

      .@{prefix}-icon-hover:hover::before {
        background-color: @input-tag-tag-remove-icon-color-bg_focus;
      }
    }
  }

  &.@{cls}-disabled {
    .@{cls}-tag {
      color: @input-tag-color-text_disabled;
      background-color: @input-tag-tag-color-bg_disabled;
      border-color: @input-tag-tag-color-border_disabled;
    }
  }

  &.@{cls}-readonly,
  &.@{cls}-disabled-input {
    cursor: default;
  }

  .size(@size) {
    &.@{cls}-size-@{size} {
      @font-size: ~'input-tag-size-@{size}-font-size';
      @height: ~'input-tag-size-@{size}-height';
      @tag-height: ~'input-tag-size-@{size}-tag-height';

      font-size: @@font-size;

      .@{cls}-inner {
        padding-top: (@@height / 2) - (@@tag-height / 2) -
          @input-tag-border-width - (@input-tag-tag-margin-vertical / 2);
        padding-bottom: $padding-top;
      }

      .@{cls}-tag,
      .@{cls}-input {
        margin-top: (@input-tag-tag-margin-vertical / 2);
        margin-bottom: $margin-top;
        line-height: @@tag-height - 2;
        vertical-align: middle;
      }

      .@{cls}-tag,
      .@{cls}-input {
        height: auto;
        min-height: @@tag-height;
      }
    }
  }

  .size(mini);
  .size(medium);
  .size(small);
  .size(large);
}