aboutsummaryrefslogtreecommitdiffstats
path: root/packages/forms/src/select/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/forms/src/select/index.tsx')
-rw-r--r--packages/forms/src/select/index.tsx12
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
49let popupTransition: string = 'none';
50let toggleTransition: string = 'none';
51
52if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
53 popupTransition = 'all 0.3s';
54 toggleTransition = 'transform 0.3s';
55}
56
49const styles = (theme: Theme) => ({ 57const 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)',