diff options
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, |