wetrade-design/lib/select/style/index-pure.less

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

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import './single';
@import './multiple';

@select-prefix-cls: ~'@{wd-prefix}-select';
@select-height-without-border: @input-height-base - 2 * @border-width-base;
@select-dropdown-edge-child-vertical-padding: @dropdown-horizontal-padding;
@checkbox-prefix-cls: ~'@{wd-prefix}-checkbox';
@tag-prefix-cls: ~'@{wd-prefix}-tag';
@tabs-prefix-cls: ~'@{wd-prefix}-tabs';
@select-max-tag-cls: ~'@{select-prefix-cls}-max-tag-count';

.condition-box() {
  width: @component-condition-width;
  display: flex;
  align-items: center;
  background-color: @select-condition-bg-color;
  border-radius: @select-condition-radius;

  .@{select-prefix-cls}-selector {
    background-color: @select-condition-bg-color;
  }

  &:not(.@{select-prefix-cls}-customize-input) .@{select-prefix-cls}-selector {
    // background-color: @select-condition-bg-color;
    border-color: transparent;
    padding: @select-condition-padding;
    font-size: @select-dropdown-font-size;
  }

  &.@{select-prefix-cls}-condition {
    &:not(.@{select-prefix-cls}-customize-input):not(.@{select-prefix-cls}-focused):not(
        .@{select-prefix-cls}-disabled
      ) {
      &:hover {
        .@{select-prefix-cls}-selector {
          background-color: @select-condition-bg-hover-color;
        }
      }
    }
  }

  &.@{select-prefix-cls} .@{select-prefix-cls}-selection-item {
    color: @select-condition-color;
  }

  &.@{select-prefix-cls}:not(.@{select-prefix-cls}-focused)
    .@{select-prefix-cls}-selection-search-input {
    color: @select-condition-color;
  }
}

.select-selector() {
  position: relative;
  background-color: @select-background;
  border: @border-width-base @border-style-base @select-border-color;
  border-radius: @border-radius-sm;
  transition: all 0.3s @ease-in-out;

  input {
    cursor: pointer;
  }

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

    input {
      cursor: auto;
    }
  }

  .@{select-prefix-cls}-open:not(.@{select-prefix-cls}-disabled)&,
  .@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
    .active();
    border-color: @select-condition-focus-border-color;
  }

  .@{select-prefix-cls}-disabled& {
    color: @disabled-color !important;
    background: @input-disabled-bg;
    cursor: not-allowed;

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

    input {
      cursor: not-allowed;
    }
  }
}

/* Reset search input style */
.select-search-input-without-border() {
  .@{select-prefix-cls}-selection-search-input {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    appearance: none;

    &::-webkit-search-cancel-button {
      display: none;
      /* stylelint-disable-next-line property-no-vendor-prefix */
      -webkit-appearance: none;
    }
  }
}

.@{select-prefix-cls} {
  .reset-component();
  font-size: @font-size-sm;
  position: relative;
  display: inline-block;
  cursor: pointer;

  &:not(&-customize-input) &-selector {
    .select-selector();
    .select-search-input-without-border();

    // 注释是为了可以拿到失焦事件，这里在多选下拉时可以通过键盘去删除
    // &.@{select-prefix-cls}-selector-hidden-search {
    //   .@{select-prefix-cls}-selection-overflow-item-suffix {
    //     display: none;
    //   }
    // }
  }

  &:not(&-disabled):not(&-borderless):not(&-condition):hover &-selector {
    .hover();
  }

  &-allow-clear {
    &:not(.@{select-prefix-cls}-disabled).@{select-prefix-cls}-fill {
      &:hover {
        .@{select-prefix-cls}-arrow {
          opacity: 0;
        }
      }
    }
  }

  &-condition {
    .condition-box();

    &:not(.@{select-prefix-cls}-disabled):hover .@{select-prefix-cls}-selector {
      border-color: transparent;
    }

    &.@{select-prefix-cls}.@{select-prefix-cls}-open {
      &:not(.@{select-prefix-cls}-customize-input) {
        background-color: @select-condition-focus-bg-color;
        .@{select-prefix-cls}-selector {
          background-color: @select-condition-focus-bg-color;
          border-color: @select-condition-focus-border-color;
        }
      }
    }
  }

  // ======================== Selection ========================
  &-selection-item {
    flex: 1;
    overflow: hidden;
    font-weight: normal;
    white-space: nowrap;
    text-overflow: ellipsis;

    // IE11 css hack. `*::-ms-backdrop,` is a must have
    @media all and (-ms-high-contrast: none) {
      *::-ms-backdrop,
      & {
        flex: auto;
      }
    }

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

  // ======================= Placeholder =======================
  &-selection-placeholder {
    flex: 1;
    overflow: hidden;
    color: @input-placeholder-color;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;

    // IE11 css hack. `*::-ms-backdrop,` is a must have
    @media all and (-ms-high-contrast: none) {
      *::-ms-backdrop,
      & {
        flex: auto;
      }
    }

    .@{select-prefix-cls}-disabled & {
      color: @input-disabled-color;
    }
  }

  // ========================== Label ==========================
  &-label {
    display: flex;
    align-items: center;
    font-size: @select-dropdown-font-size;
    color: @select-label-color;
    white-space: nowrap;
    margin-right: @select-label-margin-right;
  }

  // ========================== Arrow ==========================
  &-arrow,
  &-prefix {
    .iconfont-mixin();
    position: absolute;
    top: 50%;
    right: @control-padding-horizontal - 1px;
    width: @font-size-lg;
    height: @font-size-lg;
    margin-top: (-@font-size-lg / 2);
    color: @select-arrow-color;
    font-size: @font-size-lg;
    line-height: 1;
    text-align: center;
    pointer-events: none;

    .@{iconfont-css-prefix} {
      vertical-align: top;
      transition: transform 0.3s;

      > svg {
        vertical-align: top;
      }

      &:not(.@{select-prefix-cls}-suffix) {
        pointer-events: auto;
      }
    }

    .@{select-prefix-cls}-disabled & {
      cursor: not-allowed;
      color: @select-disable-icon-color;
    }
  }

  &-prefix {
    right: 0;
    left: @control-padding-horizontal - 1px;
    z-index: 9;
  }

  // ========================== Clear ==========================
  &-clear {
    position: absolute;
    top: 50%;
    right: @control-padding-horizontal - 1px;
    z-index: 1;
    display: inline-block;
    width: @font-size-lg;
    height: @font-size-lg;
    margin-top: (-@font-size-lg / 2);
    color: @select-clear-color;
    font-size: @font-size-lg;
    font-style: normal;
    line-height: 1;
    text-align: center;
    text-transform: none;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transition: color 0.3s ease, opacity 0.15s ease;
    text-rendering: auto;

    &::before {
      display: block;
    }

    &:hover {
      color: @text-color-secondary;
    }

    .@{select-prefix-cls}:hover & {
      opacity: 1;
    }
  }

  // ========================== Popup ==========================
  &-dropdown {
    .reset-component();
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: @zindex-dropdown;
    box-sizing: border-box;
    padding: @select-dropdown-edge-child-vertical-padding 2px
      @select-dropdown-edge-child-vertical-padding @select-dropdown-edge-child-vertical-padding;
    overflow: hidden;
    font-size: @font-size-base;
    // Fix select render lag of long text in chrome
    // https://github.com/ant-design/ant-design/issues/11456
    // https://github.com/ant-design/ant-design/issues/11843
    font-variant: initial;
    background-color: @select-dropdown-bg;
    border-radius: @border-radius-sm;
    outline: none;
    box-shadow: @box-shadow-200-drop;

    &.@{wd-prefix}-slide-up-enter.@{wd-prefix}-slide-up-enter-active&-placement-bottomLeft,
    &.@{wd-prefix}-slide-up-appear.@{wd-prefix}-slide-up-appear-active&-placement-bottomLeft {
      animation-name: antSlideUpIn;
    }

    &.@{wd-prefix}-slide-up-enter.@{wd-prefix}-slide-up-enter-active&-placement-topLeft,
    &.@{wd-prefix}-slide-up-appear.@{wd-prefix}-slide-up-appear-active&-placement-topLeft {
      animation-name: antSlideDownIn;
    }

    &.@{wd-prefix}-slide-up-leave.@{wd-prefix}-slide-up-leave-active&-placement-bottomLeft {
      animation-name: antSlideUpOut;
    }

    &.@{wd-prefix}-slide-up-leave.@{wd-prefix}-slide-up-leave-active&-placement-topLeft {
      animation-name: antSlideDownOut;
    }

    &-hidden {
      display: none;
    }

    &-empty {
      color: @disabled-color;
    }

    &-checkall {
      width: @select-multiple-checkall-width;
      padding: @select-multiple-checkall-padding;
      margin-top: @select-multiple-checkall-margin-top;
      height: @select-dropdown-height;
      position: relative;

      &::after {
        position: absolute;
        top: @select-multiple-checkall-after-top;
        left: 0;
        width: 100%;
        height: @select-multiple-checkall-after-height;
        background-color: @select-multiple-checkall-after-background-color;
        content: '';
      }

      .@{checkbox-prefix-cls}-text {
        padding-left: @select-multiple-checkall-text-padding-left;
      }
    }
  }

  &-dropdown-stock-search,
  &-dropdown-stock-search-no-header {
    width: @select-dropdown-stock-search-width !important;
    min-width: @select-dropdown-stock-search-width !important;
    border-radius: @padding-xs;

    .@{wd-prefix}-empty {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .rc-virtual-list-holder {
      max-height: @select-dropdown-stock-search-list-height !important;
      height: @select-dropdown-stock-search-list-height !important;
      padding-right: 0 !important;

      .@{wd-prefix}-select-item {
        margin-bottom: 0;
        padding: @select-dropdown-stock-search-select-item-padding;
      }
    }
  }

  &-dropdown-stock-search {
    padding: 0;
    padding-bottom: @padding-xs;

    &-header {
      .@{tabs-prefix-cls}-nav {
        .@{tabs-prefix-cls}-nav-list {
          width: 100%;
          justify-content: space-between;

          .@{tabs-prefix-cls}-nav-add-wrapper {
            display: none !important;
          }
        }
      }
    }

    &-history {
      color: @text-tertiary;
      line-height: @line-height-base;
      padding: @select-dropdown-stock-search-history-padding @padding-md;
      font-size: @font-size-sm;
    }

    &-place {
      height: @select-dropdown-stock-search-place-height;

      &:hover {
        background-color: @bg-dropdown;
      }
    }
  }

  &-dropdown-stock-search-no-header {
    padding-top: @padding-xs;
    padding-bottom: @padding-xs;
  }

  // ========================= Options =========================
  .item() {
    position: relative;
    display: block;
    min-height: @select-dropdown-height;
    padding: 0 @select-dropdown-horizontal-padding;
    color: @select-item-color;
    font-weight: normal;
    font-size: @select-dropdown-font-size;
    line-height: @select-dropdown-line-height;
    margin-bottom: @select-item-margin-bottom;
    border-radius: @select-item-border-radius;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  &-item-empty {
    .item();
    color: @disabled-color;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-item {
    .item();

    cursor: pointer;
    transition: background 0.3s ease;

    // =========== Group ============
    &-group {
      color: @text-color-secondary;
      font-size: @font-size-sm;
      cursor: default;
    }

    // =========== Option ===========
    &-option {
      display: flex;
      align-items: center;

      &-content {
        flex: auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &-option-multiple {
        padding: @select-option-multiple-padding;
      }

      &-content-stock-search {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: @select-dropdown-stock-search-margin;

        &-content {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;

          &__code {
            width: @select-dropdown-stock-search-code-width;
            margin-right: @select-dropdown-stock-search-code-margin-right;
            overflow: hidden;
            color: @select-dropdown-stock-search-code-color;
            text-align: right;
            text-overflow: ellipsis;
            word-break: keep-all;
            white-space: nowrap;
          }

          &__name {
            display: -webkit-box;
            flex: 1;
            overflow: hidden;
            line-height: @select-dropdown-stock-search-name-line-height;
            color: @select-dropdown-stock-search-name-color;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: wrap;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            margin-left: @select-dropdown-stock-search-name-margin-left;
          }
        }
      }

      &-state {
        flex: none;
      }

      &-active:not(&-disabled) {
        // background-color: @select-item-active-bg;
      }

      &-selected:not(&-disabled) {
        color: @select-item-selected-color;
        font-weight: @select-item-selected-font-weight;
        background-color: @select-item-selected-bg;

        .@{select-prefix-cls}-item-option-state {
          color: @brand-primary;
        }
      }

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

      &-grouped {
        padding-left: @control-padding-horizontal * 2;
      }

      &:not(&-disabled):not(&-selected) {
        &:hover {
          background-color: @select-item-active-bg;
        }
      }

      .@{checkbox-prefix-cls}-wrapper {
        pointer-events: none;
      }
    }
  }

  // ============================================================
  // ==                          Size                          ==
  // ============================================================
  &-lg {
    font-size: @font-size-base;
  }

  &-bg {
    font-size: @font-size-base;
  }

  &-sm {
    font-size: @font-size-sm;
  }

  &-xs {
    font-size: @font-size-sm;
  }

  // no border style
  &-disabled.@{select-prefix-cls}:not(.@{select-prefix-cls}-customize-input) &-selector,
  &-borderless:not(.@{select-prefix-cls}-customize-input) &-selector {
    background-color: @fill-fill;
    color: @text-primary;
    box-shadow: none;
  }

  &-disabled.@{select-prefix-cls}:not(.@{select-prefix-cls}-customize-input) &-selector {
    .@{select-prefix-cls}-label,
    .@{select-prefix-cls}-selection .@{select-prefix-cls}-selection-placeholder,
    .@{select-prefix-cls}-selection-item {
      color: @select-condition-disable-color;
    }
  }
  &-borderless:not(.@{select-prefix-cls}-customize-input) &-selector {
    border-color: transparent;
  }
  &-borderless:not(.@{select-prefix-cls}-customize-input):not(.@{select-prefix-cls}-disabled):not(
      .@{select-prefix-cls}-focused
    ) {
    &:hover {
      .@{select-prefix-cls}-selector {
        background-color: @select-condition-bg-hover-color;
      }
    }
  }

  // &-borderless {
  //   background-color: @fill-fill-deeper;
  //   color: @text-tertiary;
  // }

  // .@{tag-prefix-cls} {
  // display: none;
  // }
}

.@{select-max-tag-cls} {
  .@{select-prefix-cls}-selection-item-remove {
    display: none;
  }
}

// 设置不换行属性；
.@{select-prefix-cls}-flex-no-wrap {
  &:not(.@{select-prefix-cls}-customize-input) .@{select-prefix-cls}-selector {
    padding: @select-condition-padding;
  }

  .@{select-prefix-cls}-selector {
    flex-wrap: nowrap;
  }

  .@{select-prefix-cls}-selection-overflow {
    flex-wrap: nowrap;
    // overflow-x: hidden;
    font-weight: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: @padding-sm;
    .@{select-prefix-cls}-selection-overflow-item {
      .@{select-prefix-cls}-selection-item-content {
        max-width: max-content;
      }

      &:first-child {
        // &:nth-last-child(3){
        max-width: max-content;
        overflow-x: hidden;
        font-weight: normal;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: 1;
        opacity: 1;
      }
    }
  }
}

.@{select-prefix-cls}-fill.@{select-prefix-cls}-flex-no-wrap {
  .@{select-prefix-cls}-selection-overflow {
    overflow-x: hidden;
  }
}

@import './rtl';