daisyui 1.20.0 → 1.22.1

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.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)
+
+
+### Bug Fixes
+
+* [#369](https://github.com/saadeghi/daisyui/issues/369) ([7b1b52b](https://github.com/saadeghi/daisyui/commit/7b1b52b71561e86dedf3e69f98e08143ed6a762a))
+
 ## [1.20.0](https://github.com/saadeghi/daisyui/compare/v1.19.0...v1.20.0) (2021-12-26)
 
 

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

package/dist/full.css

@@ -1541,6 +1541,14 @@ html{
   overflow:hidden;
 }
 
+.drawer.drawer-end{
+  direction:rtl;
+}
+
+.drawer.drawer-end>*{
+  direction:ltr;
+}
+
 .drawer.drawer-end .drawer-toggle~.drawer-side>.drawer-overlay+*{
   justify-self:end;
   --tw-translate-x:100%;
@@ -1692,6 +1700,7 @@ html{
   .drawer-mobile.drawer-end{
     grid-auto-columns:auto -webkit-max-content;
     grid-auto-columns:auto max-content;
+    direction:ltr;
   }
 
   .drawer-mobile.drawer-end>.drawer-toggle~.drawer-content{
@@ -2264,6 +2273,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;
@@ -2493,6 +2520,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;
@@ -2746,6 +2798,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{
@@ -4218,6 +4271,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;
 }
@@ -4635,12 +4739,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;
 }
@@ -4746,30 +4844,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));
 }
@@ -9407,6 +9481,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;
@@ -9771,6 +9865,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;
@@ -14120,6 +14226,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;
@@ -14483,6 +14609,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){
@@ -18834,6 +18972,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;
@@ -19197,6 +19355,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){
@@ -23548,6 +23718,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;
@@ -23911,6 +24101,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){
@@ -28262,6 +28464,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;
@@ -28625,6 +28847,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){
@@ -32976,6 +33210,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;
@@ -33339,5 +33593,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

@@ -319,6 +319,12 @@
   display:grid;
   overflow:hidden;
 }
+  .drawer.drawer-end{
+    direction:rtl;
+  }
+  .drawer.drawer-end>*{
+    direction:ltr;
+  }
   .drawer.drawer-end .drawer-toggle~.drawer-side>.drawer-overlay+*{
       justify-self:end;
       --tw-translate-x:100%;
@@ -424,6 +430,7 @@
   .drawer-mobile.drawer-end{
     grid-auto-columns:auto -webkit-max-content;
     grid-auto-columns:auto max-content;
+    direction:ltr;
   }
       .drawer-mobile.drawer-end>.drawer-toggle~.drawer-content{
         height:auto;
@@ -867,6 +874,12 @@
 }
   .range:focus{
     outline:none;
+  }.rating{
+  display:inline-flex;
+  position:relative;
+}
+  .rating :where(input){
+    cursor:pointer;
   }.select{
   -webkit-appearance:none;
      -moz-appearance:none;
@@ -1016,10 +1029,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));
@@ -1271,6 +1288,7 @@
         --tw-rotate:45deg;
         border-top:1px solid;
         border-right:1px solid;
+        background-color:transparent;
       }.btn{
   font-weight:600;
   text-transform:uppercase;
@@ -2795,7 +2813,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;
@@ -3265,11 +3342,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));