uikit 3.14.4-dev.a02c81d72 → 3.14.4-dev.ae765cd84

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 +34 -17
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +339 -109
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +339 -109
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +359 -113
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +359 -113
  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 +78 -129
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +78 -129
  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 +92 -145
  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 +460 -446
  38. package/dist/js/uikit-core.min.js +14 -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 +460 -446
  42. package/dist/js/uikit.min.js +14 -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/{backgrounds/navbar-parent-close.svg → components/nav-parent-icon.svg} +0 -0
  46. package/src/images/{backgrounds/navbar-parent-open.svg → components/navbar-parent-icon.svg} +1 -1
  47. package/src/images/components/navbar-toggle-icon.svg +22 -3
  48. package/src/js/api/state.js +2 -2
  49. package/src/js/core/accordion.js +9 -17
  50. package/src/js/core/alert.js +35 -14
  51. package/src/js/core/drop.js +89 -62
  52. package/src/js/core/height-viewport.js +4 -2
  53. package/src/js/core/icon.js +16 -0
  54. package/src/js/core/index.js +2 -0
  55. package/src/js/core/leader.js +2 -2
  56. package/src/js/core/navbar.js +30 -45
  57. package/src/js/core/scroll.js +37 -10
  58. package/src/js/core/toggle.js +3 -5
  59. package/src/js/mixin/media.js +4 -5
  60. package/src/js/mixin/modal.js +9 -6
  61. package/src/js/mixin/position.js +24 -26
  62. package/src/js/mixin/style.js +11 -0
  63. package/src/js/mixin/togglable.js +80 -133
  64. package/src/js/util/animation.js +4 -3
  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 +54 -47
  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 +42 -47
  89. package/src/scss/components/utility.scss +8 -1
  90. package/src/scss/mixins-theme.scss +92 -21
  91. package/src/scss/mixins.scss +89 -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 +56 -19
  98. package/src/scss/variables.scss +45 -17
  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 +442 -412
  103. package/tests/dropbar.html +456 -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 +117 -75
  113. package/tests/navbar.html +102 -237
  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 +5 -5
  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 +6 -6
  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/navbar.html CHANGED
@@ -80,7 +80,7 @@
80
80
  <ul class="uk-navbar-nav">
81
81
  <li class="uk-active"><a href="">Active</a></li>
82
82
  <li>
83
- <a href="">Parent</a>
83
+ <a href="">Parent <span uk-navbar-parent-icon></span></a>
84
84
  <div class="uk-navbar-dropdown">
85
85
  <ul class="uk-nav uk-navbar-dropdown-nav">
86
86
  <li class="uk-active"><a href="#">Active</a></li>
@@ -121,7 +121,7 @@
121
121
  <ul class="uk-navbar-nav">
122
122
  <li class="uk-active"><a href="">Active</a></li>
123
123
  <li>
124
- <a href="">Parent</a>
124
+ <a href="">Parent <span uk-navbar-parent-icon></span></a>
125
125
  <div class="uk-navbar-dropdown">
126
126
  <ul class="uk-nav uk-navbar-dropdown-nav">
127
127
  <li class="uk-active"><a href="#">Active</a></li>
@@ -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,7 +250,7 @@
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
 
@@ -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
 
@@ -807,12 +807,12 @@
807
807
 
808
808
  <nav class="uk-navbar-container uk-margin">
809
809
  <div class="uk-container">
810
- <div class="uk-navbar-parent-icon" uk-navbar>
810
+ <div uk-navbar>
811
811
  <div class="uk-navbar-left">
812
812
 
813
813
  <ul class="uk-navbar-nav">
814
- <li class="uk-active uk-parent">
815
- <a href="#">Left</a>
814
+ <li class="uk-active">
815
+ <a href="#">Left <span uk-navbar-parent-icon></span></a>
816
816
  <div class="uk-navbar-dropdown">
817
817
  <ul class="uk-nav uk-navbar-dropdown-nav">
818
818
  <li class="uk-active"><a href="#">Active</a></li>
@@ -831,8 +831,8 @@
831
831
  </ul>
832
832
  </div>
833
833
  </li>
834
- <li class="uk-parent">
835
- <a href="#">2 Columns</a>
834
+ <li>
835
+ <a href="#">2 Columns <span uk-navbar-parent-icon></span></a>
836
836
  <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
837
837
  <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
838
838
  <div>
@@ -860,8 +860,8 @@
860
860
  </div>
861
861
  </div>
862
862
  </li>
863
- <li class="uk-parent">
864
- <a href="#">3 Columns</a>
863
+ <li>
864
+ <a href="#">3 Columns <span uk-navbar-parent-icon></span></a>
865
865
  <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
866
866
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
867
867
  <div>
@@ -886,9 +886,9 @@
886
886
  </div>
887
887
  </div>
888
888
  </li>
889
- <li class="uk-parent">
890
- <a href="#">Justify</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">
889
+ <li>
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; 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">
@@ -928,9 +928,9 @@
928
928
  </div>
929
929
  </div>
930
930
  </li>
931
- <li class="uk-parent">
932
- <a href="#">Justify Full</a>
933
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
931
+ <li>
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">
@@ -976,8 +976,8 @@
976
976
  <div class="uk-navbar-right">
977
977
 
978
978
  <ul class="uk-navbar-nav">
979
- <li class="uk-parent">
980
- <a href="#">1 Column</a>
979
+ <li>
980
+ <a href="#">1 Column <span uk-navbar-parent-icon></span></a>
981
981
  <div class="uk-navbar-dropdown">
982
982
  <ul class="uk-nav uk-navbar-dropdown-nav">
983
983
  <li class="uk-active"><a href="#">Active</a></li>
@@ -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,7 +1546,7 @@
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
 
@@ -1636,8 +1636,8 @@
1636
1636
  </div>
1637
1637
  </li>
1638
1638
  <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">
1639
+ <a href="#">Stretch</a>
1640
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
1641
1641
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1642
1642
  <div>
1643
1643
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1678,8 +1678,8 @@
1678
1678
  </div>
1679
1679
  </li>
1680
1680
  <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">
1681
+ <a href="#">Stretch Full</a>
1682
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
1683
1683
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1684
1684
  <div>
1685
1685
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1752,7 +1752,7 @@
1752
1752
  </div>
1753
1753
  </nav>
1754
1754
 
1755
- <div class="uk-navbar-dropbar"></div>
1755
+ <div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar"></div>
1756
1756
 
1757
1757
  <nav class="uk-navbar-container uk-margin">
1758
1758
  <div class="uk-container">
@@ -1862,8 +1862,8 @@
1862
1862
  </div>
1863
1863
  </li>
1864
1864
  <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">
1865
+ <a href="#">Stretch</a>
1866
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
1867
1867
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1868
1868
  <div>
1869
1869
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1910,7 +1910,7 @@
1910
1910
  </div>
1911
1911
  </nav>
1912
1912
 
1913
- <nav class="uk-navbar-container uk-margin uk-position-relative uk-position-z-index"><!-- Position context only needed for demo showcase -->
1913
+ <nav class="uk-navbar-container uk-margin">
1914
1914
  <div class="uk-container">
1915
1915
  <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
1916
1916
  <div class="uk-navbar-left">
@@ -2018,8 +2018,8 @@
2018
2018
  </div>
2019
2019
  </li>
2020
2020
  <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">
2021
+ <a href="#">Stretch</a>
2022
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2023
2023
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
2024
2024
  <div>
2025
2025
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -2093,7 +2093,7 @@
2093
2093
  </nav>
2094
2094
 
2095
2095
 
2096
- <div class="uk-container">
2096
+ <div class="uk-container uk-margin-medium-top">
2097
2097
 
2098
2098
  <h2>Icons and Subtitles</h2>
2099
2099
 
@@ -2138,7 +2138,7 @@
2138
2138
  </div>
2139
2139
  </nav>
2140
2140
 
2141
- <div class="uk-container">
2141
+ <div class="uk-container uk-margin-medium-top">
2142
2142
 
2143
2143
  <h2>Content Items</h2>
2144
2144
 
@@ -2194,7 +2194,7 @@
2194
2194
  </div>
2195
2195
  </nav>
2196
2196
 
2197
- <div class="uk-container">
2197
+ <div class="uk-container uk-margin-medium-top">
2198
2198
 
2199
2199
  <h2>Logo and Toggle</h2>
2200
2200
 
@@ -2240,8 +2240,8 @@
2240
2240
  <div class="uk-navbar-right">
2241
2241
 
2242
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
-
2243
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2244
+
2245
2245
  </div>
2246
2246
  </div>
2247
2247
  </div>
@@ -2289,14 +2289,14 @@
2289
2289
  <a class="uk-navbar-toggle" href="#">
2290
2290
  <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
2291
2291
  </a>
2292
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2293
-
2292
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2293
+
2294
2294
  </div>
2295
2295
  </div>
2296
2296
  </div>
2297
2297
  </nav>
2298
2298
 
2299
- <div class="uk-container">
2299
+ <div class="uk-container uk-margin-medium-top">
2300
2300
 
2301
2301
  <h2>Primary</h2>
2302
2302
 
@@ -2342,142 +2342,14 @@
2342
2342
  <div class="uk-navbar-right">
2343
2343
 
2344
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>
2345
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2474
2346
 
2475
2347
  </div>
2476
2348
  </div>
2477
2349
  </div>
2478
- </div>
2350
+ </nav>
2479
2351
 
2480
- <div class="uk-container">
2352
+ <div class="uk-container uk-margin-medium-top">
2481
2353
 
2482
2354
  <h2>Center</h2>
2483
2355
 
@@ -2540,9 +2412,6 @@
2540
2412
  <a href="#">Content</a>
2541
2413
  <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
2542
2414
  </li>
2543
- <li><a href="#">Item</a></li>
2544
- <li><a href="#">Item</a></li>
2545
- <li><a href="#">Item</a></li>
2546
2415
  </ul>
2547
2416
  <div class="uk-navbar-item">
2548
2417
  <div>Some <a href="#">Link</a></div>
@@ -2618,7 +2487,6 @@
2618
2487
 
2619
2488
  <div class="uk-navbar-center-right">
2620
2489
  <ul class="uk-navbar-nav">
2621
- <li class="uk-active"><a href="#">Active</a></li>
2622
2490
  <li>
2623
2491
  <a href="#">Parent</a>
2624
2492
  <div class="uk-navbar-dropdown">
@@ -2719,7 +2587,6 @@
2719
2587
 
2720
2588
  <div class="uk-navbar-center-right">
2721
2589
  <ul class="uk-navbar-nav">
2722
- <li class="uk-active"><a href="#">Active</a></li>
2723
2590
  <li>
2724
2591
  <a href="#">Parent</a>
2725
2592
  <div class="uk-navbar-dropdown">
@@ -2781,9 +2648,9 @@
2781
2648
  </div>
2782
2649
  </nav>
2783
2650
 
2784
- <div class="uk-container">
2651
+ <div class="uk-container uk-margin-medium-top">
2785
2652
 
2786
- <h2>Justify</h2>
2653
+ <h2>Stretch</h2>
2787
2654
 
2788
2655
  </div>
2789
2656
 
@@ -2799,12 +2666,6 @@
2799
2666
  <li><a href="#">Parent</a></li>
2800
2667
  <li><a href="#">Item</a></li>
2801
2668
  <li><a href="#">Item</a></li>
2802
- </ul>
2803
-
2804
- </div>
2805
- <div class="uk-navbar-right">
2806
-
2807
- <ul class="uk-navbar-nav">
2808
2669
  <li><a href="#">Item</a></li>
2809
2670
  </ul>
2810
2671
 
@@ -2827,7 +2688,7 @@
2827
2688
  </div>
2828
2689
  </nav>
2829
2690
 
2830
- <div class="uk-container">
2691
+ <div class="uk-container uk-margin-medium-top">
2831
2692
 
2832
2693
  <h2>Layouts</h2>
2833
2694
 
@@ -2927,7 +2788,7 @@
2927
2788
  </ul>
2928
2789
  </div>
2929
2790
  </li>
2930
- <li><a href="#">Item</a></li>
2791
+ <li><a href="#">sdaf asdf </a></li>
2931
2792
  </ul>
2932
2793
 
2933
2794
  <div class="uk-navbar-item">
@@ -2945,7 +2806,7 @@
2945
2806
  </div>
2946
2807
 
2947
2808
  <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2948
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2809
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2949
2810
  <ul class="uk-nav uk-navbar-dropdown-nav">
2950
2811
  <li class="uk-active"><a href="#">Active</a></li>
2951
2812
  <li class="uk-parent">
@@ -3008,7 +2869,7 @@
3008
2869
  <div class="uk-navbar-right">
3009
2870
 
3010
2871
  <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
3011
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2872
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
3012
2873
  <ul class="uk-nav uk-navbar-dropdown-nav">
3013
2874
  <li class="uk-active"><a href="#">Active</a></li>
3014
2875
  <li class="uk-parent">
@@ -3129,11 +2990,11 @@
3129
2990
  </ul>
3130
2991
  </div>
3131
2992
  </li>
3132
- <li><a href="#">Item</a></li>
2993
+ <li><a href="#">asdf</a></li>
3133
2994
  </ul>
3134
2995
 
3135
2996
  <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
3136
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2997
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
3137
2998
  <ul class="uk-nav uk-navbar-dropdown-nav">
3138
2999
  <li class="uk-active"><a href="#">Active</a></li>
3139
3000
  <li class="uk-parent">
@@ -3196,7 +3057,7 @@
3196
3057
  <div class="uk-navbar-right">
3197
3058
 
3198
3059
  <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
3199
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
3060
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
3200
3061
  <ul class="uk-nav uk-navbar-dropdown-nav">
3201
3062
  <li class="uk-active"><a href="#">Active</a></li>
3202
3063
  <li class="uk-parent">
@@ -3219,7 +3080,7 @@
3219
3080
  </div>
3220
3081
  </nav>
3221
3082
 
3222
- <div class="uk-container">
3083
+ <div class="uk-container uk-margin-medium-top">
3223
3084
 
3224
3085
  <h2>JavaScript Options</h2>
3225
3086
 
@@ -3244,7 +3105,7 @@
3244
3105
  <td><code>mode</code></td>
3245
3106
  <td>hover | click</td>
3246
3107
  <td>click,hover</td>
3247
- <td>Comma separated list of dropdown trigger behaviour modes.</td>
3108
+ <td>Comma-separated list of dropdown trigger behavior modes.</td>
3248
3109
  </tr>
3249
3110
  <tr>
3250
3111
  <td><code>delay-show</code></td>
@@ -3260,15 +3121,27 @@
3260
3121
  </tr>
3261
3122
  <tr>
3262
3123
  <td><code>boundary</code></td>
3263
- <td>CSS selector</td>
3124
+ <td>Boolean, CSS selector</td>
3264
3125
  <td>true</td>
3265
3126
  <td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
3266
3127
  </tr>
3267
3128
  <tr>
3268
- <td><code>boundary-align</code></td>
3269
- <td>Boolean</td>
3129
+ <td><code>target</code></td>
3130
+ <td>Boolean, CSS selector</td>
3131
+ <td>false</td>
3132
+ <td>The element the drops are positioned to (`true` for window).</td>
3133
+ </tr>
3134
+ <tr>
3135
+ <td><code>target-x</code></td>
3136
+ <td>Boolean, CSS selector</td>
3270
3137
  <td>false</td>
3271
- <td>Align Drop to boundary.</td>
3138
+ <td>The element's X axis the drops are positioned to (`true` for window).</td>
3139
+ </tr>
3140
+ <tr>
3141
+ <td><code>target-y</code></td>
3142
+ <td>Boolean, CSS selector</td>
3143
+ <td>false</td>
3144
+ <td>The element's Y axis the drop are positioned to (`true` for window).</td>
3272
3145
  </tr>
3273
3146
  <tr>
3274
3147
  <td><code>cls-drop</code></td>
@@ -3317,36 +3190,28 @@
3317
3190
 
3318
3191
  <script>
3319
3192
 
3320
- var util = UIkit.util,
3321
- tracker = new util.MouseTracker(),
3322
- el = util.$('#js-mousetracker'),
3323
- target = util.$('#js-mousetarget'),
3324
- interval;
3193
+ const {$, addClass, on, removeClass, MouseTracker } = UIkit.util;
3194
+ const tracker = MouseTracker();
3195
+ const el = $('#js-mousetracker');
3196
+ const target = $('#js-mousetarget');
3197
+ let interval;
3325
3198
 
3326
- util.on(el, 'mouseenter', function () {
3199
+ on(el, 'mouseenter', () => {
3327
3200
  tracker.init();
3328
- interval = setInterval(function () {
3329
- target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to';
3330
- });
3201
+ interval = setInterval(() => target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to');
3331
3202
  });
3332
3203
 
3333
- util.on(el, 'mouseleave', function () {
3204
+ on(el, 'mouseleave', () => {
3334
3205
  tracker.cancel();
3335
3206
  clearInterval(interval);
3336
3207
  });
3337
3208
 
3338
- </script>
3339
-
3340
- <script>
3341
-
3342
- var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
3343
-
3344
- UIkit.util.on('#js-size-switcher', 'change', function () {
3345
- var value = this.value;
3346
- UIkit.util.$$('.uk-navbar-dropdown').forEach(function (table) {
3347
- UIkit.util.removeClass(table, options);
3348
- UIkit.util.addClass(table, value);
3349
- });
3209
+ on('#js-size-switcher', 'change', (e) => {
3210
+ const options = $$('option', e.target).map(({value}) => value);
3211
+ for (const el of $$('.uk-navbar-dropdown')) {
3212
+ removeClass(el, options);
3213
+ addClass(el, e.target.value);
3214
+ }
3350
3215
  });
3351
3216
 
3352
3217
  </script>