ablocks / assets / build / blocks / search / style.css

style.css in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.9.1, at assets/build/blocks/search/style.css

264 lines 5.0 KB

Raw Download Zip

1
2	ul {
3	display: initial; /* Revert display to default */
4	list-style-type: none; /* Remove bullet points */
5	margin: 0; /* Reset all margins */
6	padding: 0; /* Reset padding */
7	unicode-bidi: initial; /* Reset unicode-bidi property */
8	}
9	.ablocks-block--search-form {
10	margin: 0;
11
12	}
13
14	.ablocks-block--search-bar {
15	display: flex;
16	align-items: center;
17	overflow: hidden;
18	}
19	.ablocks-block--search-bar.minimal{
20	border: 1px solid #DDDDDF;
21	border-radius: 30px;
22	}
23	.ablocks-block--search-form{
24	width: 100%;
25	display: flex;
26	align-items: center;
27	overflow: hidden;
28	}
29	.ablocks-block--search-bar.minimal .ablocks-block--search-form{
30	gap: 0px !important;
31	}
32	.ablocks-block--search-form.both{
33	gap: 16px;
34	}
35	.ablocks-block--search-form.text{
36	gap: 16px;
37	}
38
39	.ablocks-block--search-input {
40	width: 100%;
41	font-size: 16px;
42	border-bottom-left-radius: 8px !important;
43	border-bottom-right-radius: 0px !important;
44	border-top-left-radius: 8px !important;
45	border-top-right-radius: 0px !important;
46	margin: 0;
47	border: 1px solid #DDDDDF;
48	outline: none;
49	height: 46px !important;
50	padding: 15px 20px;
51	box-sizing: border-box;
52	}
53	.ablocks-block--search-input.both{
54	border-radius: 8px !important;
55	}
56	.ablocks-block--search-input.text{
57	border-radius: 8px !important;
58	}
59	.ablocks-block--search-bar.minimal .ablocks-block--search-input{
60	border-radius: 0px;
61	border: 0px;
62	}
63
64	.ablocks-block--search-button {
65	display: flex;
66	align-items: center;
67	gap: 4px;
68	padding: 15px 20px;
69	background-color: #13191B;
70	border: none;
71	color: white;
72	font-size: 16px;
73	font-weight: 500;
74	cursor: pointer;
75	border-bottom-right-radius: 8px;
76	border-bottom-left-radius: 0px;
77	border-top-right-radius: 8px;
78	border-top-left-radius: 0px;
79	height: 46px;
80	}
81	.ablocks-block--search-button.both{
82	border-radius: 8px;
83	}
84	.ablocks-block--search-button.text{
85	border-radius: 8px;
86	padding: 15px 22px;
87	}
88	.ablocks-block--search-bar.minimal .ablocks-block--search-button {
89	border: 0px;
90	border-radius: 0px;
91	}
92	.ablocks-block--search-bar.minimal .ablocks-block--search-button.both {
93	padding:15px 14px;
94	}
95
96	.ablocks-block--search-button:hover {
97	background-color: #218838;
98	}
99
100	.ablocks-block--search-button > span > svg{
101	width: 16px;
102	}
103
104	.ablocks-block--search-button span.button-content {
105	display: flex;
106	gap: 4px;
107	align-items: center;
108	justify-content: center;
109	line-height: 14px;
110	}
111	.ablocks-block--search-button .ablocks-button__text{
112	line-height: 14px;
113	}
114
115
116
117	.ablocks-block--search-empty-result {
118	display: none !important;
119	}
120
121	.result-item {
122	padding: 10px;
123	border-bottom: 1px solid #eee;
124	font-size: 18px;
125	color: #333;
126	}
127
128	.result-item:hover {
129	background-color: #f1f1f1;
130	}
131
132
133	/* fullscreen style */
134	.search-icon {
135	background: none;
136	border: none;
137	cursor: pointer;
138	padding: 10px;
139	position: fixed;
140	top: 20px;
141	right: 20px;
142	}
143
144	.search-icon svg {
145	width: 24px;
146	height: 24px;
147	color: black;
148	}
149
150	.full-screen-search {
151	position: fixed;
152	top: 0;
153	left: 0;
154	width: 100vw;
155	height: 100vh;
156	background-color: rgba(0, 0, 0, 0.8);
157	display: flex;
158	flex-direction: row;
159	align-items: center;
160	justify-content: center;
161	z-index: 1000;
162
163	}
164
165	.full-screen-search-input {
166	width: 80%;
167	max-width: 600px;
168	padding: 15px;
169	font-size: 20px;
170	border: none;
171	border-radius: 30px;
172	}
173
174	.search-btn {
175	padding: 10px 20px;
176	background-color: white;
177	border: none;
178	font-size: 16px;
179	cursor: pointer;
180	border-radius: 30px;
181	}
182
183	.close-btn {
184	position: absolute;
185	top: 25%;
186	right: 25%;
187	background: none;
188	border: none;
189	color: white;
190	font-size: 20px;
191	cursor: pointer;
192	}
193	p.ablocks-block--search-result__list-no-data {
194	padding: 10px;
195	margin: 0px;
196	}
197
198	.ablocks-block--search-result {
199	width: 100%;
200	position: absolute;
201	display: flex;
202	top: 100%;
203	margin-top: 10px;
204	left: 0;
205	z-index: 1000;
206	background: white;
207	border-radius: 10px;
208	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
209	overflow: hidden;
210	list-style: none;
211	padding: 0;
212	flex-direction: column;
213	}
214
215	.ablocks-block--search-result .ablocks-block--search-result__list {
216	display: flex;
217	align-items: center;
218	margin: 10px ;
219	transition: background 0.3s ease;
220	cursor: pointer;
221	gap: 24px;
222	padding: 9px;
223	}
224	.ablocks-block--search-result .ablocks-block--search-result__list a{
225	display: flex;
226	align-items: center;
227
228	}
229
230	.ablocks-block--search-result .ablocks-block--search-result__list:hover {
231	background: #F5F5F5;
232	padding: 9px;
233	border-radius: 8px
234	}
235
236	.ablocks-block--search-result__list img {
237	border-radius: 10px;
238	object-fit: cover;
239	height: auto;
240	width: auto;
241	}
242
243	.ablocks-block--search-result__list .ablocks-block--search-result__list-title {
244	font-size: 16px;
245	font-style: normal;
246	font-weight: 600;
247	line-height: 24px;
248	text-decoration: none;
249	}
250	.loading-spinner {
251	display: none;
252	text-align: center;
253	padding: 20px;
254	}
255	@keyframes spin {
256	to {
257	transform: rotate(360deg);
258	}
259	}
260
261	.ablocks-search-block__spin {
262	transform-origin: center;
263	animation: spin 2s linear infinite;
264	}