Convert $base-duration to css custom property

Author: edwardloveall

app/assets/builds/administrate/application.css

@@ -56,7 +56,7 @@ textarea {
   border: $base-border;
   border-radius: $base-border-radius;
   padding: 0.5em;
-  transition: border-color $base-duration var(--base-timing);
+  transition: border-color var(--base-duration) var(--base-timing);
   width: 100%;
 
   &:hover {

app/assets/builds/administrate/application.css.map

@@ -30,7 +30,7 @@ a,
 ) {
   color: $action-color;
   text-decoration-skip-ink: auto;
-  transition: color $base-duration var(--base-timing);
+  transition: color var(--base-duration) var(--base-timing);
 
   &:hover {
     color: mix($black, $action-color, 25%);

app/assets/stylesheets/administrate/base/_forms.scss

@@ -17,7 +17,7 @@ button,
   line-height: 1;
   padding: $small-spacing $base-spacing;
   text-decoration: none;
-  transition: background-color $base-duration var(--base-timing);
+  transition: background-color var(--base-duration) var(--base-timing);
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;

app/assets/stylesheets/administrate/base/_typography.scss

@@ -5,7 +5,7 @@
   svg {
     fill: $hint-grey;
     height: 13px;
-    transition: transform $base-duration var(--base-timing);
+    transition: transform var(--base-duration) var(--base-timing);
     width: 13px;
   }
 }
@@ -16,7 +16,7 @@
   a {
     color: inherit;
     display: inline-block;
-    transition: color $base-duration var(--base-timing);
+    transition: color var(--base-duration) var(--base-timing);
     width: 100%;
   }
 

app/assets/stylesheets/administrate/components/_buttons.scss

@@ -13,8 +13,8 @@ $navigation-link-padding: 0.6em;
   line-height: 1;
   margin-left: -($navigation-link-padding);
   padding: $navigation-link-padding;
-  transition: background-color $base-duration var(--base-timing),
-              color $base-duration var(--base-timing);
+  transition: background-color var(--base-duration) var(--base-timing),
+              color var(--base-duration) var(--base-timing);
 
   &:not(:last-of-type) {
     margin-bottom: $small-spacing;

app/assets/stylesheets/administrate/components/_cells.scss

@@ -37,7 +37,7 @@ $search-icon-size: 1rem;
   fill: $grey-5;
   height: $search-icon-size;
   position: absolute;
-  transition: fill $base-duration var(--base-timing);
+  transition: fill var(--base-duration) var(--base-timing);
   width: $search-icon-size;
 
   &:hover {

app/assets/stylesheets/administrate/components/_navigation.scss

@@ -62,10 +62,10 @@ $flashes: (
 $base-border-color: $grey-1 !default;
 $base-border: 1px solid $base-border-color !default;
 
-// Transitions
-$base-duration: 250ms !default;
 
 :root {
+  // Transitions
+  --base-duration: 250ms;
   --base-timing: ease-in-out;
 }