xref: /expo/docs/ui/components/CommandMenu/styles.ts (revision bb606df4) 
1import { css } from '@emotion/react';
2import { theme, shadows, borderRadius, spacing, breakpoints, typography } from '@expo/styleguide';
3
4export const commandMenuStyles = css`
5  #__next[aria-hidden] {
6    filter: blur(3.33px);
7  }
8
9  [cmdk-overlay] {
10    background-color: rgba(0, 0, 0, 0.33);
11    height: 100vh;
12    left: 0;
13    position: fixed;
14    top: 0;
15    width: 100vw;
16    z-index: 200;
17
18    @media screen and (max-width: ${breakpoints.medium}px) {
19      display: none;
20    }
21  }
22
23  [cmdk-root] {
24    position: fixed;
25    top: 45%;
26    left: 50%;
27    transform: translate(-50%, -50%);
28    min-height: 75vh;
29    max-height: 75vh;
30    background: ${theme.background.default};
31    border-radius: ${borderRadius.large}px;
32    box-shadow: ${shadows.popover};
33    width: 40vw;
34    min-width: 680px;
35    border: 1px solid ${theme.border.default};
36    z-index: 1001;
37
38    @media screen and (max-width: ${breakpoints.medium}px) {
39      min-height: 100vh;
40      max-height: 100vh;
41      width: 100vw;
42      min-width: 100vw;
43      top: 50%;
44      border-radius: 0;
45    }
46  }
47
48  [cmdk-input] {
49    appearance: none;
50    background: transparent;
51    color: ${theme.text.default};
52    flex: 1;
53    font: inherit;
54    height: 100%;
55    outline: none;
56    padding: ${spacing[3]}px ${spacing[11]}px;
57    margin: ${spacing[4]}px ${spacing[4]}px 0;
58    border: 1px solid ${theme.border.default};
59    border-radius: ${borderRadius.medium}px;
60    width: calc(100% - ${spacing[8]}px);
61    box-sizing: border-box;
62    box-shadow: ${shadows.input};
63
64    &::placeholder {
65      color: ${theme.icon.secondary};
66    }
67
68    &::selection {
69      color: ${theme.palette.white};
70    }
71  }
72
73  [cmdk-item] {
74    content-visibility: auto;
75    cursor: pointer;
76    min-height: 52px;
77    border-radius: ${borderRadius.medium}px;
78    display: flex;
79    flex-direction: column;
80    justify-content: center;
81    padding: ${spacing[1]}px ${spacing[3]}px;
82    color: ${theme.text.default};
83    user-select: none;
84    will-change: background, color;
85    transition: all 150ms ease;
86    transition-property: none;
87
88    &[aria-selected='true'],
89    &:active {
90      background: ${theme.background.tertiary};
91      color: ${theme.text.default};
92
93      mark {
94        background: ${theme.palette.primary[200]};
95      }
96    }
97
98    &[aria-disabled='true'] {
99      color: ${theme.icon.secondary};
100      cursor: not-allowed;
101    }
102
103    & + [cmdk-item] {
104      margin-top: 4px;
105    }
106
107    mark {
108      color: ${theme.palette.primary[900]};
109      background: ${theme.palette.primary[100]};
110      border-radius: 2px;
111    }
112  }
113
114  [cmdk-list] {
115    height: calc(75vh - 50px - 50px - 20px);
116    max-height: calc(75vh - 50px - 50px - 20px);
117    overflow: auto;
118    overscroll-behavior: contain;
119    border-top: 1px solid ${theme.border.default};
120    border-bottom: 1px solid ${theme.border.default};
121    padding: 0 ${spacing[4]}px;
122    margin: ${spacing[3]}px 0 0;
123
124    @media screen and (max-width: ${breakpoints.medium}px) {
125      height: calc(100vh - 50px - 50px - 20px);
126      max-height: calc(100vh - 50px - 50px - 20px);
127    }
128  }
129
130  [cmdk-separator] {
131    height: 1px;
132    width: 100%;
133    background: ${theme.border.default};
134    margin: ${spacing[1]} 0;
135  }
136
137  [cmdk-group-heading] {
138    ${typography.fontSizes[12]};
139    user-select: none;
140    color: ${theme.text.secondary};
141    padding: ${spacing[4]}px ${spacing[2]}px ${spacing[2]}px;
142    display: flex;
143    align-items: center;
144    gap: ${spacing[1]}px;
145    margin: 0 2px;
146  }
147
148  [cmdk-empty] {
149    display: flex;
150    align-items: center;
151    justify-content: center;
152    white-space: pre-wrap;
153    padding: ${spacing[8]}px 0;
154  }
155
156  html[data-expo-theme='dark'] {
157    [cmdk-item] mark {
158      background: ${theme.palette.primary[200]};
159
160      &[aria-selected='true'] {
161        background: ${theme.palette.primary[300]};
162      }
163    }
164  }
165`;
166
167export const searchIconStyle = css({
168  position: 'absolute',
169  top: 29,
170  left: 29,
171  transition: 'opacity 0.2s ease-in-out',
172});
173
174export const closeIconStyle = css({
175  position: 'absolute',
176  top: 25,
177  right: 25,
178  cursor: 'pointer',
179  padding: spacing[1],
180  borderRadius: borderRadius.small,
181
182  '&:hover': {
183    background: theme.background.tertiary,
184  },
185});
186