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

saadeghi · Feb 13, 2024 · ac60762 · ac60762
1 parent f788ef9
commit ac60762
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/src/components/styled/menu.css b/src/components/styled/menu.css
@@ -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;
 }

diff --git a/src/components/unstyled/menu.css b/src/components/unstyled/menu.css
@@ -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;

diff --git a/src/utilities/styled/menu.css b/src/utilities/styled/menu.css
@@ -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;
   }