uikit 3.14.4-dev.3a6c538ab → 3.14.4-dev.5e7e87ba7
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 +27 -17
- package/build/util.js +1 -0
- package/dist/css/uikit-core-rtl.css +271 -61
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +271 -61
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +291 -65
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +291 -65
- 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 +69 -114
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +69 -114
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +1 -1
- 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 +85 -131
- 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 +339 -339
- package/dist/js/uikit-core.min.js +14 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +339 -339
- package/dist/js/uikit.min.js +14 -1
- package/package.json +1 -1
- package/src/images/components/navbar-toggle-icon.svg +22 -3
- package/src/js/api/state.js +1 -1
- package/src/js/core/accordion.js +9 -17
- package/src/js/core/alert.js +35 -14
- package/src/js/core/drop.js +90 -61
- package/src/js/core/height-viewport.js +4 -2
- package/src/js/core/navbar.js +28 -45
- package/src/js/core/scroll.js +37 -10
- package/src/js/mixin/position.js +18 -20
- package/src/js/mixin/togglable.js +80 -124
- package/src/js/util/animation.js +4 -3
- package/src/js/util/filter.js +3 -7
- package/src/js/util/position.js +42 -47
- package/src/js/util/viewport.js +3 -5
- package/src/less/components/_import.less +1 -0
- package/src/less/components/drop.less +1 -18
- package/src/less/components/dropbar.less +115 -0
- package/src/less/components/dropdown.less +6 -20
- package/src/less/components/nav.less +211 -22
- package/src/less/components/navbar.less +10 -52
- 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 +1 -5
- package/src/scss/components/_import.scss +1 -0
- package/src/scss/components/drop.scss +1 -18
- package/src/scss/components/dropbar.scss +115 -0
- package/src/scss/components/dropdown.scss +6 -20
- package/src/scss/components/nav.scss +160 -21
- package/src/scss/components/navbar.scss +10 -52
- package/src/scss/mixins-theme.scss +78 -7
- 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 +1 -5
- package/src/scss/variables-theme.scss +50 -9
- package/src/scss/variables.scss +39 -7
- package/tests/accordion.html +2 -2
- package/tests/alert.html +2 -2
- package/tests/countdown.html +1 -1
- package/tests/drop.html +444 -412
- package/tests/dropbar.html +456 -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/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 +76 -212
- package/tests/offcanvas.html +10 -14
- package/tests/parallax.html +1 -1
- package/tests/position.html +13 -24
- package/tests/progress.html +9 -9
- package/tests/scroll.html +7 -10
- package/tests/search.html +5 -5
- package/tests/slider.html +6 -5
- package/tests/slideshow.html +8 -8
- package/tests/sortable.html +6 -8
- package/tests/sticky-navbar.html +6 -6
- 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,7 +250,7 @@
|
|
|
250
250
|
</div>
|
|
251
251
|
</nav>
|
|
252
252
|
|
|
253
|
-
<div class="uk-container">
|
|
253
|
+
<div class="uk-container uk-margin-medium-top">
|
|
254
254
|
|
|
255
255
|
<h2>Dropdown</h2>
|
|
256
256
|
|
|
@@ -345,8 +345,8 @@
|
|
|
345
345
|
</div>
|
|
346
346
|
</li>
|
|
347
347
|
<li>
|
|
348
|
-
<a href="#">
|
|
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,7 +1546,7 @@
|
|
|
1546
1546
|
</div>
|
|
1547
1547
|
</nav>
|
|
1548
1548
|
|
|
1549
|
-
<div class="uk-container">
|
|
1549
|
+
<div class="uk-container uk-margin-medium-top">
|
|
1550
1550
|
|
|
1551
1551
|
<h2>Dropbar</h2>
|
|
1552
1552
|
|
|
@@ -1636,8 +1636,8 @@
|
|
|
1636
1636
|
</div>
|
|
1637
1637
|
</li>
|
|
1638
1638
|
<li>
|
|
1639
|
-
<a href="#">
|
|
1640
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
1639
|
+
<a href="#">Stretch</a>
|
|
1640
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
1641
1641
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
1642
1642
|
<div>
|
|
1643
1643
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -1678,8 +1678,8 @@
|
|
|
1678
1678
|
</div>
|
|
1679
1679
|
</li>
|
|
1680
1680
|
<li>
|
|
1681
|
-
<a href="#">
|
|
1682
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container;
|
|
1681
|
+
<a href="#">Stretch Full</a>
|
|
1682
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
|
|
1683
1683
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
1684
1684
|
<div>
|
|
1685
1685
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -1752,7 +1752,7 @@
|
|
|
1752
1752
|
</div>
|
|
1753
1753
|
</nav>
|
|
1754
1754
|
|
|
1755
|
-
<div class="uk-navbar-dropbar"></div>
|
|
1755
|
+
<div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar"></div>
|
|
1756
1756
|
|
|
1757
1757
|
<nav class="uk-navbar-container uk-margin">
|
|
1758
1758
|
<div class="uk-container">
|
|
@@ -1862,8 +1862,8 @@
|
|
|
1862
1862
|
</div>
|
|
1863
1863
|
</li>
|
|
1864
1864
|
<li>
|
|
1865
|
-
<a href="#">
|
|
1866
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
1865
|
+
<a href="#">Stretch</a>
|
|
1866
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
1867
1867
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
1868
1868
|
<div>
|
|
1869
1869
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -1910,7 +1910,7 @@
|
|
|
1910
1910
|
</div>
|
|
1911
1911
|
</nav>
|
|
1912
1912
|
|
|
1913
|
-
<nav class="uk-navbar-container uk-margin
|
|
1913
|
+
<nav class="uk-navbar-container uk-margin">
|
|
1914
1914
|
<div class="uk-container">
|
|
1915
1915
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
|
|
1916
1916
|
<div class="uk-navbar-left">
|
|
@@ -2018,8 +2018,8 @@
|
|
|
2018
2018
|
</div>
|
|
2019
2019
|
</li>
|
|
2020
2020
|
<li>
|
|
2021
|
-
<a href="#">
|
|
2022
|
-
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar;
|
|
2021
|
+
<a href="#">Stretch</a>
|
|
2022
|
+
<div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
2023
2023
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
2024
2024
|
<div>
|
|
2025
2025
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
@@ -2093,7 +2093,7 @@
|
|
|
2093
2093
|
</nav>
|
|
2094
2094
|
|
|
2095
2095
|
|
|
2096
|
-
<div class="uk-container">
|
|
2096
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2097
2097
|
|
|
2098
2098
|
<h2>Icons and Subtitles</h2>
|
|
2099
2099
|
|
|
@@ -2138,7 +2138,7 @@
|
|
|
2138
2138
|
</div>
|
|
2139
2139
|
</nav>
|
|
2140
2140
|
|
|
2141
|
-
<div class="uk-container">
|
|
2141
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2142
2142
|
|
|
2143
2143
|
<h2>Content Items</h2>
|
|
2144
2144
|
|
|
@@ -2194,7 +2194,7 @@
|
|
|
2194
2194
|
</div>
|
|
2195
2195
|
</nav>
|
|
2196
2196
|
|
|
2197
|
-
<div class="uk-container">
|
|
2197
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2198
2198
|
|
|
2199
2199
|
<h2>Logo and Toggle</h2>
|
|
2200
2200
|
|
|
@@ -2240,8 +2240,8 @@
|
|
|
2240
2240
|
<div class="uk-navbar-right">
|
|
2241
2241
|
|
|
2242
2242
|
<a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
|
|
2243
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary:
|
|
2244
|
-
|
|
2243
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
|
|
2244
|
+
|
|
2245
2245
|
</div>
|
|
2246
2246
|
</div>
|
|
2247
2247
|
</div>
|
|
@@ -2289,14 +2289,14 @@
|
|
|
2289
2289
|
<a class="uk-navbar-toggle" href="#">
|
|
2290
2290
|
<span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
|
|
2291
2291
|
</a>
|
|
2292
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary:
|
|
2293
|
-
|
|
2292
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
|
|
2293
|
+
|
|
2294
2294
|
</div>
|
|
2295
2295
|
</div>
|
|
2296
2296
|
</div>
|
|
2297
2297
|
</nav>
|
|
2298
2298
|
|
|
2299
|
-
<div class="uk-container">
|
|
2299
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2300
2300
|
|
|
2301
2301
|
<h2>Primary</h2>
|
|
2302
2302
|
|
|
@@ -2342,142 +2342,14 @@
|
|
|
2342
2342
|
<div class="uk-navbar-right">
|
|
2343
2343
|
|
|
2344
2344
|
<a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
|
|
2345
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary:
|
|
2346
|
-
|
|
2347
|
-
</div>
|
|
2348
|
-
</div>
|
|
2349
|
-
</div>
|
|
2350
|
-
</nav>
|
|
2351
|
-
|
|
2352
|
-
<div class="uk-container">
|
|
2353
|
-
|
|
2354
|
-
<h2>Dropdown Stretch</h2>
|
|
2355
|
-
|
|
2356
|
-
<div class="uk-child-width-1-4@m" uk-grid>
|
|
2357
|
-
<div>
|
|
2358
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
2359
|
-
|
|
2360
|
-
<nav class="uk-navbar uk-navbar-container">
|
|
2361
|
-
<div class="uk-navbar-left">
|
|
2362
|
-
<a class="uk-navbar-toggle" href="#">
|
|
2363
|
-
<span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Fade</span>
|
|
2364
|
-
</a>
|
|
2365
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
|
|
2366
|
-
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2367
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2368
|
-
<li class="uk-parent">
|
|
2369
|
-
<a href="#">Parent</a>
|
|
2370
|
-
<ul class="uk-nav-sub">
|
|
2371
|
-
<li><a href="#">Sub item</a></li>
|
|
2372
|
-
<li><a href="#">Sub item</a></li>
|
|
2373
|
-
</ul>
|
|
2374
|
-
</li>
|
|
2375
|
-
<li class="uk-nav-header">Header</li>
|
|
2376
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
2377
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
2378
|
-
<li class="uk-nav-divider"></li>
|
|
2379
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
2380
|
-
</ul>
|
|
2381
|
-
</div>
|
|
2382
|
-
</div>
|
|
2383
|
-
</nav>
|
|
2384
|
-
|
|
2385
|
-
</div>
|
|
2386
|
-
</div>
|
|
2387
|
-
<div>
|
|
2388
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
2389
|
-
|
|
2390
|
-
<nav class="uk-navbar uk-navbar-container">
|
|
2391
|
-
<div class="uk-navbar-left">
|
|
2392
|
-
<a class="uk-navbar-toggle" href="#">
|
|
2393
|
-
<span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide</span>
|
|
2394
|
-
</a>
|
|
2395
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide">
|
|
2396
|
-
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2397
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2398
|
-
<li class="uk-parent">
|
|
2399
|
-
<a href="#">Parent</a>
|
|
2400
|
-
<ul class="uk-nav-sub">
|
|
2401
|
-
<li><a href="#">Sub item</a></li>
|
|
2402
|
-
<li><a href="#">Sub item</a></li>
|
|
2403
|
-
</ul>
|
|
2404
|
-
</li>
|
|
2405
|
-
<li class="uk-nav-header">Header</li>
|
|
2406
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
2407
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
2408
|
-
<li class="uk-nav-divider"></li>
|
|
2409
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
2410
|
-
</ul>
|
|
2411
|
-
</div>
|
|
2412
|
-
</div>
|
|
2413
|
-
</nav>
|
|
2414
|
-
|
|
2415
|
-
</div>
|
|
2416
|
-
</div>
|
|
2417
|
-
<div>
|
|
2418
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
2419
|
-
|
|
2420
|
-
<nav class="uk-navbar uk-navbar-container">
|
|
2421
|
-
<div class="uk-navbar-left">
|
|
2422
|
-
<a class="uk-navbar-toggle" href="#">
|
|
2423
|
-
<span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Left</span>
|
|
2424
|
-
</a>
|
|
2425
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-left">
|
|
2426
|
-
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2427
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2428
|
-
<li class="uk-parent">
|
|
2429
|
-
<a href="#">Parent</a>
|
|
2430
|
-
<ul class="uk-nav-sub">
|
|
2431
|
-
<li><a href="#">Sub item</a></li>
|
|
2432
|
-
<li><a href="#">Sub item</a></li>
|
|
2433
|
-
</ul>
|
|
2434
|
-
</li>
|
|
2435
|
-
<li class="uk-nav-header">Header</li>
|
|
2436
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
2437
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
2438
|
-
<li class="uk-nav-divider"></li>
|
|
2439
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
2440
|
-
</ul>
|
|
2441
|
-
</div>
|
|
2442
|
-
</div>
|
|
2443
|
-
</nav>
|
|
2444
|
-
|
|
2445
|
-
</div>
|
|
2446
|
-
</div>
|
|
2447
|
-
<div>
|
|
2448
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
2449
|
-
|
|
2450
|
-
<nav class="uk-navbar uk-navbar-container">
|
|
2451
|
-
<div class="uk-navbar-left">
|
|
2452
|
-
<a class="uk-navbar-toggle" href="#">
|
|
2453
|
-
<span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Right</span>
|
|
2454
|
-
</a>
|
|
2455
|
-
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
2456
|
-
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2457
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2458
|
-
<li class="uk-parent">
|
|
2459
|
-
<a href="#">Parent</a>
|
|
2460
|
-
<ul class="uk-nav-sub">
|
|
2461
|
-
<li><a href="#">Sub item</a></li>
|
|
2462
|
-
<li><a href="#">Sub item</a></li>
|
|
2463
|
-
</ul>
|
|
2464
|
-
</li>
|
|
2465
|
-
<li class="uk-nav-header">Header</li>
|
|
2466
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
2467
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
2468
|
-
<li class="uk-nav-divider"></li>
|
|
2469
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
2470
|
-
</ul>
|
|
2471
|
-
</div>
|
|
2472
|
-
</div>
|
|
2473
|
-
</nav>
|
|
2345
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
|
|
2474
2346
|
|
|
2475
2347
|
</div>
|
|
2476
2348
|
</div>
|
|
2477
2349
|
</div>
|
|
2478
|
-
</
|
|
2350
|
+
</nav>
|
|
2479
2351
|
|
|
2480
|
-
<div class="uk-container">
|
|
2352
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2481
2353
|
|
|
2482
2354
|
<h2>Center</h2>
|
|
2483
2355
|
|
|
@@ -2776,9 +2648,9 @@
|
|
|
2776
2648
|
</div>
|
|
2777
2649
|
</nav>
|
|
2778
2650
|
|
|
2779
|
-
<div class="uk-container">
|
|
2651
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2780
2652
|
|
|
2781
|
-
<h2>
|
|
2653
|
+
<h2>Stretch</h2>
|
|
2782
2654
|
|
|
2783
2655
|
</div>
|
|
2784
2656
|
|
|
@@ -2816,7 +2688,7 @@
|
|
|
2816
2688
|
</div>
|
|
2817
2689
|
</nav>
|
|
2818
2690
|
|
|
2819
|
-
<div class="uk-container">
|
|
2691
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2820
2692
|
|
|
2821
2693
|
<h2>Layouts</h2>
|
|
2822
2694
|
|
|
@@ -2916,7 +2788,7 @@
|
|
|
2916
2788
|
</ul>
|
|
2917
2789
|
</div>
|
|
2918
2790
|
</li>
|
|
2919
|
-
<li><a href="#">
|
|
2791
|
+
<li><a href="#">sdaf asdf </a></li>
|
|
2920
2792
|
</ul>
|
|
2921
2793
|
|
|
2922
2794
|
<div class="uk-navbar-item">
|
|
@@ -2934,7 +2806,7 @@
|
|
|
2934
2806
|
</div>
|
|
2935
2807
|
|
|
2936
2808
|
<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;
|
|
2809
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
2938
2810
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2939
2811
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
2940
2812
|
<li class="uk-parent">
|
|
@@ -2997,7 +2869,7 @@
|
|
|
2997
2869
|
<div class="uk-navbar-right">
|
|
2998
2870
|
|
|
2999
2871
|
<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;
|
|
2872
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
3001
2873
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
3002
2874
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
3003
2875
|
<li class="uk-parent">
|
|
@@ -3118,11 +2990,11 @@
|
|
|
3118
2990
|
</ul>
|
|
3119
2991
|
</div>
|
|
3120
2992
|
</li>
|
|
3121
|
-
<li><a href="#">
|
|
2993
|
+
<li><a href="#">asdf</a></li>
|
|
3122
2994
|
</ul>
|
|
3123
2995
|
|
|
3124
2996
|
<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;
|
|
2997
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
3126
2998
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
3127
2999
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
3128
3000
|
<li class="uk-parent">
|
|
@@ -3185,7 +3057,7 @@
|
|
|
3185
3057
|
<div class="uk-navbar-right">
|
|
3186
3058
|
|
|
3187
3059
|
<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;
|
|
3060
|
+
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
|
|
3189
3061
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
3190
3062
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
3191
3063
|
<li class="uk-parent">
|
|
@@ -3208,7 +3080,7 @@
|
|
|
3208
3080
|
</div>
|
|
3209
3081
|
</nav>
|
|
3210
3082
|
|
|
3211
|
-
<div class="uk-container">
|
|
3083
|
+
<div class="uk-container uk-margin-medium-top">
|
|
3212
3084
|
|
|
3213
3085
|
<h2>JavaScript Options</h2>
|
|
3214
3086
|
|
|
@@ -3233,7 +3105,7 @@
|
|
|
3233
3105
|
<td><code>mode</code></td>
|
|
3234
3106
|
<td>hover | click</td>
|
|
3235
3107
|
<td>click,hover</td>
|
|
3236
|
-
<td>Comma
|
|
3108
|
+
<td>Comma-separated list of dropdown trigger behavior modes.</td>
|
|
3237
3109
|
</tr>
|
|
3238
3110
|
<tr>
|
|
3239
3111
|
<td><code>delay-show</code></td>
|
|
@@ -3249,15 +3121,15 @@
|
|
|
3249
3121
|
</tr>
|
|
3250
3122
|
<tr>
|
|
3251
3123
|
<td><code>boundary</code></td>
|
|
3252
|
-
<td>CSS selector</td>
|
|
3124
|
+
<td>Boolean, CSS selector</td>
|
|
3253
3125
|
<td>true</td>
|
|
3254
3126
|
<td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
|
|
3255
3127
|
</tr>
|
|
3256
3128
|
<tr>
|
|
3257
|
-
<td><code>
|
|
3258
|
-
<td>Boolean</td>
|
|
3129
|
+
<td><code>target</code></td>
|
|
3130
|
+
<td>Boolean, CSS selector</td>
|
|
3259
3131
|
<td>false</td>
|
|
3260
|
-
<td>Align Drop to
|
|
3132
|
+
<td>Align Drop to navbar.</td>
|
|
3261
3133
|
</tr>
|
|
3262
3134
|
<tr>
|
|
3263
3135
|
<td><code>cls-drop</code></td>
|
|
@@ -3306,36 +3178,28 @@
|
|
|
3306
3178
|
|
|
3307
3179
|
<script>
|
|
3308
3180
|
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3181
|
+
const {$, addClass, on, removeClass, MouseTracker } = UIkit.util;
|
|
3182
|
+
const tracker = MouseTracker();
|
|
3183
|
+
const el = $('#js-mousetracker');
|
|
3184
|
+
const target = $('#js-mousetarget');
|
|
3185
|
+
let interval;
|
|
3314
3186
|
|
|
3315
|
-
|
|
3187
|
+
on(el, 'mouseenter', () => {
|
|
3316
3188
|
tracker.init();
|
|
3317
|
-
interval = setInterval(
|
|
3318
|
-
target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to';
|
|
3319
|
-
});
|
|
3189
|
+
interval = setInterval(() => target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to');
|
|
3320
3190
|
});
|
|
3321
3191
|
|
|
3322
|
-
|
|
3192
|
+
on(el, 'mouseleave', () => {
|
|
3323
3193
|
tracker.cancel();
|
|
3324
3194
|
clearInterval(interval);
|
|
3325
3195
|
});
|
|
3326
3196
|
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
UIkit.util.on('#js-size-switcher', 'change', function () {
|
|
3334
|
-
var value = this.value;
|
|
3335
|
-
UIkit.util.$$('.uk-navbar-dropdown').forEach(function (table) {
|
|
3336
|
-
UIkit.util.removeClass(table, options);
|
|
3337
|
-
UIkit.util.addClass(table, value);
|
|
3338
|
-
});
|
|
3197
|
+
on('#js-size-switcher', 'change', (e) => {
|
|
3198
|
+
const options = $$('option', e.target).map(({value}) => value);
|
|
3199
|
+
for (const el of $$('.uk-navbar-dropdown')) {
|
|
3200
|
+
removeClass(el, options);
|
|
3201
|
+
addClass(el, e.target.value);
|
|
3202
|
+
}
|
|
3339
3203
|
});
|
|
3340
3204
|
|
|
3341
3205
|
</script>
|