vuestic-ui/dist/es/VaTreeNode.css

Vue 3 UI Framework

:root,
:host {
  --va-tree-node-contents-gap: 8px;
  --va-tree-node-padding: 6px;
  --va-tree-node-border-radius: 4px;
  --va-tree-node-indent: 28px;
  --va-tree-node-content-item-flex: 0 0 var(--va-tree-node-indent);
  --va-tree-node-content-body-item-flex: 1;
  --va-tree-node-interactive-bg-opacity: 0.1;
  --va-tree-node-children-background: linear-gradient(#adb3b9 33%, rgba(255, 255, 255, 0) 0%) 15px/1px 3px repeat-y transparent;
}
.va-tree-node-root {
  display: flex;
  padding: var(--va-tree-node-padding);
  position: relative;
}
.va-tree-node-root::before {
  content: "";
  background-color: var(--va-primary);
  border-radius: var(--va-tree-node-border-radius);
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}
.va-tree-node-root:hover::before {
  opacity: var(--va-tree-node-interactive-bg-opacity);
}
.va-tree-node-content {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}
.va-tree-node-content__item {
  flex: var(--va-tree-node-content-item-flex);
  min-width: var(--va-tree-node-indent);
  line-height: 1;
}
.va-tree-node-content__body {
  flex: var(--va-tree-node-content-body-item-flex);
  width: 100%;
}
.va-tree-node-content--indent {
  margin-left: var(--va-tree-node-indent);
}
.va-tree-node-content--clickable {
  cursor: pointer;
}
.va-tree-node-children {
  display: none;
  background: var(--va-tree-node-children-background);
  padding-left: var(--va-tree-node-indent);
  width: 100%;
}
.va-tree-node-children--expanded {
  display: block;
}
.va-tree-node__checkbox {
  --va-checkbox-input-padding: 0;
}
.va-tree-node--disabled {
  cursor: default;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.va-tree-node--disabled .va-tree-node-content__item--leaf {
  cursor: pointer;
  pointer-events: all;
}
.va-tree-node:focus-visible > .va-tree-node-root {
  outline: 2px solid var(--va-focus) !important;
  border-radius: 2px;
}
.va-tree-node:focus-visible > .va-tree-node-root::before {
  opacity: var(--va-tree-node-interactive-bg-opacity);
}
.va-tree-node--expand-by-node .va-tree-node-content {
  cursor: pointer;
}
.va-tree-node--expand-by-leaf .va-tree-node-content__item--leaf {
  cursor: pointer;
}