UNPKG

14.8 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en-gb" dir="ltr">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Search - UIkit tests</title>
8 <script src="js/test.js"></script>
9 </head>
10
11 <body>
12
13 <div class="uk-container">
14
15 <h1>Search</h1>
16
17 <h2>Default</h2>
18
19 <div class="uk-margin">
20 <form class="uk-search uk-search-default">
21 <input class="uk-search-input" type="search" placeholder="Search...">
22 </form>
23 </div>
24
25 <div class="uk-margin" uk-margin>
26 <form class="uk-search uk-search-default">
27 <span uk-search-icon></span>
28 <input class="uk-search-input" type="search" placeholder="Icon...">
29 </form>
30
31 <form class="uk-search uk-search-default">
32 <span class="uk-search-icon-flip" uk-search-icon></span>
33 <input class="uk-search-input" type="search" placeholder="Flip...">
34 </form>
35 </div>
36
37 <div class="uk-margin" uk-margin>
38 <form class="uk-search uk-search-default">
39 <a href="#" uk-search-icon></a>
40 <input class="uk-search-input" type="search" placeholder="Link...">
41 </form>
42
43 <form class="uk-search uk-search-default">
44 <button class="uk-search-icon-flip" uk-search-icon></button>
45 <input class="uk-search-input" type="search" placeholder="Button...">
46 </form>
47 </div>
48
49 <h2>Navbar</h2>
50
51 <div class="uk-margin uk-navbar-container uk-navbar">
52 <div class="uk-navbar-left">
53 <div class="uk-navbar-item">
54
55 <form class="uk-search uk-search-navbar">
56 <input class="uk-search-input" type="search" placeholder="Search...">
57 </form>
58
59 </div>
60 </div>
61 </div>
62
63 <div class="uk-margin uk-navbar-container uk-navbar">
64 <div class="uk-navbar-left">
65 <div class="uk-navbar-item">
66
67 <form class="uk-search uk-search-navbar">
68 <span uk-search-icon></span>
69 <input class="uk-search-input" type="search" placeholder="Icon...">
70 </form>
71
72 </div>
73 </div>
74 <div class="uk-navbar-right">
75 <div class="uk-navbar-item">
76
77 <form class="uk-search uk-search-navbar">
78 <span class="uk-search-icon-flip" uk-search-icon></span>
79 <input class="uk-search-input" type="search" placeholder="Flip...">
80 </form>
81
82 </div>
83 </div>
84 </div>
85
86 <div class="uk-margin uk-navbar-container uk-navbar">
87 <div class="uk-navbar-left">
88 <div class="uk-navbar-item">
89
90 <form class="uk-search uk-search-navbar">
91 <a href="#" uk-search-icon></a>
92 <input class="uk-search-input" type="search" placeholder="Link...">
93 </form>
94
95 </div>
96 </div>
97 <div class="uk-navbar-right">
98 <div class="uk-navbar-item">
99
100 <form class="uk-search uk-search-navbar">
101 <button class="uk-search-icon-flip" uk-search-icon></button>
102 <input class="uk-search-input" type="search" placeholder="Button...">
103 </form>
104
105 </div>
106 </div>
107 </div>
108
109 <h2>Large</h2>
110
111 <div class="uk-margin">
112 <form class="uk-search uk-search-large">
113 <input class="uk-search-input" type="search" placeholder="Search...">
114 </form>
115 </div>
116
117 <div class="uk-margin" uk-margin>
118 <form class="uk-search uk-search-large">
119 <span uk-search-icon></span>
120 <input class="uk-search-input" type="search" placeholder="Icon...">
121 </form>
122
123 <form class="uk-search uk-search-large">
124 <span class="uk-search-icon-flip" uk-search-icon></span>
125 <input class="uk-search-input" type="search" placeholder="Flip...">
126 </form>
127 </div>
128
129 <div class="uk-margin" uk-margin>
130 <form class="uk-search uk-search-large">
131 <a href="#" uk-search-icon></a>
132 <input class="uk-search-input" type="search" placeholder="Link...">
133 </form>
134
135 <form class="uk-search uk-search-large">
136 <button class="uk-search-icon-flip" uk-search-icon></button>
137 <input class="uk-search-input" type="search" placeholder="Button...">
138 </form>
139 </div>
140
141 <h2>Toggle</h2>
142
143 <a class="uk-search-toggle" href="#" uk-search-icon></a>
144
145 <h2>Navbar Toggle + Layouts</h2>
146
147 <nav class="uk-navbar-container uk-margin" uk-navbar>
148
149 <div class="test-overlay uk-navbar-left">
150
151 <a class="uk-navbar-item uk-logo" href="#">Overlay</a>
152
153 <ul class="uk-navbar-nav">
154 <li class="uk-active"><a href="#">Active</a></li>
155 <li><a href="#">Parent</a></li>
156 <li><a href="#">Item</a></li>
157 <li><a href="#">Item</a></li>
158 </ul>
159
160 </div>
161
162 <div class="test-overlay uk-navbar-right">
163
164 <ul class="uk-navbar-nav">
165 <li><a href="#">Item</a></li>
166 </ul>
167
168 <a class="uk-navbar-toggle" uk-search-icon uk-toggle="target: .test-overlay; animation: uk-animation-fade" href="#"></a>
169
170 </div>
171
172 <div class="uk-navbar-left uk-flex-1 test-overlay" hidden>
173
174 <div class="uk-navbar-item uk-width-expand">
175 <form class="uk-search uk-search-navbar uk-width-1-1">
176 <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
177 </form>
178 </div>
179
180 <a class="uk-navbar-toggle" uk-close uk-toggle="target: .test-overlay; animation: uk-animation-fade" href="#"></a>
181
182 </div>
183
184 </nav>
185
186 <nav class="uk-navbar-container uk-margin" uk-navbar>
187 <div class="uk-navbar-left">
188
189 <a class="uk-navbar-item uk-logo" href="#">Drop</a>
190
191 <ul class="uk-navbar-nav">
192 <li class="uk-active"><a href="#">Active</a></li>
193 <li><a href="#">Parent</a></li>
194 <li><a href="#">Item</a></li>
195 <li><a href="#">Item</a></li>
196 </ul>
197
198 </div>
199 <div class="uk-navbar-right">
200
201 <ul class="uk-navbar-nav">
202 <li><a href="#">Item</a></li>
203 </ul>
204
205 <div>
206 <a class="uk-navbar-toggle" uk-search-icon href="#"></a>
207 <div uk-drop="mode: click; pos: left-center; offset: 0">
208 <form class="uk-search uk-search-navbar uk-width-1-1">
209 <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
210 </form>
211 </div>
212 </div>
213
214 </div>
215 </nav>
216
217 <nav class="uk-navbar-container uk-margin" uk-navbar>
218 <div class="uk-navbar-left">
219
220 <a class="uk-navbar-item uk-logo" href="#">Dropdown</a>
221
222 <ul class="uk-navbar-nav">
223 <li class="uk-active"><a href="#">Active</a></li>
224 <li><a href="#">Parent</a></li>
225 <li><a href="#">Item</a></li>
226 <li><a href="#">Item</a></li>
227 </ul>
228
229 </div>
230 <div class="uk-navbar-right">
231
232 <ul class="uk-navbar-nav">
233 <li><a href="#">Item</a></li>
234 </ul>
235
236 <div>
237 <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
238 <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav">
239
240 <div class="uk-grid-small uk-flex-middle" uk-grid>
241 <div class="uk-width-expand">
242 <form class="uk-search uk-search-navbar uk-width-1-1">
243 <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
244 </form>
245 </div>
246 <div class="uk-width-auto">
247 <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
248 </div>
249 </div>
250
251 </div>
252 </div>
253
254 </div>
255 </nav>
256
257 <nav class="uk-navbar-container uk-margin" uk-navbar>
258 <div class="uk-navbar-left">
259
260 <a class="uk-navbar-item uk-logo" href="#">Justify</a>
261
262 <ul class="uk-navbar-nav">
263 <li class="uk-active"><a href="#">Active</a></li>
264 <li><a href="#">Parent</a></li>
265 <li><a href="#">Item</a></li>
266 <li><a href="#">Item</a></li>
267 </ul>
268
269 </div>
270 <div class="uk-navbar-right">
271
272 <ul class="uk-navbar-nav">
273 <li><a href="#">Item</a></li>
274 </ul>
275
276 <div>
277 <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
278 <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
279
280 <div class="uk-grid-small uk-flex-middle" uk-grid>
281 <div class="uk-width-expand">
282 <form class="uk-search uk-search-navbar uk-width-1-1">
283 <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
284 </form>
285 </div>
286 <div class="uk-width-auto">
287 <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
288 </div>
289 </div>
290
291 </div>
292 </div>
293
294 </div>
295 </nav>
296
297 <nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar; dropbar-mode: expand">
298 <div class="uk-navbar-left">
299
300 <a class="uk-navbar-item uk-logo" href="#">Dropbar</a>
301
302 <ul class="uk-navbar-nav">
303 <li class="uk-active"><a href="#">Active</a></li>
304 <li><a href="#">Parent</a></li>
305 <li><a href="#">Item</a></li>
306 <li><a href="#">Item</a></li>
307 </ul>
308
309 </div>
310 <div class="uk-navbar-right">
311
312 <ul class="uk-navbar-nav">
313 <li><a href="#">Item</a></li>
314 </ul>
315
316 <div>
317 <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
318 <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
319
320 <div class="uk-grid-small uk-flex-middle" uk-grid>
321 <div class="uk-width-expand">
322 <form class="uk-search uk-search-navbar uk-width-1-1">
323 <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
324 </form>
325 </div>
326 <div class="uk-width-auto">
327 <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
328 </div>
329 </div>
330
331 </div>
332 </div>
333
334 </div>
335 </nav>
336
337 <div class="uk-navbar-dropbar"></div>
338
339 <nav class="uk-navbar uk-navbar-container uk-margin">
340 <div class="uk-navbar-left">
341
342 <a class="uk-navbar-item uk-logo" href="#">Modal</a>
343
344 <ul class="uk-navbar-nav">
345 <li class="uk-active"><a href="#">Active</a></li>
346 <li><a href="#">Parent</a></li>
347 <li><a href="#">Item</a></li>
348 <li><a href="#">Item</a></li>
349 </ul>
350
351 </div>
352 <div class="uk-navbar-right">
353
354 <ul class="uk-navbar-nav">
355 <li><a href="#">Item</a></li>
356 </ul>
357
358 <a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
359
360 </div>
361 </nav>
362
363 <div id="modal-full" class="uk-modal-full" uk-modal>
364 <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
365 <button class="uk-modal-close-full" type="button" uk-close></button>
366 <form class="uk-search uk-search-large">
367 <input class="uk-search-input uk-text-center" type="search" placeholder="Search..." autofocus>
368 </form>
369 </div>
370 </div>
371
372 </div>
373
374 </body>
375</html>