uikit 3.14.4-dev.e2919bbf7 → 3.14.4-dev.eb440d70c

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 (122) hide show
  1. package/CHANGELOG.md +30 -17
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +281 -61
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +281 -61
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +301 -65
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +301 -65
  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 +4 -2
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +2 -2
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +2 -2
  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 +2 -2
  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 +99 -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 +483 -455
  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 +486 -456
  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/height-viewport.js +4 -2
  52. package/src/js/core/navbar.js +30 -45
  53. package/src/js/core/scroll.js +37 -10
  54. package/src/js/core/toggle.js +3 -5
  55. package/src/js/mixin/media.js +1 -1
  56. package/src/js/mixin/modal.js +15 -12
  57. package/src/js/mixin/position.js +21 -22
  58. package/src/js/mixin/style.js +11 -0
  59. package/src/js/mixin/togglable.js +88 -124
  60. package/src/js/util/animation.js +9 -7
  61. package/src/js/util/class.js +3 -1
  62. package/src/js/util/filter.js +3 -7
  63. package/src/js/util/position.js +107 -107
  64. package/src/js/util/viewport.js +3 -5
  65. package/src/less/components/_import.less +1 -0
  66. package/src/less/components/drop.less +1 -18
  67. package/src/less/components/dropbar.less +126 -0
  68. package/src/less/components/dropdown.less +6 -20
  69. package/src/less/components/nav.less +211 -22
  70. package/src/less/components/navbar.less +17 -51
  71. package/src/less/theme/_import.less +1 -0
  72. package/src/less/theme/dropbar.less +44 -0
  73. package/src/less/theme/dropdown.less +0 -11
  74. package/src/less/theme/nav.less +46 -0
  75. package/src/less/theme/navbar.less +1 -5
  76. package/src/scss/components/_import.scss +1 -0
  77. package/src/scss/components/drop.scss +1 -18
  78. package/src/scss/components/dropbar.scss +126 -0
  79. package/src/scss/components/dropdown.scss +6 -20
  80. package/src/scss/components/nav.scss +160 -21
  81. package/src/scss/components/navbar.scss +17 -51
  82. package/src/scss/mixins-theme.scss +78 -7
  83. package/src/scss/mixins.scss +75 -3
  84. package/src/scss/theme/_import.scss +1 -0
  85. package/src/scss/theme/dropbar.scss +44 -0
  86. package/src/scss/theme/dropdown.scss +0 -8
  87. package/src/scss/theme/nav.scss +44 -0
  88. package/src/scss/theme/navbar.scss +1 -5
  89. package/src/scss/variables-theme.scss +54 -9
  90. package/src/scss/variables.scss +43 -7
  91. package/tests/accordion.html +2 -2
  92. package/tests/alert.html +2 -2
  93. package/tests/countdown.html +1 -1
  94. package/tests/drop.html +446 -416
  95. package/tests/dropbar.html +458 -0
  96. package/tests/dropdown.html +8 -470
  97. package/tests/filter.html +9 -12
  98. package/tests/form.html +1 -1
  99. package/tests/index.html +124 -105
  100. package/tests/js/index.js +1 -4
  101. package/tests/lightbox.html +5 -5
  102. package/tests/list.html +8 -8
  103. package/tests/modal.html +13 -13
  104. package/tests/nav.html +121 -12
  105. package/tests/navbar.html +112 -227
  106. package/tests/offcanvas.html +10 -14
  107. package/tests/parallax.html +1 -1
  108. package/tests/position.html +18 -16
  109. package/tests/progress.html +9 -9
  110. package/tests/scroll.html +7 -10
  111. package/tests/search.html +6 -6
  112. package/tests/slider.html +6 -5
  113. package/tests/slideshow.html +8 -8
  114. package/tests/sortable.html +6 -8
  115. package/tests/sticky-navbar.html +15 -15
  116. package/tests/sticky.html +8 -8
  117. package/tests/switcher.html +1 -1
  118. package/tests/tab.html +1 -1
  119. package/tests/table.html +7 -7
  120. package/tests/toggle.html +2 -2
  121. package/tests/tooltip.html +1 -1
  122. package/tests/upload.html +11 -11
package/tests/navbar.html CHANGED
@@ -194,7 +194,7 @@
194
194
 
195
195
  <div class="uk-navbar-dropdown test">
196
196
 
197
- <ul class="uk-nav uk-navbar-dropdown-nav">
197
+ <ul class="uk-nav uk-nav-secondary">
198
198
  <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>
199
199
  <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
200
200
  <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
@@ -250,12 +250,12 @@
250
250
  </div>
251
251
  </nav>
252
252
 
253
- <div class="uk-container">
253
+ <div class="uk-container uk-margin-medium-top">
254
254
 
255
255
  <h2>Dropdown</h2>
256
256
 
257
257
  <div class="uk-margin">
258
- <select id="js-size-switcher" class="uk-select uk-form-width-small">
258
+ <select id="js-dropdown-size-switcher" class="uk-select uk-form-width-small">
259
259
  <option value="">Default</option>
260
260
  <option value="uk-navbar-dropdown-large">Large</option>
261
261
  </select>
@@ -345,8 +345,8 @@
345
345
  </div>
346
346
  </li>
347
347
  <li>
348
- <a href="#">Justify</a>
349
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
348
+ <a href="#">Stretch</a>
349
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
350
350
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
351
351
  <div>
352
352
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -387,8 +387,8 @@
387
387
  </div>
388
388
  </li>
389
389
  <li>
390
- <a href="#">Justify Full</a>
391
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
390
+ <a href="#">Stretch Full</a>
391
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
392
392
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
393
393
  <div>
394
394
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -569,8 +569,8 @@
569
569
  </div>
570
570
  </li>
571
571
  <li>
572
- <a href="#">Justify</a>
573
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
572
+ <a href="#">Stretch</a>
573
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
574
574
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
575
575
  <div>
576
576
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -725,8 +725,8 @@
725
725
  </div>
726
726
  </li>
727
727
  <li>
728
- <a href="#">Justify</a>
729
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
728
+ <a href="#">Stretch</a>
729
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
730
730
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
731
731
  <div>
732
732
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -799,7 +799,7 @@
799
799
  </div>
800
800
  </nav>
801
801
 
802
- <div class="uk-container">
802
+ <div class="uk-container uk-margin-medium-top">
803
803
 
804
804
  <h2>Parent Icon</h2>
805
805
 
@@ -888,7 +888,7 @@
888
888
  </li>
889
889
  <li>
890
890
  <a href="#">Justify <span uk-navbar-parent-icon></span></a>
891
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
891
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
892
892
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
893
893
  <div>
894
894
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -929,8 +929,8 @@
929
929
  </div>
930
930
  </li>
931
931
  <li>
932
- <a href="#">Justify Full <span uk-navbar-parent-icon></span></a>
933
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
932
+ <a href="#">Stretch Full <span uk-navbar-parent-icon></span></a>
933
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
934
934
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
935
935
  <div>
936
936
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1003,9 +1003,9 @@
1003
1003
  </div>
1004
1004
  </nav>
1005
1005
 
1006
- <div class="uk-container">
1006
+ <div class="uk-container uk-margin-medium-top">
1007
1007
 
1008
- <h2>Boundary Align</h2>
1008
+ <h2>Dropdown Stretch</h2>
1009
1009
 
1010
1010
  </div>
1011
1011
 
@@ -1092,8 +1092,8 @@
1092
1092
  </div>
1093
1093
  </li>
1094
1094
  <li>
1095
- <a href="#">Justify</a>
1096
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1095
+ <a href="#">Stretch</a>
1096
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
1097
1097
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1098
1098
  <div>
1099
1099
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1134,8 +1134,8 @@
1134
1134
  </div>
1135
1135
  </li>
1136
1136
  <li>
1137
- <a href="#">Justify Full</a>
1138
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; boundary-align: true; pos: bottom-justify; flip: x">
1137
+ <a href="#">Stretch Full</a>
1138
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
1139
1139
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1140
1140
  <div>
1141
1141
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1207,7 +1207,7 @@
1207
1207
  </div>
1208
1208
  </div>
1209
1209
  </nav>
1210
-
1210
+
1211
1211
  <nav class="uk-navbar-container uk-margin">
1212
1212
  <div class="uk-container">
1213
1213
  <div uk-navbar="align: right; boundary-align: true">
@@ -1316,8 +1316,8 @@
1316
1316
  </div>
1317
1317
  </li>
1318
1318
  <li>
1319
- <a href="#">Justify</a>
1320
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1319
+ <a href="#">Stretch</a>
1320
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
1321
1321
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1322
1322
  <div>
1323
1323
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1472,8 +1472,8 @@
1472
1472
  </div>
1473
1473
  </li>
1474
1474
  <li>
1475
- <a href="#">Justify</a>
1476
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1475
+ <a href="#">Stretch</a>
1476
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
1477
1477
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1478
1478
  <div>
1479
1479
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1546,17 +1546,24 @@
1546
1546
  </div>
1547
1547
  </nav>
1548
1548
 
1549
- <div class="uk-container">
1549
+ <div class="uk-container uk-margin-medium-top">
1550
1550
 
1551
1551
  <h2>Dropbar</h2>
1552
1552
 
1553
+ <div class="uk-margin">
1554
+ <select id="js-dropbar-size-switcher" class="uk-select uk-form-width-small">
1555
+ <option value="">Default</option>
1556
+ <option value="uk-navbar-dropdown-dropbar-large">Large</option>
1557
+ </select>
1558
+ </div>
1559
+
1553
1560
  <p>First example using <code>dropbar: SELECTOR</code> and second example using <code>dropbar: true</code>.</p>
1554
1561
 
1555
1562
  </div>
1556
1563
 
1557
1564
  <nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
1558
1565
  <div class="uk-container">
1559
- <div uk-navbar="dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
1566
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
1560
1567
  <div class="uk-navbar-left">
1561
1568
 
1562
1569
  <ul class="uk-navbar-nav">
@@ -1636,8 +1643,8 @@
1636
1643
  </div>
1637
1644
  </li>
1638
1645
  <li>
1639
- <a href="#">Justify</a>
1640
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1646
+ <a href="#">Stretch</a>
1647
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1641
1648
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1642
1649
  <div>
1643
1650
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1678,8 +1685,8 @@
1678
1685
  </div>
1679
1686
  </li>
1680
1687
  <li>
1681
- <a href="#">Justify Full</a>
1682
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
1688
+ <a href="#">Stretch Full</a>
1689
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false; target-y: !.uk-navbar-container">
1683
1690
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1684
1691
  <div>
1685
1692
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1752,11 +1759,11 @@
1752
1759
  </div>
1753
1760
  </nav>
1754
1761
 
1755
- <div class="uk-navbar-dropbar"></div>
1762
+ <div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar"></div>
1756
1763
 
1757
1764
  <nav class="uk-navbar-container uk-margin">
1758
1765
  <div class="uk-container">
1759
- <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
1766
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
1760
1767
  <div class="uk-navbar-left">
1761
1768
 
1762
1769
  <ul class="uk-navbar-nav">
@@ -1862,8 +1869,8 @@
1862
1869
  </div>
1863
1870
  </li>
1864
1871
  <li>
1865
- <a href="#">Justify</a>
1866
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1872
+ <a href="#">Stretch</a>
1873
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1867
1874
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1868
1875
  <div>
1869
1876
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1910,9 +1917,9 @@
1910
1917
  </div>
1911
1918
  </nav>
1912
1919
 
1913
- <nav class="uk-navbar-container uk-margin uk-position-relative uk-position-z-index"><!-- Position context only needed for demo showcase -->
1920
+ <nav class="uk-navbar-container uk-margin">
1914
1921
  <div class="uk-container">
1915
- <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
1922
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
1916
1923
  <div class="uk-navbar-left">
1917
1924
 
1918
1925
  <ul class="uk-navbar-nav">
@@ -2018,8 +2025,8 @@
2018
2025
  </div>
2019
2026
  </li>
2020
2027
  <li>
2021
- <a href="#">Justify</a>
2022
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
2028
+ <a href="#">Stretch</a>
2029
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
2023
2030
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
2024
2031
  <div>
2025
2032
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -2093,7 +2100,7 @@
2093
2100
  </nav>
2094
2101
 
2095
2102
 
2096
- <div class="uk-container">
2103
+ <div class="uk-container uk-margin-medium-top">
2097
2104
 
2098
2105
  <h2>Icons and Subtitles</h2>
2099
2106
 
@@ -2138,7 +2145,7 @@
2138
2145
  </div>
2139
2146
  </nav>
2140
2147
 
2141
- <div class="uk-container">
2148
+ <div class="uk-container uk-margin-medium-top">
2142
2149
 
2143
2150
  <h2>Content Items</h2>
2144
2151
 
@@ -2194,7 +2201,7 @@
2194
2201
  </div>
2195
2202
  </nav>
2196
2203
 
2197
- <div class="uk-container">
2204
+ <div class="uk-container uk-margin-medium-top">
2198
2205
 
2199
2206
  <h2>Logo and Toggle</h2>
2200
2207
 
@@ -2239,9 +2246,9 @@
2239
2246
  </div>
2240
2247
  <div class="uk-navbar-right">
2241
2248
 
2242
- <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
2243
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2244
-
2249
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
2250
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2251
+
2245
2252
  </div>
2246
2253
  </div>
2247
2254
  </div>
@@ -2286,17 +2293,17 @@
2286
2293
  </div>
2287
2294
  <div class="uk-navbar-right">
2288
2295
 
2289
- <a class="uk-navbar-toggle" href="#">
2296
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#">
2290
2297
  <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
2291
2298
  </a>
2292
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2293
-
2299
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2300
+
2294
2301
  </div>
2295
2302
  </div>
2296
2303
  </div>
2297
2304
  </nav>
2298
2305
 
2299
- <div class="uk-container">
2306
+ <div class="uk-container uk-margin-medium-top">
2300
2307
 
2301
2308
  <h2>Primary</h2>
2302
2309
 
@@ -2341,143 +2348,15 @@
2341
2348
  </div>
2342
2349
  <div class="uk-navbar-right">
2343
2350
 
2344
- <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
2345
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2346
-
2347
- </div>
2348
- </div>
2349
- </div>
2350
- </nav>
2351
-
2352
- <div class="uk-container">
2353
-
2354
- <h2>Dropdown Stretch</h2>
2355
-
2356
- <div class="uk-child-width-1-4@m" uk-grid>
2357
- <div>
2358
- <div class="scroll-container uk-height-large uk-resize-vertical">
2359
-
2360
- <nav class="uk-navbar uk-navbar-container">
2361
- <div class="uk-navbar-left">
2362
- <a class="uk-navbar-toggle" href="#">
2363
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Fade</span>
2364
- </a>
2365
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2366
- <ul class="uk-nav uk-navbar-dropdown-nav">
2367
- <li class="uk-active"><a href="#">Active</a></li>
2368
- <li class="uk-parent">
2369
- <a href="#">Parent</a>
2370
- <ul class="uk-nav-sub">
2371
- <li><a href="#">Sub item</a></li>
2372
- <li><a href="#">Sub item</a></li>
2373
- </ul>
2374
- </li>
2375
- <li class="uk-nav-header">Header</li>
2376
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2377
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2378
- <li class="uk-nav-divider"></li>
2379
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2380
- </ul>
2381
- </div>
2382
- </div>
2383
- </nav>
2384
-
2385
- </div>
2386
- </div>
2387
- <div>
2388
- <div class="scroll-container uk-height-large uk-resize-vertical">
2389
-
2390
- <nav class="uk-navbar uk-navbar-container">
2391
- <div class="uk-navbar-left">
2392
- <a class="uk-navbar-toggle" href="#">
2393
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide</span>
2394
- </a>
2395
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide">
2396
- <ul class="uk-nav uk-navbar-dropdown-nav">
2397
- <li class="uk-active"><a href="#">Active</a></li>
2398
- <li class="uk-parent">
2399
- <a href="#">Parent</a>
2400
- <ul class="uk-nav-sub">
2401
- <li><a href="#">Sub item</a></li>
2402
- <li><a href="#">Sub item</a></li>
2403
- </ul>
2404
- </li>
2405
- <li class="uk-nav-header">Header</li>
2406
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2407
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2408
- <li class="uk-nav-divider"></li>
2409
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2410
- </ul>
2411
- </div>
2412
- </div>
2413
- </nav>
2414
-
2415
- </div>
2416
- </div>
2417
- <div>
2418
- <div class="scroll-container uk-height-large uk-resize-vertical">
2419
-
2420
- <nav class="uk-navbar uk-navbar-container">
2421
- <div class="uk-navbar-left">
2422
- <a class="uk-navbar-toggle" href="#">
2423
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Left</span>
2424
- </a>
2425
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-left">
2426
- <ul class="uk-nav uk-navbar-dropdown-nav">
2427
- <li class="uk-active"><a href="#">Active</a></li>
2428
- <li class="uk-parent">
2429
- <a href="#">Parent</a>
2430
- <ul class="uk-nav-sub">
2431
- <li><a href="#">Sub item</a></li>
2432
- <li><a href="#">Sub item</a></li>
2433
- </ul>
2434
- </li>
2435
- <li class="uk-nav-header">Header</li>
2436
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2437
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2438
- <li class="uk-nav-divider"></li>
2439
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2440
- </ul>
2441
- </div>
2442
- </div>
2443
- </nav>
2444
-
2445
- </div>
2446
- </div>
2447
- <div>
2448
- <div class="scroll-container uk-height-large uk-resize-vertical">
2449
-
2450
- <nav class="uk-navbar uk-navbar-container">
2451
- <div class="uk-navbar-left">
2452
- <a class="uk-navbar-toggle" href="#">
2453
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Right</span>
2454
- </a>
2455
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-right">
2456
- <ul class="uk-nav uk-navbar-dropdown-nav">
2457
- <li class="uk-active"><a href="#">Active</a></li>
2458
- <li class="uk-parent">
2459
- <a href="#">Parent</a>
2460
- <ul class="uk-nav-sub">
2461
- <li><a href="#">Sub item</a></li>
2462
- <li><a href="#">Sub item</a></li>
2463
- </ul>
2464
- </li>
2465
- <li class="uk-nav-header">Header</li>
2466
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2467
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2468
- <li class="uk-nav-divider"></li>
2469
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2470
- </ul>
2471
- </div>
2472
- </div>
2473
- </nav>
2351
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
2352
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2474
2353
 
2475
2354
  </div>
2476
2355
  </div>
2477
2356
  </div>
2478
- </div>
2357
+ </nav>
2479
2358
 
2480
- <div class="uk-container">
2359
+ <div class="uk-container uk-margin-medium-top">
2481
2360
 
2482
2361
  <h2>Center</h2>
2483
2362
 
@@ -2776,9 +2655,9 @@
2776
2655
  </div>
2777
2656
  </nav>
2778
2657
 
2779
- <div class="uk-container">
2658
+ <div class="uk-container uk-margin-medium-top">
2780
2659
 
2781
- <h2>Justify</h2>
2660
+ <h2>Stretch</h2>
2782
2661
 
2783
2662
  </div>
2784
2663
 
@@ -2794,12 +2673,6 @@
2794
2673
  <li><a href="#">Parent</a></li>
2795
2674
  <li><a href="#">Item</a></li>
2796
2675
  <li><a href="#">Item</a></li>
2797
- </ul>
2798
-
2799
- </div>
2800
- <div class="uk-navbar-right">
2801
-
2802
- <ul class="uk-navbar-nav">
2803
2676
  <li><a href="#">Item</a></li>
2804
2677
  </ul>
2805
2678
 
@@ -2822,7 +2695,7 @@
2822
2695
  </div>
2823
2696
  </nav>
2824
2697
 
2825
- <div class="uk-container">
2698
+ <div class="uk-container uk-margin-medium-top">
2826
2699
 
2827
2700
  <h2>Layouts</h2>
2828
2701
 
@@ -2939,8 +2812,8 @@
2939
2812
  </ul>
2940
2813
  </div>
2941
2814
 
2942
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2943
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2815
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
2816
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2944
2817
  <ul class="uk-nav uk-navbar-dropdown-nav">
2945
2818
  <li class="uk-active"><a href="#">Active</a></li>
2946
2819
  <li class="uk-parent">
@@ -3002,8 +2875,8 @@
3002
2875
  </div>
3003
2876
  <div class="uk-navbar-right">
3004
2877
 
3005
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
3006
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2878
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
2879
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
3007
2880
  <ul class="uk-nav uk-navbar-dropdown-nav">
3008
2881
  <li class="uk-active"><a href="#">Active</a></li>
3009
2882
  <li class="uk-parent">
@@ -3124,11 +2997,11 @@
3124
2997
  </ul>
3125
2998
  </div>
3126
2999
  </li>
3127
- <li><a href="#">Item</a></li>
3000
+ <li><a href="#">asdf</a></li>
3128
3001
  </ul>
3129
3002
 
3130
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
3131
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
3003
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
3004
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
3132
3005
  <ul class="uk-nav uk-navbar-dropdown-nav">
3133
3006
  <li class="uk-active"><a href="#">Active</a></li>
3134
3007
  <li class="uk-parent">
@@ -3190,8 +3063,8 @@
3190
3063
  </div>
3191
3064
  <div class="uk-navbar-right">
3192
3065
 
3193
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
3194
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
3066
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
3067
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
3195
3068
  <ul class="uk-nav uk-navbar-dropdown-nav">
3196
3069
  <li class="uk-active"><a href="#">Active</a></li>
3197
3070
  <li class="uk-parent">
@@ -3214,7 +3087,7 @@
3214
3087
  </div>
3215
3088
  </nav>
3216
3089
 
3217
- <div class="uk-container">
3090
+ <div class="uk-container uk-margin-medium-top">
3218
3091
 
3219
3092
  <h2>JavaScript Options</h2>
3220
3093
 
@@ -3239,7 +3112,7 @@
3239
3112
  <td><code>mode</code></td>
3240
3113
  <td>hover | click</td>
3241
3114
  <td>click,hover</td>
3242
- <td>Comma separated list of dropdown trigger behaviour modes.</td>
3115
+ <td>Comma-separated list of dropdown trigger behavior modes.</td>
3243
3116
  </tr>
3244
3117
  <tr>
3245
3118
  <td><code>delay-show</code></td>
@@ -3255,15 +3128,27 @@
3255
3128
  </tr>
3256
3129
  <tr>
3257
3130
  <td><code>boundary</code></td>
3258
- <td>CSS selector</td>
3131
+ <td>Boolean, CSS selector</td>
3259
3132
  <td>true</td>
3260
3133
  <td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
3261
3134
  </tr>
3262
3135
  <tr>
3263
- <td><code>boundary-align</code></td>
3264
- <td>Boolean</td>
3136
+ <td><code>target</code></td>
3137
+ <td>Boolean, CSS selector</td>
3138
+ <td>false</td>
3139
+ <td>The element the drops are positioned to (`true` for window).</td>
3140
+ </tr>
3141
+ <tr>
3142
+ <td><code>target-x</code></td>
3143
+ <td>Boolean, CSS selector</td>
3265
3144
  <td>false</td>
3266
- <td>Align Drop to boundary.</td>
3145
+ <td>The element's X axis the drops are positioned to (`true` for window).</td>
3146
+ </tr>
3147
+ <tr>
3148
+ <td><code>target-y</code></td>
3149
+ <td>Boolean, CSS selector</td>
3150
+ <td>false</td>
3151
+ <td>The element's Y axis the drop are positioned to (`true` for window).</td>
3267
3152
  </tr>
3268
3153
  <tr>
3269
3154
  <td><code>cls-drop</code></td>
@@ -3312,36 +3197,36 @@
3312
3197
 
3313
3198
  <script>
3314
3199
 
3315
- var util = UIkit.util,
3316
- tracker = new util.MouseTracker(),
3317
- el = util.$('#js-mousetracker'),
3318
- target = util.$('#js-mousetarget'),
3319
- interval;
3200
+ const {$, $$, addClass, on, removeClass, MouseTracker } = UIkit.util;
3201
+ const tracker = MouseTracker();
3202
+ const el = $('#js-mousetracker');
3203
+ const target = $('#js-mousetarget');
3204
+ let interval;
3320
3205
 
3321
- util.on(el, 'mouseenter', function () {
3206
+ on(el, 'mouseenter', () => {
3322
3207
  tracker.init();
3323
- interval = setInterval(function () {
3324
- target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to';
3325
- });
3208
+ interval = setInterval(() => target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to');
3326
3209
  });
3327
3210
 
3328
- util.on(el, 'mouseleave', function () {
3211
+ on(el, 'mouseleave', () => {
3329
3212
  tracker.cancel();
3330
3213
  clearInterval(interval);
3331
3214
  });
3332
3215
 
3333
- </script>
3334
-
3335
- <script>
3336
-
3337
- var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
3216
+ on('#js-dropdown-size-switcher', 'change', (e) => {
3217
+ const options = $$('option', e.target).map(({value}) => value);
3218
+ for (const el of $$('.uk-navbar-dropdown:not(.uk-navbar-dropdown-dropbar)')) {
3219
+ removeClass(el, options);
3220
+ addClass(el, e.target.value);
3221
+ }
3222
+ });
3338
3223
 
3339
- UIkit.util.on('#js-size-switcher', 'change', function () {
3340
- var value = this.value;
3341
- UIkit.util.$$('.uk-navbar-dropdown').forEach(function (table) {
3342
- UIkit.util.removeClass(table, options);
3343
- UIkit.util.addClass(table, value);
3344
- });
3224
+ on('#js-dropbar-size-switcher', 'change', (e) => {
3225
+ const options = $$('option', e.target).map(({value}) => value);
3226
+ for (const el of $$('.uk-navbar-dropdown-dropbar')) {
3227
+ removeClass(el, options);
3228
+ addClass(el, e.target.value);
3229
+ }
3345
3230
  });
3346
3231
 
3347
3232
  </script>