qt-public-ui/es/Select/style.less

新设计规范下业务组件库

@import (reference) '../../style/common.less';

// 带图标的 select
.@{ant-prefix}-select .@{ant-prefix}-select-selector .@{ant-prefix}-select-selection-item {
  > span {
    > svg {
      vertical-align: middle;
      margin-right: 6px;
      font-size: 16px;
    }
  }
}
.@{ant-prefix}-select {
  .@{ant-prefix}-select-arrow {
    top: 48%;
    span {
      color: @text-color-secondary;
      font-size: 14px;
    }
  }
}
.@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value {
  .anticon {
    vertical-align: middle;
    margin-right: 6px;
    font-size: 20px;
  }
}
.@{ant-prefix}-select-selection {
  .@{ant-prefix}-select-arrow {
    top: 48%;
    .@{ant-prefix}-select-arrow-icon {
      color: @text-color-secondary;
      font-size: 14px;
    }
  }
}
.@{ant-prefix}-select-item-option-content {
  svg {
    font-size: 14px;
    margin-right: 6px;
    vertical-align: middle;
  }
}
.@{ant-prefix}-select-dropdown {
  .anticon {
    margin-right: 6px;
    vertical-align: middle;
  }
}

.umui-forbid-rotate {
  .@{ant-prefix}-select-arrow-icon svg {
    transform: none;
  }
}

// styleType = 'round'
.umui-select-round {
  // width: 156px;
  .@{ant-prefix}-select-selector {
    border-radius: 16px !important;
    min-height: 32px !important;
  }
  .@{ant-prefix}-select-selection {
    border-radius: 16px;
    min-height: 32px;
  }
  .@{ant-prefix}-select-selection__rendered {
    height: 30px;
    margin-left: 8px;
    margin-right: 24px;
    .@{ant-prefix}-select-selection-selected-value {
      color: @text-color;
      line-height: 30px;
      .anticon {
        font-size: 20px;
        line-height: 18px;
      }
    }
    .@{ant-prefix}-select-selection__placeholder {
      margin-left: 0;
    }
  }
  .@{ant-prefix}-select-arrow {
    right: 12px;
  }
}


// styleType = 'underline'
.umui-select-underline {
  max-width: 200px;
  .@{ant-prefix}-select-selector {
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid @disabled-color !important;
    box-shadow: none !important;
    background-color: transparent !important;
    &:hover {
      border-color: @primary-color;
    }
  }
  .@{ant-prefix}-select-selection {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid @disabled-color;
    box-shadow: none;
    background-color: transparent;
    &:hover {
      border-color: @primary-color;
    }
  }
  .@{ant-prefix}-select-selection__placeholder,
  .@{ant-prefix}-select-selection__rendered {
    margin-left: 0;
    margin-right: 22px;
  }
  .@{ant-prefix}-select-arrow {
    right: 4px;
  }
}

// styleType = 'borderless'
.umui-select-borderless {
  max-width: 200px;
  .@{ant-prefix}-select-selection-selected-value {
    margin-right: 4px;
  }
  .@{ant-prefix}-select-selector {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }
  .@{ant-prefix}-select-selection {
    border: none;
    box-shadow: none;
    background-color: transparent;
  }
  .@{ant-prefix}-select-selection__placeholder,
  .@{ant-prefix}-select-selection__rendered {
    margin-left: 0;
    margin-right: 22px;
  }
  .@{ant-prefix}-select-arrow {
    right: 4px;
  }
}

// styleType = 'button'
.umui-select-button {
  .@{ant-prefix}-select-selection__placeholder {
    width: 100%;
    color: @text-color;
    margin-left: 0;
    margin-right: 0;
  }
  .@{ant-prefix}-select-selection__rendered,
  .@{ant-prefix}-select-selection--multiple .@{ant-prefix}-select-selection__rendered {
    margin-left: 16px;
    margin-right: 40px;
  }
  .@{ant-prefix}-select-arrow {
    right: 16px;
  }
  .@{ant-prefix}-select-selection-item {
    margin-right: 10px;
  }
}

// 自定义icon，无法触发下拉框弹出
.umui-select {
  .@{ant-prefix}-select-arrow .anticon:not(.@{ant-prefix}-select-suffix) {
    pointer-events: none;
  }
}