daisyui 1.23.1 → 1.24.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.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)
 
 

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.23.0/dist/full.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/daisyui@1.23.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

@@ -2111,6 +2111,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{
@@ -3824,6 +3828,12 @@ html{
   border-radius:var(--rounded-btn, .5rem);
 }
 
+.menu :where(li.bordered>a),.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(span){
   padding:.75rem 1.25rem;
   color:currentColor;
@@ -3859,12 +3869,6 @@ html{
   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;
@@ -9384,6 +9388,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;
@@ -9845,6 +9866,30 @@ html{
   margin-top:1rem;
 }
 
+.menu-vertical :where(li.bordered>a),.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>span){
+  border-left-width:0;
+  border-bottom-width:4px;
+}
+
+.menu-normal :where(li>a),.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>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;
@@ -14129,6 +14174,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;
@@ -14590,6 +14652,30 @@ html{
     margin-top:1rem;
   }
 
+  .sm\:menu-vertical :where(li.bordered>a),.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>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .sm\:menu-normal :where(li>a),.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>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;
@@ -18875,6 +18961,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;
@@ -19336,6 +19439,30 @@ html{
     margin-top:1rem;
   }
 
+  .md\:menu-vertical :where(li.bordered>a),.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>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .md\:menu-normal :where(li>a),.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>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;
@@ -23621,6 +23748,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;
@@ -24082,6 +24226,30 @@ html{
     margin-top:1rem;
   }
 
+  .lg\:menu-vertical :where(li.bordered>a),.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>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .lg\:menu-normal :where(li>a),.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>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;
@@ -28367,6 +28535,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;
@@ -28828,6 +29013,30 @@ html{
     margin-top:1rem;
   }
 
+  .xl\:menu-vertical :where(li.bordered>a),.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>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .xl\:menu-normal :where(li>a),.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>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;
@@ -33113,6 +33322,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;
@@ -33574,6 +33800,30 @@ html{
     margin-top:1rem;
   }
 
+  .\32xl\:menu-vertical :where(li.bordered>a),.\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>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .\32xl\:menu-normal :where(li>a),.\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>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

@@ -767,6 +767,10 @@
     }
   .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;
@@ -2344,6 +2348,11 @@
   .menu[class*=p-] li a{
     border-radius:var(--rounded-btn, .5rem);
   }
+  .menu :where(li.bordered>a),.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(span){
       padding:.75rem 1.25rem;
       color:currentColor;
@@ -2373,11 +2382,6 @@
         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;
       }