uikit 3.14.4-dev.5e7e87ba7 → 3.14.4-dev.6002e7046

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 (77) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/dist/css/uikit-core-rtl.css +14 -3
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +14 -3
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +16 -28
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +16 -28
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +27 -17
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +27 -17
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +4 -2
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +17 -8
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +194 -161
  37. package/dist/js/uikit-core.min.js +15 -12
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +197 -162
  41. package/dist/js/uikit.min.js +15 -12
  42. package/package.json +11 -11
  43. package/src/images/components/navbar-toggle-icon.svg +17 -14
  44. package/src/js/api/hooks.js +5 -1
  45. package/src/js/api/state.js +1 -1
  46. package/src/js/components/notification.js +3 -1
  47. package/src/js/core/drop.js +32 -33
  48. package/src/js/core/navbar.js +3 -1
  49. package/src/js/core/offcanvas.js +8 -4
  50. package/src/js/core/toggle.js +3 -5
  51. package/src/js/mixin/modal.js +15 -12
  52. package/src/js/mixin/position.js +5 -4
  53. package/src/js/mixin/style.js +11 -0
  54. package/src/js/mixin/togglable.js +11 -3
  55. package/src/js/util/animation.js +5 -4
  56. package/src/js/util/class.js +3 -1
  57. package/src/js/util/position.js +96 -90
  58. package/src/less/components/dropbar.less +11 -0
  59. package/src/less/components/nav.less +3 -1
  60. package/src/less/components/navbar.less +17 -3
  61. package/src/less/theme/navbar.less +5 -32
  62. package/src/scss/components/dropbar.scss +11 -0
  63. package/src/scss/components/nav.scss +3 -1
  64. package/src/scss/components/navbar.scss +17 -3
  65. package/src/scss/mixins-theme.scss +3 -28
  66. package/src/scss/mixins.scss +2 -0
  67. package/src/scss/theme/navbar.scss +5 -5
  68. package/src/scss/variables-theme.scss +8 -4
  69. package/src/scss/variables.scss +7 -1
  70. package/tests/drop.html +4 -6
  71. package/tests/dropbar.html +10 -8
  72. package/tests/index.html +1 -1
  73. package/tests/js/index.js +1 -4
  74. package/tests/navbar.html +48 -21
  75. package/tests/position.html +17 -4
  76. package/tests/search.html +2 -2
  77. package/tests/sticky-navbar.html +12 -12
package/src/scss/variables-theme.scss CHANGED
@@ -379,6 +379,8 @@ $dropbar-padding-horizontal-m: $global-medium-gutter !default;
379
379
  $dropbar-background: $global-background !default;
380
380
  $dropbar-color: $global-color !default;
381
381
  $dropbar-color-mode: none !default;
382
+ $dropbar-large-padding-top: 40px !default;
383
+ $dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
382
384
  $dropdown-z-index: $global-z-index + 20 !default;
383
385
  $dropdown-margin: $global-small-margin !default;
384
386
  $dropdown-viewport-margin: 15px !default;
@@ -692,6 +694,7 @@ $nav-sublist-padding-vertical: 5px !default;
692
694
  $nav-sublist-padding-left: 15px !default;
693
695
  $nav-sublist-deeper-padding-left: 15px !default;
694
696
  $nav-sublist-item-padding-vertical: 2px !default;
697
+ $nav-parent-icon-margin-left: 4px !default;
695
698
  $nav-header-padding-vertical: $nav-item-padding-vertical !default;
696
699
  $nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
697
700
  $nav-header-font-size: $global-small-font-size !default;
@@ -802,16 +805,19 @@ $navbar-dropdown-padding: 25px !default;
802
805
  $navbar-dropdown-background: $global-background !default;
803
806
  $navbar-dropdown-color: $global-color !default;
804
807
  $navbar-dropdown-color-mode: none !default;
805
- $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
808
+ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
806
809
  $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
807
810
  $navbar-dropdown-large-shift-margin: 0 !default;
808
811
  $navbar-dropdown-large-padding: 40px !default;
812
+ $navbar-dropdown-dropbar-shift-margin: 0 !default;
809
813
  $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
810
814
  $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
811
- $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
812
815
  $navbar-dropdown-dropbar-viewport-margin: 15px !default;
813
816
  $navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
814
817
  $navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
818
+ $navbar-dropdown-dropbar-large-shift-margin: 0 !default;
819
+ $navbar-dropdown-dropbar-large-padding-top: $navbar-dropdown-large-padding !default;
820
+ $navbar-dropdown-dropbar-large-padding-bottom: $navbar-dropdown-dropbar-large-padding-top !default;
815
821
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
816
822
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
817
823
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
@@ -1231,8 +1237,6 @@ $inverse-nav-background-item-active-background: $inverse-global-muted-background
1231
1237
  $navbar-nav-item-text-transform: uppercase !default;
1232
1238
  $navbar-dropdown-nav-font-size: $global-small-font-size !default;
1233
1239
  $navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
1234
- $navbar-dropdown-grid-divider-border-width: $global-border-width !default;
1235
- $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default;
1236
1240
  $placeholder-border-width: $global-border-width !default;
1237
1241
  $placeholder-border: $global-border !default;
1238
1242
  $progress-border-radius: 500px !default;
package/src/scss/variables.scss CHANGED
@@ -378,6 +378,8 @@ $dropbar-padding-horizontal-m: $global-medium-gutter !default;
378
378
  $dropbar-background: $global-muted-background !default;
379
379
  $dropbar-color: $global-color !default;
380
380
  $dropbar-color-mode: none !default;
381
+ $dropbar-large-padding-top: 40px !default;
382
+ $dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
381
383
  $dropdown-z-index: $global-z-index + 20 !default;
382
384
  $dropdown-margin: $global-small-margin !default;
383
385
  $dropdown-viewport-margin: 15px !default;
@@ -690,6 +692,7 @@ $nav-sublist-padding-vertical: 5px !default;
690
692
  $nav-sublist-padding-left: 15px !default;
691
693
  $nav-sublist-deeper-padding-left: 15px !default;
692
694
  $nav-sublist-item-padding-vertical: 2px !default;
695
+ $nav-parent-icon-margin-left: 4px !default;
693
696
  $nav-header-padding-vertical: $nav-item-padding-vertical !default;
694
697
  $nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
695
698
  $nav-header-font-size: $global-small-font-size !default;
@@ -804,12 +807,15 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
804
807
  $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
805
808
  $navbar-dropdown-large-shift-margin: 0 !default;
806
809
  $navbar-dropdown-large-padding: 40px !default;
810
+ $navbar-dropdown-dropbar-shift-margin: 0 !default;
807
811
  $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
808
812
  $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
809
- $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
810
813
  $navbar-dropdown-dropbar-viewport-margin: 15px !default;
811
814
  $navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
812
815
  $navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
816
+ $navbar-dropdown-dropbar-large-shift-margin: 0 !default;
817
+ $navbar-dropdown-dropbar-large-padding-top: $navbar-dropdown-large-padding !default;
818
+ $navbar-dropdown-dropbar-large-padding-bottom: $navbar-dropdown-dropbar-large-padding-top !default;
813
819
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
814
820
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
815
821
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
package/tests/drop.html CHANGED
@@ -623,10 +623,10 @@
623
623
  <td>Delay time in hover mode before a drop is hidden in ms.</td>
624
624
  </tr>
625
625
  <tr>
626
- <td><code>display</code></td>
627
- <td>`dynamic`|`static`</td>
628
- <td>`dynamic`</td>
629
- <td>Disable dynamic positioning while scrolling by setting this option to `static`.</td>
626
+ <td><code>auto-update</code></td>
627
+ <td>Boolean</td>
628
+ <td>true</td>
629
+ <td>Disable dynamic positioning while scrolling by setting this option to `false`.</td>
630
630
  </tr>
631
631
  <tr>
632
632
  <td><code>boundary</code></td>
@@ -738,8 +738,6 @@
738
738
  );
739
739
  }
740
740
 
741
- on(document.body, 'change', () => css($$('[uk-drop]'), {width: '', height: ''}));
742
-
743
741
  </script>
744
742
 
745
743
  </body>
package/tests/dropbar.html CHANGED
@@ -8,6 +8,8 @@
8
8
  <script src="js/test.js"></script>
9
9
  <style>
10
10
 
11
+ body { padding-bottom: 500px; }
12
+
11
13
  .test {
12
14
  display: block;
13
15
  position: relative;
@@ -150,7 +152,7 @@
150
152
  <ul class="uk-navbar-nav">
151
153
  <li>
152
154
  <a href="#">Fade</a>
153
- <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; animate-out: true">
155
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: x; animate-out: true">
154
156
  <ul class="uk-nav uk-navbar-dropdown-nav">
155
157
  <li class="uk-active"><a href="#">Active</a></li>
156
158
  <li><a href="#">Item</a></li>
@@ -174,7 +176,7 @@
174
176
  <ul class="uk-navbar-nav">
175
177
  <li>
176
178
  <a href="#">Slide Top</a>
177
- <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; animation: slide-top; animate-out: true">
179
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: x; animation: slide-top; animate-out: true">
178
180
  <ul class="uk-nav uk-navbar-dropdown-nav">
179
181
  <li class="uk-active"><a href="#">Active</a></li>
180
182
  <li><a href="#">Item</a></li>
@@ -198,7 +200,7 @@
198
200
  <ul class="uk-navbar-nav">
199
201
  <li>
200
202
  <a href="#">Slide Left</a>
201
- <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; animation: slide-left; animate-out: true">
203
+ <div class="uk-dropbar uk-dropbar-left" uk-drop="target-y: !.uk-navbar-container; stretch: y; animation: slide-left; animate-out: true">
202
204
  <ul class="uk-nav uk-navbar-dropdown-nav">
203
205
  <li class="uk-active"><a href="#">Active</a></li>
204
206
  <li><a href="#">Item</a></li>
@@ -222,7 +224,7 @@
222
224
  <ul class="uk-navbar-nav">
223
225
  <li>
224
226
  <a href="#">Slide Right</a>
225
- <div class="uk-dropbar uk-dropbar-right" uk-drop="stretch: y; animation: slide-right; animate-out: true">
227
+ <div class="uk-dropbar uk-dropbar-right" uk-drop="target-y: !.uk-navbar-container; stretch: y; animation: slide-right; animate-out: true">
226
228
  <ul class="uk-nav uk-navbar-dropdown-nav">
227
229
  <li class="uk-active"><a href="#">Active</a></li>
228
230
  <li><a href="#">Item</a></li>
@@ -251,7 +253,7 @@
251
253
  <ul class="uk-navbar-nav">
252
254
  <li>
253
255
  <a href="#">Fade</a>
254
- <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: true; animate-out: true">
256
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: true; animate-out: true">
255
257
 
256
258
  <ul class="uk-nav uk-navbar-dropdown-nav">
257
259
  <li class="uk-active"><a href="#">Active</a></li>
@@ -299,7 +301,7 @@
299
301
  <ul class="uk-navbar-nav">
300
302
  <li>
301
303
  <a href="#">Slide Top</a>
302
- <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: true; animation: slide-top; animate-out: true">
304
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-top; animate-out: true">
303
305
 
304
306
  <ul class="uk-nav uk-navbar-dropdown-nav">
305
307
  <li class="uk-active"><a href="#">Active</a></li>
@@ -347,7 +349,7 @@
347
349
  <ul class="uk-navbar-nav">
348
350
  <li>
349
351
  <a href="#">Slide Left</a>
350
- <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: true; animation: slide-left; animate-out: true">
352
+ <div class="uk-dropbar uk-dropbar-left" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-left; animate-out: true">
351
353
 
352
354
  <ul class="uk-nav uk-navbar-dropdown-nav">
353
355
  <li class="uk-active"><a href="#">Active</a></li>
@@ -395,7 +397,7 @@
395
397
  <ul class="uk-navbar-nav">
396
398
  <li>
397
399
  <a href="#">Slide Right</a>
398
- <div class="uk-dropbar uk-dropbar-right" uk-drop="stretch: true; animation: slide-right; animate-out: true">
400
+ <div class="uk-dropbar uk-dropbar-right" uk-drop="target-y: !.uk-navbar-container; stretch: true; animation: slide-right; animate-out: true">
399
401
 
400
402
  <ul class="uk-nav uk-navbar-dropdown-nav">
401
403
  <li class="uk-active"><a href="#">Active</a></li>
package/tests/index.html CHANGED
@@ -41,7 +41,7 @@
41
41
  </li>
42
42
  <li>
43
43
  <a href="#">Dropbar <span uk-navbar-parent-icon></span></a>
44
- <div class="uk-dropbar uk-dropbar-top" uk-drop="pos: bottom-left; stretch: x; animation: slide-top; animate-out: true">
44
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="pos: bottom-left; stretch: x; target-y: !.uk-navbar-container; animation: slide-top; animate-out: true">
45
45
  <ul class="uk-nav uk-navbar-dropdown-nav">
46
46
  <li class="uk-active"><a href="#">Active</a></li>
47
47
  <li class="uk-parent">
package/tests/js/index.js CHANGED
@@ -16,16 +16,13 @@ const themes = request.status === 200 ? JSON.parse(request.responseText) : {};
16
16
  const styles = {
17
17
  core: { css: '../dist/css/uikit-core.css' },
18
18
  theme: { css: '../dist/css/uikit.css' },
19
+ ...themes,
19
20
  };
20
21
  const component = location.pathname
21
22
  .split('/')
22
23
  .pop()
23
24
  .replace(/.html$/, '');
24
25
 
25
- for (const theme in themes) {
26
- styles[theme] = themes[theme];
27
- }
28
-
29
26
  const variations = {
30
27
  '': 'Default',
31
28
  light: 'Dark',
package/tests/navbar.html CHANGED
@@ -255,7 +255,7 @@
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>
@@ -1550,13 +1550,20 @@
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">
@@ -1637,7 +1644,7 @@
1637
1644
  </li>
1638
1645
  <li>
1639
1646
  <a href="#">Stretch</a>
1640
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
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">
@@ -1679,7 +1686,7 @@
1679
1686
  </li>
1680
1687
  <li>
1681
1688
  <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">
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">
@@ -1756,7 +1763,7 @@
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">
@@ -1863,7 +1870,7 @@
1863
1870
  </li>
1864
1871
  <li>
1865
1872
  <a href="#">Stretch</a>
1866
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
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">
@@ -1912,7 +1919,7 @@
1912
1919
 
1913
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">
@@ -2019,7 +2026,7 @@
2019
2026
  </li>
2020
2027
  <li>
2021
2028
  <a href="#">Stretch</a>
2022
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
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">
@@ -2239,7 +2246,7 @@
2239
2246
  </div>
2240
2247
  <div class="uk-navbar-right">
2241
2248
 
2242
- <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
2249
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
2243
2250
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2244
2251
 
2245
2252
  </div>
@@ -2286,7 +2293,7 @@
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
2299
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
@@ -2341,7 +2348,7 @@
2341
2348
  </div>
2342
2349
  <div class="uk-navbar-right">
2343
2350
 
2344
- <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
2351
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
2345
2352
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2346
2353
 
2347
2354
  </div>
@@ -2788,7 +2795,7 @@
2788
2795
  </ul>
2789
2796
  </div>
2790
2797
  </li>
2791
- <li><a href="#">sdaf asdf </a></li>
2798
+ <li><a href="#">Item</a></li>
2792
2799
  </ul>
2793
2800
 
2794
2801
  <div class="uk-navbar-item">
@@ -2805,7 +2812,7 @@
2805
2812
  </ul>
2806
2813
  </div>
2807
2814
 
2808
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2815
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
2809
2816
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2810
2817
  <ul class="uk-nav uk-navbar-dropdown-nav">
2811
2818
  <li class="uk-active"><a href="#">Active</a></li>
@@ -2868,7 +2875,7 @@
2868
2875
  </div>
2869
2876
  <div class="uk-navbar-right">
2870
2877
 
2871
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2878
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
2872
2879
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2873
2880
  <ul class="uk-nav uk-navbar-dropdown-nav">
2874
2881
  <li class="uk-active"><a href="#">Active</a></li>
@@ -2990,10 +2997,10 @@
2990
2997
  </ul>
2991
2998
  </div>
2992
2999
  </li>
2993
- <li><a href="#">asdf</a></li>
3000
+ <li><a href="#">Item</a></li>
2994
3001
  </ul>
2995
3002
 
2996
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
3003
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
2997
3004
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2998
3005
  <ul class="uk-nav uk-navbar-dropdown-nav">
2999
3006
  <li class="uk-active"><a href="#">Active</a></li>
@@ -3056,7 +3063,7 @@
3056
3063
  </div>
3057
3064
  <div class="uk-navbar-right">
3058
3065
 
3059
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
3066
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
3060
3067
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
3061
3068
  <ul class="uk-nav uk-navbar-dropdown-nav">
3062
3069
  <li class="uk-active"><a href="#">Active</a></li>
@@ -3129,7 +3136,19 @@
3129
3136
  <td><code>target</code></td>
3130
3137
  <td>Boolean, CSS selector</td>
3131
3138
  <td>false</td>
3132
- <td>Align Drop to navbar.</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>
3144
+ <td>false</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>
3133
3152
  </tr>
3134
3153
  <tr>
3135
3154
  <td><code>cls-drop</code></td>
@@ -3178,7 +3197,7 @@
3178
3197
 
3179
3198
  <script>
3180
3199
 
3181
- const {$, addClass, on, removeClass, MouseTracker } = UIkit.util;
3200
+ const {$, $$, addClass, on, removeClass, MouseTracker } = UIkit.util;
3182
3201
  const tracker = MouseTracker();
3183
3202
  const el = $('#js-mousetracker');
3184
3203
  const target = $('#js-mousetarget');
@@ -3194,9 +3213,17 @@
3194
3213
  clearInterval(interval);
3195
3214
  });
3196
3215
 
3197
- on('#js-size-switcher', 'change', (e) => {
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
+ });
3223
+
3224
+ on('#js-dropbar-size-switcher', 'change', (e) => {
3198
3225
  const options = $$('option', e.target).map(({value}) => value);
3199
- for (const el of $$('.uk-navbar-dropdown')) {
3226
+ for (const el of $$('.uk-navbar-dropdown-dropbar')) {
3200
3227
  removeClass(el, options);
3201
3228
  addClass(el, e.target.value);
3202
3229
  }
package/tests/position.html CHANGED
@@ -303,8 +303,22 @@
303
303
 
304
304
  <div class="uk-margin">
305
305
  <span class="uk-form-label">Placement</span>
306
- <label><input id="js-flip" class="uk-checkbox" type="checkbox" checked> Flip</label>
307
- <label><input id="js-shift" class="uk-checkbox" type="checkbox" checked> Shift</label>
306
+ <label>
307
+ Horizontal
308
+ <select id="js-placement_x" class="uk-select uk-form-small uk-form-width-xsmall">
309
+ <option value="">None</option>
310
+ <option value="flip" selected>Flip</option>
311
+ <option value="shift">Shift</option>
312
+ </select>
313
+ </label>
314
+ <label>
315
+ Vertical
316
+ <select id="js-placement_y" class="uk-select uk-form-small uk-form-width-xsmall">
317
+ <option value="">None</option>
318
+ <option value="flip" selected>Flip</option>
319
+ <option value="shift">Shift</option>
320
+ </select>
321
+ </label>
308
322
  </div>
309
323
 
310
324
  </div>
@@ -332,8 +346,7 @@
332
346
  target: [$('#js-target_x').value, $('#js-target_y').value]
333
347
  },
334
348
  offset: [$('#js-offset_x').value, $('#js-offset_y').value],
335
- flip: $('#js-flip').checked,
336
- shift: $('#js-shift').checked
349
+ placement: [$('#js-placement_x').value, $('#js-placement_y').value]
337
350
  }
338
351
  );
339
352
  }
package/tests/search.html CHANGED
@@ -294,7 +294,7 @@
294
294
  </div>
295
295
  </nav>
296
296
 
297
- <nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar">
297
+ <nav class="uk-navbar-container uk-margin" uk-navbar="target-y: !.uk-navbar-container; dropbar: +.uk-navbar-dropbar">
298
298
  <div class="uk-navbar-left">
299
299
 
300
300
  <a class="uk-navbar-item uk-logo" href="#">Dropbar</a>
@@ -315,7 +315,7 @@
315
315
 
316
316
  <div>
317
317
  <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
318
- <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; cls-drop: uk-dropbar; boundary: !.uk-navbar; stretch: x; flip: false">
318
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; cls-drop: uk-dropbar; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
319
319
 
320
320
  <div class="uk-grid-small uk-flex-middle" uk-grid>
321
321
  <div class="uk-width-expand">
package/tests/sticky-navbar.html CHANGED
@@ -73,7 +73,7 @@
73
73
  </div>
74
74
  <div class="uk-navbar-right">
75
75
 
76
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
76
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
77
77
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
78
78
  <ul class="uk-nav uk-navbar-dropdown-nav">
79
79
  <li class="uk-active"><a href="#">Active</a></li>
@@ -121,7 +121,7 @@
121
121
  <div uk-sticky="end: #sticky-dropbar; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
122
122
  <nav class="uk-navbar-container">
123
123
  <div class="uk-container">
124
- <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
124
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
125
125
  <div class="uk-navbar-left">
126
126
 
127
127
  <a class="uk-navbar-item uk-logo" href="#">Sticky + Dropbar</a>
@@ -174,8 +174,8 @@
174
174
  </div>
175
175
  <div class="uk-navbar-right">
176
176
 
177
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
178
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
177
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
178
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
179
179
  <ul class="uk-nav uk-navbar-dropdown-nav">
180
180
  <li class="uk-active"><a href="#">Active</a></li>
181
181
  <li class="uk-parent">
@@ -275,7 +275,7 @@
275
275
  </div>
276
276
  <div class="uk-navbar-right">
277
277
 
278
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
278
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
279
279
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
280
280
  <ul class="uk-nav uk-navbar-dropdown-nav">
281
281
  <li class="uk-active"><a href="#">Active</a></li>
@@ -323,7 +323,7 @@
323
323
  <div uk-sticky="end: #scrollup-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
324
324
  <nav class="uk-navbar-container">
325
325
  <div class="uk-container uk-container-expand">
326
- <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
326
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
327
327
  <div class="uk-navbar-left">
328
328
 
329
329
  <a class="uk-navbar-item uk-logo" href="#">Scroll Up + Dropbar</a>
@@ -376,8 +376,8 @@
376
376
  </div>
377
377
  <div class="uk-navbar-right">
378
378
 
379
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
380
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
379
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
380
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
381
381
  <ul class="uk-nav uk-navbar-dropdown-nav">
382
382
  <li class="uk-active"><a href="#">Active</a></li>
383
383
  <li class="uk-parent">
@@ -479,7 +479,7 @@
479
479
  </div>
480
480
  <div class="uk-navbar-right">
481
481
 
482
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
482
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
483
483
  <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
484
484
  <ul class="uk-nav uk-navbar-dropdown-nav">
485
485
  <li class="uk-active"><a href="#">Active</a></li>
@@ -531,7 +531,7 @@
531
531
  <div uk-sticky="start: 200; end: #transparent-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
532
532
  <nav class="uk-navbar-container">
533
533
  <div class="uk-container uk-container-expand">
534
- <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
534
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
535
535
  <div class="uk-navbar-left">
536
536
 
537
537
  <a class="uk-navbar-item uk-logo" href="#">Transparent + Dropbar</a>
@@ -584,8 +584,8 @@
584
584
  </div>
585
585
  <div class="uk-navbar-right">
586
586
 
587
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
588
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
587
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
588
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
589
589
  <ul class="uk-nav uk-navbar-dropdown-nav">
590
590
  <li class="uk-active"><a href="#">Active</a></li>
591
591
  <li class="uk-parent">