daisyui 1.20.1 → 1.22.2

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.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)
+
+
+### Features
+
+* add rating component (fix [#374](https://github.com/saadeghi/daisyui/issues/374)) ([6285227](https://github.com/saadeghi/daisyui/commit/6285227ffbf9818b9bc2d8be1a4a5a610ad09954))
+* responsive table compact (fix [#364](https://github.com/saadeghi/daisyui/issues/364)) ([6e3d9b1](https://github.com/saadeghi/daisyui/commit/6e3d9b1074a3f1b02af27d102c3b13e30427f511))
+
+## [1.21.0](https://github.com/saadeghi/daisyui/compare/v1.20.1...v1.21.0) (2022-01-01)
+
+
+### Features
+
+* responsive table compact (fix [#364](https://github.com/saadeghi/daisyui/issues/364)) ([6e3d9b1](https://github.com/saadeghi/daisyui/commit/6e3d9b1074a3f1b02af27d102c3b13e30427f511))
+
 ### [1.20.1](https://github.com/saadeghi/daisyui/compare/v1.20.0...v1.20.1) (2021-12-30)
 
 

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.20.0/dist/full.css" rel="stylesheet" type="text/css" />
+<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/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>
 

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;
@@ -2273,6 +2303,24 @@ html{
   outline:none;
 }
 
+.rating{
+  display:inline-flex;
+  position:relative;
+}
+
+.rating :where(input){
+  cursor:pointer;
+  -webkit-animation:rating-pop var(--animation-input, .25s) ease-out;
+  animation:rating-pop var(--animation-input, .25s) ease-out;
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+  background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
+  --tw-bg-opacity:1;
+  height:1.5rem;
+  width:1.5rem;
+}
+
 .select{
   -webkit-appearance:none;
   -moz-appearance:none;
@@ -2502,6 +2550,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;
@@ -2755,6 +2828,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{
@@ -3900,29 +3974,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;
@@ -4227,6 +4278,57 @@ html{
   --range-shdw:var(--a);
 }
 
+.rating .rating-hidden{
+  background-color:transparent;
+  width:.5rem;
+}
+
+.rating input:checked~input{
+  --tw-bg-opacity:0.2;
+}
+
+.rating input:focus-visible{
+  transition-property:transform;
+  transition-duration:.15s;
+  transition-duration:.3s;
+  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  transform:translateY(-.125em);
+}
+
+.rating input:active:focus{
+  -webkit-animation:none;
+  animation:none;
+  transform:translateY(-.125em);
+}
+
+@-webkit-keyframes rating-pop{
+  0%{
+    transform:translateY(-.125em);
+  }
+
+  40%{
+    transform:translateY(-.125em);
+  }
+
+  to{
+    transform:translateY(0);
+  }
+}
+
+@keyframes rating-pop{
+  0%{
+    transform:translateY(-.125em);
+  }
+
+  40%{
+    transform:translateY(-.125em);
+  }
+
+  to{
+    transform:translateY(0);
+  }
+}
+
 .select-bordered{
   --tw-border-opacity:0.2;
 }
@@ -4644,12 +4746,6 @@ html{
   background-color:hsla(var(--b2) / var(--tw-bg-opacity, 1));
 }
 
-.table-compact td,.table-compact th{
-  font-size:.875rem;
-  line-height:1.25rem;
-  padding:.5rem;
-}
-
 .textarea-bordered{
   --tw-border-opacity:0.2;
 }
@@ -4755,30 +4851,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));
 }
@@ -9416,6 +9488,26 @@ html{
   width:2rem;
 }
 
+.rating-xs input{
+  height:.75rem;
+  width:.75rem;
+}
+
+.rating-sm input{
+  height:1rem;
+  width:1rem;
+}
+
+.rating-md input{
+  height:1.5rem;
+  width:1.5rem;
+}
+
+.rating-lg input{
+  height:2.5rem;
+  width:2.5rem;
+}
+
 .select-md{
   height:3rem;
   font-size:.875rem;
@@ -9780,6 +9872,18 @@ html{
   margin-left:50%;
 }
 
+.table-normal :where(th,td){
+  font-size:1rem;
+  line-height:1.5rem;
+  padding:1rem;
+}
+
+.table-compact :where(th,td){
+  font-size:.875rem;
+  line-height:1.25rem;
+  padding:.5rem;
+}
+
 @media (min-width:640px){
   .sm\:animate-none{
     -webkit-animation:none;
@@ -14129,6 +14233,26 @@ html{
     width:2rem;
   }
 
+  .sm\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .sm\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .sm\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .sm\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .sm\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -14492,6 +14616,18 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .sm\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .sm\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 
 @media (min-width:768px){
@@ -18843,6 +18979,26 @@ html{
     width:2rem;
   }
 
+  .md\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .md\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .md\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .md\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .md\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -19206,6 +19362,18 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .md\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .md\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 
 @media (min-width:1024px){
@@ -23557,6 +23725,26 @@ html{
     width:2rem;
   }
 
+  .lg\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .lg\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .lg\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .lg\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .lg\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -23920,6 +24108,18 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .lg\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .lg\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 
 @media (min-width:1280px){
@@ -28271,6 +28471,26 @@ html{
     width:2rem;
   }
 
+  .xl\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .xl\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .xl\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .xl\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .xl\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -28634,6 +28854,18 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .xl\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .xl\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 
 @media (min-width:1536px){
@@ -32985,6 +33217,26 @@ html{
     width:2rem;
   }
 
+  .\32xl\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .\32xl\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .\32xl\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .\32xl\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .\32xl\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -33348,5 +33600,17 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .\32xl\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .\32xl\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 

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;
@@ -874,6 +878,12 @@
 }
   .range:focus{
     outline:none;
+  }.rating{
+  display:inline-flex;
+  position:relative;
+}
+  .rating :where(input){
+    cursor:pointer;
   }.select{
   -webkit-appearance:none;
      -moz-appearance:none;
@@ -1023,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));
@@ -1278,6 +1292,7 @@
         --tw-rotate:45deg;
         border-top:1px solid;
         border-right:1px solid;
+        background-color:transparent;
       }.btn{
   font-weight:600;
   text-transform:uppercase;
@@ -2488,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{
@@ -2525,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{
@@ -2802,7 +2823,66 @@
   }
   .range-accent{
     --range-shdw:var(--a);
-  }.select{
+  }.rating :where(input){
+    -webkit-animation:rating-pop var(--animation-input, .25s) ease-out;
+            animation:rating-pop var(--animation-input, .25s) ease-out;
+    -webkit-appearance:none;
+       -moz-appearance:none;
+            appearance:none;
+    background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
+    --tw-bg-opacity:1;
+    height:1.5rem;
+    width:1.5rem;
+  }
+  .rating .rating-hidden{
+    background-color:transparent;
+    width:.5rem;
+  }
+  .rating input:checked~input{
+    --tw-bg-opacity:0.2;
+  }
+  .rating input:focus-visible{
+    transition-property:transform;
+    transition-duration:.15s;
+    transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+    transition-duration:.3s;
+    transform:translateY(-.125em);
+  }
+  .rating input:active:focus{
+    -webkit-animation:none;
+            animation:none;
+  }
+  .rating input:active:focus{
+    transform:translateY(-.125em);
+  }
+
+@-webkit-keyframes rating-pop{
+  0%{
+    transform:translateY(-.125em);
+  }
+
+  40%{
+    transform:translateY(-.125em);
+  }
+
+  to{
+    transform:translateY(0);
+  }
+}
+
+@keyframes rating-pop{
+  0%{
+    transform:translateY(-.125em);
+  }
+
+  40%{
+    transform:translateY(-.125em);
+  }
+
+  to{
+    transform:translateY(0);
+  }
+}.select{
   --tw-bg-opacity:1;
   background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
   --tw-border-opacity:1;
@@ -3272,11 +3352,6 @@
         --tw-bg-opacity:1;
         background-color:hsla(var(--b2) / var(--tw-bg-opacity, 1));
       }
-  .table-compact td,.table-compact th{
-      font-size:.875rem;
-      line-height:1.25rem;
-      padding:.5rem;
-    }
 .textarea{
   --tw-bg-opacity:1;
   background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));