fix: transition duration

akijoey · May 2, 2024 · 46659c9 · 46659c9
1 parent 6f6130e
commit 46659c9
Show file tree

Hide file tree

Showing 11 changed files with 16 additions and 19 deletions.
diff --git a/src/base/common.scss b/src/base/common.scss
@@ -29,7 +29,7 @@
 :where(a) {
   color: currentcolor;
   text-decoration: none;
-  transition: $duration-base;
+  transition-duration: $duration-base;
 
   &:hover {
     color: $blue-500;

diff --git a/src/components/details.scss b/src/components/details.scss
@@ -18,7 +18,7 @@
       background-position: center;
       background-size: 1em 0.75em;
       transform: rotate(-90deg);
-      transition: $duration-base;
+      transition-duration: $duration-base;
 
       @include themeify {
         background-image: icon-arrow(themed('dark'));

diff --git a/src/components/meter.scss b/src/components/meter.scss
@@ -13,7 +13,7 @@
   @mixin meter-value($level) {
     background-size: 0.75rem 0.75rem;
     border-radius: 0.5rem;
-    transition: $duration-slow;
+    transition-duration: $duration-slow;
     @include gradient-striped;
 
     @include themeify {

diff --git a/src/components/progress.scss b/src/components/progress.scss
@@ -13,7 +13,7 @@
   @mixin progress-value {
     background-size: 0.75rem 0.75rem;
     border-radius: 0.5rem;
-    transition: $duration-slow;
+    transition-duration: $duration-slow;
     @include gradient-striped;
 
     @include themeify {

diff --git a/src/components/tooltip.scss b/src/components/tooltip.scss
@@ -12,7 +12,7 @@
     left: 50%;
     display: block;
     pointer-events: none;
-    transition: $duration-base;
+    transition-duration: $duration-base;
     visibility: hidden;
     opacity: 0;
   }

diff --git a/src/forms/input.scss b/src/forms/input.scss
@@ -5,7 +5,7 @@
 @use '../utils/icons' as *;
 
 :where(input) {
-  transition: $duration-fast;
+  transition-duration: $duration-fast;
   @extend %control;
 
   // button type
@@ -48,7 +48,7 @@
   &[type='search' i] {
     &::-webkit-search-cancel-button {
       cursor: pointer;
-      transition: $duration-fast;
+      transition-duration: $duration-fast;
     }
   }
 
@@ -71,7 +71,7 @@
       cursor: pointer;
       background-color: $gray-500;
       border: none;
-      transition: $duration-fast;
+      transition-duration: $duration-fast;
       appearance: none;
     }
 
@@ -110,7 +110,7 @@
       background-image: icon-circle($gray, 3);
       background-position: left center;
       border-radius: 0.5em;
-      transition: $duration-base;
+      transition-duration: $duration-base;
 
       &:checked {
         background-image: icon-circle($white, 3);
@@ -177,7 +177,7 @@
       background-position: center;
       background-size: contain;
       border-radius: 1rem;
-      transition: $duration-fast;
+      transition-duration: $duration-fast;
       appearance: none;
 
       @include themeify {
@@ -253,7 +253,7 @@
       height: 1rem;
       border: thin solid $gray-500;
       border-radius: $radius-xs;
-      transition: $duration-fast;
+      transition-duration: $duration-fast;
     }
 
     &::-webkit-color-swatch-wrapper {

diff --git a/src/forms/option.scss b/src/forms/option.scss
@@ -2,7 +2,7 @@
 
 :where(option) {
   padding: 0.375rem 0.75rem;
-  transition: $duration-fast;
+  transition-duration: $duration-fast;
 
   &:checked {
     background-color: $gray-200;

diff --git a/src/forms/select.scss b/src/forms/select.scss
@@ -13,7 +13,7 @@
   background-position: right 0.75rem center;
   background-size: 1rem 0.75rem;
   border-radius: $radius-sm;
-  transition: $duration-fast;
+  transition-duration: $duration-fast;
   appearance: none;
   @extend %control;
 

diff --git a/src/forms/textarea.scss b/src/forms/textarea.scss
@@ -5,7 +5,7 @@
   width: 100%;
   padding: 0.375rem 0.75rem;
   border-radius: $radius-sm;
-  transition: $duration-fast;
+  transition-duration: $duration-fast;
   appearance: none;
   @extend %text;
   @extend %control;

diff --git a/src/utils/extends.scss b/src/utils/extends.scss
@@ -47,7 +47,7 @@
   color: $gray-100;
   cursor: pointer;
   border-radius: $radius-sm;
-  transition: $duration-fast;
+  transition-duration: $duration-fast;
   appearance: none;
 
   &:focus-visible {

diff --git a/src/utils/mixins.scss b/src/utils/mixins.scss
@@ -76,10 +76,7 @@
 
 @mixin fixed-center {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   margin: auto;
 }