daisyui 1.22.0 → 1.23.1

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* [#321](https://github.com/saadeghi/daisyui/issues/321) (modal overscroll-behavior) ([fc5000e](https://github.com/saadeghi/daisyui/commit/fc5000e8996f2a9d1a7a5971400f119494ebe1c7))
+
+### [1.22.1](https://github.com/saadeghi/daisyui/compare/v1.22.0...v1.22.1) (2022-01-12)
+
+
+### Bug Fixes
+
+* [#394](https://github.com/saadeghi/daisyui/issues/394) prevent toggle from shrinking by default ([2676cc8](https://github.com/saadeghi/daisyui/commit/2676cc8b5fff495129f466175ccf7f9087dafb59))
+* **breadcrumbs:** Remove the breadcrumb separator background color ([6ec8f5e](https://github.com/saadeghi/daisyui/commit/6ec8f5e92a8a113a4b0f398a6fc78eaf58f765f1))
+
 ## [1.22.0](https://github.com/saadeghi/daisyui/compare/v1.20.1...v1.22.0) (2022-01-08)
 
 

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.21.0/dist/full.css" rel="stylesheet" type="text/css" />
+<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/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
 ```
 
@@ -154,7 +154,7 @@ Read the documents for more info:
   - [x] Checkbox
   - [x] Radio
   - [x] Range slider
-  - [ ] Rating
+  - [x] Rating
   - [x] Toggle
   - [ ] Upload
 - [x] Hero
@@ -218,6 +218,10 @@ Read the documents for more info:
 - Courses
   - [Building with SvelteKit and GraphCMS](https://explorers.netlify.com/learn/building-with-sveltekit-and-graphcms)
   - [Svelte for Beginners by Mike Karan](https://www.udemy.com/course/svelte-for-beginners/)
+  - [React Front To Back 2022 by Brad Traversy](https://www.udemy.com/course/react-front-to-back-2022/)
+  - [Build Instagram profile page UI clone w/Next.js TailwindCSS](https://www.udemy.com/course/build-instagram-profile-page-ui-clone-nextjs-tailwindcss/)
+  - [Instagram UI Clone Login Page w/ NextJS & TailwindCSS](https://www.udemy.com/course/instagram-ui-clone-login-page-w-nextjs-tailwindcss/)
+  - [Build your Developer Portfolio and Blog from Scratch with Svelte and GraphCMS](https://www.freecodecamp.org/news/build-your-developer-portfolio-from-scratch-with-sveltekit-and-graphcms/)
 
 </details>
 
@@ -254,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

@@ -2177,6 +2177,9 @@ html{
   transition-duration:.15s;
   transition-duration:.2s;
   transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  overflow-y:hidden;
+  -ms-scroll-chaining:none;
+  overscroll-behavior:contain;
 }
 
 @media (min-width:640px){
@@ -2196,6 +2199,33 @@ html{
   }
 }
 
+.modal-box{
+  max-height:calc(100vh - 5em);
+  --tw-bg-opacity:1;
+  background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+  padding:1.5rem;
+  width:100%;
+  --tw-translate-x:0;
+  --tw-translate-y:0;
+  --tw-translate-y:2.5rem;
+  --tw-rotate:0;
+  --tw-skew-x:0;
+  --tw-skew-y:0;
+  --tw-scale-x:1;
+  --tw-scale-y:1;
+  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-duration:.15s;
+  transition-duration:.2s;
+  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  border-top-left-radius:var(--rounded-box, 1rem);
+  border-top-right-radius:var(--rounded-box, 1rem);
+  box-shadow:0 25px 50px -12px rgba(0, 0, 0, .25);
+  overflow-y:auto;
+  -ms-scroll-chaining:none;
+  overscroll-behavior:contain;
+}
+
 .modal-open,.modal-toggle:checked+.modal,.modal:target{
   opacity:1;
   pointer-events:auto;
@@ -2475,9 +2505,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);
 }
@@ -2520,6 +2552,31 @@ html{
   box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsla(var(--bc) / .2);
 }
 
+.toggle{
+  flex-shrink:0;
+  --chkbg:hsla(var(--bc) / .2);
+  --focus-shadow:0 0 0;
+  --handleoffset:1.5rem;
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+  --tw-bg-opacity:1;
+  --tw-bg-opacity:0.2;
+  background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
+  --tw-border-opacity:1;
+  --tw-border-opacity:0.2;
+  border-color:hsla(var(--bc) / var(--tw-border-opacity, 1));
+  border-width:1px;
+  cursor:pointer;
+  height:1.5rem;
+  width:3rem;
+  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  transition-duration:.3s;
+  border-radius:var(--rounded-badge, 1.9rem);
+  transition:background,box-shadow var(--animation-input, .2s) ease-in-out;
+  box-shadow:calc(var(--handleoffset)*-1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
+}
+
 .toggle:focus{
   outline:2px solid transparent;
   outline-offset:2px;
@@ -2773,6 +2830,7 @@ html{
   transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   border-top:1px solid;
   border-right:1px solid;
+  background-color:transparent;
 }
 
 .btn:active:focus,.btn:active:hover{
@@ -3918,29 +3976,6 @@ html{
   margin-top:-25px;
 }
 
-.modal-box{
-  --tw-bg-opacity:1;
-  background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
-  padding:1.5rem;
-  width:100%;
-  --tw-translate-x:0;
-  --tw-translate-y:0;
-  --tw-translate-y:2.5rem;
-  --tw-rotate:0;
-  --tw-skew-x:0;
-  --tw-skew-y:0;
-  --tw-scale-x:1;
-  --tw-scale-y:1;
-  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-  transition-duration:.15s;
-  transition-duration:.2s;
-  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
-  border-top-left-radius:var(--rounded-box, 1rem);
-  border-top-right-radius:var(--rounded-box, 1rem);
-  box-shadow:0 25px 50px -12px rgba(0, 0, 0, .25);
-}
-
 .modal-open .modal-box,.modal-toggle:checked+.modal .modal-box,.modal:target .modal-box{
   --tw-scale-x:1;
   --tw-scale-y:1;
@@ -4391,6 +4426,11 @@ html{
   color:hsla(var(--bc) / var(--tw-placeholder-opacity, 1));
 }
 
+.select-multiple,.select[multiple]{
+  background-image:none;
+  padding-right:1rem;
+}
+
 .stat+.stat{
   --tw-border-opacity:1;
   --tw-border-opacity:0.1;
@@ -4535,8 +4575,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{
@@ -4560,22 +4598,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);
@@ -4594,9 +4631,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)
       );
 }
 
@@ -4818,30 +4855,6 @@ html{
   color:hsla(var(--bc) / var(--tw-placeholder-opacity, 1));
 }
 
-.toggle{
-  --chkbg:hsla(var(--bc) / .2);
-  --focus-shadow:0 0 0;
-  --handleoffset:1.5rem;
-  -webkit-appearance:none;
-  -moz-appearance:none;
-  appearance:none;
-  --tw-bg-opacity:1;
-  --tw-bg-opacity:0.2;
-  background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
-  --tw-border-opacity:1;
-  --tw-border-opacity:0.2;
-  border-color:hsla(var(--bc) / var(--tw-border-opacity, 1));
-  border-width:1px;
-  cursor:pointer;
-  height:1.5rem;
-  width:3rem;
-  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
-  transition-duration:.3s;
-  border-radius:var(--rounded-badge, 1.9rem);
-  transition:background,box-shadow var(--animation-input, .2s) ease-in-out;
-  box-shadow:calc(var(--handleoffset)*-1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
-}
-
 .toggle:focus-visible{
   --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
 }

package/dist/styled.css

@@ -818,6 +818,10 @@
   z-index:999;
 }
 
+.modal-box{
+  max-height:calc(100vh - 5em);
+}
+
 .modal-open,.modal-toggle:checked+.modal,.modal:target{
   opacity:1;
   pointer-events:auto;
@@ -1029,10 +1033,14 @@
     outline:2px solid transparent;
     outline-offset:2px;
   }
-.toggle:focus{
+.toggle{
+  flex-shrink:0;
+}
+  .toggle:focus{
     outline:2px solid transparent;
     outline-offset:2px;
-  }.tooltip{
+  }
+.tooltip{
   display:inline-block;
   position:relative;
   --tooltip-offset:calc(100% + 1px + var(--tooltip-tail, 0px));
@@ -1284,6 +1292,7 @@
         --tw-rotate:45deg;
         border-top:1px solid;
         border-right:1px solid;
+        background-color:transparent;
       }.btn{
   font-weight:600;
   text-transform:uppercase;
@@ -2494,6 +2503,9 @@
   transition-duration:.15s;
   transition-timing-function:cubic-bezier(.4, 0, .2, 1);
   transition-duration:.2s;
+  overflow-y:hidden;
+  -ms-scroll-chaining:none;
+      overscroll-behavior:contain;
 }
 
 .modal-box{
@@ -2531,6 +2543,9 @@
 
 .modal-box{
   box-shadow:0 25px 50px -12px rgba(0, 0, 0, .25);
+  overflow-y:auto;
+  -ms-scroll-chaining:none;
+      overscroll-behavior:contain;
 }
 
 .modal-open .modal-box,.modal-toggle:checked+.modal .modal-box,.modal:target .modal-box{
@@ -2978,6 +2993,10 @@
   .select-disabled,.select[disabled]{
     --tw-text-opacity:0.2;
   }
+  .select-multiple,.select[multiple]{
+    background-image:none;
+    padding-right:1rem;
+  }
 .stack{
   place-items:center;
   align-items:flex-end;
@@ -3149,8 +3168,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
 }
 
@@ -3159,6 +3176,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);
 }
@@ -3166,8 +3187,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{
@@ -3191,22 +3210,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);
@@ -3225,9 +3243,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)
       );
     }