From 46659c9d3c82e2f565b9c1d9bd83d10cb1b3bc2c Mon Sep 17 00:00:00 2001
From: akijoey <akijoey@akijoey.com>
Date: Thu, 2 May 2024 07:49:35 +0000
Subject: [PATCH] fix: transition duration

---
 src/base/common.scss         |  2 +-
 src/components/details.scss  |  2 +-
 src/components/meter.scss    |  2 +-
 src/components/progress.scss |  2 +-
 src/components/tooltip.scss  |  2 +-
 src/forms/input.scss         | 12 ++++++------
 src/forms/option.scss        |  2 +-
 src/forms/select.scss        |  2 +-
 src/forms/textarea.scss      |  2 +-
 src/utils/extends.scss       |  2 +-
 src/utils/mixins.scss        |  5 +----
 11 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/base/common.scss b/src/base/common.scss
index a3950bd..f7932d6 100644
--- 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
index c6450f2..41b2ec2 100644
--- 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
index 574a2bb..225cf93 100644
--- 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
index d5d444a..2de9986 100644
--- 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
index 1d7ace5..9d915ce 100644
--- 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
index a6db872..6c32b9c 100644
--- 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
index 617989f..5a7fa05 100644
--- 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
index 6baeec5..869b7e2 100644
--- 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
index e34dc60..0bb0189 100644
--- 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
index d7b10aa..4305720 100644
--- 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
index 7858bd5..f81b5a6 100644
--- 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;
 }