From 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 Mon Sep 17 00:00:00 2001
From: Markus Hatvan <markus_hatvan@aon.at>
Date: Tue, 10 Aug 2021 19:04:54 +0200
Subject: 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>
---
 src/styles/type.scss | 46 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 13 deletions(-)

(limited to 'src/styles/type.scss')

diff --git a/src/styles/type.scss b/src/styles/type.scss
index 37ec0bcca..234c4d5c4 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -2,9 +2,15 @@
 @import './mixins.scss';
 
 .theme__dark {
-  a { color: $dark-theme-gray-smoke; }
-  .label { color: $dark-theme-gray-lightest; }
-  .footnote { color: $dark-theme-gray-lightest; }
+  a {
+    color: $dark-theme-gray-smoke;
+  }
+  .label {
+    color: $dark-theme-gray-lightest;
+  }
+  .footnote {
+    color: $dark-theme-gray-lightest;
+  }
 }
 
 h1 {
@@ -21,36 +27,45 @@ h2 {
   margin-bottom: 25px;
   margin-top: 5px;
 
-  &:first-of-type { margin-top: 0; }
+  &:first-of-type {
+    margin-top: 0;
+  }
 }
 
 p {
   margin-bottom: 10px;
   line-height: 1.7rem;
 
-  &:last-of-type { margin-bottom: 0; }
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
-strong { font-weight: bold; }
+strong {
+  font-weight: bold;
+}
 
-a, button {
+a,
+button {
   color: $theme-text-color;
   text-decoration: none;
 
   &.button {
     background: $theme-brand-primary;
-    color: #FFF;
+    color: #fff;
     border-radius: 3px;
     display: inline-block;
     padding: 10px 20px;
     position: relative;
     text-align: center;
-    transition: background .5s, color .5s;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background 0.5s, color 0.5s;
+    }
     cursor: pointer;
 
     &:hover {
       background: darken($theme-brand-primary, 10%);
-      color: #FFF;
+      color: #fff;
     }
   }
 
@@ -60,14 +75,19 @@ a, button {
   }
 }
 
-.error-message, .error-message:last-of-type {
+.error-message,
+.error-message:last-of-type {
   color: $theme-brand-danger;
   margin: 10px 0;
 }
 
-.center { text-align: center; }
+.center {
+  text-align: center;
+}
 
-.label { @include formLabel(); }
+.label {
+  @include formLabel();
+}
 
 .footnote {
   color: $theme-gray-light;
-- 
cgit v1.2.3-70-g09d2