vexip-ui/css/tree.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-tree-vars{--vxp-tree-label-color:inherit;--vxp-tree-label-color-hover:var(--vxp-tree-label-color);--vxp-tree-label-color-focus:var(--vxp-tree-label-color-hover);--vxp-tree-label-color-selected:var(--vxp-tree-label-color-hover);--vxp-tree-label-color-secondary:var(--vxp-content-color-secondary);--vxp-tree-label-color-disabled:var(--vxp-content-color-disabled);--vxp-tree-label-color-readonly:var(--vxp-tree-label-color);--vxp-tree-label-bg-color:transparent;--vxp-tree-label-bg-color-hover:var(--vxp-fill-color-hover);--vxp-tree-label-bg-color-focus:var(--vxp-tree-label-bg-color-hover);--vxp-tree-label-bg-color-selected:var(--vxp-color-primary-opacity-8);--vxp-tree-label-bg-color-disabled:var(--vxp-tree-label-bg-color);--vxp-tree-label-bg-color-readonly:var(--vxp-tree-label-bg-color);--vxp-tree-label-radius:var(--vxp-radius-base);--vxp-tree-label-gap:6px;--vxp-tree-node-span:4px;--vxp-tree-arrow-size:22px;--vxp-tree-arrow-color:inherit;--vxp-tree-arrow-color-disabled:var(--vxp-content-color-disabled);--vxp-tree-indicator-color:var(--vxp-color-primary-base);--vxp-tree-indent-width:16px;--vxp-tree-depth:-1;--vxp-tree-link-line-type:dashed;--vxp-tree-link-line-color:var(--vxp-border-color-base)}.vxp-tree{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative}.vxp-tree,.vxp-tree *,.vxp-tree ::after,.vxp-tree ::before{box-sizing:border-box}.vxp-tree--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-tree--inherit{color:inherit}.vxp-tree__link-line{position:absolute;pointer-events:none;border:0 var(--vxp-tree-link-line-type) var(--vxp-tree-link-line-color)}.vxp-tree__link-line--vertical{inset-inline-start:calc(var(--vxp-tree-arrow-size) * .5 + var(--vxp-tree-indent-width) * (var(--vxp-tree-depth) - 1) - 1px);top:0;bottom:0;border-inline-start-width:1px;transform:translateX(calc(-1 * var(--vxp-tree-link-line-index) * var(--vxp-tree-indent-width)))}html.rtl .vxp-tree__link-line--vertical,html[dir=rtl] .vxp-tree__link-line--vertical{transform:translateX(calc(var(--vxp-tree-link-line-index) * var(--vxp-tree-indent-width)))}.vxp-tree__link-line--horizontal{inset-inline-start:calc(var(--vxp-tree-arrow-size) * .5 + var(--vxp-tree-indent-width) * (var(--vxp-tree-depth) - 1) - 1px);bottom:calc(50% - var(--vxp-tree-node-span));width:calc(var(--vxp-tree-indent-width) * .5);border-bottom-width:1px}.vxp-tree__list{padding:0;margin:0;list-style:none}.vxp-tree__content{display:flex;align-items:center;padding-inline-start:calc(var(--vxp-tree-depth) * var(--vxp-tree-indent-width))}.vxp-tree__content--effect{transition:var(--vxp-transition-color),var(--vxp-transition-background)}.vxp-tree__content--effect:hover{color:var(--vxp-tree-label-color-hover);background-color:var(--vxp-tree-label-bg-color-hover)}.vxp-tree__label{display:inline-flex;flex-grow:1;align-items:center;padding:0 4px;color:var(--vxp-tree-label-color);cursor:pointer;background-color:var(--vxp-tree-label-bg-color);border-radius:var(--vxp-tree-label-radius)}.vxp-tree__label--effect{transition:var(--vxp-transition-color),var(--vxp-transition-background)}.vxp-tree__label--effect:hover{color:var(--vxp-tree-label-color-hover);background-color:var(--vxp-tree-label-bg-color-hover)}.vxp-tree__node{padding-top:var(--vxp-tree-node-span);list-style:none;outline:0}.vxp-tree__node--link-line{position:relative}.vxp-tree__node--last .vxp-tree__link-line--first{bottom:calc(50% - var(--vxp-tree-node-span))}.vxp-tree__node--no-arrow .vxp-tree__link-line--horizontal{width:calc(var(--vxp-tree-indent-width) * .5 + var(--vxp-tree-arrow-size))}.vxp-tree__node--focused .vxp-tree__content--effect,.vxp-tree__node--focused .vxp-tree__label--effect{color:var(--vxp-tree-label-color-focus);background-color:var(--vxp-tree-label-bg-color-focus)}.vxp-tree__node--selected .vxp-tree__content--effect,.vxp-tree__node--selected .vxp-tree__content--effect:hover,.vxp-tree__node--selected .vxp-tree__label--effect,.vxp-tree__node--selected .vxp-tree__label--effect:hover{color:var(--vxp-tree-label-color-selected);background-color:var(--vxp-tree-label-bg-color-selected)}.vxp-tree__node--secondary .vxp-tree__content--effect,.vxp-tree__node--secondary .vxp-tree__content--effect:hover,.vxp-tree__node--secondary .vxp-tree__label--effect,.vxp-tree__node--secondary .vxp-tree__label--effect:hover{color:var(--vxp-tree-label-color-secondary)}.vxp-tree__node--readonly .vxp-tree__content--effect,.vxp-tree__node--readonly .vxp-tree__content--effect:hover,.vxp-tree__node--readonly .vxp-tree__label--effect,.vxp-tree__node--readonly .vxp-tree__label--effect:hover{color:var(--vxp-tree-label-color-readonly);cursor:default;background-color:var(--vxp-tree-label-bg-color-readonly)}.vxp-tree__node--is-floor .vxp-tree__content--effect,.vxp-tree__node--is-floor .vxp-tree__content--effect:hover,.vxp-tree__node--is-floor .vxp-tree__label--effect,.vxp-tree__node--is-floor .vxp-tree__label--effect:hover{cursor:pointer}.vxp-tree__content--effect.vxp-tree__content--disabled,.vxp-tree__content--effect.vxp-tree__content--disabled:hover{color:var(--vxp-tree-label-color-disabled);cursor:default;background-color:var(--vxp-tree-label-bg-color-disabled)}.vxp-tree__label--effect.vxp-tree__label--disabled,.vxp-tree__label--effect.vxp-tree__label--disabled:hover{color:var(--vxp-tree-label-color-disabled);cursor:default;background-color:var(--vxp-tree-label-bg-color-disabled)}.vxp-tree__text{display:flex;flex-grow:1;align-items:center;max-width:100%}.vxp-tree__prefix,.vxp-tree__suffix{display:flex;flex-shrink:0;align-items:center;min-width:0}.vxp-tree__prefix{margin-inline-end:var(--vxp-tree-label-gap)}.vxp-tree__suffix{margin-inline-start:var(--vxp-tree-label-gap)}.vxp-tree__arrow{display:inline-flex;align-items:center;justify-content:center;width:var(--vxp-tree-arrow-size);height:var(--vxp-tree-arrow-size);margin-inline-end:2px;color:var(--vxp-tree-arrow-color);cursor:pointer;transition:var(--vxp-transition-color)}.vxp-tree__arrow--transparent{visibility:hidden;opacity:0}.vxp-tree__arrow--expanded .vxp-icon{transform:rotate(90deg)}html.rtl .vxp-tree__arrow--expanded .vxp-icon,html[dir=rtl] .vxp-tree__arrow--expanded .vxp-icon{transform:rotate(-90deg)}.vxp-tree__arrow--disabled{color:var(--vxp-tree-arrow-color-disabled);cursor:not-allowed}.vxp-tree__checkbox{display:inline-flex;margin-inline-end:6px}.vxp-tree__checkbox--suffix{margin-inline:6px 0}.vxp-tree__indicator{position:absolute;inset-inline:0;height:1px;background-color:var(--vxp-tree-indicator-color);will-change:top,inset-inline-start}