xref: /expo/docs/ui/components/CommandMenu/styles.ts (revision ab91dd02) 
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      min-height: 100vh;
41      max-height: 100vh;
42      width: 100vw;
43      min-width: 100vw;
44      top: 50%;
45      border-radius: 0;
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: 4px;
102    }
103
104    mark {
105      color: ${theme.palette.blue12};
106      background: ${theme.palette.blue4};
107      border-radius: 2px;
108    }
109  }
110
111  [cmdk-list] {
112    height: calc(75vh - 50px - 50px - 20px);
113    max-height: calc(75vh - 50px - 50px - 20px);
114    overflow: auto;
115    overscroll-behavior: contain;
116    border-top: 1px solid ${theme.border.default};
117    border-bottom: 1px solid ${theme.border.default};
118    padding: 0 ${spacing[4]}px;
119    margin: ${spacing[3]}px 0 0;
120
121    @media screen and (max-width: ${breakpoints.medium}px) {
122      height: calc(100vh - 50px - 50px - 20px);
123      max-height: calc(100vh - 50px - 50px - 20px);
124    }
125  }
126
127  [cmdk-separator] {
128    height: 1px;
129    width: 100%;
130    background: ${theme.border.default};
131    margin: ${spacing[1]} 0;
132  }
133
134  [cmdk-group-heading] {
135    ${typography.fontSizes[12]};
136    user-select: none;
137    color: ${theme.text.secondary};
138    padding: ${spacing[4]}px ${spacing[2]}px ${spacing[2]}px;
139    display: flex;
140    align-items: center;
141    gap: ${spacing[1]}px;
142    margin: 0 2px;
143  }
144
145  [cmdk-empty] {
146    display: flex;
147    align-items: center;
148    justify-content: center;
149    white-space: pre-wrap;
150    padding: ${spacing[8]}px 0;
151  }
152
153  html.dark-theme {
154    [cmdk-item] mark {
155      background: ${theme.palette.blue5};
156
157      &[aria-selected='true'] {
158        background: ${theme.palette.blue7};
159      }
160    }
161  }
162`;
163
164export const searchIconStyle = css({
165  position: 'absolute',
166  top: 29,
167  left: 29,
168  transition: 'opacity 0.2s ease-in-out',
169});
170
171export const closeIconStyle = css({
172  position: 'absolute',
173  top: 25,
174  right: 25,
175  cursor: 'pointer',
176  padding: spacing[1],
177  borderRadius: borderRadius.sm,
178
179  '&:hover': {
180    background: theme.background.element,
181  },
182});
183