uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.0856bd8a6

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 (260) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/css/uikit-core-rtl.css +577 -504
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +577 -504
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +600 -527
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +600 -527
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +2 -4
  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 +96 -60
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +96 -60
  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 +11 -6
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +8 -3
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +735 -37
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +8 -3
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +792 -129
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +7 -7
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +2 -8
  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 +299 -273
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +9 -4
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +505 -365
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +3 -3
  43. package/src/images/components/navbar-toggle-icon.svg +1 -1
  44. package/src/images/icons/arrow-up-right.svg +4 -0
  45. package/src/images/icons/git-branch.svg +4 -4
  46. package/src/images/icons/git-fork.svg +4 -4
  47. package/src/images/icons/link-external.svg +5 -0
  48. package/src/images/icons/signal.svg +3 -0
  49. package/src/images/icons/telegram.svg +3 -0
  50. package/src/images/icons/threads.svg +3 -0
  51. package/src/images/icons/x.svg +3 -0
  52. package/src/js/components/countdown.js +1 -3
  53. package/src/js/components/internal/slider-preload.js +6 -0
  54. package/src/js/components/lightbox-panel.js +2 -6
  55. package/src/js/components/parallax.js +1 -20
  56. package/src/js/components/slider.js +38 -18
  57. package/src/js/components/slideshow.js +14 -46
  58. package/src/js/components/sortable.js +7 -6
  59. package/src/js/components/tooltip.js +1 -7
  60. package/src/js/core/accordion.js +1 -1
  61. package/src/js/core/drop.js +3 -5
  62. package/src/js/core/dropnav.js +24 -20
  63. package/src/js/core/height-match.js +7 -3
  64. package/src/js/core/height-placeholder.js +32 -0
  65. package/src/js/core/icon.js +12 -5
  66. package/src/js/core/index.js +2 -0
  67. package/src/js/core/inverse.js +103 -0
  68. package/src/js/core/modal.js +13 -0
  69. package/src/js/core/navbar.js +32 -172
  70. package/src/js/core/responsive.js +2 -29
  71. package/src/js/core/sticky.js +45 -29
  72. package/src/js/core/video.js +5 -1
  73. package/src/js/mixin/modal.js +1 -1
  74. package/src/js/mixin/parallax.js +19 -0
  75. package/src/js/mixin/slider-autoplay.js +1 -3
  76. package/src/js/mixin/slider-drag.js +22 -19
  77. package/src/js/mixin/slider-nav.js +10 -1
  78. package/src/js/mixin/slider-parallax.js +138 -0
  79. package/src/js/mixin/slider-reactive.js +1 -1
  80. package/src/js/mixin/slider.js +25 -3
  81. package/src/js/util/animation.js +14 -14
  82. package/src/js/util/dom.js +2 -2
  83. package/src/js/util/mouse.js +8 -11
  84. package/src/js/util/scroll.js +58 -0
  85. package/src/js/util/selector.js +4 -2
  86. package/src/js/util/style.js +3 -3
  87. package/src/js/util/viewport.js +8 -4
  88. package/src/less/components/align.less +2 -2
  89. package/src/less/components/animation.less +2 -2
  90. package/src/less/components/article.less +2 -2
  91. package/src/less/components/base.less +3 -3
  92. package/src/less/components/card.less +13 -6
  93. package/src/less/components/column.less +3 -3
  94. package/src/less/components/container.less +3 -3
  95. package/src/less/components/divider.less +2 -2
  96. package/src/less/components/dropbar.less +1 -1
  97. package/src/less/components/dropdown.less +1 -1
  98. package/src/less/components/dropnav.less +1 -1
  99. package/src/less/components/form.less +1 -1
  100. package/src/less/components/grid.less +3 -3
  101. package/src/less/components/height.less +1 -1
  102. package/src/less/components/icon.less +3 -3
  103. package/src/less/components/inverse.less +12 -0
  104. package/src/less/components/link.less +1 -1
  105. package/src/less/components/modal.less +3 -3
  106. package/src/less/components/nav.less +66 -0
  107. package/src/less/components/navbar.less +7 -11
  108. package/src/less/components/overlay.less +5 -0
  109. package/src/less/components/position.less +7 -7
  110. package/src/less/components/section.less +6 -5
  111. package/src/less/components/sticky.less +1 -1
  112. package/src/less/components/svg.less +3 -3
  113. package/src/less/components/tile.less +10 -0
  114. package/src/less/components/transition.less +9 -9
  115. package/src/less/components/utility.less +4 -4
  116. package/src/less/components/width.less +7 -7
  117. package/src/less/theme/alert.less +1 -1
  118. package/src/less/theme/align.less +1 -1
  119. package/src/less/theme/animation.less +1 -1
  120. package/src/less/theme/article.less +1 -1
  121. package/src/less/theme/background.less +1 -1
  122. package/src/less/theme/badge.less +1 -1
  123. package/src/less/theme/base.less +1 -1
  124. package/src/less/theme/breadcrumb.less +1 -1
  125. package/src/less/theme/button.less +1 -1
  126. package/src/less/theme/card.less +1 -1
  127. package/src/less/theme/close.less +1 -1
  128. package/src/less/theme/column.less +1 -1
  129. package/src/less/theme/comment.less +1 -1
  130. package/src/less/theme/container.less +1 -1
  131. package/src/less/theme/description-list.less +1 -1
  132. package/src/less/theme/divider.less +1 -1
  133. package/src/less/theme/dotnav.less +1 -1
  134. package/src/less/theme/drop.less +1 -1
  135. package/src/less/theme/dropbar.less +1 -1
  136. package/src/less/theme/dropdown.less +1 -1
  137. package/src/less/theme/form-range.less +1 -1
  138. package/src/less/theme/height.less +1 -1
  139. package/src/less/theme/icon.less +1 -1
  140. package/src/less/theme/iconnav.less +1 -1
  141. package/src/less/theme/inverse.less +1 -1
  142. package/src/less/theme/label.less +1 -1
  143. package/src/less/theme/leader.less +1 -1
  144. package/src/less/theme/lightbox.less +1 -1
  145. package/src/less/theme/margin.less +1 -1
  146. package/src/less/theme/modal.less +1 -1
  147. package/src/less/theme/nav.less +1 -1
  148. package/src/less/theme/navbar.less +3 -3
  149. package/src/less/theme/notification.less +1 -1
  150. package/src/less/theme/offcanvas.less +1 -1
  151. package/src/less/theme/overlay.less +1 -1
  152. package/src/less/theme/padding.less +1 -1
  153. package/src/less/theme/pagination.less +1 -1
  154. package/src/less/theme/position.less +1 -1
  155. package/src/less/theme/search.less +1 -1
  156. package/src/less/theme/spinner.less +1 -1
  157. package/src/less/theme/sticky.less +1 -1
  158. package/src/less/theme/tab.less +2 -2
  159. package/src/less/theme/table.less +1 -1
  160. package/src/less/theme/thumbnav.less +1 -1
  161. package/src/less/theme/tile.less +1 -1
  162. package/src/less/theme/tooltip.less +1 -1
  163. package/src/less/theme/totop.less +1 -1
  164. package/src/less/theme/transition.less +1 -1
  165. package/src/less/theme/utility.less +1 -1
  166. package/src/less/theme/variables.less +1 -1
  167. package/src/less/theme/width.less +1 -1
  168. package/src/less/uikit.less +1 -1
  169. package/src/scss/components/align.scss +2 -2
  170. package/src/scss/components/animation.scss +2 -2
  171. package/src/scss/components/base.scss +2 -2
  172. package/src/scss/components/card.scss +12 -6
  173. package/src/scss/components/column.scss +3 -3
  174. package/src/scss/components/container.scss +3 -3
  175. package/src/scss/components/divider.scss +2 -2
  176. package/src/scss/components/dropnav.scss +1 -1
  177. package/src/scss/components/form.scss +1 -1
  178. package/src/scss/components/grid.scss +3 -3
  179. package/src/scss/components/height.scss +1 -1
  180. package/src/scss/components/icon.scss +3 -3
  181. package/src/scss/components/inverse.scss +12 -0
  182. package/src/scss/components/modal.scss +3 -3
  183. package/src/scss/components/nav.scss +63 -0
  184. package/src/scss/components/navbar.scss +5 -8
  185. package/src/scss/components/overlay.scss +4 -0
  186. package/src/scss/components/position.scss +7 -7
  187. package/src/scss/components/section.scss +6 -5
  188. package/src/scss/components/sticky.scss +1 -1
  189. package/src/scss/components/svg.scss +3 -3
  190. package/src/scss/components/tile.scss +8 -0
  191. package/src/scss/components/transition.scss +9 -9
  192. package/src/scss/components/utility.scss +4 -4
  193. package/src/scss/components/width.scss +7 -7
  194. package/src/scss/mixins-theme.scss +10 -7
  195. package/src/scss/mixins.scss +7 -4
  196. package/src/scss/theme/alert.scss +1 -0
  197. package/src/scss/theme/align.scss +1 -1
  198. package/src/scss/theme/animation.scss +1 -1
  199. package/src/scss/theme/article.scss +1 -1
  200. package/src/scss/theme/background.scss +1 -1
  201. package/src/scss/theme/badge.scss +1 -1
  202. package/src/scss/theme/base.scss +1 -1
  203. package/src/scss/theme/breadcrumb.scss +1 -1
  204. package/src/scss/theme/button.scss +1 -1
  205. package/src/scss/theme/card.scss +1 -0
  206. package/src/scss/theme/close.scss +1 -1
  207. package/src/scss/theme/column.scss +1 -1
  208. package/src/scss/theme/comment.scss +1 -1
  209. package/src/scss/theme/container.scss +1 -1
  210. package/src/scss/theme/description-list.scss +1 -1
  211. package/src/scss/theme/divider.scss +1 -1
  212. package/src/scss/theme/dotnav.scss +1 -0
  213. package/src/scss/theme/drop.scss +1 -1
  214. package/src/scss/theme/dropbar.scss +1 -1
  215. package/src/scss/theme/dropdown.scss +1 -1
  216. package/src/scss/theme/form-range.scss +1 -1
  217. package/src/scss/theme/height.scss +1 -1
  218. package/src/scss/theme/icon.scss +1 -1
  219. package/src/scss/theme/iconnav.scss +1 -1
  220. package/src/scss/theme/inverse.scss +1 -1
  221. package/src/scss/theme/label.scss +1 -1
  222. package/src/scss/theme/leader.scss +1 -1
  223. package/src/scss/theme/lightbox.scss +1 -1
  224. package/src/scss/theme/margin.scss +1 -1
  225. package/src/scss/theme/modal.scss +1 -0
  226. package/src/scss/theme/nav.scss +1 -1
  227. package/src/scss/theme/navbar.scss +1 -1
  228. package/src/scss/theme/notification.scss +1 -1
  229. package/src/scss/theme/offcanvas.scss +1 -1
  230. package/src/scss/theme/overlay.scss +1 -1
  231. package/src/scss/theme/padding.scss +1 -1
  232. package/src/scss/theme/pagination.scss +1 -1
  233. package/src/scss/theme/position.scss +1 -1
  234. package/src/scss/theme/search.scss +1 -1
  235. package/src/scss/theme/spinner.scss +1 -1
  236. package/src/scss/theme/sticky.scss +1 -1
  237. package/src/scss/theme/tab.scss +1 -1
  238. package/src/scss/theme/table.scss +1 -0
  239. package/src/scss/theme/thumbnav.scss +1 -1
  240. package/src/scss/theme/tile.scss +1 -1
  241. package/src/scss/theme/tooltip.scss +1 -1
  242. package/src/scss/theme/totop.scss +1 -1
  243. package/src/scss/theme/transition.scss +1 -1
  244. package/src/scss/theme/utility.scss +1 -1
  245. package/src/scss/theme/variables.scss +1 -1
  246. package/src/scss/theme/width.scss +1 -1
  247. package/src/scss/uikit.scss +1 -1
  248. package/src/scss/variables-theme.scss +20 -5
  249. package/src/scss/variables.scss +20 -5
  250. package/tests/height.html +58 -1
  251. package/tests/icon.html +38 -10
  252. package/tests/nav.html +42 -0
  253. package/tests/navbar.html +1 -1
  254. package/tests/offcanvas.html +8 -8
  255. package/tests/search.html +300 -202
  256. package/tests/slider.html +58 -0
  257. package/tests/slideshow.html +66 -0
  258. package/tests/sticky-navbar.html +381 -23
  259. package/src/images/icons/pagekit.svg +0 -3
  260. package/src/js/mixin/internal/scroll.js +0 -39
package/tests/search.html CHANGED
@@ -18,123 +18,183 @@
18
18
 
19
19
  <div class="uk-margin">
20
20
  <form class="uk-search uk-search-default">
21
- <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search" autofocus>
21
+ <input class="uk-search-input" type="search" placeholder="Search…" aria-label="Search" autofocus>
22
22
  </form>
23
23
  </div>
24
24
 
25
25
  <div class="uk-margin" uk-margin>
26
26
  <form class="uk-search uk-search-default">
27
27
  <span uk-search-icon></span>
28
- <input class="uk-search-input" type="search" placeholder="Icon..." aria-label="Search">
28
+ <input class="uk-search-input" type="search" placeholder="Icon…" aria-label="Search">
29
29
  </form>
30
30
 
31
31
  <form class="uk-search uk-search-default">
32
32
  <span class="uk-search-icon-flip" uk-search-icon></span>
33
- <input class="uk-search-input" type="search" placeholder="Flip..." aria-label="Search">
33
+ <input class="uk-search-input" type="search" placeholder="Flip…" aria-label="Search">
34
34
  </form>
35
35
  </div>
36
36
 
37
37
  <div class="uk-margin" uk-margin>
38
38
  <form class="uk-search uk-search-default">
39
39
  <a href="#" uk-search-icon></a>
40
- <input class="uk-search-input" type="search" placeholder="Link..." aria-label="Search">
40
+ <input class="uk-search-input" type="search" placeholder="Link…" aria-label="Search">
41
41
  </form>
42
42
 
43
43
  <form class="uk-search uk-search-default">
44
44
  <button class="uk-search-icon-flip" uk-search-icon></button>
45
- <input class="uk-search-input" type="search" placeholder="Button..." aria-label="Search">
45
+ <input class="uk-search-input" type="search" placeholder="Button…" aria-label="Search">
46
46
  </form>
47
47
  </div>
48
48
 
49
+ </div>
50
+
51
+ <nav class="uk-navbar-container uk-margin">
52
+ <div class="uk-container">
53
+ <div uk-navbar>
54
+
55
+ <div class="uk-navbar-left">
56
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
57
+ <ul class="uk-navbar-nav">
58
+ <li class="uk-active"><a href="#">Active</a></li>
59
+ <li><a href="#">Parent</a></li>
60
+ <li><a href="#">Item</a></li>
61
+ <li><a href="#">Item</a></li>
62
+ </ul>
63
+ <div class="uk-navbar-item">
64
+ <form class="uk-search uk-search-default">
65
+ <input class="uk-search-input" type="search" placeholder="Search…" aria-label="Search" autofocus>
66
+ </form>
67
+ </div>
68
+ </div>
69
+ <div class="uk-navbar-right">
70
+ <ul class="uk-navbar-nav">
71
+ <li><a href="#">Item</a></li>
72
+ </ul>
73
+ <div class="uk-navbar-item">
74
+ <form class="uk-search uk-search-default">
75
+ <span uk-search-icon></span>
76
+ <input class="uk-search-input" type="search" placeholder="Icon…" aria-label="Search">
77
+ </form>
78
+ </div>
79
+ </div>
80
+
81
+ </div>
82
+ </div>
83
+ </nav>
84
+
85
+ <div class="uk-container uk-margin-medium-top">
86
+
49
87
  <h2>Navbar</h2>
50
88
 
51
- <div class="uk-margin uk-navbar-container uk-navbar">
52
- <div class="uk-navbar-left">
53
- <div class="uk-navbar-item">
89
+ </div>
90
+
91
+ <nav class="uk-navbar-container uk-margin">
92
+ <div class="uk-container">
93
+ <div uk-navbar>
54
94
 
55
- <form class="uk-search uk-search-navbar">
56
- <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
57
- </form>
95
+ <div class="uk-navbar-left">
96
+ <div class="uk-navbar-item">
58
97
 
98
+ <form class="uk-search uk-search-navbar">
99
+ <input class="uk-search-input" type="search" placeholder="Search…" aria-label="Search">
100
+ </form>
101
+
102
+ </div>
59
103
  </div>
104
+
60
105
  </div>
61
106
  </div>
107
+ </nav>
108
+
109
+ <nav class="uk-navbar-container uk-margin">
110
+ <div class="uk-container">
111
+ <div uk-navbar>
62
112
 
63
- <div class="uk-margin uk-navbar-container uk-navbar">
64
- <div class="uk-navbar-left">
65
- <div class="uk-navbar-item">
113
+ <div class="uk-navbar-left">
114
+ <div class="uk-navbar-item">
66
115
 
67
- <form class="uk-search uk-search-navbar">
68
- <span uk-search-icon></span>
69
- <input class="uk-search-input" type="search" placeholder="Icon..." aria-label="Search">
70
- </form>
116
+ <form class="uk-search uk-search-navbar">
117
+ <span uk-search-icon></span>
118
+ <input class="uk-search-input" type="search" placeholder="Icon…" aria-label="Search">
119
+ </form>
71
120
 
121
+ </div>
72
122
  </div>
73
- </div>
74
- <div class="uk-navbar-right">
75
- <div class="uk-navbar-item">
123
+ <div class="uk-navbar-right">
124
+ <div class="uk-navbar-item">
76
125
 
77
- <form class="uk-search uk-search-navbar">
78
- <span class="uk-search-icon-flip" uk-search-icon></span>
79
- <input class="uk-search-input" type="search" placeholder="Flip..." aria-label="Search">
80
- </form>
126
+ <form class="uk-search uk-search-navbar">
127
+ <span class="uk-search-icon-flip" uk-search-icon></span>
128
+ <input class="uk-search-input" type="search" placeholder="Flip…" aria-label="Search">
129
+ </form>
81
130
 
131
+ </div>
82
132
  </div>
133
+
83
134
  </div>
84
135
  </div>
136
+ </nav>
137
+
138
+ <nav class="uk-navbar-container uk-margin">
139
+ <div class="uk-container">
140
+ <div uk-navbar>
85
141
 
86
- <div class="uk-margin uk-navbar-container uk-navbar">
87
- <div class="uk-navbar-left">
88
- <div class="uk-navbar-item">
142
+ <div class="uk-navbar-left">
143
+ <div class="uk-navbar-item">
89
144
 
90
- <form class="uk-search uk-search-navbar">
91
- <a href="#" uk-search-icon></a>
92
- <input class="uk-search-input" type="search" placeholder="Link..." aria-label="Search">
93
- </form>
145
+ <form class="uk-search uk-search-navbar">
146
+ <a href="#" uk-search-icon></a>
147
+ <input class="uk-search-input" type="search" placeholder="Link…" aria-label="Search">
148
+ </form>
94
149
 
150
+ </div>
95
151
  </div>
96
- </div>
97
- <div class="uk-navbar-right">
98
- <div class="uk-navbar-item">
152
+ <div class="uk-navbar-right">
153
+ <div class="uk-navbar-item">
99
154
 
100
- <form class="uk-search uk-search-navbar">
101
- <button class="uk-search-icon-flip" uk-search-icon></button>
102
- <input class="uk-search-input" type="search" placeholder="Button..." aria-label="Search">
103
- </form>
155
+ <form class="uk-search uk-search-navbar">
156
+ <button class="uk-search-icon-flip" uk-search-icon></button>
157
+ <input class="uk-search-input" type="search" placeholder="Button…" aria-label="Search">
158
+ </form>
104
159
 
160
+ </div>
105
161
  </div>
162
+
106
163
  </div>
107
164
  </div>
165
+ </nav>
166
+
167
+ <div class="uk-container uk-margin-medium-top">
108
168
 
109
169
  <h2>Large</h2>
110
170
 
111
171
  <div class="uk-margin">
112
172
  <form class="uk-search uk-search-large">
113
- <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
173
+ <input class="uk-search-input" type="search" placeholder="Search…" aria-label="Search">
114
174
  </form>
115
175
  </div>
116
176
 
117
177
  <div class="uk-margin" uk-margin>
118
178
  <form class="uk-search uk-search-large">
119
179
  <span uk-search-icon></span>
120
- <input class="uk-search-input" type="search" placeholder="Icon..." aria-label="Search">
180
+ <input class="uk-search-input" type="search" placeholder="Icon…" aria-label="Search">
121
181
  </form>
122
182
 
123
183
  <form class="uk-search uk-search-large">
124
184
  <span class="uk-search-icon-flip" uk-search-icon></span>
125
- <input class="uk-search-input" type="search" placeholder="Flip..." aria-label="Search">
185
+ <input class="uk-search-input" type="search" placeholder="Flip…" aria-label="Search">
126
186
  </form>
127
187
  </div>
128
188
 
129
189
  <div class="uk-margin" uk-margin>
130
190
  <form class="uk-search uk-search-large">
131
191
  <a href="#" uk-search-icon></a>
132
- <input class="uk-search-input" type="search" placeholder="Link..." aria-label="Search">
192
+ <input class="uk-search-input" type="search" placeholder="Link…" aria-label="Search">
133
193
  </form>
134
194
 
135
195
  <form class="uk-search uk-search-large">
136
196
  <button class="uk-search-icon-flip" uk-search-icon></button>
137
- <input class="uk-search-input" type="search" placeholder="Button..." aria-label="Search">
197
+ <input class="uk-search-input" type="search" placeholder="Button…" aria-label="Search">
138
198
  </form>
139
199
  </div>
140
200
 
@@ -144,230 +204,268 @@
144
204
 
145
205
  <h2>Navbar Toggle + Layouts</h2>
146
206
 
147
- <nav class="uk-navbar-container uk-margin" uk-navbar>
207
+ </div>
148
208
 
149
- <div class="test-overlay uk-navbar-left">
209
+ <nav class="uk-navbar-container uk-margin">
210
+ <div class="uk-container">
211
+ <div uk-navbar>
150
212
 
151
- <a class="uk-navbar-item uk-logo" href="#">Overlay</a>
213
+ <div class="test-overlay uk-navbar-left">
152
214
 
153
- <ul class="uk-navbar-nav">
154
- <li class="uk-active"><a href="#">Active</a></li>
155
- <li><a href="#">Parent</a></li>
156
- <li><a href="#">Item</a></li>
157
- <li><a href="#">Item</a></li>
158
- </ul>
215
+ <a class="uk-navbar-item uk-logo" href="#">Overlay</a>
159
216
 
160
- </div>
217
+ <ul class="uk-navbar-nav">
218
+ <li class="uk-active"><a href="#">Active</a></li>
219
+ <li><a href="#">Parent</a></li>
220
+ <li><a href="#">Item</a></li>
221
+ <li><a href="#">Item</a></li>
222
+ </ul>
161
223
 
162
- <div class="test-overlay uk-navbar-right">
163
-
164
- <ul class="uk-navbar-nav">
165
- <li><a href="#">Item</a></li>
166
- </ul>
224
+ </div>
167
225
 
168
- <a class="uk-navbar-toggle" uk-search-icon uk-toggle="target: .test-overlay; animation: uk-animation-fade" href></a>
226
+ <div class="test-overlay uk-navbar-right">
169
227
 
170
- </div>
228
+ <ul class="uk-navbar-nav">
229
+ <li><a href="#">Item</a></li>
230
+ </ul>
171
231
 
172
- <div class="uk-navbar-left uk-flex-1 test-overlay" hidden>
232
+ <a class="uk-navbar-toggle" uk-search-icon uk-toggle="target: .test-overlay; animation: uk-animation-fade" href></a>
173
233
 
174
- <div class="uk-navbar-item uk-width-expand">
175
- <form class="uk-search uk-search-navbar uk-width-1-1">
176
- <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search" autofocus>
177
- </form>
178
234
  </div>
179
235
 
180
- <a class="uk-navbar-toggle" uk-close uk-toggle="target: .test-overlay; animation: uk-animation-fade" href></a>
236
+ <div class="uk-navbar-left uk-flex-1 test-overlay" hidden>
181
237
 
182
- </div>
238
+ <div class="uk-navbar-item uk-width-expand">
239
+ <form class="uk-search uk-search-navbar uk-width-1-1">
240
+ <input class="uk-search-input" type="search" placeholder="Search…" aria-label="Search" autofocus>
241
+ </form>
242
+ </div>
183
243
 
184
- </nav>
244
+ <a class="uk-navbar-toggle" uk-close uk-toggle="target: .test-overlay; animation: uk-animation-fade" href></a>
185
245
 
186
- <nav class="uk-navbar-container uk-margin" uk-navbar>
187
- <div class="uk-navbar-left">
246
+ </div>
188
247
 
189
- <a class="uk-navbar-item uk-logo" href="#">Drop</a>
248
+ </div>
249
+ </div>
250
+ </nav>
190
251
 
191
- <ul class="uk-navbar-nav">
192
- <li class="uk-active"><a href="#">Active</a></li>
193
- <li><a href="#">Parent</a></li>
194
- <li><a href="#">Item</a></li>
195
- <li><a href="#">Item</a></li>
196
- </ul>
252
+ <nav class="uk-navbar-container uk-margin">
253
+ <div class="uk-container">
254
+ <div uk-navbar>
197
255
 
198
- </div>
199
- <div class="uk-navbar-right">
256
+ <div class="uk-navbar-left">
200
257
 
201
- <ul class="uk-navbar-nav">
202
- <li><a href="#">Item</a></li>
203
- </ul>
258
+ <a class="uk-navbar-item uk-logo" href="#">Drop</a>
204
259
 
205
- <div>
206
- <a class="uk-navbar-toggle" uk-search-icon href></a>
207
- <div uk-drop="mode: click; pos: left-center; offset: 0">
208
- <form class="uk-search uk-search-navbar uk-width-1-1">
209
- <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search" autofocus>
210
- </form>
260
+ <ul class="uk-navbar-nav">
261
+ <li class="uk-active"><a href="#">Active</a></li>
262
+ <li><a href="#">Parent</a></li>
263
+ <li><a href="#">Item</a></li>
264
+ <li><a href="#">Item</a></li>
265
+ </ul>
266
+
267
+ </div>
268
+ <div class="uk-navbar-right">
269
+
270
+ <ul class="uk-navbar-nav">
271
+ <li><a href="#">Item</a></li>
272
+ </ul>
273
+
274
+ <div>
275
+ <a class="uk-navbar-toggle" uk-search-icon href></a>
276
+ <div uk-drop="mode: click; pos: left-center; offset: 0">
277
+ <form class="uk-search uk-search-navbar uk-width-1-1">
278
+ <input class="uk-search-input" type="search" placeholder="Search…" aria-label="Search" autofocus>
279
+ </form>
280
+ </div>
211
281
  </div>
282
+
212
283
  </div>
213
284
 
214
285
  </div>
215
- </nav>
216
-
217
- <nav class="uk-navbar-container uk-margin" uk-navbar>
218
- <div class="uk-navbar-left">
219
-
220
- <a class="uk-navbar-item uk-logo" href="#">Dropdown</a>
286
+ </div>
287
+ </nav>
221
288
 
222
- <ul class="uk-navbar-nav">
223
- <li class="uk-active"><a href="#">Active</a></li>
224
- <li><a href="#">Parent</a></li>
225
- <li><a href="#">Item</a></li>
226
- <li><a href="#">Item</a></li>
227
- </ul>
289
+ <nav class="uk-navbar-container uk-margin">
290
+ <div class="uk-container">
291
+ <div uk-navbar>
228
292
 
229
- </div>
230
- <div class="uk-navbar-right">
293
+ <div class="uk-navbar-left">
231
294
 
232
- <ul class="uk-navbar-nav">
233
- <li><a href="#">Item</a></li>
234
- </ul>
295
+ <a class="uk-navbar-item uk-logo" href="#">Dropdown</a>
235
296
 
236
- <div>
237
- <a class="uk-navbar-toggle" href uk-search-icon></a>
238
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">
297
+ <ul class="uk-navbar-nav">
298
+ <li class="uk-active"><a href="#">Active</a></li>
299
+ <li><a href="#">Parent</a></li>
300
+ <li><a href="#">Item</a></li>
301
+ <li><a href="#">Item</a></li>
302
+ </ul>
239
303
 
240
- <div class="uk-grid-small uk-flex-middle" uk-grid>
241
- <div class="uk-width-expand">
242
- <form class="uk-search uk-search-navbar uk-width-1-1">
243
- <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search" autofocus>
244
- </form>
245
- </div>
246
- <div class="uk-width-auto">
247
- <a class="uk-drop-close" href="#" uk-close></a>
304
+ </div>
305
+ <div class="uk-navbar-right">
306
+
307
+ <ul class="uk-navbar-nav">
308
+ <li><a href="#">Item</a></li>
309
+ </ul>
310
+
311
+ <div>
312
+ <a class="uk-navbar-toggle" href uk-search-icon></a>
313
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">
314
+
315
+ <div class="uk-grid-small uk-flex-middle" uk-grid>
316
+ <div class="uk-width-expand">
317
+ <form class="uk-search uk-search-navbar uk-width-1-1">
318
+ <input class="uk-search-input" type="search" placeholder="Search…" aria-label="Search" autofocus>
319
+ </form>
320
+ </div>
321
+ <div class="uk-width-auto">
322
+ <a class="uk-drop-close" href="#" uk-close></a>
323
+ </div>
248
324
  </div>
249
- </div>
250
325
 
326
+ </div>
251
327
  </div>
328
+
252
329
  </div>
253
330
 
254
331
  </div>
255
- </nav>
256
-
257
- <nav class="uk-navbar-container uk-margin" uk-navbar>
258
- <div class="uk-navbar-left">
332
+ </div>
333
+ </nav>
259
334
 
260
- <a class="uk-navbar-item uk-logo" href="#">Stretch</a>
335
+ <nav class="uk-navbar-container uk-margin">
336
+ <div class="uk-container">
337
+ <div uk-navbar>
261
338
 
262
- <ul class="uk-navbar-nav">
263
- <li class="uk-active"><a href="#">Active</a></li>
264
- <li><a href="#">Parent</a></li>
265
- <li><a href="#">Item</a></li>
266
- <li><a href="#">Item</a></li>
267
- </ul>
339
+ <div class="uk-navbar-left">
268
340
 
269
- </div>
270
- <div class="uk-navbar-right">
341
+ <a class="uk-navbar-item uk-logo" href="#">Stretch</a>
271
342
 
272
- <ul class="uk-navbar-nav">
273
- <li><a href="#">Item</a></li>
274
- </ul>
343
+ <ul class="uk-navbar-nav">
344
+ <li class="uk-active"><a href="#">Active</a></li>
345
+ <li><a href="#">Parent</a></li>
346
+ <li><a href="#">Item</a></li>
347
+ <li><a href="#">Item</a></li>
348
+ </ul>
275
349
 
276
- <div>
277
- <a class="uk-navbar-toggle" href uk-search-icon></a>
278
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
279
-
280
- <div class="uk-grid-small uk-flex-middle" uk-grid>
281
- <div class="uk-width-expand">
282
- <form class="uk-search uk-search-navbar uk-width-1-1">
283
- <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search" autofocus>
284
- </form>
285
- </div>
286
- <div class="uk-width-auto">
287
- <a class="uk-drop-close" href="#" uk-close></a>
350
+ </div>
351
+ <div class="uk-navbar-right">
352
+
353
+ <ul class="uk-navbar-nav">
354
+ <li><a href="#">Item</a></li>
355
+ </ul>
356
+
357
+ <div>
358
+ <a class="uk-navbar-toggle" href uk-search-icon></a>
359
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
360
+
361
+ <div class="uk-grid-small uk-flex-middle" uk-grid>
362
+ <div class="uk-width-expand">
363
+ <form class="uk-search uk-search-navbar uk-width-1-1">
364
+ <input class="uk-search-input" type="search" placeholder="Search…" aria-label="Search" autofocus>
365
+ </form>
366
+ </div>
367
+ <div class="uk-width-auto">
368
+ <a class="uk-drop-close" href="#" uk-close></a>
369
+ </div>
288
370
  </div>
289
- </div>
290
371
 
372
+ </div>
291
373
  </div>
374
+
292
375
  </div>
293
376
 
294
377
  </div>
295
- </nav>
296
-
297
- <nav class="uk-navbar-container uk-margin" uk-navbar="target-y: !.uk-navbar-container; dropbar: +.uk-navbar-dropbar">
298
- <div class="uk-navbar-left">
299
-
300
- <a class="uk-navbar-item uk-logo" href="#">Dropbar</a>
378
+ </div>
379
+ </nav>
301
380
 
302
- <ul class="uk-navbar-nav">
303
- <li class="uk-active"><a href="#">Active</a></li>
304
- <li><a href="#">Parent</a></li>
305
- <li><a href="#">Item</a></li>
306
- <li><a href="#">Item</a></li>
307
- </ul>
381
+ <nav class="uk-navbar-container uk-margin">
382
+ <div class="uk-container">
383
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: +.uk-navbar-dropbar">
308
384
 
309
- </div>
310
- <div class="uk-navbar-right">
385
+ <div class="uk-navbar-left">
311
386
 
312
- <ul class="uk-navbar-nav">
313
- <li><a href="#">Item</a></li>
314
- </ul>
387
+ <a class="uk-navbar-item uk-logo" href="#">Dropbar</a>
315
388
 
316
- <div>
317
- <a class="uk-navbar-toggle" href uk-search-icon></a>
318
- <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; cls-drop: uk-dropbar; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
389
+ <ul class="uk-navbar-nav">
390
+ <li class="uk-active"><a href="#">Active</a></li>
391
+ <li><a href="#">Parent</a></li>
392
+ <li><a href="#">Item</a></li>
393
+ <li><a href="#">Item</a></li>
394
+ </ul>
319
395
 
320
- <div class="uk-grid-small uk-flex-middle" uk-grid>
321
- <div class="uk-width-expand">
322
- <form class="uk-search uk-search-navbar uk-width-1-1">
323
- <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search" autofocus>
324
- </form>
325
- </div>
326
- <div class="uk-width-auto">
327
- <a class="uk-dropbar-close" href="#" uk-close></a>
396
+ </div>
397
+ <div class="uk-navbar-right">
398
+
399
+ <ul class="uk-navbar-nav">
400
+ <li><a href="#">Item</a></li>
401
+ </ul>
402
+
403
+ <div>
404
+ <a class="uk-navbar-toggle" href uk-search-icon></a>
405
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; cls-drop: uk-dropbar; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
406
+
407
+ <div class="uk-grid-small uk-flex-middle" uk-grid>
408
+ <div class="uk-width-expand">
409
+ <form class="uk-search uk-search-navbar uk-width-1-1">
410
+ <input class="uk-search-input" type="search" placeholder="Search…" aria-label="Search" autofocus>
411
+ </form>
412
+ </div>
413
+ <div class="uk-width-auto">
414
+ <a class="uk-dropbar-close" href="#" uk-close></a>
415
+ </div>
328
416
  </div>
329
- </div>
330
417
 
418
+ </div>
331
419
  </div>
420
+
332
421
  </div>
333
422
 
334
423
  </div>
335
- </nav>
424
+ </div>
425
+ </nav>
336
426
 
337
- <div class="uk-navbar-dropbar"></div>
427
+ <div class="uk-navbar-dropbar"></div>
338
428
 
339
- <nav class="uk-navbar uk-navbar-container uk-margin">
340
- <div class="uk-navbar-left">
429
+ <nav class="uk-navbar-container uk-margin">
430
+ <div class="uk-container">
431
+ <div uk-navbar>
341
432
 
342
- <a class="uk-navbar-item uk-logo" href="#">Modal</a>
433
+ <div class="uk-navbar-left">
343
434
 
344
- <ul class="uk-navbar-nav">
345
- <li class="uk-active"><a href="#">Active</a></li>
346
- <li><a href="#">Parent</a></li>
347
- <li><a href="#">Item</a></li>
348
- <li><a href="#">Item</a></li>
349
- </ul>
435
+ <a class="uk-navbar-item uk-logo" href="#">Modal</a>
350
436
 
351
- </div>
352
- <div class="uk-navbar-right">
437
+ <ul class="uk-navbar-nav">
438
+ <li class="uk-active"><a href="#">Active</a></li>
439
+ <li><a href="#">Parent</a></li>
440
+ <li><a href="#">Item</a></li>
441
+ <li><a href="#">Item</a></li>
442
+ </ul>
353
443
 
354
- <ul class="uk-navbar-nav">
355
- <li><a href="#">Item</a></li>
356
- </ul>
444
+ </div>
445
+ <div class="uk-navbar-right">
357
446
 
358
- <a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
447
+ <ul class="uk-navbar-nav">
448
+ <li><a href="#">Item</a></li>
449
+ </ul>
450
+
451
+ <a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
452
+
453
+ </div>
359
454
 
360
- </div>
361
- </nav>
362
-
363
- <div id="modal-full" class="uk-modal-full" uk-modal>
364
- <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
365
- <button class="uk-modal-close-full" type="button" uk-close></button>
366
- <form class="uk-search uk-search-large">
367
- <input class="uk-search-input uk-text-center" type="search" placeholder="Search" aria-label="Search" autofocus>
368
- </form>
369
455
  </div>
370
456
  </div>
457
+ </nav>
458
+
459
+ <div id="modal-full" class="uk-modal-full" uk-modal>
460
+ <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
461
+ <button class="uk-modal-close-full" type="button" uk-close></button>
462
+ <form class="uk-search uk-search-large">
463
+ <input class="uk-search-input uk-text-center" type="search" placeholder="Search…" aria-label="Search" autofocus>
464
+ </form>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="uk-container uk-margin-medium-top">
371
469
 
372
470
  <h2>Javascript Options</h2>
373
471