uikit 3.14.4-dev.fea9fd466 → 3.14.4-dev.fef7412a0
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 +31 -17
- package/build/util.js +1 -0
- package/dist/css/uikit-core-rtl.css +281 -61
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +281 -61
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +304 -91
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +304 -91
- 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 +96 -131
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +96 -131
- 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 +99 -136
- 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 +484 -452
- package/dist/js/uikit-core.min.js +17 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +487 -453
- package/dist/js/uikit.min.js +17 -1
- package/package.json +11 -11
- package/src/images/components/navbar-toggle-icon.svg +25 -3
- package/src/js/api/hooks.js +5 -1
- package/src/js/api/state.js +2 -2
- package/src/js/components/notification.js +3 -1
- package/src/js/core/accordion.js +9 -17
- package/src/js/core/alert.js +35 -14
- package/src/js/core/drop.js +110 -82
- package/src/js/core/navbar.js +30 -45
- package/src/js/core/offcanvas.js +8 -4
- package/src/js/core/scroll.js +37 -10
- package/src/js/core/toggle.js +3 -5
- package/src/js/mixin/modal.js +15 -12
- package/src/js/mixin/position.js +21 -22
- package/src/js/mixin/style.js +11 -0
- package/src/js/mixin/togglable.js +88 -124
- package/src/js/util/animation.js +9 -7
- package/src/js/util/class.js +3 -1
- package/src/js/util/filter.js +3 -7
- package/src/js/util/position.js +107 -107
- package/src/js/util/viewport.js +1 -1
- package/src/less/components/_import.less +1 -0
- package/src/less/components/drop.less +1 -18
- package/src/less/components/dropbar.less +126 -0
- package/src/less/components/dropdown.less +6 -20
- package/src/less/components/nav.less +211 -22
- package/src/less/components/navbar.less +17 -51
- package/src/less/theme/_import.less +1 -0
- package/src/less/theme/dropbar.less +44 -0
- package/src/less/theme/dropdown.less +0 -11
- package/src/less/theme/nav.less +46 -0
- package/src/less/theme/navbar.less +2 -37
- package/src/scss/components/_import.scss +1 -0
- package/src/scss/components/drop.scss +1 -18
- package/src/scss/components/dropbar.scss +126 -0
- package/src/scss/components/dropdown.scss +6 -20
- package/src/scss/components/nav.scss +160 -21
- package/src/scss/components/navbar.scss +17 -51
- package/src/scss/mixins-theme.scss +79 -35
- package/src/scss/mixins.scss +75 -3
- package/src/scss/theme/_import.scss +1 -0
- package/src/scss/theme/dropbar.scss +44 -0
- package/src/scss/theme/dropdown.scss +0 -8
- package/src/scss/theme/nav.scss +44 -0
- package/src/scss/theme/navbar.scss +2 -10
- package/src/scss/variables-theme.scss +55 -12
- package/src/scss/variables.scss +43 -7
- package/tests/accordion.html +2 -2
- package/tests/alert.html +2 -2
- package/tests/countdown.html +1 -1
- package/tests/drop.html +446 -416
- package/tests/dropbar.html +458 -0
- package/tests/dropdown.html +8 -470
- package/tests/filter.html +9 -12
- package/tests/form.html +1 -1
- package/tests/index.html +124 -105
- package/tests/js/index.js +1 -4
- package/tests/lightbox.html +5 -5
- package/tests/list.html +8 -8
- package/tests/modal.html +13 -13
- package/tests/nav.html +121 -12
- package/tests/navbar.html +111 -220
- package/tests/offcanvas.html +10 -14
- package/tests/parallax.html +1 -1
- package/tests/position.html +18 -16
- package/tests/progress.html +9 -9
- package/tests/scroll.html +7 -10
- package/tests/search.html +6 -6
- package/tests/slider.html +6 -5
- package/tests/slideshow.html +8 -8
- package/tests/sortable.html +6 -8
- package/tests/sticky-navbar.html +15 -15
- package/tests/sticky.html +8 -8
- package/tests/switcher.html +1 -1
- package/tests/tab.html +1 -1
- package/tests/table.html +7 -7
- package/tests/toggle.html +2 -2
- package/tests/tooltip.html +1 -1
- package/tests/upload.html +11 -11
package/tests/navbar.html
CHANGED
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
|
|
195
195
|
<div class="uk-navbar-dropdown test">
|
|
196
196
|
|
|
197
|
-
<ul class="uk-nav uk-
|
|
197
|
+
<ul class="uk-nav uk-nav-secondary">
|
|
198
198
|
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
199
199
|
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
200
200
|
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
@@ -250,12 +250,12 @@
|
|
|
250
250
|
</div>
|
|
251
251
|
</nav>
|
|
252
252
|
|
|
253
|
-
<div class="uk-container">
|
|
253
|
+
<div class="uk-container uk-margin-medium-top">
|
|
254
254
|
|
|
255
255
|
<h2>Dropdown</h2>
|
|
256
256
|
|
|
257
257
|
<div class="uk-margin">
|
|
258
|
-
<select id="js-size-switcher" class="uk-select uk-form-width-small">
|
|
258
|
+
<select id="js-dropdown-size-switcher" class="uk-select uk-form-width-small">
|
|
259
259
|
<option value="">Default</option>
|
|
260
260
|
<option value="uk-navbar-dropdown-large">Large</option>
|
|
261
261
|
</select>
|
|
@@ -345,8 +345,8 @@
|
|
|
345
345
|
</div>
|
|
346
346
|
</li>
|
|
347
347
|
<li>
|
|
348
|
-
<a href="#">
|
|
349
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
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="#">
|
|
391
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container;
|
|
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="#">
|
|
573
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
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="#">
|
|
729
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
728
|
+
<a href="#">Stretch</a>
|
|
729
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
730
730
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
731
731
|
<div>
|
|
732
732
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -799,7 +799,7 @@
|
|
|
799
799
|
</div>
|
|
800
800
|
</nav>
|
|
801
801
|
|
|
802
|
-
<div class="uk-container">
|
|
802
|
+
<div class="uk-container uk-margin-medium-top">
|
|
803
803
|
|
|
804
804
|
<h2>Parent Icon</h2>
|
|
805
805
|
|
|
@@ -888,7 +888,7 @@
|
|
|
888
888
|
</li>
|
|
889
889
|
<li>
|
|
890
890
|
<a href="#">Justify <span uk-navbar-parent-icon></span></a>
|
|
891
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
891
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
892
892
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
893
893
|
<div>
|
|
894
894
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -929,8 +929,8 @@
|
|
|
929
929
|
</div>
|
|
930
930
|
</li>
|
|
931
931
|
<li>
|
|
932
|
-
<a href="#">
|
|
933
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container;
|
|
932
|
+
<a href="#">Stretch Full <span uk-navbar-parent-icon></span></a>
|
|
933
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
|
|
934
934
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
935
935
|
<div>
|
|
936
936
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -1003,9 +1003,9 @@
|
|
|
1003
1003
|
</div>
|
|
1004
1004
|
</nav>
|
|
1005
1005
|
|
|
1006
|
-
<div class="uk-container">
|
|
1006
|
+
<div class="uk-container uk-margin-medium-top">
|
|
1007
1007
|
|
|
1008
|
-
<h2>
|
|
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="#">
|
|
1096
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
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="#">
|
|
1138
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container;
|
|
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="#">
|
|
1320
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
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="#">
|
|
1476
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
1475
|
+
<a href="#">Stretch</a>
|
|
1476
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
1477
1477
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
1478
1478
|
<div>
|
|
1479
1479
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -1546,17 +1546,24 @@
|
|
|
1546
1546
|
</div>
|
|
1547
1547
|
</nav>
|
|
1548
1548
|
|
|
1549
|
-
<div class="uk-container">
|
|
1549
|
+
<div class="uk-container uk-margin-medium-top">
|
|
1550
1550
|
|
|
1551
1551
|
<h2>Dropbar</h2>
|
|
1552
1552
|
|
|
1553
|
+
<div class="uk-margin">
|
|
1554
|
+
<select id="js-dropbar-size-switcher" class="uk-select uk-form-width-small">
|
|
1555
|
+
<option value="">Default</option>
|
|
1556
|
+
<option value="uk-navbar-dropdown-dropbar-large">Large</option>
|
|
1557
|
+
</select>
|
|
1558
|
+
</div>
|
|
1559
|
+
|
|
1553
1560
|
<p>First example using <code>dropbar: SELECTOR</code> and second example using <code>dropbar: true</code>.</p>
|
|
1554
1561
|
|
|
1555
1562
|
</div>
|
|
1556
1563
|
|
|
1557
1564
|
<nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
|
|
1558
1565
|
<div class="uk-container">
|
|
1559
|
-
<div uk-navbar="dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
|
|
1566
|
+
<div uk-navbar="target-y: !.uk-navbar-container; dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
|
|
1560
1567
|
<div class="uk-navbar-left">
|
|
1561
1568
|
|
|
1562
1569
|
<ul class="uk-navbar-nav">
|
|
@@ -1636,8 +1643,8 @@
|
|
|
1636
1643
|
</div>
|
|
1637
1644
|
</li>
|
|
1638
1645
|
<li>
|
|
1639
|
-
<a href="#">
|
|
1640
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
1646
|
+
<a href="#">Stretch</a>
|
|
1647
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
|
|
1641
1648
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
1642
1649
|
<div>
|
|
1643
1650
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -1678,8 +1685,8 @@
|
|
|
1678
1685
|
</div>
|
|
1679
1686
|
</li>
|
|
1680
1687
|
<li>
|
|
1681
|
-
<a href="#">
|
|
1682
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container;
|
|
1688
|
+
<a href="#">Stretch Full</a>
|
|
1689
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false; target-y: !.uk-navbar-container">
|
|
1683
1690
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
1684
1691
|
<div>
|
|
1685
1692
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -1752,11 +1759,11 @@
|
|
|
1752
1759
|
</div>
|
|
1753
1760
|
</nav>
|
|
1754
1761
|
|
|
1755
|
-
<div class="uk-navbar-dropbar"></div>
|
|
1762
|
+
<div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar"></div>
|
|
1756
1763
|
|
|
1757
1764
|
<nav class="uk-navbar-container uk-margin">
|
|
1758
1765
|
<div class="uk-container">
|
|
1759
|
-
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
|
|
1766
|
+
<div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
|
|
1760
1767
|
<div class="uk-navbar-left">
|
|
1761
1768
|
|
|
1762
1769
|
<ul class="uk-navbar-nav">
|
|
@@ -1862,8 +1869,8 @@
|
|
|
1862
1869
|
</div>
|
|
1863
1870
|
</li>
|
|
1864
1871
|
<li>
|
|
1865
|
-
<a href="#">
|
|
1866
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
1872
|
+
<a href="#">Stretch</a>
|
|
1873
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
|
|
1867
1874
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
1868
1875
|
<div>
|
|
1869
1876
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -1910,9 +1917,9 @@
|
|
|
1910
1917
|
</div>
|
|
1911
1918
|
</nav>
|
|
1912
1919
|
|
|
1913
|
-
<nav class="uk-navbar-container uk-margin
|
|
1920
|
+
<nav class="uk-navbar-container uk-margin">
|
|
1914
1921
|
<div class="uk-container">
|
|
1915
|
-
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
|
|
1922
|
+
<div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
|
|
1916
1923
|
<div class="uk-navbar-left">
|
|
1917
1924
|
|
|
1918
1925
|
<ul class="uk-navbar-nav">
|
|
@@ -2018,8 +2025,8 @@
|
|
|
2018
2025
|
</div>
|
|
2019
2026
|
</li>
|
|
2020
2027
|
<li>
|
|
2021
|
-
<a href="#">
|
|
2022
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
2028
|
+
<a href="#">Stretch</a>
|
|
2029
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
|
|
2023
2030
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
2024
2031
|
<div>
|
|
2025
2032
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -2093,7 +2100,7 @@
|
|
|
2093
2100
|
</nav>
|
|
2094
2101
|
|
|
2095
2102
|
|
|
2096
|
-
<div class="uk-container">
|
|
2103
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2097
2104
|
|
|
2098
2105
|
<h2>Icons and Subtitles</h2>
|
|
2099
2106
|
|
|
@@ -2138,7 +2145,7 @@
|
|
|
2138
2145
|
</div>
|
|
2139
2146
|
</nav>
|
|
2140
2147
|
|
|
2141
|
-
<div class="uk-container">
|
|
2148
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2142
2149
|
|
|
2143
2150
|
<h2>Content Items</h2>
|
|
2144
2151
|
|
|
@@ -2194,7 +2201,7 @@
|
|
|
2194
2201
|
</div>
|
|
2195
2202
|
</nav>
|
|
2196
2203
|
|
|
2197
|
-
<div class="uk-container">
|
|
2204
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2198
2205
|
|
|
2199
2206
|
<h2>Logo and Toggle</h2>
|
|
2200
2207
|
|
|
@@ -2239,9 +2246,9 @@
|
|
|
2239
2246
|
</div>
|
|
2240
2247
|
<div class="uk-navbar-right">
|
|
2241
2248
|
|
|
2242
|
-
<a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
|
|
2243
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary:
|
|
2244
|
-
|
|
2249
|
+
<a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
|
|
2250
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
|
|
2251
|
+
|
|
2245
2252
|
</div>
|
|
2246
2253
|
</div>
|
|
2247
2254
|
</div>
|
|
@@ -2286,17 +2293,17 @@
|
|
|
2286
2293
|
</div>
|
|
2287
2294
|
<div class="uk-navbar-right">
|
|
2288
2295
|
|
|
2289
|
-
<a class="uk-navbar-toggle" href="#">
|
|
2296
|
+
<a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#">
|
|
2290
2297
|
<span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
|
|
2291
2298
|
</a>
|
|
2292
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary:
|
|
2293
|
-
|
|
2299
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
|
|
2300
|
+
|
|
2294
2301
|
</div>
|
|
2295
2302
|
</div>
|
|
2296
2303
|
</div>
|
|
2297
2304
|
</nav>
|
|
2298
2305
|
|
|
2299
|
-
<div class="uk-container">
|
|
2306
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2300
2307
|
|
|
2301
2308
|
<h2>Primary</h2>
|
|
2302
2309
|
|
|
@@ -2341,143 +2348,15 @@
|
|
|
2341
2348
|
</div>
|
|
2342
2349
|
<div class="uk-navbar-right">
|
|
2343
2350
|
|
|
2344
|
-
<a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
|
|
2345
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary:
|
|
2346
|
-
|
|
2347
|
-
</div>
|
|
2348
|
-
</div>
|
|
2349
|
-
</div>
|
|
2350
|
-
</nav>
|
|
2351
|
-
|
|
2352
|
-
<div class="uk-container">
|
|
2353
|
-
|
|
2354
|
-
<h2>Dropdown Stretch</h2>
|
|
2355
|
-
|
|
2356
|
-
<div class="uk-child-width-1-4@m" uk-grid>
|
|
2357
|
-
<div>
|
|
2358
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
2359
|
-
|
|
2360
|
-
<nav class="uk-navbar uk-navbar-container">
|
|
2361
|
-
<div class="uk-navbar-left">
|
|
2362
|
-
<a class="uk-navbar-toggle" href="#">
|
|
2363
|
-
<span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Fade</span>
|
|
2364
|
-
</a>
|
|
2365
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
|
|
2366
|
-
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2367
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2368
|
-
<li class="uk-parent">
|
|
2369
|
-
<a href="#">Parent</a>
|
|
2370
|
-
<ul class="uk-nav-sub">
|
|
2371
|
-
<li><a href="#">Sub item</a></li>
|
|
2372
|
-
<li><a href="#">Sub item</a></li>
|
|
2373
|
-
</ul>
|
|
2374
|
-
</li>
|
|
2375
|
-
<li class="uk-nav-header">Header</li>
|
|
2376
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
2377
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
2378
|
-
<li class="uk-nav-divider"></li>
|
|
2379
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
2380
|
-
</ul>
|
|
2381
|
-
</div>
|
|
2382
|
-
</div>
|
|
2383
|
-
</nav>
|
|
2384
|
-
|
|
2385
|
-
</div>
|
|
2386
|
-
</div>
|
|
2387
|
-
<div>
|
|
2388
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
2389
|
-
|
|
2390
|
-
<nav class="uk-navbar uk-navbar-container">
|
|
2391
|
-
<div class="uk-navbar-left">
|
|
2392
|
-
<a class="uk-navbar-toggle" href="#">
|
|
2393
|
-
<span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide</span>
|
|
2394
|
-
</a>
|
|
2395
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide">
|
|
2396
|
-
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2397
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2398
|
-
<li class="uk-parent">
|
|
2399
|
-
<a href="#">Parent</a>
|
|
2400
|
-
<ul class="uk-nav-sub">
|
|
2401
|
-
<li><a href="#">Sub item</a></li>
|
|
2402
|
-
<li><a href="#">Sub item</a></li>
|
|
2403
|
-
</ul>
|
|
2404
|
-
</li>
|
|
2405
|
-
<li class="uk-nav-header">Header</li>
|
|
2406
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
2407
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
2408
|
-
<li class="uk-nav-divider"></li>
|
|
2409
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
2410
|
-
</ul>
|
|
2411
|
-
</div>
|
|
2412
|
-
</div>
|
|
2413
|
-
</nav>
|
|
2414
|
-
|
|
2415
|
-
</div>
|
|
2416
|
-
</div>
|
|
2417
|
-
<div>
|
|
2418
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
2419
|
-
|
|
2420
|
-
<nav class="uk-navbar uk-navbar-container">
|
|
2421
|
-
<div class="uk-navbar-left">
|
|
2422
|
-
<a class="uk-navbar-toggle" href="#">
|
|
2423
|
-
<span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Left</span>
|
|
2424
|
-
</a>
|
|
2425
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-left">
|
|
2426
|
-
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2427
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2428
|
-
<li class="uk-parent">
|
|
2429
|
-
<a href="#">Parent</a>
|
|
2430
|
-
<ul class="uk-nav-sub">
|
|
2431
|
-
<li><a href="#">Sub item</a></li>
|
|
2432
|
-
<li><a href="#">Sub item</a></li>
|
|
2433
|
-
</ul>
|
|
2434
|
-
</li>
|
|
2435
|
-
<li class="uk-nav-header">Header</li>
|
|
2436
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
2437
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
2438
|
-
<li class="uk-nav-divider"></li>
|
|
2439
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
2440
|
-
</ul>
|
|
2441
|
-
</div>
|
|
2442
|
-
</div>
|
|
2443
|
-
</nav>
|
|
2444
|
-
|
|
2445
|
-
</div>
|
|
2446
|
-
</div>
|
|
2447
|
-
<div>
|
|
2448
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
2449
|
-
|
|
2450
|
-
<nav class="uk-navbar uk-navbar-container">
|
|
2451
|
-
<div class="uk-navbar-left">
|
|
2452
|
-
<a class="uk-navbar-toggle" href="#">
|
|
2453
|
-
<span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Right</span>
|
|
2454
|
-
</a>
|
|
2455
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
2456
|
-
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2457
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2458
|
-
<li class="uk-parent">
|
|
2459
|
-
<a href="#">Parent</a>
|
|
2460
|
-
<ul class="uk-nav-sub">
|
|
2461
|
-
<li><a href="#">Sub item</a></li>
|
|
2462
|
-
<li><a href="#">Sub item</a></li>
|
|
2463
|
-
</ul>
|
|
2464
|
-
</li>
|
|
2465
|
-
<li class="uk-nav-header">Header</li>
|
|
2466
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
2467
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
2468
|
-
<li class="uk-nav-divider"></li>
|
|
2469
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
2470
|
-
</ul>
|
|
2471
|
-
</div>
|
|
2472
|
-
</div>
|
|
2473
|
-
</nav>
|
|
2351
|
+
<a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
|
|
2352
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
|
|
2474
2353
|
|
|
2475
2354
|
</div>
|
|
2476
2355
|
</div>
|
|
2477
2356
|
</div>
|
|
2478
|
-
</
|
|
2357
|
+
</nav>
|
|
2479
2358
|
|
|
2480
|
-
<div class="uk-container">
|
|
2359
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2481
2360
|
|
|
2482
2361
|
<h2>Center</h2>
|
|
2483
2362
|
|
|
@@ -2776,9 +2655,9 @@
|
|
|
2776
2655
|
</div>
|
|
2777
2656
|
</nav>
|
|
2778
2657
|
|
|
2779
|
-
<div class="uk-container">
|
|
2658
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2780
2659
|
|
|
2781
|
-
<h2>
|
|
2660
|
+
<h2>Stretch</h2>
|
|
2782
2661
|
|
|
2783
2662
|
</div>
|
|
2784
2663
|
|
|
@@ -2816,7 +2695,7 @@
|
|
|
2816
2695
|
</div>
|
|
2817
2696
|
</nav>
|
|
2818
2697
|
|
|
2819
|
-
<div class="uk-container">
|
|
2698
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2820
2699
|
|
|
2821
2700
|
<h2>Layouts</h2>
|
|
2822
2701
|
|
|
@@ -2933,8 +2812,8 @@
|
|
|
2933
2812
|
</ul>
|
|
2934
2813
|
</div>
|
|
2935
2814
|
|
|
2936
|
-
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
|
|
2937
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown;
|
|
2815
|
+
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
|
|
2816
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
2938
2817
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2939
2818
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
2940
2819
|
<li class="uk-parent">
|
|
@@ -2996,8 +2875,8 @@
|
|
|
2996
2875
|
</div>
|
|
2997
2876
|
<div class="uk-navbar-right">
|
|
2998
2877
|
|
|
2999
|
-
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
|
|
3000
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown;
|
|
2878
|
+
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
|
|
2879
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
3001
2880
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
3002
2881
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
3003
2882
|
<li class="uk-parent">
|
|
@@ -3121,8 +3000,8 @@
|
|
|
3121
3000
|
<li><a href="#">Item</a></li>
|
|
3122
3001
|
</ul>
|
|
3123
3002
|
|
|
3124
|
-
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
|
|
3125
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown;
|
|
3003
|
+
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
|
|
3004
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
3126
3005
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
3127
3006
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
3128
3007
|
<li class="uk-parent">
|
|
@@ -3184,8 +3063,8 @@
|
|
|
3184
3063
|
</div>
|
|
3185
3064
|
<div class="uk-navbar-right">
|
|
3186
3065
|
|
|
3187
|
-
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
|
|
3188
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown;
|
|
3066
|
+
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
|
|
3067
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
3189
3068
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
3190
3069
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
3191
3070
|
<li class="uk-parent">
|
|
@@ -3208,7 +3087,7 @@
|
|
|
3208
3087
|
</div>
|
|
3209
3088
|
</nav>
|
|
3210
3089
|
|
|
3211
|
-
<div class="uk-container">
|
|
3090
|
+
<div class="uk-container uk-margin-medium-top">
|
|
3212
3091
|
|
|
3213
3092
|
<h2>JavaScript Options</h2>
|
|
3214
3093
|
|
|
@@ -3233,7 +3112,7 @@
|
|
|
3233
3112
|
<td><code>mode</code></td>
|
|
3234
3113
|
<td>hover | click</td>
|
|
3235
3114
|
<td>click,hover</td>
|
|
3236
|
-
<td>Comma
|
|
3115
|
+
<td>Comma-separated list of dropdown trigger behavior modes.</td>
|
|
3237
3116
|
</tr>
|
|
3238
3117
|
<tr>
|
|
3239
3118
|
<td><code>delay-show</code></td>
|
|
@@ -3249,15 +3128,27 @@
|
|
|
3249
3128
|
</tr>
|
|
3250
3129
|
<tr>
|
|
3251
3130
|
<td><code>boundary</code></td>
|
|
3252
|
-
<td>CSS selector</td>
|
|
3131
|
+
<td>Boolean, CSS selector</td>
|
|
3253
3132
|
<td>true</td>
|
|
3254
3133
|
<td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
|
|
3255
3134
|
</tr>
|
|
3256
3135
|
<tr>
|
|
3257
|
-
<td><code>
|
|
3258
|
-
<td>Boolean</td>
|
|
3136
|
+
<td><code>target</code></td>
|
|
3137
|
+
<td>Boolean, CSS selector</td>
|
|
3259
3138
|
<td>false</td>
|
|
3260
|
-
<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>
|
|
3261
3152
|
</tr>
|
|
3262
3153
|
<tr>
|
|
3263
3154
|
<td><code>cls-drop</code></td>
|
|
@@ -3306,36 +3197,36 @@
|
|
|
3306
3197
|
|
|
3307
3198
|
<script>
|
|
3308
3199
|
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3200
|
+
const {$, $$, addClass, on, removeClass, MouseTracker } = UIkit.util;
|
|
3201
|
+
const tracker = MouseTracker();
|
|
3202
|
+
const el = $('#js-mousetracker');
|
|
3203
|
+
const target = $('#js-mousetarget');
|
|
3204
|
+
let interval;
|
|
3314
3205
|
|
|
3315
|
-
|
|
3206
|
+
on(el, 'mouseenter', () => {
|
|
3316
3207
|
tracker.init();
|
|
3317
|
-
interval = setInterval(
|
|
3318
|
-
target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to';
|
|
3319
|
-
});
|
|
3208
|
+
interval = setInterval(() => target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to');
|
|
3320
3209
|
});
|
|
3321
3210
|
|
|
3322
|
-
|
|
3211
|
+
on(el, 'mouseleave', () => {
|
|
3323
3212
|
tracker.cancel();
|
|
3324
3213
|
clearInterval(interval);
|
|
3325
3214
|
});
|
|
3326
3215
|
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
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
|
+
});
|
|
3332
3223
|
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
}
|
|
3224
|
+
on('#js-dropbar-size-switcher', 'change', (e) => {
|
|
3225
|
+
const options = $$('option', e.target).map(({value}) => value);
|
|
3226
|
+
for (const el of $$('.uk-navbar-dropdown-dropbar')) {
|
|
3227
|
+
removeClass(el, options);
|
|
3228
|
+
addClass(el, e.target.value);
|
|
3229
|
+
}
|
|
3339
3230
|
});
|
|
3340
3231
|
|
|
3341
3232
|
</script>
|