tntd/lib/query-form-backup/Field/Composition/index.less

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

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

.tnt-queryform-composition-input {
  // width: 100%;
  max-height: 162px;
  overflow-x: hidden;
  cursor: text;
  padding: 2px @padding-xl;
  position: relative;
  box-sizing: border-box;
  background-color: @select-background;
  border: @border-width-base @border-style-base @select-border-color;
  border-top-width: calc(@border-width-base + 0.02px);
  border-radius: @border-radius-base;
  outline: none;
  transition: all 0.3s @ease-in-out;
  user-select: none;
  margin-bottom: @margin-sm;

  &-prefix {
    position: absolute;
    left: @padding-sm;
    top: 50%;
    transform: translateY(-50%);
    i.anticon {
      color: tint(@bg-color-spotilight, 50%);
    }
  }

  &-width {
    height: 0;
    opacity: 0;
    width: auto;
    position: absolute;
    max-width: 100%;
  }

  &-items {
    float: left;
    padding: 0;
    list-style: none;
    margin: 0;
    width: 100%;
    &-item {
      padding: 3px 0;
    }
    li {
      float: left;
      line-height: 1;
    }
    &-input {
      .inputClass {
        background: none;
        border: none !important;
        outline: none;
        box-shadow: none !important;
        width: 150px !important;
        height: 26px;
        line-height: 26px;
        padding: 0;
        input {
          border: none !important;
          outline: none !important;
          box-shadow: none !important;
          height: 26px;
          line-height: 26px;
          padding: 0;
        }
        textarea {
          padding: 0;
        }
      }
      .inputClass-with-placeholder {
        min-width: 398px !important;
      }
    }
  }
  &-clear {
    position: absolute;
    right: @margin-sm;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    i.anticon {
      color: tint(@bg-color-spotilight, 50%);
    }
    &:hover {
      .anticon {
        color: @text-color-secondary !important;
      }
    }
  }
  &:hover {
    border-color: @blue-6;
    outline: 0;
    .tnt-queryform-composition-input-clear {
      display: block;
    }
    // box-shadow: 0 0 0 2px rgb(18 107 251 / 20%);
  }
  &:focus,
  &:active {
    border-color: @blue-5;
    outline: 0;
    // box-shadow: 0 0 0 2px rgb(18 107 251 / 20%);
  }
  .ant-tag {
    padding: 0 @padding-xs;
    border: none;
    background: @fill-color-tertiary;
  }
}