uikit 3.14.2-dev.404bdcedf → 3.14.2-dev.447aa311a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/css/uikit-core-rtl.css +85 -24
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +85 -24
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +88 -23
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +88 -23
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +101 -22
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +101 -22
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +17 -2
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +135 -44
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +222 -110
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +238 -111
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/components/parallax.js +16 -1
  44. package/src/js/core/accordion.js +3 -3
  45. package/src/js/core/alert.js +1 -1
  46. package/src/js/core/drop.js +40 -20
  47. package/src/js/core/height-viewport.js +14 -9
  48. package/src/js/core/navbar.js +19 -18
  49. package/src/js/core/toggle.js +5 -8
  50. package/src/js/mixin/position.js +44 -23
  51. package/src/js/mixin/togglable.js +105 -24
  52. package/src/js/util/animation.js +1 -0
  53. package/src/js/util/viewport.js +2 -5
  54. package/src/less/components/drop.less +19 -5
  55. package/src/less/components/dropdown.less +21 -5
  56. package/src/less/components/margin.less +13 -14
  57. package/src/less/components/modal.less +19 -4
  58. package/src/less/components/nav.less +1 -1
  59. package/src/less/components/navbar.less +46 -19
  60. package/src/less/components/offcanvas.less +21 -21
  61. package/src/less/components/position.less +1 -1
  62. package/src/less/components/sticky.less +7 -0
  63. package/src/less/components/utility.less +1 -2
  64. package/src/less/theme/dropdown.less +11 -0
  65. package/src/less/theme/navbar.less +7 -0
  66. package/src/scss/components/drop.scss +19 -5
  67. package/src/scss/components/dropdown.scss +21 -5
  68. package/src/scss/components/margin.scss +13 -14
  69. package/src/scss/components/modal.scss +19 -4
  70. package/src/scss/components/nav.scss +1 -1
  71. package/src/scss/components/navbar.scss +35 -8
  72. package/src/scss/components/offcanvas.scss +21 -21
  73. package/src/scss/components/position.scss +1 -1
  74. package/src/scss/components/sticky.scss +7 -0
  75. package/src/scss/components/utility.scss +1 -2
  76. package/src/scss/mixins-theme.scss +8 -0
  77. package/src/scss/mixins.scss +2 -0
  78. package/src/scss/theme/dropdown.scss +8 -0
  79. package/src/scss/theme/navbar.scss +4 -0
  80. package/src/scss/variables-theme.scss +23 -10
  81. package/src/scss/variables.scss +22 -11
  82. package/tests/drop.html +145 -2
  83. package/tests/dropdown.html +228 -13
  84. package/tests/height-viewport.html +62 -0
  85. package/tests/navbar.html +321 -14
  86. package/tests/offcanvas.html +8 -8
  87. package/tests/sticky-navbar.html +132 -0
  88. package/tests/sticky-parallax.html +2 -1
  89. package/tests/sticky.html +5 -4
@@ -138,6 +138,68 @@
138
138
  </div>
139
139
  </div>
140
140
 
141
+ <div class="uk-child-width-1-6@m uk-light" uk-grid style="height: 600px; overflow: auto;">
142
+ <div>
143
+
144
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-viewport">
145
+ <h1>CSS</h1>
146
+ </div>
147
+
148
+ </div>
149
+ <div>
150
+
151
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport>
152
+ <h1>JS</h1>
153
+ </div>
154
+
155
+ </div>
156
+ <div>
157
+
158
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true">
159
+ <div>
160
+ <h1>JS</h1>
161
+ <div>top: true</div>
162
+ </div>
163
+ </div>
164
+
165
+ </div>
166
+ <div>
167
+
168
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: true">
169
+ <div>
170
+ <h1>JS</h1>
171
+ <div>top: true</div>
172
+ <div>bottom: true</div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="uk-padding uk-background-secondary">Lorem ipsum dolor sit amet.</div>
177
+
178
+ </div>
179
+ <div>
180
+
181
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 10">
182
+ <div>
183
+ <h1>JS</h1>
184
+ <div>top: true</div>
185
+ <div>bottom: 10%</div>
186
+ </div>
187
+ </div>
188
+
189
+ </div>
190
+ <div>
191
+
192
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
193
+ <div>
194
+ <h1>JS</h1>
195
+ <div>top: true</div>
196
+ <div>bottom: 50px</div>
197
+ </div>
198
+ </div>
199
+
200
+ </div>
201
+ </div>
202
+
141
203
  <h2>JavaScript Options</h2>
142
204
 
143
205
  <div class="uk-overflow-auto">
package/tests/navbar.html CHANGED
@@ -1425,6 +1425,93 @@
1425
1425
  </div>
1426
1426
  </div>
1427
1427
 
1428
+ <h2>Dropdown Stretch</h2>
1429
+
1430
+ <nav class="uk-navbar uk-navbar-container uk-margin">
1431
+ <div class="uk-navbar-left">
1432
+ <a class="uk-navbar-toggle" href="#">
1433
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Fade</span>
1434
+ </a>
1435
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
1436
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1437
+ <li class="uk-active"><a href="#">Active</a></li>
1438
+ <li class="uk-parent">
1439
+ <a href="#">Parent</a>
1440
+ <ul class="uk-nav-sub">
1441
+ <li><a href="#">Sub item</a></li>
1442
+ <li><a href="#">Sub item</a></li>
1443
+ </ul>
1444
+ </li>
1445
+ <li class="uk-nav-header">Header</li>
1446
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1447
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1448
+ <li class="uk-nav-divider"></li>
1449
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1450
+ </ul>
1451
+ </div>
1452
+ <a class="uk-navbar-toggle" href="#">
1453
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide</span>
1454
+ </a>
1455
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide">
1456
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1457
+ <li class="uk-active"><a href="#">Active</a></li>
1458
+ <li class="uk-parent">
1459
+ <a href="#">Parent</a>
1460
+ <ul class="uk-nav-sub">
1461
+ <li><a href="#">Sub item</a></li>
1462
+ <li><a href="#">Sub item</a></li>
1463
+ </ul>
1464
+ </li>
1465
+ <li class="uk-nav-header">Header</li>
1466
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1467
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1468
+ <li class="uk-nav-divider"></li>
1469
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1470
+ </ul>
1471
+ </div>
1472
+ <a class="uk-navbar-toggle" href="#">
1473
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Left</span>
1474
+ </a>
1475
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-left">
1476
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1477
+ <li class="uk-active"><a href="#">Active</a></li>
1478
+ <li class="uk-parent">
1479
+ <a href="#">Parent</a>
1480
+ <ul class="uk-nav-sub">
1481
+ <li><a href="#">Sub item</a></li>
1482
+ <li><a href="#">Sub item</a></li>
1483
+ </ul>
1484
+ </li>
1485
+ <li class="uk-nav-header">Header</li>
1486
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1487
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1488
+ <li class="uk-nav-divider"></li>
1489
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1490
+ </ul>
1491
+ </div>
1492
+ <a class="uk-navbar-toggle" href="#">
1493
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Right</span>
1494
+ </a>
1495
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-right">
1496
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1497
+ <li class="uk-active"><a href="#">Active</a></li>
1498
+ <li class="uk-parent">
1499
+ <a href="#">Parent</a>
1500
+ <ul class="uk-nav-sub">
1501
+ <li><a href="#">Sub item</a></li>
1502
+ <li><a href="#">Sub item</a></li>
1503
+ </ul>
1504
+ </li>
1505
+ <li class="uk-nav-header">Header</li>
1506
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1507
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1508
+ <li class="uk-nav-divider"></li>
1509
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1510
+ </ul>
1511
+ </div>
1512
+ </div>
1513
+ </nav>
1514
+
1428
1515
  <h2>Center</h2>
1429
1516
 
1430
1517
  <nav class="uk-navbar-container uk-margin" uk-navbar>
@@ -1756,12 +1843,31 @@
1756
1843
 
1757
1844
  <nav class="uk-navbar-container uk-margin">
1758
1845
  <div class="uk-container">
1759
- <div class="uk-navbar">
1846
+ <div uk-navbar>
1760
1847
  <div class="uk-navbar-left">
1761
1848
 
1762
1849
  <ul class="uk-navbar-nav">
1763
1850
  <li class="uk-active"><a href="#">Active</a></li>
1764
- <li><a href="#">Parent</a></li>
1851
+ <li>
1852
+ <a href="#">Parent</a>
1853
+ <div class="uk-navbar-dropdown">
1854
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1855
+ <li class="uk-active"><a href="#">Active</a></li>
1856
+ <li class="uk-parent">
1857
+ <a href="#">Parent</a>
1858
+ <ul class="uk-nav-sub">
1859
+ <li><a href="#">Sub item</a></li>
1860
+ <li><a href="#">Sub item</a></li>
1861
+ </ul>
1862
+ </li>
1863
+ <li class="uk-nav-header">Header</li>
1864
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1865
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1866
+ <li class="uk-nav-divider"></li>
1867
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1868
+ </ul>
1869
+ </div>
1870
+ </li>
1765
1871
  <li><a href="#">Item</a></li>
1766
1872
  <li><a href="#">Item</a></li>
1767
1873
  </ul>
@@ -1773,14 +1879,33 @@
1773
1879
 
1774
1880
  <nav class="uk-navbar-container uk-margin">
1775
1881
  <div class="uk-container">
1776
- <div class="uk-navbar">
1882
+ <div uk-navbar>
1777
1883
  <div class="uk-navbar-left">
1778
1884
 
1779
1885
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1780
1886
 
1781
1887
  <ul class="uk-navbar-nav">
1782
1888
  <li class="uk-active"><a href="#">Active</a></li>
1783
- <li><a href="#">Parent</a></li>
1889
+ <li>
1890
+ <a href="#">Parent</a>
1891
+ <div class="uk-navbar-dropdown">
1892
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1893
+ <li class="uk-active"><a href="#">Active</a></li>
1894
+ <li class="uk-parent">
1895
+ <a href="#">Parent</a>
1896
+ <ul class="uk-nav-sub">
1897
+ <li><a href="#">Sub item</a></li>
1898
+ <li><a href="#">Sub item</a></li>
1899
+ </ul>
1900
+ </li>
1901
+ <li class="uk-nav-header">Header</li>
1902
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1903
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1904
+ <li class="uk-nav-divider"></li>
1905
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1906
+ </ul>
1907
+ </div>
1908
+ </li>
1784
1909
  <li><a href="#">Item</a></li>
1785
1910
  <li><a href="#">Item</a></li>
1786
1911
  </ul>
@@ -1790,7 +1915,26 @@
1790
1915
 
1791
1916
  <ul class="uk-navbar-nav">
1792
1917
  <li class="uk-active"><a href="#">Active</a></li>
1793
- <li><a href="#">Parent</a></li>
1918
+ <li>
1919
+ <a href="#">Parent</a>
1920
+ <div class="uk-navbar-dropdown">
1921
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1922
+ <li class="uk-active"><a href="#">Active</a></li>
1923
+ <li class="uk-parent">
1924
+ <a href="#">Parent</a>
1925
+ <ul class="uk-nav-sub">
1926
+ <li><a href="#">Sub item</a></li>
1927
+ <li><a href="#">Sub item</a></li>
1928
+ </ul>
1929
+ </li>
1930
+ <li class="uk-nav-header">Header</li>
1931
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1932
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1933
+ <li class="uk-nav-divider"></li>
1934
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1935
+ </ul>
1936
+ </div>
1937
+ </li>
1794
1938
  <li><a href="#">Item</a></li>
1795
1939
  </ul>
1796
1940
 
@@ -1809,6 +1953,23 @@
1809
1953
  </div>
1810
1954
 
1811
1955
  <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1956
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
1957
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1958
+ <li class="uk-active"><a href="#">Active</a></li>
1959
+ <li class="uk-parent">
1960
+ <a href="#">Parent</a>
1961
+ <ul class="uk-nav-sub">
1962
+ <li><a href="#">Sub item</a></li>
1963
+ <li><a href="#">Sub item</a></li>
1964
+ </ul>
1965
+ </li>
1966
+ <li class="uk-nav-header">Header</li>
1967
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1968
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1969
+ <li class="uk-nav-divider"></li>
1970
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1971
+ </ul>
1972
+ </div>
1812
1973
 
1813
1974
  </div>
1814
1975
  </div>
@@ -1817,7 +1978,7 @@
1817
1978
 
1818
1979
  <nav class="uk-navbar-container uk-margin">
1819
1980
  <div class="uk-container">
1820
- <div class="uk-navbar">
1981
+ <div uk-navbar>
1821
1982
  <div class="uk-navbar-left">
1822
1983
 
1823
1984
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
@@ -1827,7 +1988,26 @@
1827
1988
 
1828
1989
  <ul class="uk-navbar-nav">
1829
1990
  <li class="uk-active"><a href="#">Active</a></li>
1830
- <li><a href="#">Parent</a></li>
1991
+ <li>
1992
+ <a href="#">Parent</a>
1993
+ <div class="uk-navbar-dropdown">
1994
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1995
+ <li class="uk-active"><a href="#">Active</a></li>
1996
+ <li class="uk-parent">
1997
+ <a href="#">Parent</a>
1998
+ <ul class="uk-nav-sub">
1999
+ <li><a href="#">Sub item</a></li>
2000
+ <li><a href="#">Sub item</a></li>
2001
+ </ul>
2002
+ </li>
2003
+ <li class="uk-nav-header">Header</li>
2004
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2005
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2006
+ <li class="uk-nav-divider"></li>
2007
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2008
+ </ul>
2009
+ </div>
2010
+ </li>
1831
2011
  <li><a href="#">Item</a></li>
1832
2012
  <li><a href="#">Item</a></li>
1833
2013
  </ul>
@@ -1836,6 +2016,23 @@
1836
2016
  <div class="uk-navbar-right">
1837
2017
 
1838
2018
  <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2019
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2020
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2021
+ <li class="uk-active"><a href="#">Active</a></li>
2022
+ <li class="uk-parent">
2023
+ <a href="#">Parent</a>
2024
+ <ul class="uk-nav-sub">
2025
+ <li><a href="#">Sub item</a></li>
2026
+ <li><a href="#">Sub item</a></li>
2027
+ </ul>
2028
+ </li>
2029
+ <li class="uk-nav-header">Header</li>
2030
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2031
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2032
+ <li class="uk-nav-divider"></li>
2033
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2034
+ </ul>
2035
+ </div>
1839
2036
 
1840
2037
  </div>
1841
2038
  </div>
@@ -1846,14 +2043,33 @@
1846
2043
 
1847
2044
  <nav class="uk-navbar-container uk-margin">
1848
2045
  <div class="uk-container uk-container-expand">
1849
- <div class="uk-navbar">
2046
+ <div uk-navbar>
1850
2047
  <div class="uk-navbar-left">
1851
2048
 
1852
2049
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1853
2050
 
1854
2051
  <ul class="uk-navbar-nav">
1855
2052
  <li class="uk-active"><a href="#">Active</a></li>
1856
- <li><a href="#">Parent</a></li>
2053
+ <li>
2054
+ <a href="#">Parent</a>
2055
+ <div class="uk-navbar-dropdown">
2056
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2057
+ <li class="uk-active"><a href="#">Active</a></li>
2058
+ <li class="uk-parent">
2059
+ <a href="#">Parent</a>
2060
+ <ul class="uk-nav-sub">
2061
+ <li><a href="#">Sub item</a></li>
2062
+ <li><a href="#">Sub item</a></li>
2063
+ </ul>
2064
+ </li>
2065
+ <li class="uk-nav-header">Header</li>
2066
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2067
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2068
+ <li class="uk-nav-divider"></li>
2069
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2070
+ </ul>
2071
+ </div>
2072
+ </li>
1857
2073
  <li><a href="#">Item</a></li>
1858
2074
  <li><a href="#">Item</a></li>
1859
2075
  </ul>
@@ -1865,14 +2081,33 @@
1865
2081
 
1866
2082
  <nav class="uk-navbar-container uk-margin">
1867
2083
  <div class="uk-container uk-container-expand">
1868
- <div class="uk-navbar">
2084
+ <div uk-navbar>
1869
2085
  <div class="uk-navbar-left">
1870
2086
 
1871
2087
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1872
2088
 
1873
2089
  <ul class="uk-navbar-nav">
1874
2090
  <li class="uk-active"><a href="#">Active</a></li>
1875
- <li><a href="#">Parent</a></li>
2091
+ <li>
2092
+ <a href="#">Parent</a>
2093
+ <div class="uk-navbar-dropdown">
2094
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2095
+ <li class="uk-active"><a href="#">Active</a></li>
2096
+ <li class="uk-parent">
2097
+ <a href="#">Parent</a>
2098
+ <ul class="uk-nav-sub">
2099
+ <li><a href="#">Sub item</a></li>
2100
+ <li><a href="#">Sub item</a></li>
2101
+ </ul>
2102
+ </li>
2103
+ <li class="uk-nav-header">Header</li>
2104
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2105
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2106
+ <li class="uk-nav-divider"></li>
2107
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2108
+ </ul>
2109
+ </div>
2110
+ </li>
1876
2111
  <li><a href="#">Item</a></li>
1877
2112
  <li><a href="#">Item</a></li>
1878
2113
  </ul>
@@ -1882,11 +2117,47 @@
1882
2117
 
1883
2118
  <ul class="uk-navbar-nav">
1884
2119
  <li class="uk-active"><a href="#">Active</a></li>
1885
- <li><a href="#">Parent</a></li>
2120
+ <li>
2121
+ <a href="#">Parent</a>
2122
+ <div class="uk-navbar-dropdown">
2123
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2124
+ <li class="uk-active"><a href="#">Active</a></li>
2125
+ <li class="uk-parent">
2126
+ <a href="#">Parent</a>
2127
+ <ul class="uk-nav-sub">
2128
+ <li><a href="#">Sub item</a></li>
2129
+ <li><a href="#">Sub item</a></li>
2130
+ </ul>
2131
+ </li>
2132
+ <li class="uk-nav-header">Header</li>
2133
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2134
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2135
+ <li class="uk-nav-divider"></li>
2136
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2137
+ </ul>
2138
+ </div>
2139
+ </li>
1886
2140
  <li><a href="#">Item</a></li>
1887
2141
  </ul>
1888
2142
 
1889
2143
  <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2144
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2145
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2146
+ <li class="uk-active"><a href="#">Active</a></li>
2147
+ <li class="uk-parent">
2148
+ <a href="#">Parent</a>
2149
+ <ul class="uk-nav-sub">
2150
+ <li><a href="#">Sub item</a></li>
2151
+ <li><a href="#">Sub item</a></li>
2152
+ </ul>
2153
+ </li>
2154
+ <li class="uk-nav-header">Header</li>
2155
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2156
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2157
+ <li class="uk-nav-divider"></li>
2158
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2159
+ </ul>
2160
+ </div>
1890
2161
 
1891
2162
  </div>
1892
2163
  </div>
@@ -1895,7 +2166,7 @@
1895
2166
 
1896
2167
  <nav class="uk-navbar-container uk-margin">
1897
2168
  <div class="uk-container uk-container-expand">
1898
- <div class="uk-navbar">
2169
+ <div uk-navbar>
1899
2170
  <div class="uk-navbar-left">
1900
2171
 
1901
2172
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
@@ -1905,7 +2176,26 @@
1905
2176
 
1906
2177
  <ul class="uk-navbar-nav ">
1907
2178
  <li class="uk-active"><a href="#">Active</a></li>
1908
- <li><a href="#">Parent</a></li>
2179
+ <li>
2180
+ <a href="#">Parent</a>
2181
+ <div class="uk-navbar-dropdown">
2182
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2183
+ <li class="uk-active"><a href="#">Active</a></li>
2184
+ <li class="uk-parent">
2185
+ <a href="#">Parent</a>
2186
+ <ul class="uk-nav-sub">
2187
+ <li><a href="#">Sub item</a></li>
2188
+ <li><a href="#">Sub item</a></li>
2189
+ </ul>
2190
+ </li>
2191
+ <li class="uk-nav-header">Header</li>
2192
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2193
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2194
+ <li class="uk-nav-divider"></li>
2195
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2196
+ </ul>
2197
+ </div>
2198
+ </li>
1909
2199
  <li><a href="#">Item</a></li>
1910
2200
  <li><a href="#">Item</a></li>
1911
2201
  </ul>
@@ -1914,6 +2204,23 @@
1914
2204
  <div class="uk-navbar-right">
1915
2205
 
1916
2206
  <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2207
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2208
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2209
+ <li class="uk-active"><a href="#">Active</a></li>
2210
+ <li class="uk-parent">
2211
+ <a href="#">Parent</a>
2212
+ <ul class="uk-nav-sub">
2213
+ <li><a href="#">Sub item</a></li>
2214
+ <li><a href="#">Sub item</a></li>
2215
+ </ul>
2216
+ </li>
2217
+ <li class="uk-nav-header">Header</li>
2218
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2219
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2220
+ <li class="uk-nav-divider"></li>
2221
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2222
+ </ul>
2223
+ </div>
1917
2224
 
1918
2225
  </div>
1919
2226
  </div>
@@ -140,7 +140,7 @@
140
140
  <div id="offcanvas-slide" uk-offcanvas>
141
141
  <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
142
142
 
143
- <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
143
+ <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
144
144
 
145
145
  <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
146
146
  <li class="uk-active"><a href="#">Active</a></li>
@@ -187,7 +187,7 @@
187
187
  <div id="offcanvas-reveal" uk-offcanvas="mode: reveal">
188
188
  <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
189
189
 
190
- <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
190
+ <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
191
191
 
192
192
  <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
193
193
  <li class="uk-active"><a href="#">Active</a></li>
@@ -234,7 +234,7 @@
234
234
  <div id="offcanvas-push" uk-offcanvas="mode: push">
235
235
  <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
236
236
 
237
- <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
237
+ <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
238
238
 
239
239
  <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
240
240
  <li class="uk-active"><a href="#">Active</a></li>
@@ -281,7 +281,7 @@
281
281
  <div id="offcanvas-none" uk-offcanvas="mode: none">
282
282
  <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
283
283
 
284
- <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
284
+ <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
285
285
 
286
286
  <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
287
287
  <li class="uk-active"><a href="#">Active</a></li>
@@ -328,7 +328,7 @@
328
328
  <div id="offcanvas-flip-slide" uk-offcanvas="flip: true">
329
329
  <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
330
330
 
331
- <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
331
+ <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
332
332
 
333
333
  <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
334
334
  <li class="uk-active"><a href="#">Active</a></li>
@@ -375,7 +375,7 @@
375
375
  <div id="offcanvas-flip-reveal" uk-offcanvas="mode: reveal; flip: true">
376
376
  <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
377
377
 
378
- <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
378
+ <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
379
379
 
380
380
  <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
381
381
  <li class="uk-active"><a href="#">Active</a></li>
@@ -422,7 +422,7 @@
422
422
  <div id="offcanvas-flip-push" uk-offcanvas="mode: push; flip: true">
423
423
  <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
424
424
 
425
- <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
425
+ <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
426
426
 
427
427
  <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
428
428
  <li class="uk-active"><a href="#">Active</a></li>
@@ -469,7 +469,7 @@
469
469
  <div id="offcanvas-flip-none" uk-offcanvas="mode: none; flip: true">
470
470
  <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
471
471
 
472
- <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
472
+ <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
473
473
 
474
474
  <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
475
475
  <li class="uk-active"><a href="#">Active</a></li>