Skip to content

Commit d8c92f7

Browse files
fkakatiefkakatie
committed
feat: doc search block
1 parent 9ce76ec commit d8c92f7

File tree

2 files changed

+656
-0
lines changed

2 files changed

+656
-0
lines changed

‎blocks/doc-search/doc-search.css

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
.doc-search {
2+
padding: var(--spacing-xl) 0;
3+
}
4+
5+
.doc-search,
6+
.doc-search form {
7+
position: relative;
8+
}
9+
10+
.doc-search form {
11+
margin: 0 auto;
12+
padding: 0 12px;
13+
font: inherit;
14+
}
15+
16+
.doc-search form svg {
17+
position: absolute;
18+
top: 50%;
19+
transform: translateY(-50%);
20+
left: 18px;
21+
width: 20px;
22+
height: 20px;
23+
fill: rgb(110 110 110);
24+
transition: fill 130ms ease-in-out;
25+
}
26+
27+
.doc-search form input {
28+
appearance: none;
29+
display: block;
30+
width: 100%;
31+
outline: none;
32+
border: 1px solid;
33+
border-color: rgb(202 202 202);
34+
border-radius: 4px;
35+
padding: 0 0 0 30px;
36+
font: inherit;
37+
font-size: 14px;
38+
transition: border-color 130ms ease-in-out, box-shadow 130ms ease-in-out;
39+
}
40+
41+
.doc-search form input:focus {
42+
border-color: rgb(42 124 223);
43+
}
44+
45+
.doc-search form input::placeholder {
46+
font-style: italic;
47+
}
48+
49+
.doc-search form button {
50+
display: none;
51+
pointer-events: none;
52+
position: absolute;
53+
top: 50%;
54+
transform: translateY(-50%);
55+
right: 13px;
56+
outline: none;
57+
border: none;
58+
border-radius: 3px;
59+
padding: 7px 12px;
60+
background: white;
61+
transition: color 130ms ease-in-out;
62+
cursor: inherit;
63+
-webkit-tap-highlight-color: transparent;
64+
}
65+
66+
.doc-search form input:hover + button {
67+
display: block;
68+
color: white;
69+
}
70+
71+
.doc-search form input:not(:placeholder-shown) + button {
72+
display: block;
73+
pointer-events: auto;
74+
color: unset;
75+
cursor: pointer;
76+
}
77+
78+
.doc-search [aria-hidden='true'] {
79+
display: none;
80+
}
81+
82+
.doc-search .doc-search-results {
83+
position: absolute;
84+
left: 12px;
85+
right: 12px;
86+
top: calc(50% + 15px);
87+
margin-top: 0;
88+
padding: 0;
89+
border: 1px solid rgb(202 202 202);
90+
border-radius: 3px;
91+
background-color: white;
92+
opacity: 0;
93+
animation: fadeIn 580ms ease forwards;
94+
z-index: 1;
95+
}
96+
97+
.doc-search .doc-search-results.fadeOut {
98+
/* match delay set in backspace() */
99+
animation: fadeOut 580ms ease forwards;
100+
z-index: -1;
101+
}
102+
103+
@keyframes fadeIn {
104+
from {
105+
top: calc(50% + 15px);
106+
opacity: 0;
107+
}
108+
to {
109+
top: calc(50% + 20px);
110+
opacity: 1;
111+
}
112+
}
113+
114+
@keyframes fadeOut {
115+
from {
116+
top: calc(50% + 20px);
117+
opacity: 1;
118+
}
119+
to {
120+
top: calc(50% - 16px);
121+
opacity: 0;
122+
}
123+
}
124+
125+
.doc-search .doc-search-results > li {
126+
list-style: none;
127+
font-size: var(--type-body-xs-size);
128+
line-height: var(--type-body-xs-lh);
129+
}
130+
131+
.doc-search .doc-search-results > li.doc-search-result + li {
132+
border-top: 1px solid var(--bg-color-grey);
133+
}
134+
135+
.doc-search .doc-search-results > li.doc-search-no-result {
136+
padding: 7px 32px;
137+
}
138+
139+
.doc-search .doc-search-results > li.doc-search-no-result a {
140+
border-bottom: 1px solid;
141+
color: var(--spectrum-blue);
142+
text-decoration: none;
143+
}
144+
145+
.doc-search .doc-search-results > li.doc-search-result a {
146+
display: grid;
147+
grid-template:
148+
'pic title' auto
149+
'pic desc' auto / auto 1fr;
150+
gap: 0 7px;
151+
padding: 7px 6px;
152+
padding-right: 32px;
153+
color: unset;
154+
text-decoration: none;
155+
transition: background-color 130ms;
156+
}
157+
158+
.doc-search .doc-search-results > li.doc-search-result a:hover,
159+
.doc-search .doc-search-results > li.doc-search-result a:focus {
160+
background-color: var(--bg-color-grey);
161+
}
162+
163+
.doc-search .doc-search-results > li.doc-search-result a picture {
164+
grid-area: pic;
165+
margin-top: 2px;
166+
}
167+
168+
.doc-search .doc-search-results > li.doc-search-result a img {
169+
width: 17px;
170+
height: 17px;
171+
object-fit: cover;
172+
border-radius: 3px;
173+
}
174+
175+
.doc-search .doc-search-results > li.doc-search-result a mark {
176+
position: relative;
177+
background-color: transparent;
178+
}
179+
180+
.doc-search .doc-search-results > li.doc-search-result a mark::after {
181+
content: '';
182+
position: absolute;
183+
z-index: -1;
184+
inset: 0 -4px;
185+
background-color: rgb(255 208 0 / 30%);
186+
border-radius: 4px;
187+
}
188+
189+
.doc-search .doc-search-results > li.doc-search-result a p {
190+
margin: 0;
191+
}
192+
193+
.doc-search .doc-search-results > li.doc-search-result a p:first-of-type {
194+
grid-area: title;
195+
color: #2e2e2e;
196+
font-weight: bold;
197+
}
198+
199+
.doc-search .doc-search-results > li.doc-search-result a p:last-of-type {
200+
grid-area: desc;
201+
display: -webkit-box;
202+
-webkit-box-orient: vertical;
203+
-webkit-line-clamp: 1;
204+
overflow: hidden;
205+
text-overflow: ellipsis;
206+
}

0 commit comments

Comments
 (0)