wetrade-design/lib/select/style/multiple.less

一款多语言支持Vue3的UI框架

@import (reference) '../../style/themes/index';
@select-prefix-cls: ~'@{wd-prefix}-select';

@select-overflow-prefix-cls: ~'@{select-prefix-cls}-selection-overflow';
@select-multiple-item-border-width: 1px;

// @select-multiple-padding: 3px;

/**
 * Do not merge `height` & `line-height` under style with `selection` & `search`,
 * since chrome may update to redesign with its align logic.
 */

// =========================== Overflow ===========================
.@{select-overflow-prefix-cls} {
  position: relative;
  display: flex;
  flex: auto;
  flex-wrap: wrap;
  max-width: 100%;

  &-item {
    flex: none;
    align-self: center;
    max-width: 100%;
  }
}

.tag-active-item() {
  background-color: @select-multiple-item-focus-bg-color;
  color: @select-multiple-item-focus-color;
  border-color: transparent;

  .@{iconfont-css-prefix} {
    color: @select-multiple-item-focus-color;
  }
}

.@{select-prefix-cls} {
  &-multiple {
    // ========================= Selector =========================
    .@{select-prefix-cls}-selector {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      // Multiple is little different that horizontal is follow the vertical
      padding: @select-multiple-tag-padding-vertical @select-multiple-tag-padding-horizontal;

      .@{select-prefix-cls}-show-search& {
        cursor: text;
      }

      .@{select-prefix-cls}-disabled& {
        background: @select-multiple-disabled-background;
        cursor: not-allowed;
      }

      &::after {
        display: inline-block;
        width: 0;
        margin: @select-multiple-item-spacing-half 0;
        line-height: @select-multiple-item-height - 2px;
        // line-height: inherit;
        content: '\a0';
      }
    }

    &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
    &.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
      padding-right: @font-size-sm + @control-padding-horizontal;
    }

    // ======================== Selections ========================
    .@{select-prefix-cls}-selection-item {
      position: relative;
      display: flex;
      flex: none;
      box-sizing: border-box;
      max-width: 100%;

      height: @select-multiple-item-height;
      margin-top: @select-multiple-tag-margin-vertical;
      margin-bottom: @select-multiple-tag-margin-vertical;

      line-height: @select-multiple-item-height;
      background: @select-selection-item-bg;
      // border: 1px solid @select-selection-item-border-color;
      border-radius: @select-multiple-item-radius;
      cursor: default;
      transition: font-size 0.3s, line-height 0.3s, height 0.3s;
      user-select: none;
      margin-inline-end: @select-multiple-tag-margin-right;
      padding-inline-start: @padding-xs;
      padding-inline-end: @padding-xs;

      .@{select-prefix-cls}-disabled& {
        color: @select-multiple-item-disabled-color;
        border-color: @select-multiple-item-disabled-border-color;
        cursor: not-allowed;
        background-color: @select-multiple-item-disabled-bg;

        &:hover {
          background-color: @select-multiple-item-disabled-bg;
        }
      }

      // It's ok not to do this, but 24px makes bottom narrow in view should adjust
      &-content {
        display: inline-block;
        // margin-right: (@padding-xs / 2);
        overflow: hidden;
        white-space: pre; // fix whitespace wrapping. custom tags display all whitespace within.
        text-overflow: ellipsis;
      }

      &-remove {
        .iconfont-mixin();
        display: inline-block;
        color: @text-color-secondary;
        font-weight: bold;
        font-size: 10px;
        line-height: inherit;
        // margin-inline-start: @margin-xss;
        cursor: pointer;
        // display: none;

        > .@{iconfont-css-prefix} {
          line-height: @select-multiple-item-height - @select-multiple-item-border-width * 2;
          // vertical-align: -0.2em;
          vertical-align: 0;
          color: @icon-tertiary;
          font-size: 12px;
          margin-left: @margin-xss;
        }

        &:hover {
          color: @icon-color-hover;
        }
      }

      &:hover {
        .@{select-prefix-cls}-selection-item-remove {
          display: block;
        }

        .tag-active-item();
      }
    }

    // ========================== Input ==========================
    .@{select-overflow-prefix-cls}-item + .@{select-overflow-prefix-cls}-item {
      .@{select-prefix-cls}-selection-search {
        margin-inline-start: 0;
      }
    }

    .@{select-prefix-cls}-selection-search {
      position: relative;
      max-width: 100%;
      margin-inline-start: @input-padding-horizontal-base - @input-padding-vertical-base;

      &-input,
      &-mirror {
        height: @select-multiple-item-height;
        font-family: @font-family;
        line-height: @select-multiple-item-height;
        transition: all 0.3s;
      }

      &-input {
        width: 100%;
        min-width: 0;
        // min-width: 4.1px; // fix search cursor missing
      }

      &-mirror {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        white-space: pre; // fix whitespace wrapping caused width calculation bug
        visibility: hidden;
      }
    }

    // ======================= Placeholder =======================
    .@{select-prefix-cls}-selection-placeholder {
      position: absolute;
      top: 50%;
      right: @input-padding-horizontal;
      left: @select-multiple-placeholder-left;
      transform: translateY(-50%);
      transition: all 0.3s;
    }

    // ====================== Open ================================
    &.@{select-prefix-cls}-focused {
      .@{select-prefix-cls}-selector .@{select-prefix-cls}-selection {
        &-overflow-item .@{select-prefix-cls}-selection-item {
          .tag-active-item();
        }
      }
    }

    // ====================== Condition ================================
    &.@{select-prefix-cls}-condition {
      line-height: @select-multiple-item-height - @select-multiple-item-border-width * 2 - 2px;

      .@{select-prefix-cls}-selector {
        width: 100%;

        .@{select-prefix-cls}-selection {
          &-item {
            background-color: @select-multiple-condition-item-bg-color;
            border: 1px solid @select-multiple-condition-item-border-color;
            border-radius: @select-multiple-condition-item-border-radius;

            &:hover {
              .@{iconfont-css-prefix} {
                color: @select-condition-multiple-item-hover-color;
              }
            }
          }
          &-item-content {
            max-width: @select-multiple-condition-item-max-width;
            white-space: nowrap;
          }
        }

        &::after {
          line-height: @input-line-height-base + 6px;
        }
      }

      .@{select-prefix-cls}-selection-placeholder {
        left: 0;
      }
      .condition-select-size(@suffix, @input-height, @line-height) {
        @merged-cls: ~'@{select-prefix-cls}-@{suffix}';
        &.@{merged-cls} {
          @select-selection-height: @input-height - @border-width-base * 2;

          .@{select-prefix-cls}-selection-item {
            line-height: @select-selection-height;
            .@{iconfont-css-prefix} {
              line-height: @select-selection-height;
            }
          }
          .@{select-prefix-cls}-selector::after {
            line-height: @line-height;
          }
        }
      }
      .condition-select-size('lg', @select-multiple-item-height-lg, @select-multiple-item-height-lg);
      .condition-select-size('bg', @select-multiple-item-height-bg, @select-multiple-item-height-bg);
      .condition-select-size('sm', @select-multiple-item-height-sm, @select-multiple-item-height-sm);
      .condition-select-size('xs', @select-multiple-item-height-xs, @select-multiple-item-height-xs - 2px);
    }
    // ============================================================
    // ==                          Size                          ==
    // ============================================================
    .select-size(@suffix, @input-height, @line-height: @select-selection-line-height) {
      @merged-cls: ~'@{select-prefix-cls}-@{suffix}';
      &.@{merged-cls} {
        @select-selection-height: @input-height - @input-padding-vertical-base * 2;
        @select-height-without-border: @input-height - @border-width-base * 2;

        .@{select-prefix-cls}-selector::after {
          // line-height: inherit;
          line-height: @line-height;
        }

        .@{select-prefix-cls}-selection-item {
          height: @select-selection-height;
          line-height: @select-selection-height - @border-width-base * 2;
        }

        .@{select-prefix-cls}-selection-search {
          height: @select-selection-height;
          line-height: @select-selection-height;

          &-input,
          &-mirror {
            height: @select-selection-height;
            line-height: @select-selection-height - @border-width-base * 2;
          }
        }
      }
    }

    .select-size('lg', @input-height-lg, @select-selection-line-height-lg);
    .select-size('bg', @input-height-bg, @select-selection-line-height-bg);
    .select-size('sm', @input-height-sm, @select-selection-line-height-sm);
    .select-size('xs', @input-height-xs, @select-selection-line-height-xs);

    // Size small need additional set padding
    &.@{select-prefix-cls}-sm {
      .@{select-prefix-cls}-selection-placeholder {
        left: @input-padding-horizontal-sm;
      }
      // https://github.com/ant-design/ant-design/issues/29559
      .@{select-prefix-cls}-selection-search {
        margin-inline-start: 3px;
      }

      .@{select-prefix-cls}-selection-item {
        height: @select-multiple-item-height-sm;
        line-height: @select-multiple-item-height-sm;
        border-radius: @select-multiple-item-radius-sm;
        .@{iconfont-css-prefix} {
          line-height: @select-multiple-item-height-sm;
        }
      }
    }

    &.@{select-prefix-cls}-lg {
      .@{select-prefix-cls}-selection-item {
        height: @select-multiple-item-height-lg;
        line-height: @select-multiple-item-height-lg;
        border-radius: @select-multiple-item-radius-lg;
        .@{iconfont-css-prefix} {
          line-height: @select-multiple-item-height-lg;
        }
      }
    }

    &.@{select-prefix-cls}-bg {
      .@{select-prefix-cls}-selection-item {
        height: @select-multiple-item-height-bg;
        line-height: @select-multiple-item-height-bg;
        border-radius: @select-multiple-item-radius-bg;
        .@{iconfont-css-prefix} {
          line-height: @select-multiple-item-height-bg;
        }
      }
    }

    &.@{select-prefix-cls}-xs {
      .@{select-prefix-cls}-selector::after {
        line-height: @input-height-xs - 10px;
      }

      .@{select-prefix-cls}-selection-item {
        height: @select-multiple-item-height-xs;
        line-height: @select-multiple-item-height-xs;
        border-radius: @select-multiple-item-radius-xs;
        margin-top: @select-multiple-tag-margin-vertical - 1px;
        margin-bottom: @select-multiple-tag-margin-vertical - 1px;
        .@{iconfont-css-prefix} {
          line-height: @select-multiple-item-height-xs;
        }
      }

      .@{select-prefix-cls}-selector {
        &::after {
          // display: none;
        }
      }
    }

    &:not(.@{select-prefix-cls}-condition) {
      .@{select-prefix-cls}-selection-item {
        // margin-top: @select-multiple-item-spacing-half + 1px;
      }
    }

    .@{select-prefix-cls}-disabled & {
      .@{select-prefix-cls}-selection-item {
        background-color: @select-multiple-item-disabled-bg;
        &:hover {
          background-color: transparent;
        }
      }
    }
  }

  &-disabled .@{select-prefix-cls}-selection-item-remove {
    display: none;
  }
}