rsuite/Tree/styles/index.less

A suite of react components

@import '../../styles/common.less';
@import '../../styles/mixins/listbox.less';
@import '../../internals/Picker/styles/mixin.less';
@import './toggle.less';
@import './indent-line.less';

@custom-picker-tree-node-padding-vertical: @picker-tree-node-padding-vertical - 2px;

// Tree
// ----------------------

.rs-tree {
  height: 100%;
  flex: 1 1 auto;

  &-drag-preview {
    position: absolute;
    top: 0;
    color: var(--rs-text-primary);
    background-color: var(--rs-bg-overlay);
    display: inline-block;
    margin: 0;
    padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
    border-radius: 6px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
    z-index: -1;
  }

  .rs-search-box {
    padding: 6px;
  }

  .rs-tree-empty {
    padding: 6px 12px;
    color: var(--rs-text-secondary);
  }

  &-view {
    max-height: 360px;
    overflow-y: auto;
  }

  &.rs-tree-virtualized &-view {
    overflow: hidden;
  }

  .rs-highlight-mark {
    padding: 0;
  }
}

.rs-tree-group {
  padding-left: 18px;
}

.rs-tree-node {
  position: relative;
  // Clear host whitespace
  font-size: 0;
  text-align: left;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;

  &:focus-visible {
    .rs-tree-node-label {
      .focus-ring();
    }
  }

  &-label {
    position: relative;
    margin: 1px;
    cursor: pointer;
    font-size: @picker-tree-node-font-size;
    line-height: @picker-tree-node-line-height;
    padding: 6px;
    border-radius: 6px;

    &:hover,
    &:focus,
    &&-focus {
      .listbox-option-active();
    }

    &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      left: -8px;
      border-left: 6px solid var(--rs-text-link);
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      display: none;
    }
  }

  &-active &-label {
    .picker-item-active();

    color: var(--rs-text-link);
    background-color: var(--rs-listbox-option-selected-bg);
  }

  &-drag-over {
    background-color: var(--rs-listbox-option-hover-bg);
  }

  &-dragging {
    outline: 1px dashed var(--rs-primary-500);
  }

  &-drag-over-top {
    &.rs-tree-node-label {
      border-top: 2px solid var(--rs-text-link) !important;
      border-radius: 0;

      &::after {
        display: block;
        top: -4px;
      }
    }
  }

  &-drag-over-bottom {
    &.rs-tree-node-label {
      border-bottom: 2px solid var(--rs-text-link) !important;
      border-radius: 0;

      &::after {
        display: block;
        bottom: -4px;
      }
    }
  }

  &-disabled {
    .rs-tree-node-label {
      background: none;
      color: var(--rs-listbox-option-disabled-text);
      cursor: @cursor-disabled;
    }

    > .rs-tree-node-label {
      cursor: @cursor-disabled;
      color: var(--rs-listbox-option-disabled-text);

      &,
      &:hover {
        background-color: transparent;
      }
    }
  }

  &-disabled&-active > .rs-tree-node-label {
    &,
    &:hover {
      color: var(--rs-listbox-option-disabled-selected-text);
    }
  }

  &:not(&-disabled):focus > .rs-tree-node-label {
    background-color: var(--rs-listbox-option-selected-bg);
  }

  &:not(&-disabled) > .rs-tree-node-label:focus {
    background-color: var(--rs-listbox-option-selected-bg);
  }
}

// node children
.rs-tree-node-children {
  > .rs-tree-group {
    position: relative;
    display: none;

    .rs-tree-node-expanded& {
      display: block;
    }
  }
}