diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-08-10 19:04:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-10 22:34:54 +0530 |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /packages/ui | |
parent | refactor: Move platform-specific logic for shortcut keys into common location. (diff) | |
download | ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.gz ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.zst ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.zip |
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>
Diffstat (limited to 'packages/ui')
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index 961262001..a6e4b3240 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -44,6 +44,14 @@ const buttonStyles = (theme: Theme) => { | |||
44 | return styles; | 44 | return styles; |
45 | }; | 45 | }; |
46 | 46 | ||
47 | let infoBoxTransition: string = 'none'; | ||
48 | let ctaTransition: string = 'none'; | ||
49 | |||
50 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
51 | infoBoxTransition = 'all 0.5s'; | ||
52 | ctaTransition = 'opacity 0.3s'; | ||
53 | } | ||
54 | |||
47 | const styles = (theme: Theme) => ({ | 55 | const styles = (theme: Theme) => ({ |
48 | wrapper: { | 56 | wrapper: { |
49 | position: 'relative', | 57 | position: 'relative', |
@@ -58,7 +66,7 @@ const styles = (theme: Theme) => ({ | |||
58 | height: 'auto', | 66 | height: 'auto', |
59 | padding: '15px 20px', | 67 | padding: '15px 20px', |
60 | top: 0, | 68 | top: 0, |
61 | transition: 'all 0.5s', | 69 | transition: infoBoxTransition, |
62 | opacity: 1, | 70 | opacity: 1, |
63 | }, | 71 | }, |
64 | dismissing: { | 72 | dismissing: { |
@@ -91,7 +99,7 @@ const styles = (theme: Theme) => ({ | |||
91 | marginLeft: 15, | 99 | marginLeft: 15, |
92 | padding: [4, 10], | 100 | padding: [4, 10], |
93 | fontSize: theme.uiFontSize, | 101 | fontSize: theme.uiFontSize, |
94 | transition: 'opacity 0.3s', | 102 | transition: ctaTransition, |
95 | 103 | ||
96 | '&:hover': { | 104 | '&:hover': { |
97 | opacity: 0.6, | 105 | opacity: 0.6, |