page-tree.css

/* GROUP PAGE TREE
=================================================== */
.page-tree {
    /* e.g. >> /cp/nav/default/edit. @container/panel usually has an inset shadow for dark mode. */
    .dark .\@container\/panel:has(&) {
        box-shadow: none;
    }
    .tree-node {
        @apply dark:pb-0.25;
        /* We only want to animate tree nodes on page load. We don't want to animate child nodes when toggling them open, less it looks glitchy and feels unresponsive. */
        &:not(.page-tree--ready &) {
            transition: opacity var(--starting-style-transition-duration);
            @starting-style {
                opacity: 0;
            }
        }
    }
    .page-tree-branch {
        @apply relative rounded-xl bg-white text-xs shadow;
        @apply dark:bg-gray-800;
    }

    .page-move {
        @apply w-6 dark:text-gray-200 ltr:rounded-xl;
        cursor: grab;
        background-image: url('../../svg/drag-dots.svg');
        background-size: 7px 17px;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .page-root {
        @apply flex w-6 items-center rounded-s border-e;
    }

    /* Nice progressive enhancement to visually connect tree node children by removing the top left border radius.. */
    /* 2nd level down */
    .tree-node:has(.is-section) + .tree-node .page-tree-branch,
    /* 3rd level down */
    .tree-node:has(.page-tree-branch--has-children):has(.is-open) + .tree-node .page-tree-branch {
        border-start-start-radius: 0;
    }

    /* A section node followed by another section node should always have a rounded border. E.g. Tools + Settings */
    .tree-node:has(.is-section) + .tree-node:has(.is-section) .page-tree-branch {
        @apply rounded-xl;
    }
}

/* GROUP PAGE TREE / NAV BUILDER
=================================================== */
/* e.g. cp/nav/edit */
.nav-builder {
    background: none;
    .tree-node {
        @apply bg-gray-200/45 dark:bg-gray-950/35;
        .tree-node-inner {
            @apply px-1;
        }
        &:has(.is-section) {
            @apply mt-8 pt-1 bg-gray-200/45 dark:bg-gray-950 rounded-t-2xl;
        }
        &:has(+ .tree-node .is-section),
        &:last-child {
            @apply pb-1 rounded-b-2xl;
        }
        &:has(.is-top-level-section-placeholder) {
            background: none;
            @apply mt-1;
        }
        /* When we're dragging a section tree node, remove the background otherwise it bleeds into the node we're moving it to */
        &.drag-placeholder-wrapper:has(.is-section-placeholder) {
            background: none;
            @apply -mx-1 mt-2;
        }
        /* When we're dragging a section tree node, make sure the preceding node is rounded. Check for a suceeding .is-section-placeholder to ensure we don't affect dragging _inside_ sections */
        &:has(+ .drag-placeholder-wrapper):has(+ * .is-section-placeholder) {
            @apply pb-1 rounded-b-2xl;
        }
        /* When we're dragging a section tree node, make sure the succeeding node is rounded */
        .drag-placeholder-wrapper:has(.is-section-placeholder) + & {
            @apply rounded-t-2xl;
        }
    }
    .page-tree-branch {
        margin-top: 0;
    }
    /* Hide empty first branch nodes if they're empty, otherwise we get a weird border or dark mode for the first node. */
    .tree-node:has(.first-branch:empty) {
        display: none;
    }
    .tree-node:has(.first-branch) + .tree-node {
        @apply pt-1 rounded-t-2xl;
    }
}