feat: follow OS reduced motion setting (#1757)

- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference

Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>

1 files changed, 13 insertions, 6 deletions

diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index b1e148ca0..e8297408d 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -11,9 +11,10 @@
   }
 }
 
-
 .franz-form {
-  .franz-form__radio-wrapper { display: flex; }
+  .franz-form__radio-wrapper {
+    display: flex;
+  }
 
   .franz-form__radio {
     border: 2px solid $theme-gray-lighter;
@@ -24,18 +25,24 @@
     margin-right: 20px;
     padding: 11px;
     text-align: center;
-    transition: background $theme-transition-time;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background $theme-transition-time;
+    }
 
-    &:last-of-type { margin-right: 0; }
+    &:last-of-type {
+      margin-right: 0;
+    }
 
     &.is-selected {
-      background: #FFF;
+      background: #fff;
       border-width: 2px;
       border-style: solid;
       border-color: $theme-brand-primary;
       color: $theme-brand-primary;
     }
 
-    input { display: none; }
+    input {
+      display: none;
+    }
   }
 }