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

A vue tree component using virtual list.

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

  // TreeDrop
  .@{tree-drop-prefix} {
    // 容器
    &__wrapper {
      position: relative;
    }

    // 下拉框触发区域
    &__reference {
      cursor: pointer;
    }

    // 触发区域
    &__display {
      // 输入框
      &-input {
        position: relative;
        user-select: none;
        padding-right: 20px;

        &-text {
          display: block;
          height: 100%;
          line-height: 28px;
          color: @ctree-color-title;
          .displayValue{
            padding-left: 15px;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
          }
        }

        &-placeholder {
          color: @ctree-color-input-placeholder;
        }

        &_focus {
          border-color: @ctree-color-input-border;
          &.ctree-tree-search__input{
            border-color: @ctree-color-input-border;
          }
          // box-shadow: 0 0 0 2px fade(@ctree-color-primary, 20%);
        }
      }

      // 图标
      &-icon {
        @icon-size: 16px;
        .icon () {
          position: absolute;
          top: 11px;
          right: 16px;
          width: @icon-size;
          height: @icon-size;
          box-sizing: border-box;
        }

        // 下拉图标
        &-drop {
          @scale: 0.5;
          @translate: -(@icon-size / 2) * @scale;
          @transform-rest: scale(@scale) translateX(@translate) translateY(@translate);

          .icon();
          border: 3px solid @ctree-color-sub;
          border-top: none;
          border-left: none;
          transform: rotate(45deg) @transform-rest;
          transition: transform .2s ease-in-out;

          &_active {
            transform: rotate(225deg) @transform-rest;
          }
        }

        // 清除图标
        &-clear {
          @scale: 0.9;
          .pseudo () {
            @thick: 1px;
            @offset: (@icon-size - @thick) / 2;
            @diff: 7px;

            // content: "";
            // width: @thick;
            // height: @icon-size - @diff;
            // display: block;
            // background-color: #606266;
            // position: absolute;
            // top: @diff / 2;
            // left: @offset;
            width: 100%;
            position: absolute;
            height: 1px;
            background: #606266;
            content: "";
            top: 9px;
            left: 0;
          }

          .icon();
          // border-radius: 50%;
          // // background-color: @ctree-color-sub;
          // overflow: hidden;
          // transform: scale(@scale) rotate(45deg);
          // display: none;
          width: 14px;
          height: 16px;
          cursor: pointer;
          float: right;
          position: absolute;
          overflow: hidden;
          background-color: #fff;
          // margin-top: 10px;
          display: none;
          top: 10px;
          &::before {
            .pseudo();
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
          }

          &::after {
            .pseudo();
            // transform: rotate(90deg);
            transform: rotate(134deg);
            -ms-transform: rotate(134deg);
            -moz-transform: rotate(134deg);
            -webkit-transform: rotate(134deg);
            -o-transform: rotate(134deg);
          }
        }
      }

      &-input:hover &-icon-clear {
        display: block;
        right: 16px;
      }
      &-input:hover &-icon-only {
        display: none;
      }
    }

    // 下拉框
    &__dropdown {
      position: absolute;
      top: -999px;
      left: -999px;
      box-shadow: 0 1px 6px fade(#000, 20%);
      border-radius: 4px;
      margin: 5px 0;
      padding: 5px 0;
      transform-origin: center top 0px;
      background-color: #fff;
      z-index: 9999;

      .@{tree-search-prefix} {
        // TreeSearch 搜索区域
        &__search {
          // border-bottom: 1px solid @ctree-color-border;
          padding-bottom: 5px;
          height: 38px;
        }

        // TreeSearch 树区域
        &__tree-wrapper {
          padding-top: 5px;
        }
      }
    }
  }
  .ctree-tree-drop__wrapper.selectable{
    .ctree-tree-drop__dropdown{
      .ctree-tree-search__tree-wrapper{
        .ctree-tree__wrapper{
          .ctree-tree-node__wrapper{
            .ctree-tree-node__node-body{
              padding: 0 8px;
              border-radius: 4px;
              &:hover {
                background-color: #f6f6f8;
              }
              .ctree-tree-node__title_selected{
                width: 100%;
              }
              &.ctree-tree-node__body_selected{
                background-color: @ctree-color-primary;
                .ctree-tree-node__title_selected{
                  color: #fff;
                }
              }
              .ctree-tree-node__square{
                display: none;
              }
            }
          }
        }
      }
    }
  }
  .ctree-tree-search__tree-wrapper-checkAll{
    height: 100%;
    .ctree-tree__wrapper{
      height: calc(100% - 22px);
    }
  }
  // Dropdown animation
  .@{tree-dropdown-prefix} {
    &-enter, &-leave-to {
      opacity: 0;
      transform: scaleY(0.8)
    }

    &-enter-active, &-leave-active {
      transition: opacity .3s,
                  transform .3s;
    }
  }
}

#ctree-tree-drop-styles();