tav-ui/theme-chalk/src/components/member-select.less

Tav UI

@import '../var/index.less';
.ta-member-select {
  .ant-select {
    min-width: 100%;
    .ant-tag{
      font-size: 14px;
      margin-right: 3px
    }
  }

  &-option {
    min-width: 260px !important;

    &-item {
      display: flex;
      margin-right: 10px;

      span:nth-child(1) {
        width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        // word-break: break-all;
        // white-space: normal;
      }

      span:nth-child(2) {
        flex: 1;
        margin: 0 10px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      span:nth-child(3) {
        width: 100px;
      }
    }

    &-more {
      padding: 4px 8px;
      cursor: pointer;
      text-align: right;
    }

    .ant-select-item:hover,
    .ant-select-item-option-selected {
      background: #e6edff;
      color: @primary-color;
      position: relative;

      .ant-select-item-option-state {
        position: absolute;
        right: 10px;
      }
    }
  }
  &-tree {
    .ant-select-tree-switcher {
      margin-left: -20px;
    }
    .ant-select-tree-iconEle {
      display: inline-block !important;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAArJJREFUSEutlrFPU1EUh7/Da0JMABtZwAVIWl1MBExkhMZNHXBx0EEcSNzEv0CJm4tsDsQIYXCERHC1DTuUwcU2oTjApCm2xkAox9z3bOnre6/3NbZL077zznd/555z70+I8dHq/ji1syeojIMmEfMNqOZByojmcRKr0jeWt6WTdgH6qzjHOS8RRm2JvAVQoodXMpBajYoPBbqKzmpvEWZigVqDlCwJ50WY4gBQK4UZarKOkAyFVQ7hew5+FCB9D4Zvha9JKZNwMq1QH9CFncuX0AylLBS34CDnf/xwA/qvRheiRzPSn87WAxpA/bM/yklt16fMqDGQwiZUjsKT3n0XrdLb1zK9zoRcGiuZnxfAciGLyHQj67dPsP3avoU2oAfNSjKVaQDdblQ++LKvZeD0d3eAHumpDKRWXIVaLpYQRnzZ39+2w0xEHIX/RkaSqTHxhrq2G8heB15Jw0jLdFQPobDlvRIXaGIdZ0L0uLgEPI8Ezq7B4PWg2s/P4GjnArizDMVNmJiH9P2I6uiiaGuz1EPrCkemYfCaP8FJFb5+9Cs0wN1l77/+YbjzJrhQ1ZwB5hG5GanQtpP1kjYDzTtG6eS8/23VvCmphubstGniAE2zWoF9Q8GT5KQCPwvRJY1S6AJtJY06utYfe9DOSrpnbxqzD0OT/qqfVmF7EUzzdAbM2ceim02DGQvb4HcTaAa/a0ebrUuVA0mmRj1g6+EddyRs6ptnUXggA6mN8Osp7k1hA04twI1HxmzlJJl2D+TWCziPcNmWp6PnyjG9znjgAnZL285idERpCjaN0mQfgybKc2zZ/1ZqlCWcmbYmqr4uz9+crfgsRycKVXP0JubqZWx+1WaEZzlnKeAGouDKAT0smG6MCmkLbCj2rP4s6hpjY/W960x1DygjZHESG3Gs/l/yOkij4gFNCwAAAABJRU5ErkJggg==)
        left center no-repeat;
      background-size: 14px 14px;
    }

    .ant-select-tree li {
      .ant-select-tree-node-content-wrapper {
        &:hover,
        &.ant-select-tree-node-selected {
          background: #e6edff;
          color: @primary-color;
        }
      }
    }
  }
  &-modal {
    border-radius: @primary-border-radius;
    border: 1px solid @border-color-light;
    display: flex;
    margin: 8px 0;
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .member-box {
      flex: 1;
      position: relative;
      .search-box {
        position: absolute;
        width: 210px;
        right: 10px;
        top: 8px;
        // top: 4px;
        z-index: 1;
      }
      .ant-tabs-nav {
        border-color: @border-color-light;

        .ant-tabs-tab {
          padding-bottom: 2px;
          padding-top: 18px;
          margin-left: 20px;
          margin-right: 0;
        }
      }

      .ant-tabs-tabpane {
        overflow-y: auto;
        overflow-x: hidden;
        height: 410px;
        max-height: calc(100vh - 280px);
        position: relative;
      }

      .user-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-left: 20px;
        .ant-checkbox-group,
        .ant-radio-group {
          display: block;
        }
        .letter-list {
          margin: 0 -10px 16px;
          span {
            display: inline-block;
            line-height: 22px;
            cursor: pointer;
            padding: 0 10px;
            font-weight: bold;
            color: #999;

            &.on {
              color: @primary-color;
            }
          }
        }

        .user-list {
          flex: 1;
          overflow-y: auto;
        }
        .ant-empty {
          transform: translateY(50%);
        }
        .org-name {
          margin-bottom: 1em;
          margin-left: 45px;
          font-size: 12px;
          line-height: 1.5;
          color: #999;
        }
        li {
          cursor: pointer;
          line-height: 24px;
        }
      }

      .ant-checkbox-wrapper-checked,
      .ant-radio-wrapper-checked {
        color: @primary-color;
      }
    }

    .selected-box {
      width: 50%;
      box-sizing: border-box;
      border-left: 1px solid @border-color-light;

      .select-hd {
        display: flex;
        padding: 0 16px;
        line-height: 40px;
        justify-content: space-between;
        border-bottom: 1px solid @border-color-light;
      }

      .select-bd {
        padding: 3px 8px;
        max-height: calc(100vh - 270px);
        overflow-y: auto;
        .tag {
          display: inline-block;
          line-height: 26px;
          min-width: 100px;
          padding: 0 10px;
          background: #f8f8fb;
          border-radius: 13px;
          color: #999;
          margin: 7px;
        }

        .anticon {
          cursor: pointer;
          float: right;
          margin-top: 6px;
          margin-left: 15px;
        }
      }
    }
  }
  @colors: #ffaaaa #83e6b8 #ffd788 #95bcff;
  @len: length(@colors);
  &-letter {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    font-size: 11px;
    margin-right: 8px;
  }
  .Loop(@index) when (@index<=@len) {
    &-letter-@{index} {
      @color: extract(@colors, @index);

      background: @color;
    }
    .Loop(@index+1);
  }
  .Loop(0);
}