daisyui 1.22.2 → 1.24.1

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.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)
+
+
+### Features
+
+* add css variables to edit tab colors ([3598bd9](https://github.com/saadeghi/daisyui/commit/3598bd92282892b269a10bb89229420bc3565d80))
+
 ### [1.22.2](https://github.com/saadeghi/daisyui/compare/v1.22.1...v1.22.2) (2022-01-12)
 
 

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.1/dist/full.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/daisyui@1.24.0/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" />
 ```
 
@@ -258,7 +258,7 @@ Read the documents for more info:
 [jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
 [build-url]: https://github.com/saadeghi/daisyui/actions
 [tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AUI%20Components%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
-[number-of-components]: https://badgen.net/badge/total%20components/40/green
+[number-of-components]: https://badgen.net/badge/total%20components/41/green
 
 [docs-url-install]: https://daisyui.com/docs/install
 [docs-url]: https://daisyui.com/

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{
@@ -2505,9 +2509,11 @@ html{
   line-height:1.25rem;
   line-height:2;
   --tab-padding:1rem;
-  --tw-text-opacity:1;
   --tw-text-opacity:0.5;
-  color:hsla(var(--bc) / var(--tw-text-opacity, 1));
+  --tab-color:hsla(var(--bc) / var(--tw-text-opacity, 1));
+  --tab-bg:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+  --tab-border-color:hsla(var(--b3) / var(--tw-bg-opacity, 1));
+  color:var(--tab-color);
   padding-left:var(--tab-padding, 1rem);
   padding-right:var(--tab-padding, 1rem);
 }
@@ -3822,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;
@@ -3857,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;
@@ -4424,6 +4430,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;
@@ -4568,8 +4579,6 @@ html{
 .tab.tab-active{
   border-color:hsla(var(--bc) / var(--tw-border-opacity, 1));
   --tw-border-opacity:1;
-  --tw-text-opacity:1;
-  color:hsla(var(--bc) / var(--tw-text-opacity, 1));
 }
 
 .tab:focus{
@@ -4593,22 +4602,21 @@ html{
   border-top-left-radius:var(--tab-radius, .5rem);
   border-top-right-radius:var(--tab-radius, .5rem);
   border:0 solid transparent;
-  border-bottom:var(--tab-border, 1px) solid hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+  border-bottom:var(--tab-border, 1px) solid var(--tab-border-color);
   padding-left:var(--tab-padding, 1rem);
   padding-right:var(--tab-padding, 1rem);
   padding-top:var(--tab-border, 1px);
 }
 
 .tab-lifted.tab-active{
-  --tw-bg-opacity:1;
-  background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+  background-color:var(--tab-bg);
   border-left-width:var(--tab-border, 1px);
   border-bottom-width:0;
   border-right-width:var(--tab-border, 1px);
   border-top-width:var(--tab-border, 1px);
-  border-left-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
-  border-right-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
-  border-top-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+  border-left-color:var(--tab-border-color);
+  border-right-color:var(--tab-border-color);
+  border-top-color:var(--tab-border-color);
   padding-left:calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
   padding-right:calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
   padding-bottom:var(--tab-border, 1px);
@@ -4627,9 +4635,9 @@ html{
   --tab-corner-bg:radial-gradient(
         circle at var(--circle-pos),
         transparent var(--tab-grad),
-        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + 0.3px),
-        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px)),
-        hsla(var(--b1) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
+        var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
+        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
+        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
       );
 }
 
@@ -9380,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;
@@ -9841,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;
@@ -14125,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;
@@ -14586,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;
@@ -18871,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;
@@ -19332,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;
@@ -23617,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;
@@ -24078,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;
@@ -28363,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;
@@ -28824,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;
@@ -33109,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;
@@ -33570,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;
       }
@@ -2993,6 +2997,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;
@@ -3164,8 +3172,6 @@
     --tw-text-opacity:1;
     color:hsla(var(--b1) / var(--tw-text-opacity, 1));
   }.tab{
-  --tw-text-opacity:1;
-  color:hsla(var(--bc) / var(--tw-text-opacity, 1));
   --tw-text-opacity:0.5
 }
 
@@ -3174,6 +3180,10 @@
 }
 
 .tab{
+  --tab-color:hsla(var(--bc) / var(--tw-text-opacity, 1));
+  --tab-bg:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+  --tab-border-color:hsla(var(--b3) / var(--tw-bg-opacity, 1));
+  color:var(--tab-color);
   padding-left:var(--tab-padding, 1rem);
   padding-right:var(--tab-padding, 1rem);
 }
@@ -3181,8 +3191,6 @@
 .tab.tab-active{
     border-color:hsla(var(--bc) / var(--tw-border-opacity, 1));
     --tw-border-opacity:1;
-    --tw-text-opacity:1;
-    color:hsla(var(--bc) / var(--tw-text-opacity, 1));
   }
 
 .tab:focus{
@@ -3206,22 +3214,21 @@
   border-top-left-radius:var(--tab-radius, .5rem);
   border-top-right-radius:var(--tab-radius, .5rem);
   border:0 solid transparent;
-  border-bottom:var(--tab-border, 1px) solid hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+  border-bottom:var(--tab-border, 1px) solid var(--tab-border-color);
   padding-left:var(--tab-padding, 1rem);
   padding-right:var(--tab-padding, 1rem);
   padding-top:var(--tab-border, 1px);
 }
 
 .tab-lifted.tab-active{
-    --tw-bg-opacity:1;
-    background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+    background-color:var(--tab-bg);
     border-left-width:var(--tab-border, 1px);
     border-bottom-width:0;
     border-right-width:var(--tab-border, 1px);
     border-top-width:var(--tab-border, 1px);
-    border-left-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
-    border-right-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
-    border-top-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+    border-left-color:var(--tab-border-color);
+    border-right-color:var(--tab-border-color);
+    border-top-color:var(--tab-border-color);
     padding-left:calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
     padding-right:calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
     padding-bottom:var(--tab-border, 1px);
@@ -3240,9 +3247,9 @@
       --tab-corner-bg:radial-gradient(
         circle at var(--circle-pos),
         transparent var(--tab-grad),
-        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + 0.3px),
-        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px)),
-        hsla(var(--b1) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
+        var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
+        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
+        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
       );
     }