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