xref: /expo/docs/ui/components/CommandMenu/styles.ts (revision fe5cfb17) 
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.lg}px;
32    box-shadow: ${shadows.sm};
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.md}px;
60    width: calc(100% - ${spacing[8]}px);
61    box-sizing: border-box;
62    box-shadow: ${shadows.xs};
63
64    &::placeholder {
65      color: ${theme.icon.secondary};
66    }
67  }
68
69  [cmdk-item] {
70    content-visibility: auto;
71    cursor: pointer;
72    min-height: 52px;
73    border-radius: ${borderRadius.md}px;
74    display: flex;
75    flex-direction: column;
76    justify-content: center;
77    padding: ${spacing[1]}px ${spacing[3]}px;
78    color: ${theme.text.default};
79    user-select: none;
80    will-change: background, color;
81    transition: all 150ms ease;
82    transition-property: none;
83
84    &[aria-selected='true'],
85    &:active {
86      background: ${theme.background.element};
87      color: ${theme.text.default};
88
89      mark {
90        background: ${theme.palette.blue5};
91      }
92    }
93
94    &[aria-disabled='true'] {
95      color: ${theme.icon.secondary};
96      cursor: not-allowed;
97    }
98
99    & + [cmdk-item] {
100      margin-top: 4px;
101    }
102
103    mark {
104      color: ${theme.palette.blue12};
105      background: ${theme.palette.blue4};
106      border-radius: 2px;
107    }
108  }
109
110  [cmdk-list] {
111    height: calc(75vh - 50px - 50px - 20px);
112    max-height: calc(75vh - 50px - 50px - 20px);
113    overflow: auto;
114    overscroll-behavior: contain;
115    border-top: 1px solid ${theme.border.default};
116    border-bottom: 1px solid ${theme.border.default};
117    padding: 0 ${spacing[4]}px;
118    margin: ${spacing[3]}px 0 0;
119
120    @media screen and (max-width: ${breakpoints.medium}px) {
121      height: calc(100vh - 50px - 50px - 20px);
122      max-height: calc(100vh - 50px - 50px - 20px);
123    }
124  }
125
126  [cmdk-separator] {
127    height: 1px;
128    width: 100%;
129    background: ${theme.border.default};
130    margin: ${spacing[1]} 0;
131  }
132
133  [cmdk-group-heading] {
134    ${typography.fontSizes[12]};
135    user-select: none;
136    color: ${theme.text.secondary};
137    padding: ${spacing[4]}px ${spacing[2]}px ${spacing[2]}px;
138    display: flex;
139    align-items: center;
140    gap: ${spacing[1]}px;
141    margin: 0 2px;
142  }
143
144  [cmdk-empty] {
145    display: flex;
146    align-items: center;
147    justify-content: center;
148    white-space: pre-wrap;
149    padding: ${spacing[8]}px 0;
150  }
151
152  html[data-expo-theme='dark'] {
153    [cmdk-item] mark {
154      background: ${theme.palette.blue5};
155
156      &[aria-selected='true'] {
157        background: ${theme.palette.blue7};
158      }
159    }
160  }
161`;
162
163export const searchIconStyle = css({
164  position: 'absolute',
165  top: 29,
166  left: 29,
167  transition: 'opacity 0.2s ease-in-out',
168});
169
170export const closeIconStyle = css({
171  position: 'absolute',
172  top: 25,
173  right: 25,
174  cursor: 'pointer',
175  padding: spacing[1],
176  borderRadius: borderRadius.sm,
177
178  '&:hover': {
179    background: theme.background.element,
180  },
181});
182