ant-design/components/tree/style/mixin.less

@import '../../style/mixins/index';

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-motion: ~'@{ant-prefix}-motion-collapse';

.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
  .@{tree-prefix-cls}-switcher-icon,
  .@{select-tree-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(10px);
    display: inline-block;
    vertical-align: baseline;
    svg {
      transition: transform 0.3s;
    }
  }
}

.antTreeShowLineIcon(@type) {
  .@{tree-prefix-cls}-switcher-icon,
  .@{tree-select-prefix-cls}-switcher-icon {
    display: inline-block;
    font-weight: normal;
    font-size: 12px;
    svg {
      transition: transform 0.3s;
    }
  }
}

.antTreeFn(@custom-tree-prefix-cls) {
  @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
  .@{custom-tree-prefix-cls} {
    .reset-component;
    background: @tree-bg;
    border-radius: @border-radius-base;
    transition: background-color 0.3s;

    &-focused:not(:hover):not(&-active-focused) {
      background: @primary-1;
    }

    // =================== Virtual List ===================
    &-list-holder-inner {
      align-items: flex-start;
    }

    &.@{custom-tree-prefix-cls}-block-node {
      .@{custom-tree-prefix-cls}-list-holder-inner {
        align-items: stretch;

        // >>> Title
        .@{custom-tree-prefix-cls}-node-content-wrapper {
          flex: auto;
        }
      }
    }

    // ===================== TreeNode =====================
    .@{custom-tree-node-prefix-cls} {
      display: flex;
      align-items: flex-start;
      padding: 0 0 (@padding-xs / 2) 0;
      outline: none;
      // Disabled
      &-disabled {
        // >>> Title
        .@{custom-tree-prefix-cls}-node-content-wrapper {
          color: @disabled-color;
          cursor: not-allowed;

          &:hover {
            background: transparent;
          }
        }
      }

      &-active .@{custom-tree-prefix-cls}-node-content-wrapper {
        background: @tree-node-hover-bg;
      }
    }

    // >>> Indent
    &-indent {
      align-self: stretch;
      white-space: nowrap;
      user-select: none;

      &-unit {
        display: inline-block;
        width: @tree-title-height;
      }
    }

    // >>> Switcher
    & &-switcher {
      .antTreeSwitcherIcon();
      flex: none;

      width: @tree-title-height;
      height: @tree-title-height;
      margin: 0;
      line-height: @tree-title-height;
      text-align: center;
      cursor: pointer;

      &-noop {
        cursor: default;
      }

      &_close {
        .@{custom-tree-prefix-cls}-switcher-icon {
          svg {
            transform: rotate(-90deg);
          }
        }
      }

      &-loading-icon {
        color: @primary-color;
      }

      &-leaf-line {
        z-index: 1;
        display: inline-block;
        width: 100%;
        height: 100%;
        &::before {
          position: absolute;
          height: @tree-title-height;
          margin-left: -1px;
          border-left: 1px solid @normal-color;
          content: ' ';
        }
        &::after {
          position: absolute;
          width: @tree-title-height - 14px;
          height: @tree-title-height - 10px;
          margin-left: -1px;
          border-bottom: 1px solid @normal-color;
          content: ' ';
        }
      }
    }

    // >>> Checkbox
    & &-checkbox {
      top: initial;
      margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
    }

    // >>> Title
    & &-node-content-wrapper {
      min-height: @tree-title-height;
      margin: 0;
      padding: 0 4px;
      color: inherit;
      line-height: @tree-title-height;
      background: transparent;
      border-radius: @border-radius-base;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background-color: @tree-node-hover-bg;
      }

      &.@{custom-tree-prefix-cls}-node-selected {
        background-color: @tree-node-selected-bg;
      }

      // Icon
      .@{custom-tree-prefix-cls}-iconEle {
        display: inline-block;
        width: @tree-title-height;
        height: @tree-title-height;
        line-height: @tree-title-height;
        text-align: center;
        vertical-align: top;
        &:empty {
          display: none;
        }
      }
    }

    // ==================== Draggable =====================
    &-node-content-wrapper[draggable='true'] {
      line-height: @tree-title-height - 4px;
      border-top: 2px transparent solid;
      border-bottom: 2px transparent solid;
      user-select: none;
    }

    .@{custom-tree-node-prefix-cls}.drag-over {
      > [draggable] {
        color: white;
        background-color: @primary-color;
        opacity: 0.8;
      }
    }
    .@{custom-tree-node-prefix-cls}.drag-over-gap-top {
      > [draggable] {
        border-top-color: @primary-color;
      }
    }
    .@{custom-tree-node-prefix-cls}.drag-over-gap-bottom {
      > [draggable] {
        border-bottom-color: @primary-color;
      }
    }

    // ==================== Show Line =====================
    &-show-line {
      // ================ Indent lines ================
      .@{custom-tree-prefix-cls}-indent {
        &-unit {
          position: relative;
          height: 100%;

          &::before {
            position: absolute;
            top: calc(100% - 4px);
            right: -@tree-title-height / 2;
            bottom: -@tree-title-height - 4px;
            border-right: 1px solid @border-color-base;
            content: '';
          }

          &-end {
            &::before {
              display: none;
            }
          }
        }
      }

      /* Motion should hide line of measure */
      .@{custom-tree-node-prefix-cls}-motion:not(.@{tree-motion}-leave):not(.@{tree-motion}-appear-active) {
        .@{custom-tree-prefix-cls}-indent-unit {
          &::before {
            display: none;
          }
        }
      }

      // ============== Cover Background ==============
      .@{custom-tree-prefix-cls}-switcher {
        z-index: 1;
        background: @component-background;
      }
    }
  }
}

.@{tree-node-prefix-cls}-leaf-last {
  .@{tree-prefix-cls}-switcher {
    &-leaf-line {
      &::before {
        height: @tree-title-height - 10px !important;
      }
    }
  }
}