choerodon-ui/es/tree/style/index.less

An enterprise-class UI design language and React-based implementation

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import '../../checkbox/style/mixin';
@import './mixin';

@tree-prefix-cls: ~'@{c7n-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
@tree-motion: ~'@{c7n-prefix}-motion-collapse';
@tree-node-padding: @padding-xs / 2;

.antCheckboxFn(@checkbox-prefix-cls: ~'@{c7n-prefix}-tree-checkbox');

.antTreeFn(@tree-prefix-cls) {
  .@{tree-prefix-cls} {
    .reset-component;
    background: @tree-bg;
    border-radius: @border-radius-base;
    transition: background-color @animation-duration-slow;

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

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

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

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

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

          &:hover {
            background: transparent;
          }
        }
      }

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

      &:hover .@{tree-prefix-cls}-draggable-icon {
        color: @btn-dark-bg;
      }
    }

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

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

    // >>> DraggableIcon
    & &-draggable-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.24rem;
      height: 0.24rem;
      color: @tree-node-selected-bg;

      i.icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }

    // >>> Switcher
    & &-switcher {
      .antTreeSwitcherIcon();
      position: relative;
      flex: none;
      align-self: stretch;

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

      &-noop {
        cursor: default;
      }

      &_close .@{iconfont-css-prefix}-arrow_drop_down {
        transform: rotate(-90deg);
      }

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

      &-leaf-line {
        z-index: 1;
        display: inline-block;
        width: 100%;
        height: 100%;
        &::before {
          position: absolute;
          top: 0;
          bottom: -@tree-node-padding;
          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: 0;
      flex: none;
      width: @tree-title-height;
      height: @tree-title-height;
      margin: 0;
      line-height: @tree-title-height;
      text-align: center;
      cursor: pointer;
    }

    & &-checkbox &-checkbox-inner {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    // >>> 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 @animation-duration-slow, border 0s, line-height 0s;

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

      // Icon
      .@{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;
        }
      }
    }

    // ===================== Loading ======================
    .@{tree-node-prefix-cls}-loading {
      // Icon
      .@{tree-prefix-cls}-iconEle {
        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;
    }

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

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

          &::before {
            position: absolute;
            top: 0;
            right: @tree-title-height / 2;
            bottom: -@tree-node-padding;
            border-right: 1px solid @border-color-base;
            content: '';
          }

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

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

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

.antTreeFn(@tree-prefix-cls);

@import './rtl.less';