daisyui 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.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.21.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" />
 ```
 

package/dist/full.css

@@ -2273,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;
@@ -4227,6 +4245,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;
 }
@@ -9410,6 +9479,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 +14224,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 +18970,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 +23716,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 +28462,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 +33208,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;

package/dist/styled.css

@@ -874,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;
@@ -2802,7 +2808,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;