diff options
Diffstat (limited to 'packages/ui/src')
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index 961262001..a6e4b3240 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -44,6 +44,14 @@ const buttonStyles = (theme: Theme) => { | |||
44 | return styles; | 44 | return styles; |
45 | }; | 45 | }; |
46 | 46 | ||
47 | let infoBoxTransition: string = 'none'; | ||
48 | let ctaTransition: string = 'none'; | ||
49 | |||
50 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
51 | infoBoxTransition = 'all 0.5s'; | ||
52 | ctaTransition = 'opacity 0.3s'; | ||
53 | } | ||
54 | |||
47 | const styles = (theme: Theme) => ({ | 55 | const styles = (theme: Theme) => ({ |
48 | wrapper: { | 56 | wrapper: { |
49 | position: 'relative', | 57 | position: 'relative', |
@@ -58,7 +66,7 @@ const styles = (theme: Theme) => ({ | |||
58 | height: 'auto', | 66 | height: 'auto', |
59 | padding: '15px 20px', | 67 | padding: '15px 20px', |
60 | top: 0, | 68 | top: 0, |
61 | transition: 'all 0.5s', | 69 | transition: infoBoxTransition, |
62 | opacity: 1, | 70 | opacity: 1, |
63 | }, | 71 | }, |
64 | dismissing: { | 72 | dismissing: { |
@@ -91,7 +99,7 @@ const styles = (theme: Theme) => ({ | |||
91 | marginLeft: 15, | 99 | marginLeft: 15, |
92 | padding: [4, 10], | 100 | padding: [4, 10], |
93 | fontSize: theme.uiFontSize, | 101 | fontSize: theme.uiFontSize, |
94 | transition: 'opacity 0.3s', | 102 | transition: ctaTransition, |
95 | 103 | ||
96 | '&:hover': { | 104 | '&:hover': { |
97 | opacity: 0.6, | 105 | opacity: 0.6, |