uikit 3.14.4-dev.d014a9a57 → 3.14.4-dev.d2929b5b7
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 +34 -17
- package/build/util.js +1 -0
- package/dist/css/uikit-core-rtl.css +317 -76
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +317 -76
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +337 -80
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +337 -80
- 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 +77 -120
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +77 -120
- 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 +4 -5
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +4 -5
- 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 +4 -5
- 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 +88 -134
- 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 +357 -367
- 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 +357 -367
- 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/index.js +1 -1
- package/src/js/core/leader.js +2 -2
- package/src/js/core/navbar.js +28 -45
- package/src/js/core/scroll.js +37 -10
- package/src/js/mixin/media.js +4 -5
- package/src/js/mixin/modal.js +9 -6
- package/src/js/mixin/position.js +21 -24
- 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/style.js +4 -13
- 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 +11 -19
- package/src/less/components/leader.less +1 -1
- package/src/less/components/nav.less +212 -23
- package/src/less/components/navbar.less +16 -52
- package/src/less/components/utility.less +10 -2
- 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 +11 -19
- package/src/scss/components/leader.scss +1 -1
- package/src/scss/components/nav.scss +161 -22
- package/src/scss/components/navbar.scss +16 -52
- package/src/scss/components/utility.scss +8 -1
- package/src/scss/mixins-theme.scss +80 -8
- package/src/scss/mixins.scss +77 -4
- 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 +51 -10
- package/src/scss/variables.scss +40 -8
- 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 -218
- 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/utility.html +19 -0
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
|
|
|
@@ -2794,12 +2666,6 @@
|
|
|
2794
2666
|
<li><a href="#">Parent</a></li>
|
|
2795
2667
|
<li><a href="#">Item</a></li>
|
|
2796
2668
|
<li><a href="#">Item</a></li>
|
|
2797
|
-
</ul>
|
|
2798
|
-
|
|
2799
|
-
</div>
|
|
2800
|
-
<div class="uk-navbar-right">
|
|
2801
|
-
|
|
2802
|
-
<ul class="uk-navbar-nav">
|
|
2803
2669
|
<li><a href="#">Item</a></li>
|
|
2804
2670
|
</ul>
|
|
2805
2671
|
|
|
@@ -2822,7 +2688,7 @@
|
|
|
2822
2688
|
</div>
|
|
2823
2689
|
</nav>
|
|
2824
2690
|
|
|
2825
|
-
<div class="uk-container">
|
|
2691
|
+
<div class="uk-container uk-margin-medium-top">
|
|
2826
2692
|
|
|
2827
2693
|
<h2>Layouts</h2>
|
|
2828
2694
|
|
|
@@ -2922,7 +2788,7 @@
|
|
|
2922
2788
|
</ul>
|
|
2923
2789
|
</div>
|
|
2924
2790
|
</li>
|
|
2925
|
-
<li><a href="#">
|
|
2791
|
+
<li><a href="#">sdaf asdf </a></li>
|
|
2926
2792
|
</ul>
|
|
2927
2793
|
|
|
2928
2794
|
<div class="uk-navbar-item">
|
|
@@ -2940,7 +2806,7 @@
|
|
|
2940
2806
|
</div>
|
|
2941
2807
|
|
|
2942
2808
|
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
|
|
2943
|
-
<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">
|
|
2944
2810
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2945
2811
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
2946
2812
|
<li class="uk-parent">
|
|
@@ -3003,7 +2869,7 @@
|
|
|
3003
2869
|
<div class="uk-navbar-right">
|
|
3004
2870
|
|
|
3005
2871
|
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
|
|
3006
|
-
<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">
|
|
3007
2873
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
3008
2874
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
3009
2875
|
<li class="uk-parent">
|
|
@@ -3124,11 +2990,11 @@
|
|
|
3124
2990
|
</ul>
|
|
3125
2991
|
</div>
|
|
3126
2992
|
</li>
|
|
3127
|
-
<li><a href="#">
|
|
2993
|
+
<li><a href="#">asdf</a></li>
|
|
3128
2994
|
</ul>
|
|
3129
2995
|
|
|
3130
2996
|
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
|
|
3131
|
-
<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">
|
|
3132
2998
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
3133
2999
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
3134
3000
|
<li class="uk-parent">
|
|
@@ -3191,7 +3057,7 @@
|
|
|
3191
3057
|
<div class="uk-navbar-right">
|
|
3192
3058
|
|
|
3193
3059
|
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
|
|
3194
|
-
<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">
|
|
3195
3061
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
3196
3062
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
3197
3063
|
<li class="uk-parent">
|
|
@@ -3214,7 +3080,7 @@
|
|
|
3214
3080
|
</div>
|
|
3215
3081
|
</nav>
|
|
3216
3082
|
|
|
3217
|
-
<div class="uk-container">
|
|
3083
|
+
<div class="uk-container uk-margin-medium-top">
|
|
3218
3084
|
|
|
3219
3085
|
<h2>JavaScript Options</h2>
|
|
3220
3086
|
|
|
@@ -3239,7 +3105,7 @@
|
|
|
3239
3105
|
<td><code>mode</code></td>
|
|
3240
3106
|
<td>hover | click</td>
|
|
3241
3107
|
<td>click,hover</td>
|
|
3242
|
-
<td>Comma
|
|
3108
|
+
<td>Comma-separated list of dropdown trigger behavior modes.</td>
|
|
3243
3109
|
</tr>
|
|
3244
3110
|
<tr>
|
|
3245
3111
|
<td><code>delay-show</code></td>
|
|
@@ -3255,15 +3121,15 @@
|
|
|
3255
3121
|
</tr>
|
|
3256
3122
|
<tr>
|
|
3257
3123
|
<td><code>boundary</code></td>
|
|
3258
|
-
<td>CSS selector</td>
|
|
3124
|
+
<td>Boolean, CSS selector</td>
|
|
3259
3125
|
<td>true</td>
|
|
3260
3126
|
<td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
|
|
3261
3127
|
</tr>
|
|
3262
3128
|
<tr>
|
|
3263
|
-
<td><code>
|
|
3264
|
-
<td>Boolean</td>
|
|
3129
|
+
<td><code>target</code></td>
|
|
3130
|
+
<td>Boolean, CSS selector</td>
|
|
3265
3131
|
<td>false</td>
|
|
3266
|
-
<td>Align Drop to
|
|
3132
|
+
<td>Align Drop to navbar.</td>
|
|
3267
3133
|
</tr>
|
|
3268
3134
|
<tr>
|
|
3269
3135
|
<td><code>cls-drop</code></td>
|
|
@@ -3312,36 +3178,28 @@
|
|
|
3312
3178
|
|
|
3313
3179
|
<script>
|
|
3314
3180
|
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
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;
|
|
3320
3186
|
|
|
3321
|
-
|
|
3187
|
+
on(el, 'mouseenter', () => {
|
|
3322
3188
|
tracker.init();
|
|
3323
|
-
interval = setInterval(
|
|
3324
|
-
target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to';
|
|
3325
|
-
});
|
|
3189
|
+
interval = setInterval(() => target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to');
|
|
3326
3190
|
});
|
|
3327
3191
|
|
|
3328
|
-
|
|
3192
|
+
on(el, 'mouseleave', () => {
|
|
3329
3193
|
tracker.cancel();
|
|
3330
3194
|
clearInterval(interval);
|
|
3331
3195
|
});
|
|
3332
3196
|
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
UIkit.util.on('#js-size-switcher', 'change', function () {
|
|
3340
|
-
var value = this.value;
|
|
3341
|
-
UIkit.util.$$('.uk-navbar-dropdown').forEach(function (table) {
|
|
3342
|
-
UIkit.util.removeClass(table, options);
|
|
3343
|
-
UIkit.util.addClass(table, value);
|
|
3344
|
-
});
|
|
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
|
+
}
|
|
3345
3203
|
});
|
|
3346
3204
|
|
|
3347
3205
|
</script>
|