daisyui 1.21.0 → 1.23.0

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;
@@ -3084,8 +3164,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
 }
 
@@ -3094,6 +3172,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);
 }
@@ -3101,8 +3183,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{
@@ -3126,22 +3206,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);
@@ -3160,9 +3239,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)
       );
     }