daisyui 1.21.0 → 1.23.0

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.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)
+
+
+### 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)
 
 

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.1/dist/full.css" rel="stylesheet" type="text/css" />
+<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/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;
@@ -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;
@@ -2457,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);
 }
@@ -2502,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;
@@ -2755,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{
@@ -3900,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;
@@ -4227,6 +4280,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;
 }
@@ -4466,8 +4570,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{
@@ -4491,22 +4593,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);
@@ -4525,9 +4626,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)
       );
 }
 
@@ -4749,30 +4850,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));
 }
@@ -9410,6 +9487,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;
@@ -14135,6 +14232,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;
@@ -18861,6 +18978,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;
@@ -23587,6 +23724,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;
@@ -28313,6 +28470,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;
@@ -33039,6 +33216,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;