tntd/lib/select/select.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

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

@select-prefix-cls: ~'@{ant-prefix}-select';

.tnt-select,
.@{select-prefix-cls} {
  .@{select-prefix-cls}-arrow {
    color: @input-color;
  }
  &-disabled {
    .@{select-prefix-cls}-arrow {
      color: @text-color-tertiary;
    }
  }
  // 线框风格
  &-outline {
    .@{select-prefix-cls}-selection {
      border-top: none;
      border-left: none;
      border-right: none;
      border-radius: 0;
      box-shadow: none;
    }

    &.@{select-prefix-cls}-focused &,
    &.@{select-prefix-cls}-selection:focus,
    &.@{select-prefix-cls}-selection:active {
      .active;
      box-shadow: none;
    }
  }
  // 填充风格
  &-fill {
    .@{select-prefix-cls}-selection {
      border-color: @fill-color-quaternary;
      background-color: @fill-color-quaternary;

      &:hover {
        .hover;
      }

      &.@{select-prefix-cls}-focused &,
      &.@{select-prefix-cls}-selection:focus,
      &.@{select-prefix-cls}-selection:active {
        .active;
      }
    }

    &.@{select-prefix-cls}-disabled {
      .@{select-prefix-cls}-selection {
        background-color: @input-disabled-bg !important;
        border-color: @input-disabled-bg !important;
        box-shadow: none !important;
      }
    }
  }

  // 未选择值的时候的样式
  .@{select-prefix-cls}-selection {
    &__clear {
      color: @bg-color-spotilight-tint-50;
    }
    &:not(:has(.ant-select-selection-selected-value, .ant-select-selection__choice)) {
      .@{select-prefix-cls}-arrow {
        color: @input-placeholder-color;
      }

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

  .@{select-prefix-cls}-selection__choice {
    border-radius: @border-radius-base;
    border-color: @bg-grey-default;
    .tntd-anticon {
      font-size: 12px;
      vertical-align: middle;
    }
  }
}