diff options
author | 2021-08-10 19:04:54 +0200 | |
---|---|---|
committer | 2021-08-10 22:34:54 +0530 | |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /packages/forms/src/button/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/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 => |