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

Scope sidebar nav rules to the direct child nav

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.
This commit is contained in:
grugbraindev
2026-10-23 09:49:29 +08:00
parent b7d33eee04
commit a6acba6ace
10 changed files with 263 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/components/sidebar.css
+6 -6
View File
@@ -8,7 +8,7 @@
&[aria-hidden=false] {
@apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
}
nav {
> nav {
@apply fixed inset-y-0 z-50 flex w-(--sidebar-mobile-width) flex-col transition-transform duration-300 ease-in-out md:w-(--sidebar-width);
}
& + * {
@@ -16,14 +16,14 @@
}
&:not([data-side]),
&[data-side=left] {
nav {
> nav {
@apply left-0 border-r;
}
& + * {
@apply relative md:ml-(--sidebar-width);
}
&[aria-hidden=true] {
nav {
> nav {
@apply -translate-x-full;
}
& + * {
@@ -32,14 +32,14 @@
}
}
&[data-side=right] {
nav {
> nav {
@apply right-0 border-l;
}
& + * {
@apply relative md:mr-(--sidebar-width);
}
&[aria-hidden=true] {
nav {
> nav {
@apply translate-x-full;
}
& + * {
@@ -47,7 +47,7 @@
}
}
}
nav {
> nav {
> header,
> footer {
@apply flex flex-col;
src/css/styles/luma.css
+32 -32
View File
@@ -1182,92 +1182,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:var(--radius-xl)];
}
.sidebar nav > section {
.sidebar > nav > section {
@apply gap-2 [--radius:var(--radius-xl)];
}
.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-xl px-3 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 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-xl 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-4;
}
.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-4;
}
.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-xl px-3 text-sm focus-visible:ring-2 [&>svg]:size-4;
}
/* Progress */
src/css/styles/lyra.css
+32 -32
View File
@@ -1185,92 +1185,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;
}
.sidebar nav > section {
.sidebar > nav > section {
@apply gap-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-2 text-xs focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
}
.sidebar nav > section > [role=group] > ul {
.sidebar > nav > section > [role=group] > ul {
@apply gap-0;
}
.sidebar nav > section > [role=group] {
.sidebar > nav > section > [role=group] {
@apply text-xs;
}
.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 p-2 text-xs 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-4;
}
.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-8 text-xs;
}
.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-7 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-12 text-xs;
}
.sidebar nav li > details > summary::after {
.sidebar > nav li > details > summary::after {
@apply size-4;
}
.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-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
}
/* Progress */
src/css/styles/maia.css
+32 -32
View File
@@ -1170,92 +1170,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:var(--radius-xl)];
}
.sidebar nav > section {
.sidebar > nav > section {
@apply gap-2 [--radius:var(--radius-xl)];
}
.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-md px-3 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
}
.sidebar nav > section > [role=group] > ul {
.sidebar > nav > section > [role=group] > ul {
@apply gap-1;
}
.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-lg 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-4;
}
.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-4;
}
.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-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
}
/* Progress */
src/css/styles/mira.css
+32 -32
View File
@@ -1179,92 +1179,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;
}
.sidebar nav > section {
.sidebar > nav > section {
@apply gap-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 px-2 py-1;
}
.sidebar nav h3 {
.sidebar > nav h3 {
@apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
}
.sidebar nav > section > [role=group] > ul {
.sidebar > nav > section > [role=group] > ul {
@apply gap-px;
}
.sidebar nav > section > [role=group] {
.sidebar > nav > section > [role=group] {
@apply text-xs;
}
.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-[calc(var(--radius-sm)+2px)] p-2 text-xs 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-4;
}
.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-muted/20 dark:bg-muted/30 border-input 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-8 text-xs;
}
.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-7 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-12 text-xs;
}
.sidebar nav li > details > summary::after {
.sidebar > nav li > details > summary::after {
@apply size-4;
}
.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-md px-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
}
/* Progress */
src/css/styles/nova.css
+32 -32
View File
@@ -1193,92 +1193,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;
}
.sidebar nav > section {
.sidebar > nav > section {
@apply gap-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-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
}
.sidebar nav > section > [role=group] > ul {
.sidebar > nav > section > [role=group] > ul {
@apply gap-0;
}
.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-md p-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-4;
}
.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-8 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-7 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-12 text-sm;
}
.sidebar nav li > details > summary::after {
.sidebar > nav li > details > summary::after {
@apply size-4;
}
.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-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
}
/* Progress */
src/css/styles/rhea.css
+32 -32
View File
@@ -1187,92 +1187,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:var(--radius-xl)];
}
.sidebar nav > section {
.sidebar > nav > section {
@apply gap-2 [--radius:var(--radius-xl)];
}
.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-xl px-3 text-xs font-medium focus-visible:ring-3 [&>svg]:size-4 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-xl px-3 py-2 text-sm duration-200 focus-visible:ring-3 whitespace-nowrap has-[>svg:first-child]:ps-2.5 has-[>svg:last-child]:pe-2.5 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
}
.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-8 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-7 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-12 px-3 text-sm;
}
.sidebar nav li > details > summary::after {
.sidebar > nav li > details > summary::after {
@apply size-4;
}
.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-xl px-3 text-sm focus-visible:ring-3 [&>svg]:size-4;
}
/* Progress */
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 */
src/css/styles/vega.css
+32 -32
View File
@@ -1192,92 +1192,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;
}
.sidebar nav > section {
.sidebar > nav > section {
@apply gap-2;
}
.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-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
}
.sidebar nav > section > [role=group] > ul {
.sidebar > nav > section > [role=group] > ul {
@apply gap-1;
}
.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-md p-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-4;
}
.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-8 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-7 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-12 text-sm;
}
.sidebar nav li > details > summary::after {
.sidebar > nav li > details > summary::after {
@apply size-4;
}
.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-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
}
/* Progress */
src/js/sidebar.js
+1 -1
View File
@@ -30,7 +30,7 @@
const handleClick = (event) => {
const target = event.target;
const nav = sidebarComponent.querySelector('nav');
const nav = sidebarComponent.querySelector(':scope > nav');
const isMobile = window.innerWidth < breakpoint;
if (isMobile && target.closest('a, button') && !target.closest('[data-keep-mobile-sidebar-open]')) {