make vf-transition require a string

canonical · Aug 24, 2022 · ad47282 · ad47282
1 parent 480eb90
commit ad47282
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 22 deletions.
diff --git a/scss/_layouts_application.scss b/scss/_layouts_application.scss
@@ -64,13 +64,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   // Navigation panel/drawer
   // -------------------------
   .l-navigation {
-    @include vf-transition(
-      $property: (
-        transform,
-        box-shadow,
-      ),
-      $duration: fast
-    );
+    @include vf-transition($property: #{transform, box-shadow}, $duration: fast);
 
     bottom: 0;
     box-shadow: $panel-drop-shadow;
@@ -117,13 +111,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
     }
 
     .l-navigation {
-      @include vf-transition(
-        $property: (
-          width,
-          box-shadow,
-        ),
-        $duration: fast
-      );
+      @include vf-transition($property: #{width, box-shadow}, $duration: fast);
 
       box-shadow: $panel-drop-shadow-transparent;
       overflow: hidden;
@@ -246,13 +234,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   }
 
   .l-aside {
-    @include vf-transition(
-      $property: (
-        transform,
-        box-shadow,
-      ),
-      $duration: snap
-    );
+    @include vf-transition($property: #{transform, box-shadow}, $duration: snap);
 
     box-shadow: $panel-drop-shadow;
     grid-area: main;

diff --git a/scss/_settings_animations.scss b/scss/_settings_animations.scss
@@ -13,8 +13,11 @@ $animation-easing: (
 );
 
 @mixin vf-transition($property: all, $duration: brisk, $easing: out) {
+  @if (type-of($property) != string) {
+    @error "vf-transition $property must be a string";
+  }
   transition-duration: map-get($animation-duration, $duration);
-  transition-property: $property;
+  transition-property: unquote($property);
   transition-timing-function: map-get($animation-easing, $easing);
 }