uikit 3.14.4-dev.e3664d0d2 → 3.14.4-dev.ed37f5c44
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 +13 -0
- package/dist/css/uikit-core-rtl.css +108 -61
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +108 -61
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +108 -62
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +108 -62
- 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 +7 -5
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +6 -14
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +6 -14
- 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 +19 -19
- 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 +136 -70
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +142 -74
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
- package/src/images/components/nav-parent-icon.svg +3 -0
- package/src/images/components/navbar-parent-icon.svg +3 -0
- package/src/js/components/filter.js +5 -3
- package/src/js/core/height-viewport.js +6 -2
- package/src/js/core/icon.js +16 -0
- package/src/js/core/index.js +2 -0
- package/src/js/core/leader.js +2 -2
- package/src/js/core/navbar.js +44 -15
- package/src/js/core/scroll.js +38 -11
- package/src/js/mixin/media.js +4 -5
- package/src/js/mixin/position.js +19 -11
- package/src/js/mixin/togglable.js +8 -17
- package/src/js/util/style.js +4 -13
- package/src/js/util/viewport.js +2 -4
- package/src/less/components/dropdown.less +14 -0
- package/src/less/components/leader.less +1 -1
- package/src/less/components/nav.less +7 -37
- package/src/less/components/navbar.less +101 -13
- package/src/less/components/utility.less +10 -2
- package/src/less/theme/nav.less +0 -8
- package/src/less/theme/navbar.less +4 -6
- package/src/scss/components/dropdown.scss +14 -0
- package/src/scss/components/leader.scss +1 -1
- package/src/scss/components/nav.scss +7 -26
- package/src/scss/components/navbar.scss +89 -13
- package/src/scss/components/utility.scss +8 -1
- package/src/scss/mixins-theme.scss +15 -18
- package/src/scss/mixins.scss +14 -14
- package/src/scss/theme/nav.scss +0 -8
- package/src/scss/theme/navbar.scss +3 -2
- package/src/scss/variables-theme.scss +17 -11
- package/src/scss/variables.scss +17 -10
- package/tests/drop.html +66 -16
- package/tests/dropdown.html +103 -16
- package/tests/index.html +3 -3
- package/tests/nav.html +20 -87
- package/tests/navbar.html +283 -62
- package/tests/offcanvas.html +8 -8
- package/tests/utility.html +19 -0
- package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/tests/nav.html
CHANGED
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
<ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
|
|
62
62
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
63
63
|
<li class="uk-parent">
|
|
64
|
-
<a href="#">Parent
|
|
64
|
+
<a href="#">Parent <span uk-nav-parent-icon></span></a>
|
|
65
65
|
<ul class="uk-nav-sub">
|
|
66
66
|
<li><a href="#">Sub item</a></li>
|
|
67
67
|
<li><a href="#">Sub item</a>
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
</ul>
|
|
74
74
|
</li>
|
|
75
75
|
<li class="uk-parent">
|
|
76
|
-
<a href="#">Parent
|
|
76
|
+
<a href="#">Parent <span uk-nav-parent-icon></span></a>
|
|
77
77
|
<ul class="uk-nav-sub">
|
|
78
78
|
<li><a href="#">Sub item</a></li>
|
|
79
79
|
<li><a href="#">Sub item</a></li>
|
|
@@ -89,11 +89,12 @@
|
|
|
89
89
|
</div>
|
|
90
90
|
<div>
|
|
91
91
|
|
|
92
|
-
<h2>Multiple</h2>
|
|
93
|
-
|
|
92
|
+
<h2 class="uk-text-center">Center + Multiple</h2>
|
|
93
|
+
|
|
94
|
+
<ul class="uk-nav-default uk-nav-center uk-nav-parent-icon" uk-nav="multiple: true">
|
|
94
95
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
95
96
|
<li class="uk-parent">
|
|
96
|
-
<a href="#">Parent
|
|
97
|
+
<a href="#">Parent <span uk-nav-parent-icon></span></a>
|
|
97
98
|
<ul class="uk-nav-sub">
|
|
98
99
|
<li><a href="#">Sub item</a></li>
|
|
99
100
|
<li><a href="#">Sub item</a>
|
|
@@ -105,7 +106,7 @@
|
|
|
105
106
|
</ul>
|
|
106
107
|
</li>
|
|
107
108
|
<li class="uk-parent">
|
|
108
|
-
<a href="#">Parent
|
|
109
|
+
<a href="#">Parent <span uk-nav-parent-icon></span></a>
|
|
109
110
|
<ul class="uk-nav-sub">
|
|
110
111
|
<li><a href="#">Sub item</a></li>
|
|
111
112
|
<li><a href="#">Sub item</a></li>
|
|
@@ -121,34 +122,13 @@
|
|
|
121
122
|
</div>
|
|
122
123
|
<div>
|
|
123
124
|
|
|
124
|
-
<h2
|
|
125
|
+
<h2>Subtitles</h2>
|
|
125
126
|
|
|
126
|
-
<ul class="uk-nav
|
|
127
|
-
<li class="uk-active"><a href="#">Active
|
|
128
|
-
<li class="uk-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<li><a href="#">Sub item</a></li>
|
|
132
|
-
<li><a href="#">Sub item</a>
|
|
133
|
-
<ul>
|
|
134
|
-
<li><a href="#">Sub item</a></li>
|
|
135
|
-
<li><a href="#">Sub item</a></li>
|
|
136
|
-
</ul>
|
|
137
|
-
</li>
|
|
138
|
-
</ul>
|
|
139
|
-
</li>
|
|
140
|
-
<li class="uk-parent">
|
|
141
|
-
<a href="#">Parent</a>
|
|
142
|
-
<ul class="uk-nav-sub">
|
|
143
|
-
<li><a href="#">Sub item</a></li>
|
|
144
|
-
<li><a href="#">Sub item</a></li>
|
|
145
|
-
</ul>
|
|
146
|
-
</li>
|
|
147
|
-
<li class="uk-nav-header">Header</li>
|
|
148
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
149
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
150
|
-
<li class="uk-nav-divider"></li>
|
|
151
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
127
|
+
<ul class="uk-nav uk-nav-default">
|
|
128
|
+
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
|
|
129
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
|
|
130
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
|
|
131
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
|
|
152
132
|
</ul>
|
|
153
133
|
|
|
154
134
|
</div>
|
|
@@ -194,7 +174,7 @@
|
|
|
194
174
|
<ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
|
|
195
175
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
196
176
|
<li class="uk-parent">
|
|
197
|
-
<a href="#">Parent
|
|
177
|
+
<a href="#">Parent <span uk-nav-parent-icon></span></a>
|
|
198
178
|
<ul class="uk-nav-sub">
|
|
199
179
|
<li><a href="#">Sub item</a></li>
|
|
200
180
|
<li><a href="#">Sub item</a>
|
|
@@ -206,7 +186,7 @@
|
|
|
206
186
|
</ul>
|
|
207
187
|
</li>
|
|
208
188
|
<li class="uk-parent">
|
|
209
|
-
<a href="#">Parent
|
|
189
|
+
<a href="#">Parent <span uk-nav-parent-icon></span></a>
|
|
210
190
|
<ul class="uk-nav-sub">
|
|
211
191
|
<li><a href="#">Sub item</a></li>
|
|
212
192
|
<li><a href="#">Sub item</a></li>
|
|
@@ -222,44 +202,12 @@
|
|
|
222
202
|
</div>
|
|
223
203
|
<div>
|
|
224
204
|
|
|
225
|
-
<h2>Multiple</h2>
|
|
226
|
-
<ul class="uk-nav-primary uk-nav-parent-icon" uk-nav="multiple: true">
|
|
227
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
228
|
-
<li class="uk-parent">
|
|
229
|
-
<a href="#">Parent</a>
|
|
230
|
-
<ul class="uk-nav-sub">
|
|
231
|
-
<li><a href="#">Sub item</a></li>
|
|
232
|
-
<li><a href="#">Sub item</a>
|
|
233
|
-
<ul>
|
|
234
|
-
<li><a href="#">Sub item</a></li>
|
|
235
|
-
<li><a href="#">Sub item</a></li>
|
|
236
|
-
</ul>
|
|
237
|
-
</li>
|
|
238
|
-
</ul>
|
|
239
|
-
</li>
|
|
240
|
-
<li class="uk-parent">
|
|
241
|
-
<a href="#">Parent</a>
|
|
242
|
-
<ul class="uk-nav-sub">
|
|
243
|
-
<li><a href="#">Sub item</a></li>
|
|
244
|
-
<li><a href="#">Sub item</a></li>
|
|
245
|
-
</ul>
|
|
246
|
-
</li>
|
|
247
|
-
<li class="uk-nav-header">Header</li>
|
|
248
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
249
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
250
|
-
<li class="uk-nav-divider"></li>
|
|
251
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
252
|
-
</ul>
|
|
253
|
-
|
|
254
|
-
</div>
|
|
255
|
-
<div>
|
|
256
|
-
|
|
257
|
-
<h2 class="uk-text-center">Center</h2>
|
|
205
|
+
<h2 class="uk-text-center">Center + Multiple</h2>
|
|
258
206
|
|
|
259
|
-
<ul class="uk-nav-primary uk-nav-center uk-nav-parent-icon" uk-nav>
|
|
207
|
+
<ul class="uk-nav-primary uk-nav-center uk-nav-parent-icon" uk-nav="multiple: true">
|
|
260
208
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
261
209
|
<li class="uk-parent">
|
|
262
|
-
<a href="#">Parent
|
|
210
|
+
<a href="#">Parent <span uk-nav-parent-icon></span></a>
|
|
263
211
|
<ul class="uk-nav-sub">
|
|
264
212
|
<li><a href="#">Sub item</a></li>
|
|
265
213
|
<li><a href="#">Sub item</a>
|
|
@@ -271,7 +219,7 @@
|
|
|
271
219
|
</ul>
|
|
272
220
|
</li>
|
|
273
221
|
<li class="uk-parent">
|
|
274
|
-
<a href="#">Parent
|
|
222
|
+
<a href="#">Parent <span uk-nav-parent-icon></span></a>
|
|
275
223
|
<ul class="uk-nav-sub">
|
|
276
224
|
<li><a href="#">Sub item</a></li>
|
|
277
225
|
<li><a href="#">Sub item</a></li>
|
|
@@ -285,24 +233,9 @@
|
|
|
285
233
|
</ul>
|
|
286
234
|
|
|
287
235
|
</div>
|
|
288
|
-
</div>
|
|
289
|
-
|
|
290
|
-
<div class="uk-child-width-1-4@m" uk-grid>
|
|
291
236
|
<div>
|
|
292
237
|
|
|
293
|
-
<h2>
|
|
294
|
-
|
|
295
|
-
<ul class="uk-nav uk-nav-default">
|
|
296
|
-
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
|
|
297
|
-
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
|
|
298
|
-
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
|
|
299
|
-
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
|
|
300
|
-
</ul>
|
|
301
|
-
|
|
302
|
-
</div>
|
|
303
|
-
<div>
|
|
304
|
-
|
|
305
|
-
<h2>Primary</h2>
|
|
238
|
+
<h2>Subtitles</h2>
|
|
306
239
|
|
|
307
240
|
<ul class="uk-nav uk-nav-primary">
|
|
308
241
|
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
|
package/tests/navbar.html
CHANGED
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
<ul class="uk-navbar-nav">
|
|
81
81
|
<li class="uk-active"><a href="">Active</a></li>
|
|
82
82
|
<li>
|
|
83
|
-
<a href="">Parent
|
|
83
|
+
<a href="">Parent <span uk-navbar-parent-icon></span></a>
|
|
84
84
|
<div class="uk-navbar-dropdown">
|
|
85
85
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
86
86
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
<ul class="uk-navbar-nav">
|
|
122
122
|
<li class="uk-active"><a href="">Active</a></li>
|
|
123
123
|
<li>
|
|
124
|
-
<a href="">Parent
|
|
124
|
+
<a href="">Parent <span uk-navbar-parent-icon></span></a>
|
|
125
125
|
<div class="uk-navbar-dropdown">
|
|
126
126
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
127
127
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -206,52 +206,6 @@
|
|
|
206
206
|
</div>
|
|
207
207
|
</div>
|
|
208
208
|
|
|
209
|
-
<h2>Primary</h2>
|
|
210
|
-
|
|
211
|
-
</div>
|
|
212
|
-
|
|
213
|
-
<nav class="uk-navbar-container uk-margin">
|
|
214
|
-
<div class="uk-container">
|
|
215
|
-
<div uk-navbar>
|
|
216
|
-
<div class="uk-navbar-left">
|
|
217
|
-
|
|
218
|
-
<ul class="uk-navbar-nav uk-navbar-nav-primary">
|
|
219
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
220
|
-
<li>
|
|
221
|
-
<a href="#">Parent</a>
|
|
222
|
-
<div class="uk-navbar-dropdown">
|
|
223
|
-
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
224
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
225
|
-
<li class="uk-parent">
|
|
226
|
-
<a href="#">Parent</a>
|
|
227
|
-
<ul class="uk-nav-sub">
|
|
228
|
-
<li><a href="#">Sub item</a></li>
|
|
229
|
-
<li><a href="#">Sub item</a></li>
|
|
230
|
-
</ul>
|
|
231
|
-
</li>
|
|
232
|
-
<li class="uk-nav-header">Header</li>
|
|
233
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
234
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
235
|
-
<li class="uk-nav-divider"></li>
|
|
236
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
237
|
-
</ul>
|
|
238
|
-
</div>
|
|
239
|
-
</li>
|
|
240
|
-
<li>
|
|
241
|
-
<a href="#">Content</a>
|
|
242
|
-
<div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
243
|
-
</li>
|
|
244
|
-
<li><a href="#">Item</a></li>
|
|
245
|
-
<li><a href="#">Item</a></li>
|
|
246
|
-
</ul>
|
|
247
|
-
|
|
248
|
-
</div>
|
|
249
|
-
</div>
|
|
250
|
-
</div>
|
|
251
|
-
</nav>
|
|
252
|
-
|
|
253
|
-
<div class="uk-container">
|
|
254
|
-
|
|
255
209
|
<h2>Click</h2>
|
|
256
210
|
|
|
257
211
|
</div>
|
|
@@ -300,6 +254,13 @@
|
|
|
300
254
|
|
|
301
255
|
<h2>Dropdown</h2>
|
|
302
256
|
|
|
257
|
+
<div class="uk-margin">
|
|
258
|
+
<select id="js-size-switcher" class="uk-select uk-form-width-small">
|
|
259
|
+
<option value="">Default</option>
|
|
260
|
+
<option value="uk-navbar-dropdown-large">Large</option>
|
|
261
|
+
</select>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
303
264
|
</div>
|
|
304
265
|
|
|
305
266
|
<nav class="uk-navbar-container uk-margin">
|
|
@@ -838,6 +799,210 @@
|
|
|
838
799
|
</div>
|
|
839
800
|
</nav>
|
|
840
801
|
|
|
802
|
+
<div class="uk-container">
|
|
803
|
+
|
|
804
|
+
<h2>Parent Icon</h2>
|
|
805
|
+
|
|
806
|
+
</div>
|
|
807
|
+
|
|
808
|
+
<nav class="uk-navbar-container uk-margin">
|
|
809
|
+
<div class="uk-container">
|
|
810
|
+
<div uk-navbar>
|
|
811
|
+
<div class="uk-navbar-left">
|
|
812
|
+
|
|
813
|
+
<ul class="uk-navbar-nav">
|
|
814
|
+
<li class="uk-active">
|
|
815
|
+
<a href="#">Left <span uk-navbar-parent-icon></span></a>
|
|
816
|
+
<div class="uk-navbar-dropdown">
|
|
817
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
818
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
819
|
+
<li class="uk-parent">
|
|
820
|
+
<a href="#">Parent</a>
|
|
821
|
+
<ul class="uk-nav-sub">
|
|
822
|
+
<li><a href="#">Sub item</a></li>
|
|
823
|
+
<li><a href="#">Sub item</a></li>
|
|
824
|
+
</ul>
|
|
825
|
+
</li>
|
|
826
|
+
<li class="uk-nav-header">Header</li>
|
|
827
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
828
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
829
|
+
<li class="uk-nav-divider"></li>
|
|
830
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
831
|
+
</ul>
|
|
832
|
+
</div>
|
|
833
|
+
</li>
|
|
834
|
+
<li>
|
|
835
|
+
<a href="#">2 Columns <span uk-navbar-parent-icon></span></a>
|
|
836
|
+
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
|
|
837
|
+
<div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
|
|
838
|
+
<div>
|
|
839
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
840
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
841
|
+
<li class="uk-parent"><a href="#">Parent</a></li>
|
|
842
|
+
<li class="uk-nav-header">Header</li>
|
|
843
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
844
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
845
|
+
<li class="uk-nav-divider"></li>
|
|
846
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
847
|
+
</ul>
|
|
848
|
+
</div>
|
|
849
|
+
<div>
|
|
850
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
851
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
852
|
+
<li class="uk-parent"><a href="#">Parent</a></li>
|
|
853
|
+
<li class="uk-nav-header">Header</li>
|
|
854
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
855
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
856
|
+
<li class="uk-nav-divider"></li>
|
|
857
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
858
|
+
</ul>
|
|
859
|
+
</div>
|
|
860
|
+
</div>
|
|
861
|
+
</div>
|
|
862
|
+
</li>
|
|
863
|
+
<li>
|
|
864
|
+
<a href="#">3 Columns <span uk-navbar-parent-icon></span></a>
|
|
865
|
+
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
|
|
866
|
+
<div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
|
|
867
|
+
<div>
|
|
868
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
869
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
870
|
+
<li class="uk-parent"><a href="#">Parent</a></li>
|
|
871
|
+
<li class="uk-nav-header">Header</li>
|
|
872
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
873
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
874
|
+
</ul>
|
|
875
|
+
</div>
|
|
876
|
+
<div>
|
|
877
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
878
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
879
|
+
<li class="uk-parent"><a href="#">Parent</a></li>
|
|
880
|
+
<li class="uk-nav-header">Header</li>
|
|
881
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
882
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
883
|
+
</ul>
|
|
884
|
+
</div>
|
|
885
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
886
|
+
</div>
|
|
887
|
+
</div>
|
|
888
|
+
</li>
|
|
889
|
+
<li>
|
|
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; boundary-align: true; pos: bottom-justify; flip: x">
|
|
892
|
+
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
893
|
+
<div>
|
|
894
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
895
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
896
|
+
<li class="uk-parent">
|
|
897
|
+
<a href="#">Parent</a>
|
|
898
|
+
<ul class="uk-nav-sub">
|
|
899
|
+
<li><a href="#">Sub item</a></li>
|
|
900
|
+
<li><a href="#">Sub item</a></li>
|
|
901
|
+
</ul>
|
|
902
|
+
</li>
|
|
903
|
+
<li class="uk-nav-header">Header</li>
|
|
904
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
905
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
906
|
+
<li class="uk-nav-divider"></li>
|
|
907
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
908
|
+
</ul>
|
|
909
|
+
</div>
|
|
910
|
+
<div>
|
|
911
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
912
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
913
|
+
<li class="uk-parent">
|
|
914
|
+
<a href="#">Parent</a>
|
|
915
|
+
<ul class="uk-nav-sub">
|
|
916
|
+
<li><a href="#">Sub item</a></li>
|
|
917
|
+
<li><a href="#">Sub item</a></li>
|
|
918
|
+
</ul>
|
|
919
|
+
</li>
|
|
920
|
+
<li class="uk-nav-header">Header</li>
|
|
921
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
922
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
923
|
+
<li class="uk-nav-divider"></li>
|
|
924
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
925
|
+
</ul>
|
|
926
|
+
</div>
|
|
927
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
928
|
+
</div>
|
|
929
|
+
</div>
|
|
930
|
+
</li>
|
|
931
|
+
<li>
|
|
932
|
+
<a href="#">Justify 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; pos: bottom-justify; flip: x">
|
|
934
|
+
<div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
|
|
935
|
+
<div>
|
|
936
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
937
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
938
|
+
<li class="uk-parent">
|
|
939
|
+
<a href="#">Parent</a>
|
|
940
|
+
<ul class="uk-nav-sub">
|
|
941
|
+
<li><a href="#">Sub item</a></li>
|
|
942
|
+
<li><a href="#">Sub item</a></li>
|
|
943
|
+
</ul>
|
|
944
|
+
</li>
|
|
945
|
+
<li class="uk-nav-header">Header</li>
|
|
946
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
947
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
948
|
+
<li class="uk-nav-divider"></li>
|
|
949
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
950
|
+
</ul>
|
|
951
|
+
</div>
|
|
952
|
+
<div>
|
|
953
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
954
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
955
|
+
<li class="uk-parent">
|
|
956
|
+
<a href="#">Parent</a>
|
|
957
|
+
<ul class="uk-nav-sub">
|
|
958
|
+
<li><a href="#">Sub item</a></li>
|
|
959
|
+
<li><a href="#">Sub item</a></li>
|
|
960
|
+
</ul>
|
|
961
|
+
</li>
|
|
962
|
+
<li class="uk-nav-header">Header</li>
|
|
963
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
964
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
965
|
+
<li class="uk-nav-divider"></li>
|
|
966
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
967
|
+
</ul>
|
|
968
|
+
</div>
|
|
969
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
970
|
+
</div>
|
|
971
|
+
</div>
|
|
972
|
+
</li>
|
|
973
|
+
</ul>
|
|
974
|
+
|
|
975
|
+
</div>
|
|
976
|
+
<div class="uk-navbar-right">
|
|
977
|
+
|
|
978
|
+
<ul class="uk-navbar-nav">
|
|
979
|
+
<li>
|
|
980
|
+
<a href="#">1 Column <span uk-navbar-parent-icon></span></a>
|
|
981
|
+
<div class="uk-navbar-dropdown">
|
|
982
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
983
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
984
|
+
<li class="uk-parent">
|
|
985
|
+
<a href="#">Parent</a>
|
|
986
|
+
<ul class="uk-nav-sub">
|
|
987
|
+
<li><a href="#">Sub item</a></li>
|
|
988
|
+
<li><a href="#">Sub item</a></li>
|
|
989
|
+
</ul>
|
|
990
|
+
</li>
|
|
991
|
+
<li class="uk-nav-header">Header</li>
|
|
992
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
993
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
994
|
+
<li class="uk-nav-divider"></li>
|
|
995
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
996
|
+
</ul>
|
|
997
|
+
</div>
|
|
998
|
+
</li>
|
|
999
|
+
</ul>
|
|
1000
|
+
|
|
1001
|
+
</div>
|
|
1002
|
+
</div>
|
|
1003
|
+
</div>
|
|
1004
|
+
</nav>
|
|
1005
|
+
|
|
841
1006
|
<div class="uk-container">
|
|
842
1007
|
|
|
843
1008
|
<h2>Boundary Align</h2>
|
|
@@ -1391,7 +1556,7 @@
|
|
|
1391
1556
|
|
|
1392
1557
|
<nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
|
|
1393
1558
|
<div class="uk-container">
|
|
1394
|
-
<div uk-navbar="dropbar:
|
|
1559
|
+
<div uk-navbar="dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
|
|
1395
1560
|
<div class="uk-navbar-left">
|
|
1396
1561
|
|
|
1397
1562
|
<ul class="uk-navbar-nav">
|
|
@@ -1591,7 +1756,7 @@
|
|
|
1591
1756
|
|
|
1592
1757
|
<nav class="uk-navbar-container uk-margin">
|
|
1593
1758
|
<div class="uk-container">
|
|
1594
|
-
<div uk-navbar="dropbar: true; align: right">
|
|
1759
|
+
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
|
|
1595
1760
|
<div class="uk-navbar-left">
|
|
1596
1761
|
|
|
1597
1762
|
<ul class="uk-navbar-nav">
|
|
@@ -1747,7 +1912,7 @@
|
|
|
1747
1912
|
|
|
1748
1913
|
<nav class="uk-navbar-container uk-margin uk-position-relative uk-position-z-index"><!-- Position context only needed for demo showcase -->
|
|
1749
1914
|
<div class="uk-container">
|
|
1750
|
-
<div uk-navbar="dropbar: true; align: center">
|
|
1915
|
+
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
|
|
1751
1916
|
<div class="uk-navbar-left">
|
|
1752
1917
|
|
|
1753
1918
|
<ul class="uk-navbar-nav">
|
|
@@ -2131,6 +2296,59 @@
|
|
|
2131
2296
|
</div>
|
|
2132
2297
|
</nav>
|
|
2133
2298
|
|
|
2299
|
+
<div class="uk-container">
|
|
2300
|
+
|
|
2301
|
+
<h2>Primary</h2>
|
|
2302
|
+
|
|
2303
|
+
</div>
|
|
2304
|
+
|
|
2305
|
+
<nav class="uk-navbar-container uk-margin">
|
|
2306
|
+
<div class="uk-container">
|
|
2307
|
+
<div class="uk-navbar-primary" uk-navbar>
|
|
2308
|
+
<div class="uk-navbar-left">
|
|
2309
|
+
|
|
2310
|
+
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
|
|
2311
|
+
<ul class="uk-navbar-nav uk-navbar-nav-primary">
|
|
2312
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
2313
|
+
<li>
|
|
2314
|
+
<a href="#">Parent</a>
|
|
2315
|
+
<div class="uk-navbar-dropdown">
|
|
2316
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
2317
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
2318
|
+
<li class="uk-parent">
|
|
2319
|
+
<a href="#">Parent</a>
|
|
2320
|
+
<ul class="uk-nav-sub">
|
|
2321
|
+
<li><a href="#">Sub item</a></li>
|
|
2322
|
+
<li><a href="#">Sub item</a></li>
|
|
2323
|
+
</ul>
|
|
2324
|
+
</li>
|
|
2325
|
+
<li class="uk-nav-header">Header</li>
|
|
2326
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
2327
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
2328
|
+
<li class="uk-nav-divider"></li>
|
|
2329
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
2330
|
+
</ul>
|
|
2331
|
+
</div>
|
|
2332
|
+
</li>
|
|
2333
|
+
<li>
|
|
2334
|
+
<a href="#">Content</a>
|
|
2335
|
+
<div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
2336
|
+
</li>
|
|
2337
|
+
<li><a href="#">Item</a></li>
|
|
2338
|
+
<li><a href="#">Item</a></li>
|
|
2339
|
+
</ul>
|
|
2340
|
+
|
|
2341
|
+
</div>
|
|
2342
|
+
<div class="uk-navbar-right">
|
|
2343
|
+
|
|
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: !nav; flip: x">Dropdown</div>
|
|
2346
|
+
|
|
2347
|
+
</div>
|
|
2348
|
+
</div>
|
|
2349
|
+
</div>
|
|
2350
|
+
</nav>
|
|
2351
|
+
|
|
2134
2352
|
<div class="uk-container">
|
|
2135
2353
|
|
|
2136
2354
|
<h2>Dropdown Stretch</h2>
|
|
@@ -2322,9 +2540,6 @@
|
|
|
2322
2540
|
<a href="#">Content</a>
|
|
2323
2541
|
<div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
2324
2542
|
</li>
|
|
2325
|
-
<li><a href="#">Item</a></li>
|
|
2326
|
-
<li><a href="#">Item</a></li>
|
|
2327
|
-
<li><a href="#">Item</a></li>
|
|
2328
2543
|
</ul>
|
|
2329
2544
|
<div class="uk-navbar-item">
|
|
2330
2545
|
<div>Some <a href="#">Link</a></div>
|
|
@@ -2400,7 +2615,6 @@
|
|
|
2400
2615
|
|
|
2401
2616
|
<div class="uk-navbar-center-right">
|
|
2402
2617
|
<ul class="uk-navbar-nav">
|
|
2403
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2404
2618
|
<li>
|
|
2405
2619
|
<a href="#">Parent</a>
|
|
2406
2620
|
<div class="uk-navbar-dropdown">
|
|
@@ -2501,7 +2715,6 @@
|
|
|
2501
2715
|
|
|
2502
2716
|
<div class="uk-navbar-center-right">
|
|
2503
2717
|
<ul class="uk-navbar-nav">
|
|
2504
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
2505
2718
|
<li>
|
|
2506
2719
|
<a href="#">Parent</a>
|
|
2507
2720
|
<div class="uk-navbar-dropdown">
|
|
@@ -2581,12 +2794,6 @@
|
|
|
2581
2794
|
<li><a href="#">Parent</a></li>
|
|
2582
2795
|
<li><a href="#">Item</a></li>
|
|
2583
2796
|
<li><a href="#">Item</a></li>
|
|
2584
|
-
</ul>
|
|
2585
|
-
|
|
2586
|
-
</div>
|
|
2587
|
-
<div class="uk-navbar-right">
|
|
2588
|
-
|
|
2589
|
-
<ul class="uk-navbar-nav">
|
|
2590
2797
|
<li><a href="#">Item</a></li>
|
|
2591
2798
|
</ul>
|
|
2592
2799
|
|
|
@@ -3119,5 +3326,19 @@
|
|
|
3119
3326
|
|
|
3120
3327
|
</script>
|
|
3121
3328
|
|
|
3329
|
+
<script>
|
|
3330
|
+
|
|
3331
|
+
var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
|
|
3332
|
+
|
|
3333
|
+
UIkit.util.on('#js-size-switcher', 'change', function () {
|
|
3334
|
+
var value = this.value;
|
|
3335
|
+
UIkit.util.$$('.uk-navbar-dropdown').forEach(function (table) {
|
|
3336
|
+
UIkit.util.removeClass(table, options);
|
|
3337
|
+
UIkit.util.addClass(table, value);
|
|
3338
|
+
});
|
|
3339
|
+
});
|
|
3340
|
+
|
|
3341
|
+
</script>
|
|
3342
|
+
|
|
3122
3343
|
</body>
|
|
3123
3344
|
</html>
|