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-checkbox-prefix-cls: ~'@{c7n-prefix}-tree-checkbox';

.antCheckboxFn(@tree-checkbox-prefix-cls);

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

    // Tree 组件中不存在 -focused 类名添加
    &-focused:not(:hover):not(&-active-focused) {
      background: @tree-focus-bg;
    }

    // =================== Virtual List ===================
    &-list-holder {
      > div:not(.@{tree-prefix-cls}-list-holder-inner) {
        overflow: unset !important;
      }

      /* 滚动条样式 */
      &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.25);
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        &:hover {
          background: rgba(0,0,0,0.35);
        }
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
    }

    &-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: center;
      padding: 0 0 @tree-node-padding 0;
      outline: none;
      // Disabled
      &-disabled {
        // >>> Title
        span.@{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;
      cursor: move;

      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);
      }

      &-icon {
        font-size: @tree-switcher-icon-size;
        line-height: @tree-title-height;
      }

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

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

    // >>> Checkbox
    & &-checkbox {
      top: 0;
      flex: none;
      width: @tree-checkbox-height;
      height: @tree-checkbox-height;
      margin: 0;
      line-height: @tree-checkbox-height;
      text-align: center;
      cursor: pointer;
    }

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

    // >>> Title
    & &-node-content-wrapper {
      position: relative;
      min-height: @tree-title-height;
      margin: 0;
      padding: 0 4px;
      color: @tree-node-color;
      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 {
        color: @tree-node-hover-color;
        background-color: @tree-node-hover-bg;
      }
      &.@{tree-prefix-cls}-node-selected {
        color: @tree-node-selected-color;
        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: calc(@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: @tree-drag-over-color;
        background-color: @tree-drag-over-bg;
        opacity: 0.8;
      }
    }
    .@{tree-node-prefix-cls}.drag-over-gap-top {
      > [draggable] {
        border-top-color: @tree-primary-color;
      }
    }
    .@{tree-node-prefix-cls}.drag-over-gap-bottom {
      > [draggable] {
        border-bottom-color: @tree-primary-color;
      }
    }
    &-drop-indicator {
      background-color: @tree-primary-color;
    }

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

          &::before {
            position: absolute;
            top: 0;
            right: calc(@tree-title-height / 2);
            bottom: @tree-line-before-bottom;
            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';