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

Fix sidebar nested item styling

Browse Source
This commit is contained in:
Ronan Berder
2026-06-06 16:41:18 +08:00
parent 1509cdadef
commit 2e8daaef03
45 changed files with 55860 additions and 1338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/styles/luma.css
+21 -11
View File
@@ -1155,33 +1155,42 @@
@apply text-sm;
}
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-variant]),
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-size]),
.sidebar nav li > :is(a, button, 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, 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, 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;
}
@@ -1194,10 +1203,11 @@
}
.sidebar nav ul ul {
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
@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, 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;
}
src/css/styles/lyra.css
+21 -11
View File
@@ -1136,33 +1136,42 @@
@apply text-xs;
}
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-variant]),
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-size]),
.sidebar nav li > :is(a, button, 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, 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, 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;
}
@@ -1175,10 +1184,11 @@
}
.sidebar nav ul ul {
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
@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, 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;
}
src/css/styles/maia.css
+21 -11
View File
@@ -1143,33 +1143,42 @@
@apply text-sm;
}
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-variant]),
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-size]),
.sidebar nav li > :is(a, button, 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, 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, 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;
}
@@ -1182,10 +1191,11 @@
}
.sidebar nav ul ul {
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
@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, 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;
}
src/css/styles/mira.css
+21 -11
View File
@@ -1144,33 +1144,42 @@
@apply text-xs;
}
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-variant]),
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-size]),
.sidebar nav li > :is(a, button, 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, 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, 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;
}
@@ -1183,10 +1192,11 @@
}
.sidebar nav ul ul {
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
@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, 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;
}
src/css/styles/nova.css
+21 -11
View File
@@ -1140,33 +1140,42 @@
@apply text-sm;
}
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-variant]),
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-size]),
.sidebar nav li > :is(a, button, 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, 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, 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;
}
@@ -1179,10 +1188,11 @@
}
.sidebar nav ul ul {
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
@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, 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;
}
src/css/styles/rhea.css
+21 -11
View File
@@ -1152,33 +1152,42 @@
@apply text-sm;
}
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-variant]),
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-size]),
.sidebar nav li > :is(a, button, 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, 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, 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;
}
@@ -1191,10 +1200,11 @@
}
.sidebar nav ul ul {
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
@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, 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;
}
src/css/styles/sera.css
+21 -11
View File
@@ -1163,33 +1163,42 @@
@apply text-sm;
}
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-variant]),
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-size]),
.sidebar nav li > :is(a, button, 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, 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, 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;
}
@@ -1202,10 +1211,11 @@
}
.sidebar nav ul ul {
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
@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, 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;
}
src/css/styles/vega.css
+21 -11
View File
@@ -1140,33 +1140,42 @@
@apply text-sm;
}
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-variant]),
.sidebar nav li > :is(a, button, 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, 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, details > summary):not([data-size]),
.sidebar nav li > :is(a, button, 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, 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, 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;
}
@@ -1179,10 +1188,11 @@
}
.sidebar nav ul ul {
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
@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, 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;
}