uikit 3.14.4-dev.dbd727038 → 3.14.4-dev.e8873dd80

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 (132) hide show
  1. package/CHANGELOG.md +36 -18
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +321 -112
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +321 -112
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +341 -116
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +341 -116
  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 +96 -131
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +96 -131
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +4 -5
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +4 -5
  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 +4 -5
  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 +102 -139
  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 +501 -472
  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 +501 -472
  42. package/dist/js/uikit.min.js +17 -1
  43. package/package.json +1 -1
  44. package/src/images/{backgrounds/nav-parent-close.svg → components/nav-parent-icon-large.svg} +0 -0
  45. package/src/images/components/nav-parent-icon.svg +3 -0
  46. package/src/images/components/navbar-toggle-icon.svg +25 -3
  47. package/src/js/api/state.js +2 -2
  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/height-viewport.js +4 -2
  52. package/src/js/core/icon.js +14 -0
  53. package/src/js/core/index.js +1 -0
  54. package/src/js/core/leader.js +2 -2
  55. package/src/js/core/navbar.js +30 -45
  56. package/src/js/core/scroll.js +37 -10
  57. package/src/js/core/toggle.js +3 -5
  58. package/src/js/mixin/media.js +4 -5
  59. package/src/js/mixin/modal.js +15 -12
  60. package/src/js/mixin/position.js +24 -26
  61. package/src/js/mixin/style.js +11 -0
  62. package/src/js/mixin/togglable.js +88 -124
  63. package/src/js/util/animation.js +4 -3
  64. package/src/js/util/class.js +3 -1
  65. package/src/js/util/filter.js +3 -7
  66. package/src/js/util/position.js +107 -107
  67. package/src/js/util/style.js +4 -13
  68. package/src/js/util/viewport.js +3 -5
  69. package/src/less/components/_import.less +1 -0
  70. package/src/less/components/drop.less +1 -18
  71. package/src/less/components/dropbar.less +115 -0
  72. package/src/less/components/dropdown.less +11 -19
  73. package/src/less/components/leader.less +1 -1
  74. package/src/less/components/nav.less +218 -59
  75. package/src/less/components/navbar.less +17 -52
  76. package/src/less/components/utility.less +10 -2
  77. package/src/less/theme/_import.less +1 -0
  78. package/src/less/theme/dropbar.less +44 -0
  79. package/src/less/theme/dropdown.less +0 -11
  80. package/src/less/theme/nav.less +45 -7
  81. package/src/less/theme/navbar.less +1 -5
  82. package/src/scss/components/_import.scss +1 -0
  83. package/src/scss/components/drop.scss +1 -18
  84. package/src/scss/components/dropbar.scss +115 -0
  85. package/src/scss/components/dropdown.scss +11 -19
  86. package/src/scss/components/leader.scss +1 -1
  87. package/src/scss/components/nav.scss +167 -47
  88. package/src/scss/components/navbar.scss +17 -52
  89. package/src/scss/components/utility.scss +8 -1
  90. package/src/scss/mixins-theme.scss +80 -21
  91. package/src/scss/mixins.scss +77 -17
  92. package/src/scss/theme/_import.scss +1 -0
  93. package/src/scss/theme/dropbar.scss +44 -0
  94. package/src/scss/theme/dropdown.scss +0 -8
  95. package/src/scss/theme/nav.scss +43 -7
  96. package/src/scss/theme/navbar.scss +1 -5
  97. package/src/scss/variables-theme.scss +51 -16
  98. package/src/scss/variables.scss +40 -14
  99. package/tests/accordion.html +2 -2
  100. package/tests/alert.html +2 -2
  101. package/tests/countdown.html +1 -1
  102. package/tests/drop.html +446 -416
  103. package/tests/dropbar.html +458 -0
  104. package/tests/dropdown.html +8 -470
  105. package/tests/filter.html +9 -12
  106. package/tests/form.html +1 -1
  107. package/tests/index.html +126 -107
  108. package/tests/js/index.js +1 -4
  109. package/tests/lightbox.html +5 -5
  110. package/tests/list.html +8 -8
  111. package/tests/modal.html +13 -13
  112. package/tests/nav.html +129 -20
  113. package/tests/navbar.html +97 -227
  114. package/tests/offcanvas.html +17 -21
  115. package/tests/parallax.html +1 -1
  116. package/tests/position.html +18 -16
  117. package/tests/progress.html +9 -9
  118. package/tests/scroll.html +7 -10
  119. package/tests/search.html +6 -6
  120. package/tests/slider.html +6 -5
  121. package/tests/slideshow.html +8 -8
  122. package/tests/sortable.html +6 -8
  123. package/tests/sticky-navbar.html +15 -15
  124. package/tests/sticky.html +8 -8
  125. package/tests/switcher.html +1 -1
  126. package/tests/tab.html +1 -1
  127. package/tests/table.html +7 -7
  128. package/tests/toggle.html +2 -2
  129. package/tests/tooltip.html +1 -1
  130. package/tests/upload.html +11 -11
  131. package/tests/utility.html +19 -0
  132. package/src/images/backgrounds/nav-parent-open.svg +0 -3
package/tests/nav.html CHANGED
@@ -58,10 +58,10 @@
58
58
  <div>
59
59
 
60
60
  <h2>Accordion</h2>
61
- <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
61
+ <ul class="uk-nav-default" uk-nav>
62
62
  <li class="uk-active"><a href="#">Active</a></li>
63
63
  <li class="uk-parent">
64
- <a href="#">Parent</a>
64
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
65
65
  <ul class="uk-nav-sub">
66
66
  <li><a href="#">Sub item</a></li>
67
67
  <li><a href="#">Sub item</a>
@@ -73,7 +73,7 @@
73
73
  </ul>
74
74
  </li>
75
75
  <li class="uk-parent">
76
- <a href="#">Parent</a>
76
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
77
77
  <ul class="uk-nav-sub">
78
78
  <li><a href="#">Sub item</a></li>
79
79
  <li><a href="#">Sub item</a></li>
@@ -91,10 +91,10 @@
91
91
 
92
92
  <h2 class="uk-text-center">Center + Multiple</h2>
93
93
 
94
- <ul class="uk-nav-default uk-nav-center uk-nav-parent-icon" uk-nav="multiple: true">
94
+ <ul class="uk-nav-default uk-nav-center" uk-nav="multiple: true">
95
95
  <li class="uk-active"><a href="#">Active</a></li>
96
96
  <li class="uk-parent">
97
- <a href="#">Parent</a>
97
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
98
98
  <ul class="uk-nav-sub">
99
99
  <li><a href="#">Sub item</a></li>
100
100
  <li><a href="#">Sub item</a>
@@ -106,7 +106,7 @@
106
106
  </ul>
107
107
  </li>
108
108
  <li class="uk-parent">
109
- <a href="#">Parent</a>
109
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
110
110
  <ul class="uk-nav-sub">
111
111
  <li><a href="#">Sub item</a></li>
112
112
  <li><a href="#">Sub item</a></li>
@@ -171,10 +171,10 @@
171
171
  <div>
172
172
 
173
173
  <h2>Accordion</h2>
174
- <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
174
+ <ul class="uk-nav-primary" uk-nav>
175
175
  <li class="uk-active"><a href="#">Active</a></li>
176
176
  <li class="uk-parent">
177
- <a href="#">Parent</a>
177
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
178
178
  <ul class="uk-nav-sub">
179
179
  <li><a href="#">Sub item</a></li>
180
180
  <li><a href="#">Sub item</a>
@@ -186,7 +186,7 @@
186
186
  </ul>
187
187
  </li>
188
188
  <li class="uk-parent">
189
- <a href="#">Parent</a>
189
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
190
190
  <ul class="uk-nav-sub">
191
191
  <li><a href="#">Sub item</a></li>
192
192
  <li><a href="#">Sub item</a></li>
@@ -204,10 +204,10 @@
204
204
 
205
205
  <h2 class="uk-text-center">Center + Multiple</h2>
206
206
 
207
- <ul class="uk-nav-primary uk-nav-center uk-nav-parent-icon" uk-nav="multiple: true">
207
+ <ul class="uk-nav-primary uk-nav-center" uk-nav="multiple: true">
208
208
  <li class="uk-active"><a href="#">Active</a></li>
209
209
  <li class="uk-parent">
210
- <a href="#">Parent</a>
210
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
211
211
  <ul class="uk-nav-sub">
212
212
  <li><a href="#">Sub item</a></li>
213
213
  <li><a href="#">Sub item</a>
@@ -219,7 +219,7 @@
219
219
  </ul>
220
220
  </li>
221
221
  <li class="uk-parent">
222
- <a href="#">Parent</a>
222
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
223
223
  <ul class="uk-nav-sub">
224
224
  <li><a href="#">Sub item</a></li>
225
225
  <li><a href="#">Sub item</a></li>
@@ -247,6 +247,115 @@
247
247
  </div>
248
248
  </div>
249
249
 
250
+ <div class="uk-child-width-1-3@m" uk-grid>
251
+ <div>
252
+
253
+ <h2>Secondary</h2>
254
+
255
+ <ul class="uk-nav uk-nav-secondary">
256
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
257
+ <li class="uk-parent">
258
+ <a href="#"><div>Parent<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a>
259
+ <ul class="uk-nav-sub">
260
+ <li><a href="#">Sub item</a></li>
261
+ <li><a href="#">Sub item</a>
262
+ <ul>
263
+ <li><a href="#">Sub item</a></li>
264
+ <li><a href="#">Sub item</a></li>
265
+ </ul>
266
+ </li>
267
+ </ul>
268
+ </li>
269
+ <li class="uk-parent">
270
+ <a href="#"><div>Parent<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a>
271
+ <ul class="uk-nav-sub">
272
+ <li class="uk-active"><a href="#">Active</a></li>
273
+ <li><a href="#">Sub item</a></li>
274
+ </ul>
275
+ </li>
276
+ <li class="uk-nav-header">Header</li>
277
+ <li><a href="#">
278
+ <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: table; ratio: 1"></span>
279
+ <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div>
280
+ </a></li>
281
+ <li><a href="#">
282
+ <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: thumbnails; ratio: 1"></span>
283
+ <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div>
284
+ </a></li>
285
+ <li class="uk-nav-divider"></li>
286
+ <li><a href="#">
287
+ <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: trash; ratio: 1"></span>
288
+ <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div>
289
+ </a></li>
290
+ </ul>
291
+
292
+ </div>
293
+ <div>
294
+
295
+ <h2>Icon + Grid Top</h2>
296
+
297
+ <ul class="uk-nav uk-nav-secondary">
298
+ <li class="uk-active"><a href="#">
299
+ <div class="uk-grid uk-grid-small">
300
+ <div class="uk-width-auto"><span uk-icon="icon: settings; ratio: 1.5"></span></div>
301
+ <div class="uk-width-expand">Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
302
+ </div>
303
+ </a></li>
304
+ <li><a href="#">
305
+ <div class="uk-grid uk-grid-small">
306
+ <div class="uk-width-auto"><span uk-icon="icon: bell; ratio: 1.5"></span></div>
307
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
308
+ </div>
309
+ </a></li>
310
+ <li><a href="#">
311
+ <div class="uk-grid uk-grid-small">
312
+ <div class="uk-width-auto"><span uk-icon="icon: microphone; ratio: 1.5"></span></div>
313
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
314
+ </div>
315
+ </a></li>
316
+ <li><a href="#">
317
+ <div class="uk-grid uk-grid-small">
318
+ <div class="uk-width-auto"><span uk-icon="icon: camera; ratio: 1.5"></span></div>
319
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
320
+ </div>
321
+ </a></li>
322
+ </ul>
323
+
324
+ </div>
325
+ <div>
326
+
327
+ <h2>Icon + Grid Middle</h2>
328
+
329
+ <ul class="uk-nav uk-nav-secondary">
330
+ <li class="uk-active"><a href="#">
331
+ <div class="uk-grid uk-grid-small uk-flex-middle">
332
+ <div class="uk-width-auto"><span uk-icon="icon: settings; ratio: 1.5"></span></div>
333
+ <div class="uk-width-expand">Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
334
+ </div>
335
+ </a></li>
336
+ <li><a href="#">
337
+ <div class="uk-grid uk-grid-small uk-flex-middle">
338
+ <div class="uk-width-auto"><span uk-icon="icon: bell; ratio: 1.5"></span></div>
339
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
340
+ </div>
341
+ </a></li>
342
+ <li><a href="#">
343
+ <div class="uk-grid uk-grid-small uk-flex-middle">
344
+ <div class="uk-width-auto"><span uk-icon="icon: microphone; ratio: 1.5"></span></div>
345
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
346
+ </div>
347
+ </a></li>
348
+ <li><a href="#">
349
+ <div class="uk-grid uk-grid-small uk-flex-middle">
350
+ <div class="uk-width-auto"><span uk-icon="icon: camera; ratio: 1.5"></span></div>
351
+ <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
352
+ </div>
353
+ </a></li>
354
+ </ul>
355
+
356
+ </div>
357
+ </div>
358
+
250
359
  <h2>JavaScript Options</h2>
251
360
 
252
361
  <table class="uk-table uk-table-striped">
@@ -305,7 +414,7 @@
305
414
  <td><code>animation</code></td>
306
415
  <td>String</td>
307
416
  <td>true</td>
308
- <td>The space separated names of animations to use. (Comma separate for animation out)</td>
417
+ <td>Space-separated names of animations. Comma-separated for animation out.</td>
309
418
  </tr>
310
419
  <tr>
311
420
  <td><code>duration</code></td>
@@ -320,14 +429,14 @@
320
429
 
321
430
  <script>
322
431
 
323
- var options = UIkit.util.$$('#js-divider-switcher option').map(function (option) { return option.value; });
432
+ const {$$, addClass, on, removeClass } = UIkit.util;
324
433
 
325
- UIkit.util.on('#js-divider-switcher', 'change', function () {
326
- var value = this.value;
327
- UIkit.util.$$('.uk-nav').forEach(function (table) {
328
- UIkit.util.removeClass(table, options);
329
- UIkit.util.addClass(table, value);
330
- });
434
+ on('#js-divider-switcher', 'change', (e) => {
435
+ const options = $$('option', e.target).map(({value}) => value);
436
+ for (const el of $$('.uk-nav')) {
437
+ removeClass(el, options);
438
+ addClass(el, e.target.value);
439
+ }
331
440
  });
332
441
 
333
442
  </script>