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, 15 insertions, 14 deletions

diff --git a/src/styles/slider.scss b/src/styles/slider.scss
index 8bb771586..85b31660f 100644
--- a/src/styles/slider.scss
+++ b/src/styles/slider.scss
@@ -3,43 +3,44 @@
 .theme__dark .franz-form .franz-form__slider-wrapper .slider {
   border: 1px solid $dark-theme-gray;
   background: $dark-theme-gray;
-
 }
 
-
 .franz-form {
-  .franz-form__slider-wrapper { 
+  .franz-form__slider-wrapper {
     display: flex;
     flex-direction: row;
 
-    .franz-form__label { margin-left: 20px; }
+    .franz-form__label {
+      margin-left: 20px;
+    }
 
     .slider-container {
-      width: 100%; /* Width of the outside container */ 
+      width: 100%; /* Width of the outside container */
     }
-      
+
     /* The slider itself */
     .slider {
       -webkit-appearance: none;
       width: 100%;
       height: 14px;
-      border-radius: $theme-border-radius;  
+      border-radius: $theme-border-radius;
       background: $theme-gray-lighter;
       outline: none;
-      opacity: 1.0;
-      -webkit-transition: .2s;
-      transition: opacity .2s;
+      opacity: 1;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: opacity 0.2s;
+      }
     }
-    
+
     .slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
       width: 14px;
       height: 14px;
-      border-radius: 50%; 
+      border-radius: 50%;
       background: $theme-brand-primary;
-      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
       cursor: pointer;
     }
-    }
+  }
 }