fix: don't apply menu item styles to `btn` is inside menu
This commit is contained in:
parent
f788ef9b11
commit
ac60762279
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue