diff options
Diffstat (limited to 'packages/forms/src/button/index.tsx')
-rw-r--r-- | packages/forms/src/button/index.tsx | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index c08c4e97d..0aef04a6c 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -35,13 +35,21 @@ interface IProps extends IFormField, IWithStyle { | |||
35 | target?: string; | 35 | target?: string; |
36 | } | 36 | } |
37 | 37 | ||
38 | let buttonTransition: string = 'none'; | ||
39 | let loaderContainerTransition: string = 'none'; | ||
40 | |||
41 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
42 | buttonTransition = 'background .5s, opacity 0.3s'; | ||
43 | loaderContainerTransition = 'all 0.3s'; | ||
44 | } | ||
45 | |||
38 | const styles = (theme: Theme) => ({ | 46 | const styles = (theme: Theme) => ({ |
39 | button: { | 47 | button: { |
40 | borderRadius: theme.borderRadiusSmall, | 48 | borderRadius: theme.borderRadiusSmall, |
41 | border: 'none', | 49 | border: 'none', |
42 | display: 'inline-flex', | 50 | display: 'inline-flex', |
43 | position: 'relative' as Property.Position, | 51 | position: 'relative' as Property.Position, |
44 | transition: 'background .5s, opacity 0.3s', | 52 | transition: buttonTransition, |
45 | textAlign: 'center' as Property.TextAlign, | 53 | textAlign: 'center' as Property.TextAlign, |
46 | outline: 'none', | 54 | outline: 'none', |
47 | alignItems: 'center', | 55 | alignItems: 'center', |
@@ -50,7 +58,6 @@ const styles = (theme: Theme) => ({ | |||
50 | (props.stretch ? '100%' : 'auto') as Property.Width<string>, | 58 | (props.stretch ? '100%' : 'auto') as Property.Width<string>, |
51 | fontSize: theme.uiFontSize, | 59 | fontSize: theme.uiFontSize, |
52 | textDecoration: 'none', | 60 | textDecoration: 'none', |
53 | // height: theme.buttonHeight, | ||
54 | 61 | ||
55 | '&:hover': { | 62 | '&:hover': { |
56 | opacity: 0.8, | 63 | opacity: 0.8, |
@@ -129,7 +136,7 @@ const styles = (theme: Theme) => ({ | |||
129 | width: (props: IProps): string => (!props.busy ? '0' : '40px'), | 136 | width: (props: IProps): string => (!props.busy ? '0' : '40px'), |
130 | height: 20, | 137 | height: 20, |
131 | overflow: 'hidden', | 138 | overflow: 'hidden', |
132 | transition: 'all 0.3s', | 139 | transition: loaderContainerTransition, |
133 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), | 140 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), |
134 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), | 141 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), |
135 | position: (props: IProps): Property.Position => | 142 | position: (props: IProps): Property.Position => |