uikit 3.14.4-dev.fea9fd466 → 3.15.1-dev.f849bb0c8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/CHANGELOG.md +32 -18
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +284 -63
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +284 -63
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +306 -92
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +306 -92
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +98 -131
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +98 -131
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +4 -2
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +1 -1
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +1 -1
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +1 -1
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +101 -136
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +518 -478
  38. package/dist/js/uikit-core.min.js +17 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +521 -479
  42. package/dist/js/uikit.min.js +17 -1
  43. package/package.json +11 -11
  44. package/src/images/components/navbar-toggle-icon.svg +25 -3
  45. package/src/js/api/hooks.js +5 -1
  46. package/src/js/api/state.js +2 -2
  47. package/src/js/components/notification.js +3 -1
  48. package/src/js/core/accordion.js +9 -17
  49. package/src/js/core/alert.js +35 -14
  50. package/src/js/core/drop.js +110 -82
  51. package/src/js/core/navbar.js +33 -49
  52. package/src/js/core/offcanvas.js +8 -4
  53. package/src/js/core/scroll.js +37 -10
  54. package/src/js/core/toggle.js +3 -5
  55. package/src/js/mixin/modal.js +15 -12
  56. package/src/js/mixin/position.js +21 -22
  57. package/src/js/mixin/style.js +11 -0
  58. package/src/js/mixin/togglable.js +90 -124
  59. package/src/js/util/animation.js +9 -7
  60. package/src/js/util/class.js +3 -1
  61. package/src/js/util/filter.js +3 -7
  62. package/src/js/util/position.js +136 -130
  63. package/src/js/util/viewport.js +1 -1
  64. package/src/less/components/_import.less +1 -0
  65. package/src/less/components/drop.less +1 -18
  66. package/src/less/components/dropbar.less +126 -0
  67. package/src/less/components/dropdown.less +6 -20
  68. package/src/less/components/nav.less +214 -23
  69. package/src/less/components/navbar.less +26 -54
  70. package/src/less/theme/_import.less +1 -0
  71. package/src/less/theme/dropbar.less +44 -0
  72. package/src/less/theme/dropdown.less +0 -11
  73. package/src/less/theme/nav.less +46 -0
  74. package/src/less/theme/navbar.less +5 -36
  75. package/src/scss/components/_import.scss +1 -0
  76. package/src/scss/components/drop.scss +1 -18
  77. package/src/scss/components/dropbar.scss +126 -0
  78. package/src/scss/components/dropdown.scss +6 -20
  79. package/src/scss/components/nav.scss +163 -22
  80. package/src/scss/components/navbar.scss +26 -54
  81. package/src/scss/mixins-theme.scss +81 -35
  82. package/src/scss/mixins.scss +77 -3
  83. package/src/scss/theme/_import.scss +1 -0
  84. package/src/scss/theme/dropbar.scss +44 -0
  85. package/src/scss/theme/dropdown.scss +0 -8
  86. package/src/scss/theme/nav.scss +44 -0
  87. package/src/scss/theme/navbar.scss +4 -8
  88. package/src/scss/variables-theme.scss +58 -13
  89. package/src/scss/variables.scss +46 -8
  90. package/tests/accordion.html +2 -2
  91. package/tests/alert.html +2 -2
  92. package/tests/countdown.html +1 -1
  93. package/tests/drop.html +446 -416
  94. package/tests/dropbar.html +458 -0
  95. package/tests/dropdown.html +8 -470
  96. package/tests/filter.html +9 -12
  97. package/tests/flex.html +36 -36
  98. package/tests/form.html +1 -1
  99. package/tests/grid.html +22 -22
  100. package/tests/height.html +6 -6
  101. package/tests/index.html +127 -108
  102. package/tests/js/index.js +1 -4
  103. package/tests/lightbox.html +5 -5
  104. package/tests/list.html +8 -8
  105. package/tests/modal.html +13 -13
  106. package/tests/nav.html +121 -12
  107. package/tests/navbar.html +111 -220
  108. package/tests/offcanvas.html +10 -14
  109. package/tests/pagination.html +6 -6
  110. package/tests/parallax.html +1 -1
  111. package/tests/position.html +18 -16
  112. package/tests/progress.html +9 -9
  113. package/tests/scroll.html +7 -10
  114. package/tests/search.html +6 -6
  115. package/tests/slider.html +6 -5
  116. package/tests/slideshow.html +8 -8
  117. package/tests/sortable.html +6 -8
  118. package/tests/sticky-navbar.html +15 -15
  119. package/tests/sticky.html +8 -8
  120. package/tests/switcher.html +1 -1
  121. package/tests/tab.html +1 -1
  122. package/tests/table.html +7 -7
  123. package/tests/toggle.html +2 -2
  124. package/tests/tooltip.html +1 -1
  125. package/tests/upload.html +11 -11
  126. package/tests/utility.html +16 -16
package/tests/dropbar.html ADDED
@@ -0,0 +1,458 @@
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>Dropbar - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ body { padding-bottom: 500px; }
12
+
13
+ .test {
14
+ display: block;
15
+ position: relative;
16
+ width: 100%;
17
+ }
18
+
19
+ .test-boundary {
20
+ border: 1px dashed rgba(0,0,0,0.2);
21
+ }
22
+
23
+ </style>
24
+ </head>
25
+
26
+ <body>
27
+
28
+ <div class="uk-container">
29
+
30
+ <h1>Dropbar</h1>
31
+
32
+ <div class="uk-margin">
33
+ <select id="js-size-switcher" class="uk-select uk-form-width-small">
34
+ <option value="">Default</option>
35
+ <option value="uk-dropbar-large">Large</option>
36
+ </select>
37
+ </div>
38
+
39
+ <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
40
+ <div>
41
+
42
+ <div class="uk-dropbar uk-dropbar-top test">
43
+ <h3>Top</h3>
44
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
45
+ </div>
46
+
47
+ </div>
48
+ <div>
49
+
50
+ <div class="uk-dropbar uk-dropbar-bottom test">
51
+ <h3>Bottom</h3>
52
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
53
+ </div>
54
+
55
+ </div>
56
+ <div>
57
+
58
+ <div class="uk-dropbar uk-dropbar-left test">
59
+ <h3>Left</h3>
60
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
61
+ </div>
62
+
63
+ </div>
64
+ <div>
65
+
66
+ <div class="uk-dropbar uk-dropbar-right test">
67
+ <h3>Right</h3>
68
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
69
+ </div>
70
+
71
+ </div>
72
+ </div>
73
+
74
+ <h2>Navbar</h2>
75
+
76
+ </div>
77
+
78
+ <nav class="uk-navbar-container uk-margin-top">
79
+ <div class="uk-container">
80
+ <div uk-navbar>
81
+ <div class="uk-navbar-left">
82
+
83
+ <ul class="uk-navbar-nav">
84
+ <li class="uk-active"><a href="#">Active</a></li>
85
+ <li><a href="#">Item</a></li>
86
+ <li><a href="#">Item</a></li>
87
+ </ul>
88
+
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </nav>
93
+
94
+ <div class="uk-dropbar uk-dropbar-top test">
95
+ <div class="uk-container">
96
+
97
+ <div class="uk-child-width-1-3" uk-grid>
98
+ <div>
99
+ <ul class="uk-nav uk-navbar-dropdown-nav">
100
+ <li class="uk-active"><a href="#">Active</a></li>
101
+ <li class="uk-parent">
102
+ <a href="#">Parent</a>
103
+ <ul class="uk-nav-sub">
104
+ <li><a href="#">Sub item</a></li>
105
+ <li><a href="#">Sub item</a>
106
+ <ul>
107
+ <li><a href="#">Sub item</a></li>
108
+ <li><a href="#">Sub item</a></li>
109
+ </ul>
110
+ </li>
111
+ </ul>
112
+ </li>
113
+ <li class="uk-parent">
114
+ <a href="#">Parent</a>
115
+ <ul class="uk-nav-sub">
116
+ <li class="uk-active"><a href="#">Active</a></li>
117
+ <li><a href="#">Sub item</a></li>
118
+ </ul>
119
+ </li>
120
+ <li class="uk-nav-header">Header</li>
121
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
122
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
123
+ <li class="uk-nav-divider"></li>
124
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
125
+ </ul>
126
+ </div>
127
+ <div>
128
+ <ul class="uk-nav uk-nav-secondary">
129
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
130
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
131
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
132
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
133
+ </ul>
134
+ </div>
135
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
136
+ </div>
137
+
138
+ </div>
139
+ </div>
140
+
141
+ <div class="uk-container uk-margin-medium-top">
142
+
143
+ <h2>Animation</h2>
144
+
145
+ <div class="uk-child-width-1-4@m" uk-grid>
146
+ <div>
147
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
148
+
149
+ <nav class="uk-navbar-container" uk-navbar>
150
+ <div class="uk-navbar-center">
151
+
152
+ <ul class="uk-navbar-nav">
153
+ <li>
154
+ <a href="#">Fade</a>
155
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: x; animate-out: true">
156
+ <ul class="uk-nav uk-navbar-dropdown-nav">
157
+ <li class="uk-active"><a href="#">Active</a></li>
158
+ <li><a href="#">Item</a></li>
159
+ <li><a href="#">Item</a></li>
160
+ </ul>
161
+ </div>
162
+ </li>
163
+ </ul>
164
+
165
+ </div>
166
+ </nav>
167
+
168
+ </div>
169
+ </div>
170
+ <div>
171
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
172
+
173
+ <nav class="uk-navbar-container" uk-navbar>
174
+ <div class="uk-navbar-center">
175
+
176
+ <ul class="uk-navbar-nav">
177
+ <li>
178
+ <a href="#">Slide Top</a>
179
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: x; animation: slide-top; animate-out: true">
180
+ <ul class="uk-nav uk-navbar-dropdown-nav">
181
+ <li class="uk-active"><a href="#">Active</a></li>
182
+ <li><a href="#">Item</a></li>
183
+ <li><a href="#">Item</a></li>
184
+ </ul>
185
+ </div>
186
+ </li>
187
+ </ul>
188
+
189
+ </div>
190
+ </nav>
191
+
192
+ </div>
193
+ </div>
194
+ <div>
195
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
196
+
197
+ <nav class="uk-navbar-container" uk-navbar>
198
+ <div class="uk-navbar-center">
199
+
200
+ <ul class="uk-navbar-nav">
201
+ <li>
202
+ <a href="#">Slide Left</a>
203
+ <div class="uk-dropbar uk-dropbar-left" uk-drop="target-y: !.uk-navbar-container; stretch: y; animation: slide-left; animate-out: true">
204
+ <ul class="uk-nav uk-navbar-dropdown-nav">
205
+ <li class="uk-active"><a href="#">Active</a></li>
206
+ <li><a href="#">Item</a></li>
207
+ <li><a href="#">Item</a></li>
208
+ </ul>
209
+ </div>
210
+ </li>
211
+ </ul>
212
+
213
+ </div>
214
+ </nav>
215
+
216
+ </div>
217
+ </div>
218
+ <div>
219
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
220
+
221
+ <nav class="uk-navbar-container" uk-navbar>
222
+ <div class="uk-navbar-center">
223
+
224
+ <ul class="uk-navbar-nav">
225
+ <li>
226
+ <a href="#">Slide Right</a>
227
+ <div class="uk-dropbar uk-dropbar-right" uk-drop="target-y: !.uk-navbar-container; stretch: y; animation: slide-right; animate-out: true">
228
+ <ul class="uk-nav uk-navbar-dropdown-nav">
229
+ <li class="uk-active"><a href="#">Active</a></li>
230
+ <li><a href="#">Item</a></li>
231
+ <li><a href="#">Item</a></li>
232
+ </ul>
233
+ </div>
234
+ </li>
235
+ </ul>
236
+
237
+ </div>
238
+ </nav>
239
+
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <h2>Stretch and Overflow Content</h2>
245
+
246
+ <div class="uk-child-width-1-4@m" uk-grid>
247
+ <div>
248
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
249
+
250
+ <nav class="uk-navbar-container" uk-navbar>
251
+ <div class="uk-navbar-center">
252
+
253
+ <ul class="uk-navbar-nav">
254
+ <li>
255
+ <a href="#">Fade</a>
256
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: true; animate-out: true">
257
+
258
+ <ul class="uk-nav uk-navbar-dropdown-nav">
259
+ <li class="uk-active"><a href="#">Active</a></li>
260
+ <li class="uk-parent">
261
+ <a href="#">Parent</a>
262
+ <ul class="uk-nav-sub">
263
+ <li><a href="#">Sub item</a></li>
264
+ <li><a href="#">Sub item</a>
265
+ <ul>
266
+ <li><a href="#">Sub item</a></li>
267
+ <li><a href="#">Sub item</a></li>
268
+ </ul>
269
+ </li>
270
+ </ul>
271
+ </li>
272
+ <li class="uk-parent">
273
+ <a href="#">Parent</a>
274
+ <ul class="uk-nav-sub">
275
+ <li class="uk-active"><a href="#">Active</a></li>
276
+ <li><a href="#">Sub item</a></li>
277
+ </ul>
278
+ </li>
279
+ <li class="uk-nav-header">Header</li>
280
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
281
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
282
+ <li class="uk-nav-divider"></li>
283
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
284
+ </ul>
285
+
286
+ </div>
287
+ </li>
288
+ </ul>
289
+
290
+ </div>
291
+ </nav>
292
+
293
+ </div>
294
+ </div>
295
+ <div>
296
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
297
+
298
+ <nav class="uk-navbar-container" uk-navbar>
299
+ <div class="uk-navbar-center">
300
+
301
+ <ul class="uk-navbar-nav">
302
+ <li>
303
+ <a href="#">Slide Top</a>
304
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-top; animate-out: true">
305
+
306
+ <ul class="uk-nav uk-navbar-dropdown-nav">
307
+ <li class="uk-active"><a href="#">Active</a></li>
308
+ <li class="uk-parent">
309
+ <a href="#">Parent</a>
310
+ <ul class="uk-nav-sub">
311
+ <li><a href="#">Sub item</a></li>
312
+ <li><a href="#">Sub item</a>
313
+ <ul>
314
+ <li><a href="#">Sub item</a></li>
315
+ <li><a href="#">Sub item</a></li>
316
+ </ul>
317
+ </li>
318
+ </ul>
319
+ </li>
320
+ <li class="uk-parent">
321
+ <a href="#">Parent</a>
322
+ <ul class="uk-nav-sub">
323
+ <li class="uk-active"><a href="#">Active</a></li>
324
+ <li><a href="#">Sub item</a></li>
325
+ </ul>
326
+ </li>
327
+ <li class="uk-nav-header">Header</li>
328
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
329
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
330
+ <li class="uk-nav-divider"></li>
331
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
332
+ </ul>
333
+
334
+ </div>
335
+ </li>
336
+ </ul>
337
+
338
+ </div>
339
+ </nav>
340
+
341
+ </div>
342
+ </div>
343
+ <div>
344
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
345
+
346
+ <nav class="uk-navbar-container" uk-navbar>
347
+ <div class="uk-navbar-center">
348
+
349
+ <ul class="uk-navbar-nav">
350
+ <li>
351
+ <a href="#">Slide Left</a>
352
+ <div class="uk-dropbar uk-dropbar-left" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-left; animate-out: true">
353
+
354
+ <ul class="uk-nav uk-navbar-dropdown-nav">
355
+ <li class="uk-active"><a href="#">Active</a></li>
356
+ <li class="uk-parent">
357
+ <a href="#">Parent</a>
358
+ <ul class="uk-nav-sub">
359
+ <li><a href="#">Sub item</a></li>
360
+ <li><a href="#">Sub item</a>
361
+ <ul>
362
+ <li><a href="#">Sub item</a></li>
363
+ <li><a href="#">Sub item</a></li>
364
+ </ul>
365
+ </li>
366
+ </ul>
367
+ </li>
368
+ <li class="uk-parent">
369
+ <a href="#">Parent</a>
370
+ <ul class="uk-nav-sub">
371
+ <li class="uk-active"><a href="#">Active</a></li>
372
+ <li><a href="#">Sub item</a></li>
373
+ </ul>
374
+ </li>
375
+ <li class="uk-nav-header">Header</li>
376
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
377
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
378
+ <li class="uk-nav-divider"></li>
379
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
380
+ </ul>
381
+
382
+ </div>
383
+ </li>
384
+ </ul>
385
+
386
+ </div>
387
+ </nav>
388
+
389
+ </div>
390
+ </div>
391
+ <div>
392
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
393
+
394
+ <nav class="uk-navbar-container" uk-navbar>
395
+ <div class="uk-navbar-center">
396
+
397
+ <ul class="uk-navbar-nav">
398
+ <li>
399
+ <a href="#">Slide Right</a>
400
+ <div class="uk-dropbar uk-dropbar-right" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-right; animate-out: true">
401
+
402
+ <ul class="uk-nav uk-navbar-dropdown-nav">
403
+ <li class="uk-active"><a href="#">Active</a></li>
404
+ <li class="uk-parent">
405
+ <a href="#">Parent</a>
406
+ <ul class="uk-nav-sub">
407
+ <li><a href="#">Sub item</a></li>
408
+ <li><a href="#">Sub item</a>
409
+ <ul>
410
+ <li><a href="#">Sub item</a></li>
411
+ <li><a href="#">Sub item</a></li>
412
+ </ul>
413
+ </li>
414
+ </ul>
415
+ </li>
416
+ <li class="uk-parent">
417
+ <a href="#">Parent</a>
418
+ <ul class="uk-nav-sub">
419
+ <li class="uk-active"><a href="#">Active</a></li>
420
+ <li><a href="#">Sub item</a></li>
421
+ </ul>
422
+ </li>
423
+ <li class="uk-nav-header">Header</li>
424
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
425
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
426
+ <li class="uk-nav-divider"></li>
427
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
428
+ </ul>
429
+
430
+ </div>
431
+ </li>
432
+ </ul>
433
+
434
+ </div>
435
+ </nav>
436
+
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ </div>
442
+
443
+ <script>
444
+
445
+ const {$$, addClass, on, removeClass } = UIkit.util;
446
+
447
+ on('#js-size-switcher', 'change', (e) => {
448
+ const options = $$('option', e.target).map(({value}) => value);
449
+ for (const dropbar of $$('.uk-dropbar')) {
450
+ removeClass(dropbar, options);
451
+ addClass(dropbar, e.target.value);
452
+ }
453
+ });
454
+
455
+ </script>
456
+
457
+ </body>
458
+ </html>