styleui-components/css/tree.css

Lightweight, modular UI component library with zero dependencies

/**
 * StyleUI Styles - Tree
 * Component-specific styles for tree views with connecting lines.
 */

.tree {
    list-style: none;
    padding: 0;
    position: relative;
}

.tree-item {
    position: relative;
    padding-left: var(--space-6); /* Indent all items */
}

/* --- Guide Lines --- */
/* Vertical connector */
.tree-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px; /* Align with horizontal line */
    width: 1px;
    background: var(--overlay-medium);
    z-index: 0; /* Place behind horizontal line to avoid darker overlap */
}

/* Stop the vertical line at half height for the last child */
.tree-item:last-child::before {
    bottom: 50%;
}

/* Horizontal connector */
.tree-item::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    width: 15px; /* Connect from edge to the content area */
    height: 1px;
    background: var(--overlay-medium);
    z-index: 1; /* Draw above the vertical line */
}

/* --- Content & Toggle --- */
.tree-item-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    position: relative;
    justify-content: flex-start; /* Override .btn centering */
    /* Base styles inherited from .btn */
    padding: var(--space-2) 0 !important; /* Override button padding */

    /* Extend highlight background to full row width */
    width: 100%;
    padding-right: var(--space-3) !important;
}

/* Remove hover since it's handled by .btn-ghost */

/* --- Toggle Icon --- */
.tree-item-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: var(--space-1);
    transition: transform var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
    margin-left: -4px; /* Adjust for increased size to align with lines */
    background: transparent; /* Default transparent */
    border-radius: var(--radius-sm);
    position: relative; /* Create stacking context */
    z-index: 1; /* Above edges */
}

.has-children > .tree-item-content > .tree-item-toggle {
    background: var(--bg-layer-0); /* Show bg only if has children */
}

/* Keep toggle transparent when row is selected or hovered */
.tree-item.selected > .tree-item-content > .tree-item-toggle,
.tree-item > .tree-item-content.selected > .tree-item-toggle,
.tree-item > .tree-item-content:hover > .tree-item-toggle {
    background: transparent;
}

.tree-item-toggle:hover {
    background: transparent;
}

.tree-item.collapsed > .tree-item-content > .tree-item-toggle {
    transform: rotate(-90deg);
}

.tree-item-toggle .lucide {
    width: 14px;
    height: 14px;
}

/* --- Snake Path & Selection Styling --- */
/* Selection is now handled by .btn-ghost.selected */

/* --- Children --- */
.tree-children {
    list-style: none;
    padding-left: 0;
    transition: max-height var(--transition-base);
    overflow: hidden;
    position: relative;
}

.tree-item.collapsed > .tree-children {
    max-height: 0;
} 

/* --- Edge Overlay Elements (Draw accent path from top to selection) --- */
.tree-edge-vertical,
.tree-edge-horizontal {
    position: absolute;
    background: var(--accent);
    pointer-events: none;
    z-index: 2;
} 

.tree-edge-dynamic {
    position: absolute;
    background: var(--accent);
    pointer-events: none;
    z-index: 0; /* Behind toggle */
} 

.tree-edge-base {
    position: absolute;
    background: var(--overlay-medium);
    pointer-events: none;
    z-index: -1;
}

/* Ensure connectors lie below dynamic edges */
.tree-item::before,
.tree-item::after {
    z-index: -1;
} 

/* Legacy pseudo-element connectors are no longer needed, hide them */
.tree-item::before,
.tree-item::after {
    background: transparent !important;
}