hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-13 13:48:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scope sidebar nav rules to the direct child nav (#211)

Browse Source 
The sidebar rules matched every nav inside .sidebar, so a nested
tablist nav became fixed, column, sidebar-width. Use .sidebar > nav
in the component CSS, all style packs and sidebar.js.

Co-authored-by: grugbraindev <178141691+grugbraindev@users.noreply.github.com>
This commit is contained in:
Grug
2026-10-23 14:52:02 +08:00
committed by GitHub
co-authored by grugbraindev
parent 267ad687fa
commit 33a255b499
10 changed files with 263 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/styles/sera.css
+32 -32
View File
@@ -1203,92 +1203,92 @@
}
/* Sidebar */
.sidebar nav {
.sidebar > nav {
@apply bg-sidebar text-sidebar-foreground;
}
.sidebar nav > header,
.sidebar nav > footer {
.sidebar > nav > header,
.sidebar > nav > footer {
@apply gap-2 p-2 [--radius:0];
}
.sidebar nav > section {
.sidebar > nav > section {
@apply gap-2 [--radius:0];
}
.sidebar nav [role=separator] {
.sidebar > nav [role=separator] {
@apply border-sidebar-border mx-2;
}
.sidebar nav > section > [role=group] {
.sidebar > nav > section > [role=group] {
@apply p-2;
}
.sidebar nav h3 {
.sidebar > nav h3 {
@apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-3 text-xs font-semibold uppercase tracking-wider focus-visible:ring-2 [&>svg]:size-3.5 transition-[margin,opacity] duration-200 ease-linear;
}
.sidebar nav > section > [role=group] > ul {
.sidebar > nav > section > [role=group] > ul {
@apply gap-0.5;
}
.sidebar nav > section > [role=group] {
.sidebar > nav > section > [role=group] {
@apply text-sm;
}
.sidebar nav li > :is(a, button),
.sidebar nav li > details > summary {
.sidebar > nav li > :is(a, button),
.sidebar > nav li > details > summary {
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-none px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-3.5;
}
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
.sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
.sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
}
.sidebar nav li > :is(a, button):not([data-variant]),
.sidebar nav li > details > summary:not([data-variant]),
.sidebar nav li > :is(a, button)[data-variant=default],
.sidebar nav li > details > summary[data-variant=default] {
.sidebar > nav li > :is(a, button):not([data-variant]),
.sidebar > nav li > details > summary:not([data-variant]),
.sidebar > nav li > :is(a, button)[data-variant=default],
.sidebar > nav li > details > summary[data-variant=default] {
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
}
.sidebar nav li > :is(a, button)[data-variant=outline],
.sidebar nav li > details > summary[data-variant=outline] {
.sidebar > nav li > :is(a, button)[data-variant=outline],
.sidebar > nav li > details > summary[data-variant=outline] {
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
}
.sidebar nav li > :is(a, button):not([data-size]),
.sidebar nav li > details > summary:not([data-size]),
.sidebar nav li > :is(a, button)[data-size=default],
.sidebar nav li > details > summary[data-size=default] {
.sidebar > nav li > :is(a, button):not([data-size]),
.sidebar > nav li > details > summary:not([data-size]),
.sidebar > nav li > :is(a, button)[data-size=default],
.sidebar > nav li > details > summary[data-size=default] {
@apply h-9 text-sm;
}
.sidebar nav li > :is(a, button)[data-size=sm],
.sidebar nav li > details > summary[data-size=sm] {
.sidebar > nav li > :is(a, button)[data-size=sm],
.sidebar > nav li > details > summary[data-size=sm] {
@apply h-8 text-xs;
}
.sidebar nav li > :is(a, button)[data-size=lg],
.sidebar nav li > details > summary[data-size=lg] {
.sidebar > nav li > :is(a, button)[data-size=lg],
.sidebar > nav li > details > summary[data-size=lg] {
@apply h-14 px-3 text-sm;
}
.sidebar nav li > details > summary::after {
.sidebar > nav li > details > summary::after {
@apply size-3.5;
}
.sidebar nav li > details::details-content {
.sidebar > nav li > details::details-content {
@apply px-3.5;
}
.sidebar nav ul ul {
.sidebar > nav ul ul {
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
}
.sidebar nav ul ul > li > :is(a, button),
.sidebar nav ul ul > li > details > summary {
.sidebar > nav ul ul > li > :is(a, button),
.sidebar > nav ul ul > li > details > summary {
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-3 text-sm focus-visible:ring-2 [&>svg]:size-3.5;
}
/* Progress */