infogo-tree/src/styles/tree-search.less

A vue tree component using virtual list.

#ctree-tree-search-styles () {
  // prefix
  @tree-search-prefix: ~"@{ctree-prefix}-tree-search";

  // TreeSearch
  .@{tree-search-prefix} {
    @search-height: 42px;

    .search-wrapper () {
      // height: @search-height;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    // 容器
    &__wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    // 搜索区域
    &__search {
      height: @search-height;
      display: flex;
      box-sizing: border-box;
    }

    // 全选框容器
    &__check-all-wrapper {
      .search-wrapper();
      justify-content: initial;
      width: 43px;
    }

    // 全选框
    &__check-all {
      margin-left: 18px;
    }
    // 搜索框容器
    &__input-wrapper {
      .search-wrapper();
      padding: 0 10px;
      flex: 1;
    }

    // 搜索框
    &__input {
      color: @ctree-color-title;
      box-sizing: border-box;
      width: 100%;
      height: 32px;
      border: 1px solid @ctree-color-input-default-border;
      border-radius: 4px;
      padding: 4px 7px;
      outline: none;
      transition: border .2s ease-in-out,
                  box-shadow .2s ease-in-out;
      
      &::placeholder {
        color: @ctree-color-input-placeholder;
      }
      &:hover {
        border-color: @ctree-color-border;
      }
      &:focus {
        border-color: @ctree-color-input-border;
        // box-shadow: 0 0 0 2px fade(@ctree-color-primary, 20%);
      }
      &_disabled {
        cursor: not-allowed;
        color: @ctree-color-input-disabled;
        background-color: @ctree-color-input-background-disabled;

        &:hover {
          border-color: @ctree-color-border;
        }
      }
      &.select-input{
        height: 40px;
        padding: 5px 30px 5px 0
      }
    }

    // 按钮容器
    &__action-wrapper {
      .search-wrapper();
      padding-right: 10px;
    }
    &__action-wrapper-noBtn{
      padding-right: 0;
    }

    // 已选按钮
    &__checked-button {
      cursor: pointer;
      font-size: 14px;
      color: @ctree-color-title-2;
      &:hover {
        color: @ctree-color-light-primary;
      }

      &_active {
        color: @ctree-color-primary;
      }
    }

    // 树区域
    &__tree-wrapper {
      width: 100%;
      flex: 1;
      overflow-y: hidden;
      &::-webkit-scrollbar-button{
        background-color: #f1f1f2;
        border-radius: 6px;
      }
      &::-webkit-scrollbar-track{
        background-color: #f1f1f2;
      }
      &::-webkit-scrollbar-thumb:hover{
        // height: 50px;
        border-radius: 6px;
      }
      &::-webkit-scrollbar-thumb{
        // background-color: #d8d9dd !important;
        background-color: #C2C2C2 !important;
        border-radius: 6px;
        &:hover{
          background-color: #7D7D7D !important;
        }
      }
      /*---滚动条大小--*/
      &::-webkit-scrollbar{
        width: 8px !important;
        height: 8px !important;
      }

      /*---滚动框背景样式--*/
      &::-webkit-scrollbar-track-piece{
        border-radius: 0;
      }
      .search-tree-all-check{
        display: flex;
        position: relative;
        .info{
          height: 28px;
          line-height: 28px;
          color: @ctree-color-title;
        }
      }
    }
    // 底部信息
    &__footer {
      font-size: 14px;
      padding: 5px 8px;
      color: @ctree-color-title-2;
      .num{
        color: @ctree-color-primary;
      }
    }
  }
}

#ctree-tree-search-styles();