fix: #351 (apply menu item style to button like a and span)

saadeghi · Jan 17, 2022 · 87f079f · 87f079f
1 parent 3c092b8
commit 87f079f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/src/components/styled/menu.css b/src/components/styled/menu.css
@@ -3,6 +3,7 @@
     li{
       &.bordered{
         >a,
+        >button,
         >span{
           @apply border-l-0 border-b-4 border-primary;
         }
@@ -13,28 +14,35 @@
     @apply rounded-btn;
   }
   :where(li.bordered>a),
+  :where(li.bordered>button),
   :where(li.bordered>span){
     @apply border-l-4 border-primary;
   }
   li{
     >:where(a),
+    >:where(button),
     >:where(span){
       @apply text-current px-5 py-3;
     }
 
     >:where(a:focus),
-    >:where(a:hover){
+    >:where(a:hover),
+    >:where(button:focus),
+    >:where(button:hover)
+    {
       @apply bg-base-content bg-opacity-10;
     }
     >:where(a.active){
       @apply bg-primary text-primary-content;
     }
-    >:where(a:active){
+    >:where(a:active),
+    >:where(button:active)
+    {
       @apply bg-primary-focus text-primary-content;
     }
 
     &.disabled{
-      &>a, &>span{
+      &>a, &>span, &>button{
         @apply text-base-content text-opacity-20 hover:bg-transparent;
       }
     }

diff --git a/src/components/unstyled/menu.css b/src/components/unstyled/menu.css
@@ -8,8 +8,8 @@
   }
   :where(li){
     @apply flex flex-col items-stretch;
-    >a, >span{
-      @apply flex items-center transition ease-in-out duration-200;
+    >a, >span, >button{
+      @apply flex items-center transition ease-in-out duration-200 outline-none;
     }
     >a{
       @apply cursor-pointer;
@@ -19,7 +19,7 @@
       }
     }
     &.disabled{
-      &>a, &>span{
+      &>a, &>span, &>button{
         @apply cursor-auto;
       }
     }

diff --git a/src/docs/pages/components/menu.vue b/src/docs/pages/components/menu.vue
@@ -18,7 +18,7 @@
       <Menu class="w-64 border bg-base-100 rounded-box">
         <MenuItem>
           <a>
-            Item without icon
+            Link
           </a>
         </MenuItem>
         <MenuItem>
@@ -27,7 +27,7 @@
               glyph="eye"
               class="inline-block w-5 h-5 mr-2 stroke-current"
             />
-            Item with icon
+            Link with icon
           </a>
         </MenuItem>
         <MenuItem>
@@ -36,7 +36,7 @@
               glyph="folder"
               class="inline-block w-5 h-5 mr-2 stroke-current"
             />
-            Item with icon
+            With badge
             <Badge class="ml-2 success">3</Badge>
           </a>
         </MenuItem>

diff --git a/src/utilities/styled/menu.css b/src/utilities/styled/menu.css
@@ -1,16 +1,20 @@
 .menu-vertical :where(li.bordered>a),
+.menu-vertical :where(li.bordered>button),
 .menu-vertical :where(li.bordered>span){
   @apply border-l-4 border-b-0;
 }
 .menu-horizontal :where(li.bordered>a),
+.menu-horizontal :where(li.bordered>button),
 .menu-horizontal :where(li.bordered>span){
   @apply border-l-0 border-b-4;
 }
 .menu-normal :where(li>a),
+.menu-normal :where(li>button),
 .menu-normal :where(li>span){
   @apply py-3 text-base;
 }
 .menu-compact :where(li>a),
+.menu-compact :where(li>button),
 .menu-compact :where(li>span){
   @apply py-2 text-sm;
 }