uikit 3.14.4-dev.5e7e87ba7 → 3.14.4-dev.5fbbc45fb
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.
- package/CHANGELOG.md +5 -1
- package/dist/css/uikit-core-rtl.css +14 -3
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +14 -3
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +16 -28
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +16 -28
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +27 -17
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +27 -17
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +4 -2
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +1 -1
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +1 -1
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +1 -1
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +1 -1
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +1 -1
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +17 -8
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +1 -1
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +223 -185
- package/dist/js/uikit-core.min.js +15 -12
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +226 -186
- package/dist/js/uikit.min.js +15 -12
- package/package.json +11 -11
- package/src/images/components/navbar-toggle-icon.svg +17 -14
- package/src/js/api/hooks.js +5 -1
- package/src/js/api/state.js +1 -1
- package/src/js/components/notification.js +3 -1
- package/src/js/core/drop.js +32 -33
- package/src/js/core/navbar.js +3 -1
- package/src/js/core/offcanvas.js +8 -4
- package/src/js/core/toggle.js +3 -5
- package/src/js/mixin/modal.js +15 -12
- package/src/js/mixin/position.js +5 -4
- package/src/js/mixin/style.js +11 -0
- package/src/js/mixin/togglable.js +11 -3
- package/src/js/util/animation.js +5 -4
- package/src/js/util/class.js +3 -1
- package/src/js/util/position.js +127 -116
- package/src/less/components/dropbar.less +11 -0
- package/src/less/components/nav.less +3 -1
- package/src/less/components/navbar.less +17 -3
- package/src/less/theme/navbar.less +5 -32
- package/src/scss/components/dropbar.scss +11 -0
- package/src/scss/components/nav.scss +3 -1
- package/src/scss/components/navbar.scss +17 -3
- package/src/scss/mixins-theme.scss +3 -28
- package/src/scss/mixins.scss +2 -0
- package/src/scss/theme/navbar.scss +5 -5
- package/src/scss/variables-theme.scss +8 -4
- package/src/scss/variables.scss +7 -1
- package/tests/drop.html +4 -6
- package/tests/dropbar.html +10 -8
- package/tests/flex.html +36 -36
- package/tests/grid.html +22 -22
- package/tests/height.html +6 -6
- package/tests/index.html +4 -4
- package/tests/js/index.js +1 -4
- package/tests/navbar.html +48 -21
- package/tests/pagination.html +6 -6
- package/tests/position.html +17 -4
- package/tests/search.html +2 -2
- package/tests/sticky-navbar.html +12 -12
- package/tests/utility.html +16 -16
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="#">
|
|
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="#">
|
|
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>
|
|
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/pagination.html
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<li class="uk-disabled"><a><span uk-pagination-previous></span></a></li>
|
|
19
19
|
<li><a href="#"><span uk-pagination-previous></span></a></li>
|
|
20
20
|
<li><a href="#">1</a></li>
|
|
21
|
-
<li class="uk-disabled"><span
|
|
21
|
+
<li class="uk-disabled"><span>…</span></li>
|
|
22
22
|
<li><a href="#">4</a></li>
|
|
23
23
|
<li><a href="#">5</a></li>
|
|
24
24
|
<li><a href="#">6</a></li>
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<li><a href="#">8</a></li>
|
|
27
27
|
<li><a href="#">9</a></li>
|
|
28
28
|
<li><a href="#">10</a></li>
|
|
29
|
-
<li class="uk-disabled"><span
|
|
29
|
+
<li class="uk-disabled"><span>…</span></li>
|
|
30
30
|
<li><a href="#">20</a></li>
|
|
31
31
|
<li><a href="#"><span uk-pagination-next></span></a></li>
|
|
32
32
|
<li class="uk-disabled"><a><span uk-pagination-next></span></a></li>
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
<li class="uk-disabled"><a><span uk-pagination-previous></span></a></li>
|
|
37
37
|
<li><a href="#"><span uk-pagination-previous></span></a></li>
|
|
38
38
|
<li><a href="#">1</a></li>
|
|
39
|
-
<li class="uk-disabled"><span
|
|
39
|
+
<li class="uk-disabled"><span>…</span></li>
|
|
40
40
|
<li><a href="#">4</a></li>
|
|
41
41
|
<li><a href="#">5</a></li>
|
|
42
42
|
<li><a href="#">6</a></li>
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
<li><a href="#">8</a></li>
|
|
45
45
|
<li><a href="#">9</a></li>
|
|
46
46
|
<li><a href="#">10</a></li>
|
|
47
|
-
<li class="uk-disabled"><span
|
|
47
|
+
<li class="uk-disabled"><span>…</span></li>
|
|
48
48
|
<li><a href="#">20</a></li>
|
|
49
49
|
<li><a href="#"><span uk-pagination-next></span></a></li>
|
|
50
50
|
<li class="uk-disabled"><a><span uk-pagination-next></span></a></li>
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
<li class="uk-disabled"><a><span uk-pagination-previous></span></a></li>
|
|
55
55
|
<li><a href="#"><span uk-pagination-previous></span></a></li>
|
|
56
56
|
<li><a href="#">1</a></li>
|
|
57
|
-
<li class="uk-disabled"><span
|
|
57
|
+
<li class="uk-disabled"><span>…</span></li>
|
|
58
58
|
<li><a href="#">4</a></li>
|
|
59
59
|
<li><a href="#">5</a></li>
|
|
60
60
|
<li><a href="#">6</a></li>
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
<li><a href="#">8</a></li>
|
|
63
63
|
<li><a href="#">9</a></li>
|
|
64
64
|
<li><a href="#">10</a></li>
|
|
65
|
-
<li class="uk-disabled"><span
|
|
65
|
+
<li class="uk-disabled"><span>…</span></li>
|
|
66
66
|
<li><a href="#">20</a></li>
|
|
67
67
|
<li><a href="#"><span uk-pagination-next></span></a></li>
|
|
68
68
|
<li class="uk-disabled"><a><span uk-pagination-next></span></a></li>
|
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
|
|
307
|
-
|
|
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
|
-
|
|
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">
|
package/tests/utility.html
CHANGED
|
@@ -114,43 +114,43 @@
|
|
|
114
114
|
<h2>Pre scrollable</h2>
|
|
115
115
|
|
|
116
116
|
<pre class="uk-overflow-auto uk-height-medium uk-resize"><code><div uk-grid>
|
|
117
|
-
<div class="uk-width-1-2">
|
|
118
|
-
<div class="uk-width-1-2">
|
|
117
|
+
<div class="uk-width-1-2">…</div><div class="uk-width-1-2">…</div><div class="uk-width-1-2">…</div>
|
|
118
|
+
<div class="uk-width-1-2">…</div>
|
|
119
119
|
</div>
|
|
120
120
|
|
|
121
121
|
<div uk-grid>
|
|
122
|
-
<div class="uk-width-1-2">
|
|
123
|
-
<div class="uk-width-1-2">
|
|
122
|
+
<div class="uk-width-1-2">…</div>
|
|
123
|
+
<div class="uk-width-1-2">…</div>
|
|
124
124
|
</div>
|
|
125
125
|
|
|
126
126
|
<div uk-grid>
|
|
127
|
-
<div class="uk-width-1-2">
|
|
128
|
-
<div class="uk-width-1-2">
|
|
127
|
+
<div class="uk-width-1-2">…</div>
|
|
128
|
+
<div class="uk-width-1-2">…</div>
|
|
129
129
|
</div>
|
|
130
130
|
|
|
131
131
|
<div uk-grid>
|
|
132
|
-
<div class="uk-width-1-2">
|
|
133
|
-
<div class="uk-width-1-2">
|
|
132
|
+
<div class="uk-width-1-2">…</div>
|
|
133
|
+
<div class="uk-width-1-2">…</div>
|
|
134
134
|
</div>
|
|
135
135
|
|
|
136
136
|
<div uk-grid>
|
|
137
|
-
<div class="uk-width-1-2">
|
|
138
|
-
<div class="uk-width-1-2">
|
|
137
|
+
<div class="uk-width-1-2">…</div>
|
|
138
|
+
<div class="uk-width-1-2">…</div>
|
|
139
139
|
</div>
|
|
140
140
|
|
|
141
141
|
<div uk-grid>
|
|
142
|
-
<div class="uk-width-1-2">
|
|
143
|
-
<div class="uk-width-1-2">
|
|
142
|
+
<div class="uk-width-1-2">…</div>
|
|
143
|
+
<div class="uk-width-1-2">…</div>
|
|
144
144
|
</div>
|
|
145
145
|
|
|
146
146
|
<div uk-grid>
|
|
147
|
-
<div class="uk-width-1-2">
|
|
148
|
-
<div class="uk-width-1-2">
|
|
147
|
+
<div class="uk-width-1-2">…</div>
|
|
148
|
+
<div class="uk-width-1-2">…</div>
|
|
149
149
|
</div>
|
|
150
150
|
|
|
151
151
|
<div uk-grid>
|
|
152
|
-
<div class="uk-width-1-2">
|
|
153
|
-
<div class="uk-width-1-2">
|
|
152
|
+
<div class="uk-width-1-2">…</div>
|
|
153
|
+
<div class="uk-width-1-2">…</div>
|
|
154
154
|
</div></code></pre>
|
|
155
155
|
|
|
156
156
|
</div>
|