@difizen/mana-app/src/tree/style/index.less

/* stylelint-disable declaration-block-no-redundant-longhand-properties */

.mana-tree {
  position: relative;
  height: calc(100% - var(--mana-border-width));
  overflow: hidden;
  font-size: var(--mana-ui-font-size1);
  color: var(--mana-foreground);
}

.mana-tree:focus .mana-tree-container.empty {
  outline-width: 1px;
  outline-style: solid;
  outline-color: var(--mana-focusBorder);
  outline-offset: -1px;
  opacity: 1 !important;
}

.mana-tree:focus,
.mana-tree-container .ReactVirtualized__List:focus {
  border: none;
  outline: 0;
  box-shadow: none;
}

.mana-tree-container {
  height: 100%;
}

.mana-tree-node {
  display: flex;
  line-height: var(--mana-content-line-height);
}

.mana-tree-node:hover {
  color: var(--mana-list-hoverForeground);
  background: var(--mana-list-hoverBackground);
  cursor: pointer;
}

.mana-tree-node-content {
  display: flex;
  align-items: center;
  width: calc(100% - var(--mana-scrollbar-rail-width));

  * {
    box-sizing: border-box;
  }
}

.mana-expansion-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: var(--mana-icon-size);
  min-height: var(--mana-icon-size);
  padding-right: calc(var(--mana-ui-padding) / 2);
  padding-left: calc(var(--mana-ui-padding) / 2);
}

.mana-expansion-toggle .tree-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}

.mana-expansion-toggle.mana-mod-busy {
  animation: mana-spin 1.25s linear infinite;
}

.mana-expansion-toggle:not(.mana-mod-busy):hover {
  cursor: pointer;
}

.mana-expansion-toggle.mana-mod-collapsed:not(.mana-mod-busy) {
  transform: rotate(-90deg);
}

.mana-tree:focus .mana-tree-node.mana-mod-selected,
.mana-tree .ReactVirtualized__List:focus .mana-tree-node.mana-mod-selected {
  color: var(--mana-list-activeSelectionForeground) !important;
  background: var(--mana-list-activeSelectionBackground);
}

.mana-tree:focus .mana-tree-node.mana-mod-selected .mana-tree-node-tail,
.mana-tree
  .ReactVirtualized__List:focus
  .mana-tree-node.mana-mod-selected
  .mana-tree-node-tail,
.mana-tree:focus .mana-tree-node.mana-mod-selected .mana-caption-suffix,
.mana-tree
  .ReactVirtualized__List:focus
  .mana-tree-node.mana-mod-selected
  .mana-caption-suffix,
.mana-tree:focus .mana-tree-node.mana-mod-selected .mana-tree-nodeInfo,
.mana-tree
  .ReactVirtualized__List:focus
  .mana-tree-node.mana-mod-selected
  .mana-tree-nodeInfo {
  color: var(--mana-list-activeSelectionForeground) !important;
}

.mana-tree-nodeInfo {
  color: var(--mana-foreground);
  opacity: 0.7;
}

.mana-tree .mana-tree-node.mana-mod-selected {
  color: var(--mana-list-inactiveSelectionForeground);
  background: var(--mana-list-inactiveSelectionBackground);
}

.mana-tree-node.mana-mod-not-selectable {
  color: var(--mana-descriptionForeground);
}

.mana-tree-node.mana-mod-not-selectable:hover {
  background: none;
  cursor: default;
}

.mana-tree-node-segment {
  flex-grow: 0;
  white-space: nowrap;
  user-select: none;
}

.mana-tree-node-segment-grow {
  flex-grow: 1 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mana-tree-node-tail {
  min-width: 1rem;
  text-align: center;
}

.mana-tree-node-segment mark {
  color: var(--mana-list-inactiveSelectionForeground);
  background-color: var(--mana-list-filterMatchBackground);
}

.mana-tree-source-node-placeholder {
  font-style: italic;
  text-align: center;
  opacity: var(--mana-mod-disabled-opacity);
}

.mana-tree-element-node {
  width: 100%;
}

.mana-tree-node-indent {
  position: absolute;
  height: var(--mana-content-line-height);
  border-right: var(--mana-border-width) solid transparent;
}

.mana-tree-node-indent.always,
.mana-tree-container:hover .mana-tree-node-indent.hover {
  border-color: var(--mana-tree-inactiveIndentGuidesStroke);
}

.mana-tree-node-indent.active {
  border-color: var(--mana-tree-indentGuidesStroke);
}

.mana-tree-container .mana-WelcomeView {
  padding-top: var(--mana-ui-padding);
  padding-right: 20px;
  padding-left: 20px;
}

.mana-tree-container .mana-WelcomeView > * {
  margin: 13px 0;
}

.mana-tree-container .mana-WelcomeView .mana-WelcomeViewButtonWrapper {
  display: flex;
  padding: 0 var(--mana-ui-padding);
}

.mana-tree-container .mana-WelcomeView .mana-WelcomeViewButton {
  width: 100%;
  max-width: 260px;
  margin: auto;
}

.mana-tree-container .mana-WelcomeView .mana-WelcomeViewCommandLink {
  cursor: pointer;
}

.mana-tree-container .mana-WelcomeView .mana-WelcomeViewCommandLink.disabled {
  cursor: default;
  opacity: var(--mana-mod-disabled-opacity);
  pointer-events: none;
}

.default-folder-icon,
.default-file-icon {
  padding-right: 6px;
}