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>
---
 packages/forms/src/select/index.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'packages/forms/src/select/index.tsx')

diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 4a5775579..ef3e70ddb 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -46,6 +46,14 @@ interface IState {
   options: IOptions;
 }
 
+let popupTransition: string = 'none';
+let toggleTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  popupTransition = 'all 0.3s';
+  toggleTransition = 'transform 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   select: {
     background: theme.selectBackground,
@@ -70,7 +78,7 @@ const styles = (theme: Theme) => ({
     overflowX: 'scroll',
     border: theme.selectBorder,
     borderTop: 0,
-    transition: 'all 0.3s',
+    transition: popupTransition,
   },
   open: {
     opacity: 1,
@@ -98,7 +106,7 @@ const styles = (theme: Theme) => ({
   toggle: {
     marginLeft: 'auto',
     fill: theme.selectToggleColor,
-    transition: 'transform 0.3s',
+    transition: toggleTransition,
   },
   toggleOpened: {
     transform: 'rotateZ(90deg)',
-- 
cgit v1.2.3-70-g09d2