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>
|