fix: don't apply menu item styles to `btn` is inside menu

This commit is contained in:
Pouya Saadeghi 2024-02-13 19:37:23 +03:00
parent f788ef9b11
commit ac60762279
3 changed files with 14 additions and 14 deletions

View File

@ -13,21 +13,21 @@
content: "";
}
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-btn px-4 py-2 text-start transition duration-200 ease-out;
text-wrap: balance;
}
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)),
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)) {
&:not(summary):not(.active).focus,
&:not(summary):not(.active):focus,
&:is(summary):not(.active):focus-visible {
:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)),
:where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)) {
&:not(summary, .active, .btn).focus,
&:not(summary, .active, .btn):focus,
&:is(summary):not(.active, .btn):focus-visible {
@apply bg-base-content/10 text-base-content cursor-pointer outline-none;
}
@media (hover: hover) {
&:not(.active):hover {
&:not(.active, .btn):hover {
@apply cursor-pointer outline-none;
@supports (color: oklch(0 0 0)) {
@apply bg-base-content/10;
@ -36,8 +36,8 @@
}
}
.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > *:not(ul, .menu-title, details, .btn):active,
.menu li > *:not(ul, .menu-title, details, .btn).active,
.menu li > details > summary:active {
@apply bg-neutral text-neutral-content [@media(hover:hover)]:bg-neutral [@media(hover:hover)]:text-neutral-content;
}

View File

@ -3,7 +3,7 @@
:where(li ul) {
@apply relative whitespace-nowrap;
}
:where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
:where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply grid grid-flow-col content-start items-center gap-2;
grid-auto-columns: minmax(auto, max-content) auto max-content;

View File

@ -18,7 +18,7 @@
}
.menu-xs {
:where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded px-2 py-1 text-xs;
}
@ -27,7 +27,7 @@
}
}
.menu-sm {
:where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-btn px-3 py-1 text-sm;
}
@ -36,7 +36,7 @@
}
}
.menu-md {
:where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-btn px-4 py-2 text-sm;
}
@ -45,7 +45,7 @@
}
}
.menu-lg {
:where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
:where(li:not(.menu-title) > details > summary:not(.menu-title)) {
@apply rounded-btn px-6 py-3 text-lg;
}