diff options
Diffstat (limited to 'packages/forms/src/select')
-rw-r--r-- | packages/forms/src/select/index.tsx | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx index 4a5775579..ef3e70ddb 100644 --- a/packages/forms/src/select/index.tsx +++ b/packages/forms/src/select/index.tsx | |||
@@ -46,6 +46,14 @@ interface IState { | |||
46 | options: IOptions; | 46 | options: IOptions; |
47 | } | 47 | } |
48 | 48 | ||
49 | let popupTransition: string = 'none'; | ||
50 | let toggleTransition: string = 'none'; | ||
51 | |||
52 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
53 | popupTransition = 'all 0.3s'; | ||
54 | toggleTransition = 'transform 0.3s'; | ||
55 | } | ||
56 | |||
49 | const styles = (theme: Theme) => ({ | 57 | const styles = (theme: Theme) => ({ |
50 | select: { | 58 | select: { |
51 | background: theme.selectBackground, | 59 | background: theme.selectBackground, |
@@ -70,7 +78,7 @@ const styles = (theme: Theme) => ({ | |||
70 | overflowX: 'scroll', | 78 | overflowX: 'scroll', |
71 | border: theme.selectBorder, | 79 | border: theme.selectBorder, |
72 | borderTop: 0, | 80 | borderTop: 0, |
73 | transition: 'all 0.3s', | 81 | transition: popupTransition, |
74 | }, | 82 | }, |
75 | open: { | 83 | open: { |
76 | opacity: 1, | 84 | opacity: 1, |
@@ -98,7 +106,7 @@ const styles = (theme: Theme) => ({ | |||
98 | toggle: { | 106 | toggle: { |
99 | marginLeft: 'auto', | 107 | marginLeft: 'auto', |
100 | fill: theme.selectToggleColor, | 108 | fill: theme.selectToggleColor, |
101 | transition: 'transform 0.3s', | 109 | transition: toggleTransition, |
102 | }, | 110 | }, |
103 | toggleOpened: { | 111 | toggleOpened: { |
104 | transform: 'rotateZ(90deg)', | 112 | transform: 'rotateZ(90deg)', |