Skip to content

Commit 5d33d17

Browse files
micahkepemicahkepe
authored
Merge pull request #43 from micahkepe/feature/search-result-modal
feat: search result modal
2 parents 7d00c80 + d9cf2d2 commit 5d33d17

4 files changed

Lines changed: 553 additions & 57 deletions

File tree

‎sass/parts/_search.scss‎

Lines changed: 332 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -62,29 +62,348 @@
6262
border: 1.5px solid var(--search-border-color, #ddd);
6363
}
6464

65+
/* Prevent body scroll when modal is open */
66+
body.modal-open {
67+
position: fixed;
68+
top: 0;
69+
left: 0;
70+
right: 0;
71+
width: 100%;
72+
overflow: hidden;
73+
74+
/* Hide scrollbar in Firefox */
75+
scrollbar-width: none !important;
76+
77+
/* Hide scrollbar in Chrome/Safari */
78+
&::-webkit-scrollbar {
79+
display: none !important;
80+
}
81+
}
82+
83+
/* Backdrop overlay for search modal */
84+
.search-backdrop {
85+
display: none;
86+
position: fixed;
87+
top: 0;
88+
left: 0;
89+
width: 100%;
90+
height: 100%;
91+
background-color: rgba(0, 0, 0, 0.6);
92+
z-index: 9998;
93+
backdrop-filter: blur(4px);
94+
animation: fadeIn 0.2s ease;
95+
}
96+
97+
.search-backdrop.active {
98+
display: block;
99+
}
100+
101+
@keyframes fadeIn {
102+
from {
103+
opacity: 0;
104+
}
105+
106+
to {
107+
opacity: 1;
108+
}
109+
}
110+
111+
@keyframes slideUp {
112+
from {
113+
opacity: 0;
114+
transform: translate(-50%, -45%);
115+
}
116+
117+
to {
118+
opacity: 1;
119+
transform: translate(-50%, -50%);
120+
}
121+
}
122+
123+
/* Search results modal */
65124
.search-results {
66125
display: none;
67-
/* Initial state hidden */
126+
position: fixed;
127+
top: 50%;
128+
left: 50%;
129+
transform: translate(-50%, -50%);
130+
width: calc(100% - 2rem);
131+
max-width: 650px;
132+
height: 80vh;
133+
max-height: 500px;
134+
border: 1px solid rgba(255, 255, 255, 0.1);
135+
border-radius: 12px;
136+
background-color: #2a2a2a;
137+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
138+
z-index: 9999;
139+
overflow: hidden;
140+
flex-direction: column;
141+
}
142+
143+
.search-results.active {
144+
display: flex;
145+
animation: slideUp 0.3s ease;
146+
}
147+
148+
@media (max-width: 768px) {
149+
.search-results {
150+
width: calc(100% - 1rem);
151+
height: 90vh;
152+
max-height: none;
153+
border-radius: 8px;
154+
}
155+
}
156+
157+
@media (min-width: 769px) and (max-height: 600px) {
158+
.search-results {
159+
height: 90vh;
160+
max-height: none;
161+
}
162+
}
163+
164+
.light .search-results {
165+
background-color: #ffffff;
166+
border-color: rgba(0, 0, 0, 0.1);
167+
}
168+
169+
/* Modal header with search input */
170+
.search-modal-header {
171+
position: relative;
172+
padding: 1.5rem;
173+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
174+
flex-shrink: 0;
175+
}
176+
177+
.light .search-modal-header {
178+
border-bottom-color: rgba(0, 0, 0, 0.1);
179+
}
180+
181+
.search-modal-icon {
68182
position: absolute;
69-
top: 100%;
70-
left: 0;
183+
left: 1.5rem;
184+
top: 50%;
185+
transform: translateY(-50%);
186+
width: 20px;
187+
height: 20px;
188+
stroke: var(--text-color, #888);
189+
pointer-events: none;
190+
}
191+
192+
#search-modal {
71193
width: 100%;
72-
max-height: 300px;
194+
padding: 0.75rem 1rem 0.75rem 2.5rem;
195+
font-size: 1rem;
196+
border: none;
197+
background-color: transparent;
198+
color: var(--text-color, #fff);
199+
outline: none;
200+
font-family: inherit;
201+
}
202+
203+
/* Prevent browser autofill/autocomplete from adding white background */
204+
#search-modal:-webkit-autofill,
205+
#search-modal:-webkit-autofill:hover,
206+
#search-modal:-webkit-autofill:focus,
207+
#search-modal:-webkit-autofill:active {
208+
-webkit-box-shadow: 0 0 0 1000px #2a2a2a inset !important;
209+
-webkit-text-fill-color: var(--text-color, #fff) !important;
210+
transition: background-color 5000s ease-in-out 0s;
211+
}
212+
213+
.light #search-modal {
214+
color: #000;
215+
}
216+
217+
.light #search-modal:-webkit-autofill,
218+
.light #search-modal:-webkit-autofill:hover,
219+
.light #search-modal:-webkit-autofill:focus,
220+
.light #search-modal:-webkit-autofill:active {
221+
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
222+
-webkit-text-fill-color: #000 !important;
223+
}
224+
225+
#search-modal::placeholder {
226+
color: rgba(255, 255, 255, 0.4);
227+
}
228+
229+
.light #search-modal::placeholder {
230+
color: rgba(0, 0, 0, 0.4);
231+
}
232+
233+
/* Results count display */
234+
.search-results-count {
235+
padding: 0.75rem 1.5rem 0.5rem;
236+
font-size: 0.875rem;
237+
color: rgba(255, 255, 255, 0.5);
238+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
239+
display: none;
240+
241+
&.visible {
242+
display: block;
243+
}
244+
245+
strong {
246+
color: rgba(255, 255, 255, 0.8);
247+
font-weight: 600;
248+
}
249+
}
250+
251+
.light .search-results-count {
252+
color: rgba(0, 0, 0, 0.5);
253+
border-bottom-color: rgba(0, 0, 0, 0.1);
254+
255+
strong {
256+
color: rgba(0, 0, 0, 0.8);
257+
}
258+
}
259+
260+
/* Results container */
261+
.search-results__items {
262+
list-style: none;
263+
padding: 0;
264+
margin: 0;
265+
flex-grow: 1;
73266
overflow-y: auto;
74-
border: 1px solid var(--search-border-color, #ddd);
75-
border-radius: 4px;
76-
background-color: var(--bg-primary, #fff);
77-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
78-
z-index: 1000;
267+
padding: 1rem;
268+
min-height: 0;
269+
270+
/* Custom scrollbar styling */
271+
scrollbar-width: thin;
272+
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
273+
274+
/* Webkit scrollbar styling */
275+
&::-webkit-scrollbar {
276+
width: 6px;
277+
}
278+
279+
&::-webkit-scrollbar-track {
280+
background: transparent;
281+
}
282+
283+
&::-webkit-scrollbar-thumb {
284+
background-color: rgba(255, 255, 255, 0.3);
285+
border-radius: 3px;
286+
287+
&:hover {
288+
background-color: rgba(255, 255, 255, 0.4);
289+
}
290+
}
79291
}
80292

81-
.light .search-results {
82-
background-color: var(--bg-light, #f9f9f9);
293+
.light .search-results__items {
294+
scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
295+
296+
&::-webkit-scrollbar-thumb {
297+
background-color: rgba(0, 0, 0, 0.3);
298+
299+
&:hover {
300+
background-color: rgba(0, 0, 0, 0.4);
301+
}
302+
}
303+
}
304+
305+
.search-results__item {
306+
padding: 1rem;
307+
margin-bottom: 0.5rem;
308+
border-radius: 6px;
309+
cursor: pointer;
310+
transition: background-color 0.15s ease;
311+
scroll-margin: 1rem;
312+
}
313+
314+
.search-results__item:hover,
315+
.search-results__item.selected {
316+
background-color: rgba(255, 255, 255, 0.05);
317+
}
318+
319+
.light .search-results__item:hover,
320+
.light .search-results__item.selected {
321+
background-color: rgba(0, 0, 0, 0.03);
322+
}
323+
324+
.search-results__item:last-child {
325+
margin-bottom: 0;
326+
}
327+
328+
.search-results__item a {
329+
font-size: 1rem;
330+
font-weight: 600;
331+
display: block;
332+
margin-bottom: 0.5rem;
333+
text-decoration: none;
334+
color: var(--text-color, #fff);
335+
}
336+
337+
.light .search-results__item a {
338+
color: #000;
339+
}
340+
341+
.search-results__item section {
342+
font-size: 0.875rem;
343+
line-height: 1.5;
344+
color: rgba(255, 255, 255, 0.6);
345+
margin: 0;
346+
}
347+
348+
.light .search-results__item section {
349+
color: rgba(0, 0, 0, 0.6);
350+
}
351+
352+
.search-results__item section b {
353+
color: var(--accent);
354+
font-weight: 600;
83355
}
84356

85357
.search-results__no-results {
86-
padding: 1rem !important;
358+
padding: 2rem !important;
87359
font-style: italic;
360+
text-align: center;
361+
color: rgba(255, 255, 255, 0.5);
362+
}
363+
364+
.light .search-results__no-results {
365+
color: rgba(0, 0, 0, 0.5);
366+
}
367+
368+
/* Modal footer with keyboard hints */
369+
.search-modal-footer {
370+
padding: 0.875rem 1.5rem;
371+
border-top: 1px solid rgba(255, 255, 255, 0.1);
372+
display: flex;
373+
gap: 0.5rem;
88374
justify-content: center;
89-
align-content: center;
375+
align-items: center;
376+
font-size: 0.75rem;
377+
color: rgba(255, 255, 255, 0.5);
378+
flex-shrink: 0;
379+
}
380+
381+
.light .search-modal-footer {
382+
border-top-color: rgba(0, 0, 0, 0.1);
383+
color: rgba(0, 0, 0, 0.5);
384+
}
385+
386+
.search-modal-footer span {
387+
display: flex;
388+
align-items: center;
389+
gap: 0.375rem;
390+
padding: 0.5rem;
391+
}
392+
393+
.search-modal-footer kbd {
394+
padding: 0.25rem 0.5rem;
395+
border-radius: 4px;
396+
background-color: rgba(255, 255, 255, 0.08);
397+
border: 1px solid rgba(255, 255, 255, 0.15);
398+
font-family: inherit;
399+
font-size: 0.7rem;
400+
line-height: 1;
401+
display: inline-block;
402+
min-width: 1.5rem;
403+
text-align: center;
404+
}
405+
406+
.light .search-modal-footer kbd {
407+
background-color: rgba(0, 0, 0, 0.04);
408+
border-color: rgba(0, 0, 0, 0.12);
90409
}

0 commit comments

Comments
 (0)