Skip to content

Commit 45dac30

Browse files
atomiksatomiks
committed
[docs][combobox] Async search example
1 parent aef03db commit 45dac30

File tree

7 files changed

+967
-1
lines changed

7 files changed

+967
-1
lines changed

‎docs/src/app/(public)/(content)/react/components/combobox/demos/async/css-modules/index.module.css‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
.Label {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 0.25rem;
5+
font-size: 0.875rem;
6+
line-height: 1.25rem;
7+
font-weight: 500;
8+
color: var(--color-gray-900);
9+
position: relative;
10+
}
11+
12+
.InputWrapper {
13+
position: relative;
14+
width: max-content;
15+
}
16+
17+
.Input {
18+
box-sizing: border-box;
19+
margin: 0;
20+
width: 20rem;
21+
height: 2.5rem;
22+
padding-left: 0.875rem;
23+
padding-right: 4rem;
24+
border: 1px solid var(--color-gray-200);
25+
border-radius: 0.375rem;
26+
font-family: inherit;
27+
font-size: 1rem;
28+
background-color: canvas;
29+
color: var(--color-gray-900);
30+
31+
&:focus {
32+
outline: 2px solid var(--color-blue);
33+
outline-offset: -1px;
34+
}
35+
}
36+
37+
.ActionButtons {
38+
--size: 1.5rem;
39+
box-sizing: border-box;
40+
position: absolute;
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
gap: 0.25rem;
45+
inset-block: 0;
46+
right: 0.5rem;
47+
color: var(--color-gray-600);
48+
pointer-events: none;
49+
}
50+
51+
.Trigger,
52+
.Clear {
53+
pointer-events: auto;
54+
box-sizing: border-box;
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
width: var(--size);
59+
height: 2.5rem;
60+
color: inherit;
61+
border: none;
62+
padding: 0;
63+
border-radius: 0.25rem;
64+
background: none;
65+
}
66+
67+
.ClearIcon,
68+
.TriggerIcon {
69+
width: 1rem;
70+
height: 1rem;
71+
}
72+
73+
.Positioner {
74+
outline: 0;
75+
}
76+
77+
.Popup {
78+
box-sizing: border-box;
79+
padding-block: 0.5rem;
80+
border-radius: 0.375rem;
81+
background-color: canvas;
82+
color: var(--color-gray-900);
83+
width: var(--anchor-width);
84+
max-height: min(var(--available-height), 23rem);
85+
max-width: var(--available-width);
86+
overflow-y: auto;
87+
scroll-padding-block: 0.5rem;
88+
overscroll-behavior: contain;
89+
transition:
90+
opacity 0.1s,
91+
transform 0.1s;
92+
transform-origin: var(--transform-origin);
93+
94+
&[data-starting-style],
95+
&[data-ending-style] {
96+
opacity: 0;
97+
transform: scale(0.95);
98+
}
99+
100+
@media (prefers-color-scheme: light) {
101+
outline: 1px solid var(--color-gray-200);
102+
box-shadow:
103+
0 10px 15px -3px var(--color-gray-200),
104+
0 4px 6px -4px var(--color-gray-200);
105+
}
106+
107+
@media (prefers-color-scheme: dark) {
108+
outline: 1px solid var(--color-gray-300);
109+
outline-offset: -1px;
110+
}
111+
}
112+
113+
.Status {
114+
display: flex;
115+
align-items: center;
116+
gap: 0.5rem;
117+
padding-block: 0.25rem;
118+
padding-left: 1rem;
119+
padding-right: 1.25rem;
120+
font-size: 0.875rem;
121+
line-height: 1.25rem;
122+
color: var(--color-gray-600);
123+
}
124+
125+
.Status:empty {
126+
display: none;
127+
}
128+
129+
.Spinner {
130+
width: 0.75rem;
131+
height: 0.75rem;
132+
border-radius: 10rem;
133+
border: 1px solid currentColor;
134+
border-right-color: transparent;
135+
animation: comboboxSpinner 0.75s linear infinite;
136+
}
137+
138+
.Spinner:dir(rtl) {
139+
border-right-color: currentColor;
140+
border-left-color: transparent;
141+
}
142+
143+
@keyframes comboboxSpinner {
144+
100% {
145+
transform: rotate(360deg);
146+
}
147+
}
148+
149+
.Item {
150+
box-sizing: border-box;
151+
outline: 0;
152+
cursor: default;
153+
user-select: none;
154+
padding-block: 0.5rem;
155+
padding-inline: 1rem;
156+
padding-right: 1.25rem;
157+
display: grid;
158+
gap: 0.5rem;
159+
align-items: flex-start;
160+
grid-template-columns: 0.75rem 1fr;
161+
font-size: 1rem;
162+
line-height: 1.2rem;
163+
164+
@media (hover: hover) {
165+
&[data-highlighted] {
166+
z-index: 0;
167+
position: relative;
168+
color: var(--color-gray-900);
169+
}
170+
171+
&[data-highlighted]::before {
172+
content: '';
173+
z-index: -1;
174+
position: absolute;
175+
inset-block: 0;
176+
inset-inline: 0.5rem;
177+
border-radius: 0.25rem;
178+
background-color: var(--color-gray-100);
179+
}
180+
}
181+
}
182+
183+
.ItemIndicator {
184+
grid-column-start: 1;
185+
margin-top: 0.25rem;
186+
}
187+
188+
.ItemIndicatorIcon {
189+
display: block;
190+
width: 0.75rem;
191+
height: 0.75rem;
192+
}
193+
194+
.ItemText {
195+
grid-column-start: 2;
196+
display: flex;
197+
flex-direction: column;
198+
gap: 0.25rem;
199+
}
200+
201+
.ItemTitle {
202+
font-size: 0.95rem;
203+
font-weight: 600;
204+
}
205+
206+
.ItemSubtitle {
207+
display: flex;
208+
flex-wrap: wrap;
209+
gap: 0.75rem;
210+
font-size: 0.8125rem;
211+
color: var(--color-gray-600);
212+
}
213+
214+
.ItemUsername {
215+
opacity: 0.8;
216+
}
217+
218+
.ItemEmail {
219+
font-size: 0.75rem;
220+
opacity: 0.8;
221+
}
222+
223+
.Empty:not(:empty) {
224+
box-sizing: border-box;
225+
font-size: 0.925rem;
226+
line-height: 1rem;
227+
color: var(--color-gray-600);
228+
padding: 0.5rem 1rem;
229+
}

0 commit comments

Comments
 (0)