@arco-design/web-react/lib/Select/style/mixin.less

Arco Design React UI Library.

@import '../../style/mixin.less';
@import './token.less';
@import '../../InputTag/style/mixin.less';

// used by form
.color(@prefixCls, @status) {
  @suffix: if(@status = default, ~'', ~'-@{status}');

  .@{prefixCls}@{suffix} {
    .@{prefixCls}-view {
      & when (@status = default) , (@status = disabled) {
        color: ~'@{select-color-text_@{status}}';
      }

      background-color: ~'@{select-color-bg_@{status}}';
      border: 1px solid ~'@{select-color-border_@{status}}';
    }

    &:hover {
      .@{prefixCls}-view {
        background-color: ~'@{select-color-bg_@{status}_hover}';
        border-color: ~'@{select-color-border_@{status}_hover}';
      }
    }

    &.@{prefixCls}-focused when not (@status = disabled) {
      .@{prefixCls}-view {
        color: @select-color-text_focused;
        background-color: ~'@{select-color-bg_@{status}_focus}';
        border-color: ~'@{select-color-border_@{status}_focus}';
        box-shadow: 0 0 0 ~'@{select-shadow-distance_@{status}_focus}' ~'@{select-color-shadow_@{status}_focus}';
      }
    }

    .@{prefixCls}-suffix-icon,
    .@{prefixCls}-loading-icon,
    .@{prefixCls}-search-icon,
    .@{prefixCls}-clear-icon,
    .@{prefixCls}-arrow-icon,
    .@{prefixCls}-expand-icon {
      & when (@status = default) , (@status = disabled) {
        color: ~'@{select-color-icon_@{status}}';
      }
    }
  }

  .@{prefixCls}-no-border {
    .@{prefixCls}-view {
      border: none !important;
      background: none !important;
    }
  }
}

.select-view(@prefixCls) {
  @tail-icon-position-right: 10px;

  .size(@size) {
    @ref-font-size: ~'select-size-@{size}-font-size';
    @ref-height: ~'select-size-@{size}-height';
    @ref-padding: ~'select-signal-size-@{size}-padding';

    @font-size: @@ref-font-size;
    @height: @@ref-height;
    @padding: @@ref-padding - @select-border-width;
    @multi-padding: @select-multi-padding - @select-border-width;

    .@{prefixCls} {
      &-size-@{size}&-multiple {
        .@{prefixCls}-view {
          height: auto;
          font-size: @font-size;
          padding: 0 @multi-padding;
          line-height: 0;
        }

        .input-tag-input-element-padding(@padding - @multi-padding);

        .@{prefixCls}-suffix {
          padding-right: @padding - @multi-padding;
        }

        input {
          font-size: @font-size;
        }
      }

      &-size-@{size}&-single {
        .@{prefixCls}-view {
          height: @height;
          line-height: $height - @select-border-width * 2;
          font-size: @font-size;
          padding: 0 @padding;
        }

        input {
          font-size: @font-size;
        }
      }

      &-size-@{size}&-multiple {
        .@{prefixCls}-view-with-prefix {
          padding-left: @padding;
        }
      }
    }
  }

  .color(@prefixCls, default);
  .color(@prefixCls, error);
  .color(@prefixCls, warning);
  .color(@prefixCls, disabled);

  .size(mini);
  .size(small);
  .size(default);
  .size(large);

  .@{prefixCls} {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;

    &-view {
      display: flex;
      position: relative;
      box-sizing: border-box;
      width: 100%;
      border-radius: @select-border-radius;
      outline: none;
      user-select: none;
      text-align: left;
      transition: all @transition-duration-1 @transition-timing-function-linear, padding 0s linear;

      input {
        color: inherit;
        cursor: inherit;

        &::placeholder {
          color: @select-color-placeholder_default;
        }

        // since Chrome 116 <input disabled /> won't trigger onClick callback
        // remove all events of disabled <input /> to make sure Trigger works correctly
        &[disabled] {
          pointer-events: none;
        }
      }
    }

    .hide-input-element() {
      // 需要在隐藏 input 的同时保证其能被 Tab 键聚焦
      // 故不要用 display: none / visibility: hidden / width: 0
      // width 设置为 0，会导致在火狐浏览器下触发 onFocus 之后不能立刻触发 onClick
      // https://github.com/arco-design/arco-design/issues/1232
      opacity: 0;
      position: absolute;
      // 避免绝对定位的元素位于所有同级节点的最上层，遮挡其他元素的鼠标操作（例如被 Tooltip 包裹的 value 文本）
      // 不要使用 pointer-events: none，会导致火狐浏览器下下拉弹窗需要点击两次才可弹出
      // https://github.com/arco-design/arco-design/issues/2127
      z-index: -1;
    }

    &-multiple,
    &-show-search {
      cursor: text;
    }

    &-disabled {
      cursor: not-allowed;

      .@{prefixCls}-view input::placeholder {
        color: @select-color-placeholder_disabled;
      }
    }

    &-single &-view {
      // Keep forward compatibility
      // Do NOT move this section under &-selector
      &-input {
        box-sizing: border-box;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        background: transparent;
        .text-ellipsis();
      }

      &-selector {
        position: relative;
        display: inline-flex;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;

        // Keep forward compatibility
        // Do NOT move this section out of &-selector
        .@{prefixCls}-view-input {
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }

        .@{prefixCls}-view-value-mirror {
          opacity: 0;
        }
      }

      &-value,
      &-value-mirror {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        .text-ellipsis();

        // Do NOT remove this, it may cause baseline-changing of select-view
        &::after {
          content: '.';
          font-size: 0;
          line-height: 0;
          visibility: hidden;
        }
      }

      .@{prefixCls}-hidden {
        .hide-input-element();
      }
    }

    &-multiple {
      vertical-align: top;

      .@{prefixCls}-view {
        padding: 0 @select-multi-padding;
        line-height: 0;
      }

      .@{prefixCls}-view-with-prefix {
        padding-left: @select-signal-size-default-padding;
      }

      .@{prefix}-input-tag {
        flex: 1;
        padding: 0;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        overflow: hidden;
      }

      .@{prefix}-tag {
        max-width: 100%;
      }

      // 多选的空白输入框在已存在选择项并且未聚焦时隐藏，避免导致不必要的换行
      &:not(.@{prefixCls}-focused) {
        .@{prefix}-input-tag input:not(:first-child)[value=''] {
          .hide-input-element();
        }
      }
    }

    &-prefix {
      display: flex;
      align-items: center;
      margin-right: 12px;
      white-space: nowrap;
      color: @select-color-icon_default;
    }

    &-suffix {
      display: flex;
      align-items: center;
      margin-left: 4px;
    }

    &-suffix-icon,
    &-search-icon,
    &-loading-icon,
    &-expand-icon,
    &-clear-icon {
      font-size: @select-size-icon;
      transition: all @transition-duration-1 @transition-timing-function-linear;
    }

    &-arrow-icon {
      font-size: @select-size-icon;
    }

    &-open &-arrow-icon svg {
      transform: rotateZ(180deg);
    }

    & &-clear-icon {
      display: none;
      cursor: pointer;

      > svg {
        position: relative;
        transition: all @transition-duration-1 @transition-timing-function-linear;
      }
    }

    &:hover &-clear-icon {
      display: block;

      & ~ * {
        display: none;
      }
    }

    &-wrapper {
      display: inline-flex;
      align-items: stretch;
      width: 100%;

      .@{prefixCls} {
        min-width: 0; // 避免 .arco-select 宽度超出 .arco-select-wrapper
      }

      .@{prefixCls}:not(.@{prefixCls}-focused) {
        &:not(:first-child) .@{prefixCls}-view {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }

        &:not(:last-child) .@{prefixCls}-view {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }

    // &-addafter,
    &-addbefore {
      display: flex;
      align-items: center;
      padding: 0 @select-addon-padding-horizontal;
      color: @select-color-addon-text;
      background-color: @select-color-addon-bg;
      white-space: nowrap;
      border: 1px solid @select-color-addon-border_default;
    }

    &-addbefore {
      border-right: @select-border-addon-separator-width solid @select-color-addon-border;
      border-top-left-radius: @select-border-radius;
      border-bottom-left-radius: @select-border-radius;
    }

    // &-addafter {
    //   border-left: @select-border-addon-separator-width solid @select-color-addon-border;
    //   border-top-right-radius: @select-border-radius;
    //   border-bottom-right-radius: @select-border-radius;
    // }
  }
}

.select-view-rtl(@prefixCls, @prefixClsRtl) {
  .size(@size) {
    @ref-padding: ~'select-signal-size-@{size}-padding';
    @padding: @@ref-padding - @select-border-width;
    @multi-padding: @select-multi-padding - @select-border-width;

    .@{prefixClsRtl}.@{prefixCls}-size-@{size}.@{prefixCls}-multiple {
      .@{prefixCls}-view-with-prefix {
        padding-left: 0;
        padding-right: @padding;
      }

      .@{prefixCls}-suffix {
        padding-right: 0;
        padding-left: @padding - @multi-padding;
      }

      .input-tag-input-element-padding-rtl(@padding - @multi-padding);
    }
  }

  .size(mini);
  .size(small);
  .size(default);
  .size(large);

  .@{prefixCls}-wrapper-rtl .@{prefixCls}-addbefore {
    border-right: unset;
    border-left: @select-border-addon-separator-width solid @select-color-addon-border;
  }

  .@{prefixClsRtl} {
    .@{prefixCls}-view {
      text-align: right;
    }

    .@{prefixCls}-multiple {
      .@{prefixCls}-view-with-prefix {
        padding-left: 0;
        padding-right: @select-signal-size-default-padding;
      }
    }

    .@{prefixCls}-prefix {
      margin-right: 0;
      margin-left: 12px;
    }

    .@{prefixCls}-suffix {
      margin-left: 0;
      margin-right: 4px;
    }
  }
}