daisyui 1.23.0 → 1.24.2

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.24.2](https://github.com/saadeghi/daisyui/compare/v1.24.1...v1.24.2) (2022-01-17)
+
+
+### Bug Fixes
+
+* [#351](https://github.com/saadeghi/daisyui/issues/351) (apply menu item style to `button` like `a` and `span`) ([87f079f](https://github.com/saadeghi/daisyui/commit/87f079fc925092d39a177154b2d8d5529787b9dd))
+
+### [1.24.1](https://github.com/saadeghi/daisyui/compare/v1.24.0...v1.24.1) (2022-01-17)
+
+## [1.24.0](https://github.com/saadeghi/daisyui/compare/v1.23.1...v1.24.0) (2022-01-17)
+
+
+### Features
+
+* add responsive classes for `menu` ,fix: [#392](https://github.com/saadeghi/daisyui/issues/392) ([f825aea](https://github.com/saadeghi/daisyui/commit/f825aeab7fed82130e639e713d3de5707233ac02))
+
+### [1.23.1](https://github.com/saadeghi/daisyui/compare/v1.23.0...v1.23.1) (2022-01-17)
+
+
+### Bug Fixes
+
+* card-side css property ([9908352](https://github.com/saadeghi/daisyui/commit/9908352d932fa458762c7b4815563e54583401d5))
+
 ## [1.23.0](https://github.com/saadeghi/daisyui/compare/v1.22.2...v1.23.0) (2022-01-15)
 
 

package/README.md

@@ -79,7 +79,7 @@ Loading CSS files from CDN is not recommended for production. It's better to ins
 
   
 ```html
-<link href="https://cdn.jsdelivr.net/npm/daisyui@1.22.2/dist/full.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/daisyui@1.24.1/dist/full.css" rel="stylesheet" type="text/css" />
 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
 ```
 

package/dist/full.css

@@ -2100,9 +2100,11 @@ html{
   align-items:stretch;
 }
 
-.menu :where(li)>a,.menu :where(li)>span{
+.menu :where(li)>a,.menu :where(li)>button,.menu :where(li)>span{
   display:flex;
   align-items:center;
+  outline:2px solid transparent;
+  outline-offset:2px;
   transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   transition-duration:.15s;
   transition-duration:.2s;
@@ -2111,6 +2113,10 @@ html{
 
 .menu :where(li)>a{
   cursor:pointer;
+  -webkit-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
 }
 
 .menu :where(li)>a:focus{
@@ -2118,7 +2124,7 @@ html{
   outline-offset:2px;
 }
 
-.menu :where(li).disabled>a,.menu :where(li).disabled>span{
+.menu :where(li).disabled>a,.menu :where(li).disabled>button,.menu :where(li).disabled>span{
   cursor:auto;
 }
 
@@ -3813,7 +3819,7 @@ html{
   mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjYzMSA4Ny4xMDdMLjQ0Ni41MDVsNzQuMjM5IDQzLjQ2MiA3NC40MjIgNDMuMTQtNzQuNDIyIDQzLjE0TC40NDYgMTczLjcxeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
 }
 
-.menu.horizontal li.bordered>a,.menu.horizontal li.bordered>span{
+.menu.horizontal li.bordered>a,.menu.horizontal li.bordered>button,.menu.horizontal li.bordered>span{
   --tw-border-opacity:1;
   border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
   border-left-width:0;
@@ -3824,12 +3830,18 @@ html{
   border-radius:var(--rounded-btn, .5rem);
 }
 
-.menu li>:where(a),.menu li>:where(span){
+.menu :where(li.bordered>a),.menu :where(li.bordered>button),.menu :where(li.bordered>span){
+  --tw-border-opacity:1;
+  border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
+  border-left-width:4px;
+}
+
+.menu li>:where(a),.menu li>:where(button),.menu li>:where(span){
   padding:.75rem 1.25rem;
   color:currentColor;
 }
 
-.menu li>:where(a:focus),.menu li>:where(a:hover){
+.menu li>:where(a:focus),.menu li>:where(a:hover),.menu li>:where(button:focus),.menu li>:where(button:hover){
   --tw-bg-opacity:1;
   --tw-bg-opacity:0.1;
   background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
@@ -3842,29 +3854,23 @@ html{
   color:hsla(var(--pc) / var(--tw-text-opacity, 1));
 }
 
-.menu li>:where(a:active){
+.menu li>:where(a:active),.menu li>:where(button:active){
   --tw-bg-opacity:1;
   background-color:hsla(var(--pf) / var(--tw-bg-opacity, 1));
   --tw-text-opacity:1;
   color:hsla(var(--pc) / var(--tw-text-opacity, 1));
 }
 
-.menu li.disabled>a:hover,.menu li.disabled>span:hover{
+.menu li.disabled>a:hover,.menu li.disabled>button:hover,.menu li.disabled>span:hover{
   background-color:transparent;
 }
 
-.menu li.disabled>a,.menu li.disabled>span{
+.menu li.disabled>a,.menu li.disabled>button,.menu li.disabled>span{
   --tw-text-opacity:1;
   --tw-text-opacity:0.2;
   color:hsla(var(--bc) / var(--tw-text-opacity, 1));
 }
 
-.menu li.bordered a,.menu li.bordered span{
-  --tw-border-opacity:1;
-  border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
-  border-left-width:4px;
-}
-
 .menu li.hover-bordered a{
   border-color:transparent;
   border-left-width:4px;
@@ -4426,6 +4432,11 @@ html{
   color:hsla(var(--bc) / var(--tw-placeholder-opacity, 1));
 }
 
+.select-multiple,.select[multiple],.select[size].select:not([size="1"]){
+  background-image:none;
+  padding-right:1rem;
+}
+
 .stat+.stat{
   --tw-border-opacity:1;
   --tw-border-opacity:0.1;
@@ -9379,6 +9390,23 @@ html{
   min-width:2.5em;
 }
 
+.menu-vertical{
+  flex-direction:column;
+}
+
+.menu-vertical :where(li){
+  flex-direction:column;
+}
+
+.menu-horizontal{
+  display:inline-flex;
+  flex-direction:row;
+}
+
+.menu-horizontal :where(li){
+  flex-direction:row;
+}
+
 .radio-xs{
   height:1rem;
   width:1rem;
@@ -9840,6 +9868,30 @@ html{
   margin-top:1rem;
 }
 
+.menu-vertical :where(li.bordered>a),.menu-vertical :where(li.bordered>button),.menu-vertical :where(li.bordered>span){
+  border-bottom-width:0;
+  border-left-width:4px;
+}
+
+.menu-horizontal :where(li.bordered>a),.menu-horizontal :where(li.bordered>button),.menu-horizontal :where(li.bordered>span){
+  border-left-width:0;
+  border-bottom-width:4px;
+}
+
+.menu-normal :where(li>a),.menu-normal :where(li>button),.menu-normal :where(li>span){
+  font-size:1rem;
+  line-height:1.5rem;
+  padding-top:.75rem;
+  padding-bottom:.75rem;
+}
+
+.menu-compact :where(li>a),.menu-compact :where(li>button),.menu-compact :where(li>span){
+  font-size:.875rem;
+  line-height:1.25rem;
+  padding-top:.5rem;
+  padding-bottom:.5rem;
+}
+
 .steps-horizontal [class~=step]{
   grid-template-rows:40px 1fr;
   grid-template-columns:auto;
@@ -14124,6 +14176,23 @@ html{
     min-width:2.5em;
   }
 
+  .sm\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .sm\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .sm\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .sm\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .sm\:radio-xs{
     height:1rem;
     width:1rem;
@@ -14585,6 +14654,30 @@ html{
     margin-top:1rem;
   }
 
+  .sm\:menu-vertical :where(li.bordered>a),.sm\:menu-vertical :where(li.bordered>button),.sm\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .sm\:menu-horizontal :where(li.bordered>a),.sm\:menu-horizontal :where(li.bordered>button),.sm\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .sm\:menu-normal :where(li>a),.sm\:menu-normal :where(li>button),.sm\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .sm\:menu-compact :where(li>a),.sm\:menu-compact :where(li>button),.sm\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .sm\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;
@@ -18870,6 +18963,23 @@ html{
     min-width:2.5em;
   }
 
+  .md\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .md\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .md\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .md\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .md\:radio-xs{
     height:1rem;
     width:1rem;
@@ -19331,6 +19441,30 @@ html{
     margin-top:1rem;
   }
 
+  .md\:menu-vertical :where(li.bordered>a),.md\:menu-vertical :where(li.bordered>button),.md\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .md\:menu-horizontal :where(li.bordered>a),.md\:menu-horizontal :where(li.bordered>button),.md\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .md\:menu-normal :where(li>a),.md\:menu-normal :where(li>button),.md\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .md\:menu-compact :where(li>a),.md\:menu-compact :where(li>button),.md\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .md\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;
@@ -23616,6 +23750,23 @@ html{
     min-width:2.5em;
   }
 
+  .lg\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .lg\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .lg\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .lg\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .lg\:radio-xs{
     height:1rem;
     width:1rem;
@@ -24077,6 +24228,30 @@ html{
     margin-top:1rem;
   }
 
+  .lg\:menu-vertical :where(li.bordered>a),.lg\:menu-vertical :where(li.bordered>button),.lg\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .lg\:menu-horizontal :where(li.bordered>a),.lg\:menu-horizontal :where(li.bordered>button),.lg\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .lg\:menu-normal :where(li>a),.lg\:menu-normal :where(li>button),.lg\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .lg\:menu-compact :where(li>a),.lg\:menu-compact :where(li>button),.lg\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .lg\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;
@@ -28362,6 +28537,23 @@ html{
     min-width:2.5em;
   }
 
+  .xl\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .xl\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .xl\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .xl\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .xl\:radio-xs{
     height:1rem;
     width:1rem;
@@ -28823,6 +29015,30 @@ html{
     margin-top:1rem;
   }
 
+  .xl\:menu-vertical :where(li.bordered>a),.xl\:menu-vertical :where(li.bordered>button),.xl\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .xl\:menu-horizontal :where(li.bordered>a),.xl\:menu-horizontal :where(li.bordered>button),.xl\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .xl\:menu-normal :where(li>a),.xl\:menu-normal :where(li>button),.xl\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .xl\:menu-compact :where(li>a),.xl\:menu-compact :where(li>button),.xl\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .xl\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;
@@ -33108,6 +33324,23 @@ html{
     min-width:2.5em;
   }
 
+  .\32xl\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .\32xl\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .\32xl\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .\32xl\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .\32xl\:radio-xs{
     height:1rem;
     width:1rem;
@@ -33569,6 +33802,30 @@ html{
     margin-top:1rem;
   }
 
+  .\32xl\:menu-vertical :where(li.bordered>a),.\32xl\:menu-vertical :where(li.bordered>button),.\32xl\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .\32xl\:menu-horizontal :where(li.bordered>a),.\32xl\:menu-horizontal :where(li.bordered>button),.\32xl\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .\32xl\:menu-normal :where(li>a),.\32xl\:menu-normal :where(li>button),.\32xl\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .\32xl\:menu-compact :where(li>a),.\32xl\:menu-compact :where(li>button),.\32xl\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .\32xl\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;

package/dist/styled.css

@@ -757,9 +757,11 @@
     flex-direction:column;
     align-items:stretch;
   }
-  .menu :where(li)>a,.menu :where(li)>span{
+  .menu :where(li)>a,.menu :where(li)>button,.menu :where(li)>span{
       display:flex;
       align-items:center;
+      outline:2px solid transparent;
+      outline-offset:2px;
       transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
       transition-duration:.15s;
       transition-timing-function:cubic-bezier(.4, 0, .2, 1);
@@ -767,12 +769,16 @@
     }
   .menu :where(li)>a{
       cursor:pointer;
+      -webkit-user-select:none;
+         -moz-user-select:none;
+          -ms-user-select:none;
+              user-select:none;
     }
   .menu :where(li)>a:focus{
         outline:2px solid transparent;
         outline-offset:2px;
       }
-  .menu :where(li).disabled>a,.menu :where(li).disabled>span{
+  .menu :where(li).disabled>a,.menu :where(li).disabled>button,.menu :where(li).disabled>span{
         cursor:auto;
       }
 .mockup-code{
@@ -2335,7 +2341,7 @@
   .mask-triangle-4{
     -webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNLjYzMSA4Ny4xMDdMLjQ0Ni41MDVsNzQuMjM5IDQzLjQ2MiA3NC40MjIgNDMuMTQtNzQuNDIyIDQzLjE0TC40NDYgMTczLjcxeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
             mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNLjYzMSA4Ny4xMDdMLjQ0Ni41MDVsNzQuMjM5IDQzLjQ2MiA3NC40MjIgNDMuMTQtNzQuNDIyIDQzLjE0TC40NDYgMTczLjcxeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
-  }.menu.horizontal li.bordered>a,.menu.horizontal li.bordered>span{
+  }.menu.horizontal li.bordered>a,.menu.horizontal li.bordered>button,.menu.horizontal li.bordered>span{
           --tw-border-opacity:1;
           border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
           border-left-width:0;
@@ -2344,11 +2350,16 @@
   .menu[class*=p-] li a{
     border-radius:var(--rounded-btn, .5rem);
   }
-  .menu li>:where(a),.menu li>:where(span){
+  .menu :where(li.bordered>a),.menu :where(li.bordered>button),.menu :where(li.bordered>span){
+    --tw-border-opacity:1;
+    border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
+    border-left-width:4px;
+  }
+  .menu li>:where(a),.menu li>:where(button),.menu li>:where(span){
       padding:.75rem 1.25rem;
       color:currentColor;
     }
-  .menu li>:where(a:focus),.menu li>:where(a:hover){
+  .menu li>:where(a:focus),.menu li>:where(a:hover),.menu li>:where(button:focus),.menu li>:where(button:hover){
       --tw-bg-opacity:1;
       background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
       --tw-bg-opacity:0.1;
@@ -2359,25 +2370,20 @@
       --tw-text-opacity:1;
       color:hsla(var(--pc) / var(--tw-text-opacity, 1));
     }
-  .menu li>:where(a:active){
+  .menu li>:where(a:active),.menu li>:where(button:active){
       --tw-bg-opacity:1;
       background-color:hsla(var(--pf) / var(--tw-bg-opacity, 1));
       --tw-text-opacity:1;
       color:hsla(var(--pc) / var(--tw-text-opacity, 1));
     }
-  .menu li.disabled>a:hover,.menu li.disabled>span:hover{
+  .menu li.disabled>a:hover,.menu li.disabled>button:hover,.menu li.disabled>span:hover{
         background-color:transparent;
       }
-  .menu li.disabled>a,.menu li.disabled>span{
+  .menu li.disabled>a,.menu li.disabled>button,.menu li.disabled>span{
         --tw-text-opacity:1;
         color:hsla(var(--bc) / var(--tw-text-opacity, 1));
         --tw-text-opacity:0.2;
       }
-  .menu li.bordered a,.menu li.bordered span{
-        --tw-border-opacity:1;
-        border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
-        border-left-width:4px;
-      }
   .menu li.hover-bordered a{
         border-color:transparent;
       }
@@ -2993,6 +2999,10 @@
   .select-disabled,.select[disabled]{
     --tw-text-opacity:0.2;
   }
+  .select-multiple,.select[multiple],.select[size].select:not([size="1"]){
+    background-image:none;
+    padding-right:1rem;
+  }
 .stack{
   place-items:center;
   align-items:flex-end;