iep-ui/lib/iep-tab-tree-select/style/index.less

An enterprise-class UI design language and Vue-based implementation

@import '../../style/themes/index';
@import '../../style/mixins/index';

.active(@color: @outline-color) {
  border-color: ~`colorPalette('@{color}', 5) `;
  border-right-width: @border-width-base !important;
  outline: 0;
  box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
}

.@{ant-prefix}-iep-tab-treeselect {
  position: relative;
  .anticon-down {
    color: rgba(0, 0, 0, 0.45);
  }

  &-wrapper {
    margin-top: 4px;
    background: #fff;
    border-radius: @card-radius;
    transition: all 0.3s;
    border-color: fade(@black, 9%);
    box-shadow: @card-shadow;
    padding: 4px 11px;
    .@{ant-prefix}-tabs-bar {
      margin-bottom: 6px;
    }
    .@{ant-prefix}-tabs-tab {
      margin: 0 32px 0 0;
    }
  }
  &-tbas {
    margin-top: 4px;
  }
  &-scrollbar {
    height: 400px;
  }
  &-input {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: 'tnum';
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: start;
    &-box {
      box-sizing: border-box;
      margin: 0;
      font-variant: tabular-nums;
      list-style: none;
      font-feature-settings: 'tnum';
      position: relative;
      display: inline-block;
      width: 100%;
      min-height: 32px;
      cursor: text;
      padding: 4px 30px 4px 11px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      background-color: #fff;
      background-image: none;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      .ant-tag-container {
        max-width: 99%;
        margin-right: 4px;
        display: inline-block;
        margin-top: 3px;
        cursor: default;
        line-height: 1;
      }
      .ant-tag {
        margin-right: 0;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &-active {
        border-right-width: 1px !important;
        .active();
      }
      &-placeholder {
        color: hsv(0, 0, 75%);
      }
    }
    &-suffix {
      position: absolute;
      top: 50%;
      z-index: 2;
      display: flex;
      align-items: center;
      color: rgba(0, 0, 0, 0.85);
      line-height: 0;
      transform: translateY(-50%);
      right: 12px;
    }
  }
}