diff options
Diffstat (limited to 'packages/forms/src/toggle/index.tsx')
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 18 |
1 files changed, 12 insertions, 6 deletions
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index ea335f281..bdf1d22cf 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
3 | import CSS from 'csstype'; | 2 | import { Property } from 'csstype'; |
4 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
6 | 5 | ||
7 | import { IFormField, IWithStyle, Omit } from '../typings/generic'; | 6 | import { IFormField, IWithStyle } from '../typings/generic'; |
7 | import { Theme } from '../../../theme'; | ||
8 | 8 | ||
9 | import { Error } from '../error'; | 9 | import { Error } from '../error'; |
10 | import { Label } from '../label'; | 10 | import { Label } from '../label'; |
@@ -17,12 +17,18 @@ interface IProps | |||
17 | className?: string; | 17 | className?: string; |
18 | } | 18 | } |
19 | 19 | ||
20 | let buttonTransition: string = 'none'; | ||
21 | |||
22 | if (window && 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, |
23 | borderRadius: theme.borderRadius, | 29 | borderRadius: theme.borderRadius, |
24 | height: theme.toggleHeight, | 30 | height: theme.toggleHeight, |
25 | position: 'relative' as CSS.PositionProperty, | 31 | position: 'relative' as Property.Position, |
26 | width: theme.toggleWidth, | 32 | width: theme.toggleWidth, |
27 | }, | 33 | }, |
28 | button: { | 34 | button: { |
@@ -33,8 +39,8 @@ const styles = (theme: Theme) => ({ | |||
33 | height: theme.toggleHeight - 2, | 39 | height: theme.toggleHeight - 2, |
34 | left: 1, | 40 | left: 1, |
35 | top: 1, | 41 | top: 1, |
36 | position: 'absolute' as CSS.PositionProperty, | 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, |