heyui/themes/components/autocomplete.less

A UI components Library.

@autocompleteCls: ~"@{prefix}autocomplete";
@autocompleteClsItem: ~"@{autocompleteCls}-item";
@autocompleteClsGroup: ~"@{autocompleteCls}-group";
@autocompleteCls-close: h-icon-close;
.@{autocompleteCls} {
  width: 250px;
  .@{autocompleteCls} {
    &-show{
      display: flex;
      flex-wrap: wrap;
      .border-input();
      // display: inline-block;

      .@{prefix}icon-loading{
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 3;
        color: @gray-color;
      }

      >span{
        color: @primary-color;
        .tag-span-func();
        border: 1px solid @white-color;
        background-color: lighten(@primary-color, 35%);
        font-size: 12px;
        padding: 2px 8px;
      }
    }
    &-placeholder{
      color: @gray-color;
    }
    
    &-input{
      .border-input-inside-input();
    }
  }

  &-disabled{
    .@{autocompleteCls}-show{
      .border-input-disabled();
    }
  }

  &-multiple {
    .@{autocompleteCls} {
      &-placeholder{
        padding: 2px 0 0 5px;
      }
    }
  }
}

.@{autocompleteCls}-group {
  outline: none;
  user-select: none;
  position: relative;
  font-size: @font-size-mini;
  background-color: @white-color;
  padding: 5px 0px;
  max-height: 300px;
  overflow-y: auto;
  .@{autocompleteClsItem} {
    .li-hover();
    padding: 8px 10px;
    position: relative;
    &.@{autocompleteClsItem}-selected {
      background-color: @gray2-color;
    }
  }
}