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/recipes.scss | 36 +++++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

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

diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 5bdc60a57..37c2febf6 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -4,7 +4,9 @@
   background-color: $dark-theme-gray-dark;
   color: $dark-theme-text-color;
 
-  &:hover { background-color: $dark-theme-gray; }
+  &:hover {
+    background-color: $dark-theme-gray;
+  }
 }
 
 .recipes {
@@ -17,7 +19,7 @@
 
     &.recipes__list--disabled {
       filter: grayscale(100%);
-      opacity: .3;
+      opacity: 0.3;
       pointer-events: none;
     }
   }
@@ -26,16 +28,20 @@
     height: auto;
     margin-bottom: 35px;
 
-    .badge { margin-right: 10px; }
+    .badge {
+      margin-right: 10px;
+    }
 
     &.recipes__navigation--disabled {
       filter: grayscale(100%);
-      opacity: .3;
+      opacity: 0.3;
       pointer-events: none;
     }
   }
 
-  &__service-request { float: right; }
+  &__service-request {
+    float: right;
+  }
 }
 
 .recipe-teaser {
@@ -45,24 +51,32 @@
   margin: 0 20px 20px 0;
   overflow: hidden;
   position: relative;
-  transition: background $theme-transition-time;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background $theme-transition-time;
+  }
   width: calc(25% - 20px);
 
-  &:hover { background-color: $theme-gray-lighter; }
+  &:hover {
+    background-color: $theme-gray-lighter;
+  }
 
   .recipe-teaser__icon {
     margin-bottom: 10px;
     width: 50px;
   }
 
-  .recipe-teaser__label { display: block; }
+  .recipe-teaser__label {
+    display: block;
+  }
 
-  h2 { z-index: 10; }
+  h2 {
+    z-index: 10;
+  }
 
   &__dev-badge {
     background: $theme-brand-warning;
-    box-shadow: 0 0 4px rgba(black, .2);
-    color: #FFF;
+    box-shadow: 0 0 4px rgba(black, 0.2);
+    color: #fff;
     font-size: 10px;
     position: absolute;
     right: -13px;
-- 
cgit v1.2.3-54-g00ecf