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/forms/src/toggle/index.tsx | |
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/forms/src/toggle/index.tsx')
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index a9970c8f1..e525d2906 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -17,6 +17,12 @@ interface IProps | |||
17 | className?: string; | 17 | className?: string; |
18 | } | 18 | } |
19 | 19 | ||
20 | let buttonTransition: string = 'none'; | ||
21 | |||
22 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
23 | buttonTransition = 'all .5s'; | ||
24 | } | ||
25 | |||
20 | const styles = (theme: Theme) => ({ | 26 | const styles = (theme: Theme) => ({ |
21 | toggle: { | 27 | toggle: { |
22 | background: theme.toggleBackground, | 28 | background: theme.toggleBackground, |
@@ -34,7 +40,7 @@ const styles = (theme: Theme) => ({ | |||
34 | left: 1, | 40 | left: 1, |
35 | top: 1, | 41 | top: 1, |
36 | position: 'absolute' as Property.Position, | 42 | position: 'absolute' as Property.Position, |
37 | transition: 'all .5s', | 43 | transition: buttonTransition, |
38 | }, | 44 | }, |
39 | buttonActive: { | 45 | buttonActive: { |
40 | background: theme.toggleButtonActive, | 46 | background: theme.toggleButtonActive, |