vue-ant-patterns/lib/d-auto-complete/style/index.less

vue-ant-patterns

@import '../../style/themes/index.less';
@import '../../style/mixins/flex.less';
@depot-prefix-cls: ~'@{depot-prefix}-auto-complete';
.@{depot-prefix-cls} {
  position: relative;


  &-overlay{
    background: #ECEFF4;
    box-shadow: 0 1px 6px 0 #A4B6D0;
    .ant-select-dropdown-menu-item{
      padding-top: 0;
      padding-bottom: 0;
    }
    .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled){
      background: rgba(139, 201, 239, 0.2);
      padding-bottom: 0;
    }
    .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
      background: rgba(139, 201, 239, 0.2);
      padding-bottom: 0;
    }
  }
  .flex;
  .flex-center-between;

  &-input {
    width: 300px;
    position: absolute;
    top: 0;
    right: 40px;
  }

  & .icon-button {
    margin-left: 10px;
  }
  .item-tag-wrapper-ul{
    display: flex;
  }
  .item-li{
    background: rgba(152,202,237,0.3);
    color: #0275FD;
    height: 24px;
    margin-right: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    .item-name{
      display: inline-block;
      max-width: 108px;   
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .remove-item-icon{
      margin-left: 8px;
      font-size: 12px;
      cursor: pointer;
      .anticon{
        vertical-align: super;
      }
    }
  }
  .ant-input-group-wrapper.ant-select-search__field{
    overflow: auto;
    scrollbar-color:#eff1f7; /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin; 
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-track {
      border-radius: 2px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #eff1f7;
    
    }
    
    /*滑块hover效果*/
    
    &::-webkit-scrollbar-thumb:hover {
      border-radius: 5px;
       /*内阴影*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #eef2ff
     }
  }



  .ant-input-group-addon{
    padding: 0 0 0 8px;
    background: #fff;
    max-width: calc(100% - 60px);
    border: 0;
    .item-tag-wrapper-ul{
      width: 100%;
    }
  }

  .ant-input-group .ant-input-affix-wrapper{
    min-width: 60px;
  }
  .ant-select-auto-complete.ant-select .ant-input{
    border: 0!important;
    padding: 0 4px;
    min-width: 24px;
  }
  .ant-select-auto-complete.ant-select .ant-input:focus, .ant-select-auto-complete.ant-select .ant-input:hover{
    border: 0 !important;
    box-shadow: none;
  }
  .ant-select-selection__clear{
    right: 24px;
  }
  .ant-select-selection:focus{
    outline: 0;
    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
  }
}



/*定义滚动条轨道 内阴影+圆角*/


/*定义滑块 内阴影+圆角*/