Transition mixin: enable multiple property as string

conedevelopment · Nov 23, 2023 · 70e6035 · 70e6035
1 parent 853534c
commit 70e6035
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/preview/assets/scss/config/_config.scss b/preview/assets/scss/config/_config.scss
@@ -41,6 +41,9 @@ $spacer: 1.25rem;
     'border-radius': 0.25em,
     'text-transform': uppercase,
   ),
+  $form-fieldset: (
+    'legend-font-family': serif,
+  ),
   $form-range: (
     'thumb-block-size': 2rem,
     'thumb-inline-size': 2rem,
@@ -56,4 +59,7 @@ $spacer: 1.25rem;
   $layout: (
     'container-inline-size': 70rem,
   ),
+  $typography: (
+    'letter-spacing-heading': 0.05em,
+  ),
 );
diff --git a/preview/pug/page/form.pug b/preview/pug/page/form.pug
@@ -10,7 +10,7 @@ block content
       legend Inputs
       div(class='form-group')
         label(for='email-address' class='form-label') Email address
-        input(class='form-control' id='email-address' type='email')
+        input(class='form-control' id='email-address' type='email' placeholder='[email protected]')
       div(class='form-group')
         label(for='number' class='form-label') Number
         input(class='form-control' id='number' type='number')

diff --git a/scss/mixin/_transition.scss b/scss/mixin/_transition.scss
@@ -1,3 +1,4 @@
+@use 'sass:string';
 @use '../function' as *;
 
 /// Generates transition related declarations.
@@ -16,7 +17,7 @@
   } @else {
     transition-duration: $duration;
   }
-  transition-property: $property;
+  transition-property: string.unquote($property);
   @if $timing-function == timing-function {
     transition-timing-function: transition($timing-function);
   } @else {