uikit 3.13.10 → 3.13.11-dev.1296bb84c
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 +33 -1
- package/dist/css/uikit-core-rtl.css +49 -8
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +49 -8
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +49 -6
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +49 -6
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +7 -3
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +7 -3
- 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 +21 -12
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +21 -12
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +2 -2
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +21 -12
- 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 +2 -2
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +62 -30
- 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 +422 -299
- 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 +469 -307
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/components/slider.js +1 -1
- package/src/js/components/sortable.js +2 -3
- package/src/js/components/tooltip.js +38 -3
- package/src/js/core/cover.js +27 -14
- package/src/js/core/drop.js +40 -11
- package/src/js/core/height-match.js +1 -1
- package/src/js/core/margin.js +9 -2
- package/src/js/core/navbar.js +18 -6
- package/src/js/core/scrollspy-nav.js +6 -11
- package/src/js/core/sticky.js +55 -21
- package/src/js/mixin/media.js +12 -9
- package/src/js/mixin/modal.js +6 -2
- package/src/js/mixin/parallax.js +8 -3
- package/src/js/mixin/position.js +24 -24
- package/src/js/uikit-core.js +0 -4
- package/src/js/util/lang.js +34 -42
- package/src/js/util/position.js +180 -125
- package/src/js/util/viewport.js +42 -22
- package/src/less/components/drop.less +0 -1
- package/src/less/components/dropdown.less +11 -1
- package/src/less/components/icon.less +3 -0
- package/src/less/components/nav.less +23 -0
- package/src/less/components/navbar.less +26 -2
- package/src/less/components/search.less +2 -0
- package/src/less/components/sticky.less +8 -3
- package/src/less/components/utility.less +1 -0
- package/src/less/theme/dropdown.less +4 -0
- package/src/less/theme/nav.less +6 -0
- package/src/less/theme/navbar.less +4 -0
- package/src/less/theme/search.less +6 -0
- package/src/scss/components/drop.scss +0 -1
- package/src/scss/components/dropdown.scss +11 -1
- package/src/scss/components/icon.scss +3 -0
- package/src/scss/components/nav.scss +23 -0
- package/src/scss/components/navbar.scss +26 -2
- package/src/scss/components/search.scss +2 -0
- package/src/scss/components/sticky.scss +8 -3
- package/src/scss/components/utility.scss +1 -0
- package/src/scss/mixins-theme.scss +5 -0
- package/src/scss/mixins.scss +5 -0
- package/src/scss/theme/dropdown.scss +4 -0
- package/src/scss/theme/nav.scss +6 -0
- package/src/scss/theme/navbar.scss +4 -0
- package/src/scss/theme/search.scss +6 -0
- package/src/scss/variables-theme.scss +5 -1
- package/src/scss/variables.scss +5 -1
- package/tests/alert.html +1 -1
- package/tests/animation.html +216 -214
- package/tests/drop.html +154 -80
- package/tests/dropdown.html +16 -2
- package/tests/nav.html +27 -0
- package/tests/navbar.html +56 -5
- package/tests/parallax.html +5 -5
- package/tests/position.html +38 -39
- package/tests/sticky-navbar.html +6 -6
- package/tests/sticky-parallax.html +29 -13
- package/tests/sticky.html +300 -49
- package/src/js/core/core.js +0 -25
package/tests/drop.html
CHANGED
|
@@ -8,10 +8,14 @@
|
|
|
8
8
|
<script src="js/test.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
|
|
11
|
-
.boundary {
|
|
11
|
+
.boundary {
|
|
12
|
+
padding: 15px;
|
|
13
|
+
border: 1px dashed rgba(0,0,0,0.2);
|
|
14
|
+
overflow: auto;
|
|
15
|
+
-webkit-overflow-scrolling: touch;
|
|
16
|
+
}
|
|
12
17
|
|
|
13
|
-
.
|
|
14
|
-
.small-width { width: 165px; }
|
|
18
|
+
.boundary-overflow { width: 200%; }
|
|
15
19
|
|
|
16
20
|
</style>
|
|
17
21
|
</head>
|
|
@@ -211,112 +215,162 @@
|
|
|
211
215
|
|
|
212
216
|
</div>
|
|
213
217
|
|
|
214
|
-
<h2>
|
|
218
|
+
<h2>Shift and Flip</h2>
|
|
215
219
|
|
|
216
|
-
<div class="
|
|
220
|
+
<div class="uk-margin">
|
|
221
|
+
<select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small">
|
|
222
|
+
<option value="">Resize</option>
|
|
223
|
+
<option value="boundary-overflow">Scroll</option>
|
|
224
|
+
</select>
|
|
225
|
+
</div>
|
|
217
226
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
<div uk-drop="pos: bottom-right; boundary: ! .boundary">
|
|
221
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
222
|
-
</div>
|
|
223
|
-
</div>
|
|
227
|
+
<div uk-grid>
|
|
228
|
+
<div class="uk-width-1-2@m">
|
|
224
229
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
229
|
-
</div>
|
|
230
|
-
</div>
|
|
230
|
+
<div class="boundary uk-height-large uk-resize-horizontal uk-margin">
|
|
231
|
+
<div class="js-boundary-overflow uk-flex uk-flex-center">
|
|
232
|
+
<div>
|
|
231
233
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
<div uk-drop="pos: bottom-center; boundary: ! .boundary">
|
|
235
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
236
|
-
</div>
|
|
237
|
-
</div>
|
|
234
|
+
<button class="uk-button uk-button-default" type="button">Click</button>
|
|
235
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
238
236
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
<div uk-drop="pos: bottom-left; boundary: ! .boundary; boundary-align: true">
|
|
242
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
243
239
|
</div>
|
|
244
|
-
</div>
|
|
245
240
|
|
|
246
|
-
<div class="uk-inline">
|
|
247
|
-
<button class="uk-button uk-button-default" type="button">Right</button>
|
|
248
|
-
<div uk-drop="pos: bottom-right; boundary: ! .boundary; boundary-align: true">
|
|
249
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
250
|
-
</div>
|
|
251
241
|
</div>
|
|
242
|
+
<div class="uk-width-1-2@m">
|
|
252
243
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
257
|
-
</div>
|
|
258
|
-
</div>
|
|
244
|
+
<div class="boundary uk-height-large uk-resize-horizontal uk-margin">
|
|
245
|
+
<div class="js-boundary-overflow uk-flex uk-flex-center">
|
|
246
|
+
<div>
|
|
259
247
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
248
|
+
<button class="uk-button uk-button-default" style="margin-left: 40px" type="button">Click</button>
|
|
249
|
+
<div class="uk-width-small" uk-dropdown="pos: right-top; boundary: !.boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
250
|
+
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
264
253
|
</div>
|
|
265
|
-
</div>
|
|
266
254
|
|
|
255
|
+
</div>
|
|
267
256
|
</div>
|
|
268
257
|
|
|
269
|
-
<
|
|
258
|
+
<h2>Boundary</h2>
|
|
270
259
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
<div uk-drop="pos: right-bottom; boundary: ! .boundary">
|
|
274
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
275
|
-
</div>
|
|
276
|
-
</div>
|
|
260
|
+
<div class="uk-child-width-1-2@m" uk-grid>
|
|
261
|
+
<div>
|
|
277
262
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
<div uk-drop="pos: right-justify; boundary: ! .boundary; boundary-align: true">
|
|
281
|
-
<div class="uk-card uk-card-body uk-card-default uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
282
|
-
</div>
|
|
283
|
-
</div>
|
|
263
|
+
<div class="boundary uk-height-medium uk-margin uk-flex uk-flex-between uk-flex-wrap">
|
|
264
|
+
<div>
|
|
284
265
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
<div uk-drop="pos: right-center; boundary: ! .boundary">
|
|
288
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
289
|
-
</div>
|
|
290
|
-
</div>
|
|
266
|
+
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
|
|
267
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-right; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
291
268
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
269
|
+
</div>
|
|
270
|
+
<div>
|
|
271
|
+
|
|
272
|
+
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
|
|
273
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-center; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
274
|
+
|
|
275
|
+
</div>
|
|
276
|
+
<div>
|
|
277
|
+
|
|
278
|
+
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
279
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
280
|
+
|
|
281
|
+
</div>
|
|
296
282
|
</div>
|
|
283
|
+
|
|
297
284
|
</div>
|
|
285
|
+
<div>
|
|
298
286
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
287
|
+
<div class="boundary uk-height-medium uk-flex uk-flex-column uk-flex-between uk-flex-wrap">
|
|
288
|
+
<div>
|
|
289
|
+
|
|
290
|
+
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
|
|
291
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-bottom; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
292
|
+
|
|
293
|
+
</div>
|
|
294
|
+
<div>
|
|
295
|
+
|
|
296
|
+
<button class="uk-button uk-button-default" type="button">Right Center</button>
|
|
297
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-center; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
298
|
+
|
|
299
|
+
</div>
|
|
300
|
+
<div>
|
|
301
|
+
|
|
302
|
+
<button class="uk-button uk-button-default" type="button">Right Top</button>
|
|
303
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-top; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
304
|
+
|
|
305
|
+
</div>
|
|
303
306
|
</div>
|
|
307
|
+
|
|
304
308
|
</div>
|
|
309
|
+
</div>
|
|
305
310
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
311
|
+
<h2>Boundary Align</h2>
|
|
312
|
+
|
|
313
|
+
<div class="uk-child-width-1-2@m" uk-grid>
|
|
314
|
+
<div>
|
|
315
|
+
|
|
316
|
+
<div class="boundary uk-margin uk-flex uk-flex-around uk-flex-wrap" uk-margin>
|
|
317
|
+
<div>
|
|
318
|
+
|
|
319
|
+
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
|
|
320
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-right; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
321
|
+
|
|
322
|
+
</div>
|
|
323
|
+
<div>
|
|
324
|
+
|
|
325
|
+
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
|
|
326
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-center; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
327
|
+
|
|
328
|
+
</div>
|
|
329
|
+
<div>
|
|
330
|
+
|
|
331
|
+
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
332
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
333
|
+
|
|
334
|
+
</div>
|
|
335
|
+
<div>
|
|
336
|
+
|
|
337
|
+
<button class="uk-button uk-button-default" type="button">Bottom Justify</button>
|
|
338
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-justify; boundary: ! .boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
339
|
+
|
|
340
|
+
</div>
|
|
310
341
|
</div>
|
|
342
|
+
|
|
311
343
|
</div>
|
|
344
|
+
<div class="uk-width-auto">
|
|
312
345
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
346
|
+
<div class="boundary uk-height-medium uk-flex uk-flex-column uk-flex-around">
|
|
347
|
+
<div>
|
|
348
|
+
|
|
349
|
+
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
|
|
350
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-bottom; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
351
|
+
|
|
352
|
+
</div>
|
|
353
|
+
<div>
|
|
354
|
+
|
|
355
|
+
<button class="uk-button uk-button-default" type="button">Right Center</button>
|
|
356
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-center; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
357
|
+
|
|
358
|
+
</div>
|
|
359
|
+
<div>
|
|
360
|
+
|
|
361
|
+
<button class="uk-button uk-button-default" type="button">Right Top</button>
|
|
362
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-top; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
363
|
+
|
|
364
|
+
</div>
|
|
365
|
+
<div>
|
|
366
|
+
|
|
367
|
+
<button class="uk-button uk-button-default" type="button">Right Justify</button>
|
|
368
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-justify; boundary: ! .boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
369
|
+
|
|
370
|
+
</div>
|
|
317
371
|
</div>
|
|
318
|
-
</div>
|
|
319
372
|
|
|
373
|
+
</div>
|
|
320
374
|
</div>
|
|
321
375
|
|
|
322
376
|
<h2>Multiple Toggles</h2>
|
|
@@ -377,6 +431,12 @@
|
|
|
377
431
|
<td>800</td>
|
|
378
432
|
<td>Delay time in hover mode before a Drop is hidden in ms.</td>
|
|
379
433
|
</tr>
|
|
434
|
+
<tr>
|
|
435
|
+
<td><code>display</code></td>
|
|
436
|
+
<td>`dynamic`|`static`</td>
|
|
437
|
+
<td>`dynamic`</td>
|
|
438
|
+
<td>Disable dynamic positioning while scrolling by setting this option to `static`.</td>
|
|
439
|
+
</tr>
|
|
380
440
|
<tr>
|
|
381
441
|
<td><code>boundary</code></td>
|
|
382
442
|
<td>CSS selector</td>
|
|
@@ -419,5 +479,19 @@
|
|
|
419
479
|
|
|
420
480
|
</div>
|
|
421
481
|
|
|
482
|
+
<script>
|
|
483
|
+
|
|
484
|
+
var options = UIkit.util.$$('#js-boundary-overflow-switcher option').map(function (option) { return option.value; });
|
|
485
|
+
|
|
486
|
+
UIkit.util.on('#js-boundary-overflow-switcher', 'change', function () {
|
|
487
|
+
var value = this.value;
|
|
488
|
+
UIkit.util.$$('.js-boundary-overflow').forEach(function (table) {
|
|
489
|
+
UIkit.util.removeClass(table, options);
|
|
490
|
+
UIkit.util.addClass(table, value);
|
|
491
|
+
});
|
|
492
|
+
});
|
|
493
|
+
|
|
494
|
+
</script>
|
|
495
|
+
|
|
422
496
|
</body>
|
|
423
497
|
</html>
|
package/tests/dropdown.html
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<h1>Dropdown</h1>
|
|
25
25
|
|
|
26
26
|
<div uk-grid>
|
|
27
|
-
<div class="uk-width-1-
|
|
27
|
+
<div class="uk-width-1-4@m">
|
|
28
28
|
|
|
29
29
|
<div class="uk-dropdown test">
|
|
30
30
|
|
|
@@ -59,7 +59,21 @@
|
|
|
59
59
|
</div>
|
|
60
60
|
|
|
61
61
|
</div>
|
|
62
|
-
<div class="uk-width-
|
|
62
|
+
<div class="uk-width-1-4@m">
|
|
63
|
+
|
|
64
|
+
<div class="uk-dropdown test">
|
|
65
|
+
|
|
66
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
67
|
+
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
68
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
69
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
70
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
71
|
+
</ul>
|
|
72
|
+
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
</div>
|
|
76
|
+
<div class="uk-width-1-2@m">
|
|
63
77
|
|
|
64
78
|
<div class="uk-margin" uk-margin>
|
|
65
79
|
|
package/tests/nav.html
CHANGED
|
@@ -287,6 +287,33 @@
|
|
|
287
287
|
</div>
|
|
288
288
|
</div>
|
|
289
289
|
|
|
290
|
+
<div class="uk-child-width-1-4@m" uk-grid>
|
|
291
|
+
<div>
|
|
292
|
+
|
|
293
|
+
<h2>Default</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>
|
|
306
|
+
|
|
307
|
+
<ul class="uk-nav uk-nav-primary">
|
|
308
|
+
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
|
|
309
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
|
|
310
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
|
|
311
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
|
|
312
|
+
</ul>
|
|
313
|
+
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
|
|
290
317
|
<h2>JavaScript Options</h2>
|
|
291
318
|
|
|
292
319
|
<table class="uk-table uk-table-striped">
|
package/tests/navbar.html
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<h1>Navbar</h1>
|
|
27
27
|
|
|
28
28
|
<div uk-grid>
|
|
29
|
-
<div class="uk-width-2
|
|
29
|
+
<div class="uk-width-1-2@m">
|
|
30
30
|
|
|
31
31
|
<nav class="uk-navbar-container uk-margin" uk-navbar>
|
|
32
32
|
<div class="uk-navbar-left">
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
<h2>Transparent</h2>
|
|
104
104
|
|
|
105
105
|
<div class="uk-margin uk-position-relative uk-light">
|
|
106
|
-
<canvas class="uk-background-cover" style="background-image: url('images/dark.jpg')" width="1000" height="
|
|
106
|
+
<canvas class="uk-background-cover" style="background-image: url('images/dark.jpg')" width="1000" height="300"></canvas>
|
|
107
107
|
<div class="uk-position-top">
|
|
108
108
|
<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
|
|
109
109
|
<div class="uk-navbar-left">
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
</div>
|
|
145
145
|
|
|
146
146
|
<div class="uk-margin uk-position-relative uk-dark">
|
|
147
|
-
<canvas class="uk-background-cover" style="background-image: url('images/light.jpg')" width="1000" height="
|
|
147
|
+
<canvas class="uk-background-cover" style="background-image: url('images/light.jpg')" width="1000" height="300"></canvas>
|
|
148
148
|
<div class="uk-position-top">
|
|
149
149
|
<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
|
|
150
150
|
<div class="uk-navbar-left">
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
</div>
|
|
186
186
|
|
|
187
187
|
</div>
|
|
188
|
-
<div class="uk-width-1-
|
|
188
|
+
<div class="uk-width-1-4@m">
|
|
189
189
|
|
|
190
190
|
<div class="uk-navbar-dropdown test">
|
|
191
191
|
|
|
@@ -220,6 +220,20 @@
|
|
|
220
220
|
</div>
|
|
221
221
|
|
|
222
222
|
</div>
|
|
223
|
+
<div class="uk-width-1-4@m">
|
|
224
|
+
|
|
225
|
+
<div class="uk-navbar-dropdown test">
|
|
226
|
+
|
|
227
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
228
|
+
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
229
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
230
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
231
|
+
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
232
|
+
</ul>
|
|
233
|
+
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
</div>
|
|
223
237
|
</div>
|
|
224
238
|
|
|
225
239
|
<h2>Dropdown</h2>
|
|
@@ -376,7 +390,7 @@
|
|
|
376
390
|
</div>
|
|
377
391
|
</nav>
|
|
378
392
|
|
|
379
|
-
<nav class="uk-navbar-container uk-margin" uk-navbar="mode:click">
|
|
393
|
+
<nav class="uk-navbar-container uk-margin" uk-navbar="mode: click">
|
|
380
394
|
<div class="uk-navbar-left">
|
|
381
395
|
|
|
382
396
|
<ul class="uk-navbar-nav">
|
|
@@ -1707,6 +1721,43 @@
|
|
|
1707
1721
|
</div>
|
|
1708
1722
|
</nav>
|
|
1709
1723
|
|
|
1724
|
+
<h2>Justify</h2>
|
|
1725
|
+
|
|
1726
|
+
<nav class="uk-navbar-container uk-margin">
|
|
1727
|
+
<div class="uk-navbar-justify" uk-navbar>
|
|
1728
|
+
<div class="uk-navbar-left">
|
|
1729
|
+
|
|
1730
|
+
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
|
|
1731
|
+
|
|
1732
|
+
<ul class="uk-navbar-nav">
|
|
1733
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
1734
|
+
<li><a href="#">Parent</a></li>
|
|
1735
|
+
<li><a href="#">Item</a></li>
|
|
1736
|
+
<li><a href="#">Item</a></li>
|
|
1737
|
+
</ul>
|
|
1738
|
+
|
|
1739
|
+
</div>
|
|
1740
|
+
<div class="uk-navbar-right">
|
|
1741
|
+
|
|
1742
|
+
<ul class="uk-navbar-nav">
|
|
1743
|
+
<li><a href="#">Item</a></li>
|
|
1744
|
+
</ul>
|
|
1745
|
+
|
|
1746
|
+
<div class="uk-navbar-item">
|
|
1747
|
+
<ul class="uk-grid-small" uk-grid>
|
|
1748
|
+
<li>
|
|
1749
|
+
<a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
|
|
1750
|
+
</li>
|
|
1751
|
+
<li>
|
|
1752
|
+
<a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
|
|
1753
|
+
</li>
|
|
1754
|
+
</ul>
|
|
1755
|
+
</div>
|
|
1756
|
+
|
|
1757
|
+
</div>
|
|
1758
|
+
</div>
|
|
1759
|
+
</nav>
|
|
1760
|
+
|
|
1710
1761
|
<h2>Layouts</h2>
|
|
1711
1762
|
|
|
1712
1763
|
</div>
|
package/tests/parallax.html
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<body>
|
|
17
17
|
|
|
18
18
|
<div class="uk-section-default">
|
|
19
|
-
<div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia:100" uk-height-viewport="offset-top: true">
|
|
19
|
+
<div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia: 100" uk-height-viewport="offset-top: true">
|
|
20
20
|
|
|
21
21
|
<h1 class="uk-heading-xlarge uk-margin-auto uk-margin-auto-vertical">Parallax</h1>
|
|
22
22
|
|
|
@@ -168,15 +168,15 @@
|
|
|
168
168
|
</tr>
|
|
169
169
|
<tr>
|
|
170
170
|
<td><code>start</code></td>
|
|
171
|
-
<td>
|
|
171
|
+
<td>Length</td>
|
|
172
172
|
<td>0</td>
|
|
173
|
-
<td>Start offset. The value can be in vh
|
|
173
|
+
<td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's top border and viewport's bottom border intersect.</td>
|
|
174
174
|
</tr>
|
|
175
175
|
<tr>
|
|
176
176
|
<td><code>end</code></td>
|
|
177
|
-
<td>
|
|
177
|
+
<td>Length</td>
|
|
178
178
|
<td>0</td>
|
|
179
|
-
<td>End offset. The value can be in vh
|
|
179
|
+
<td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's bottom border and the viewport's top border intersect.</td>
|
|
180
180
|
</tr>
|
|
181
181
|
<tr>
|
|
182
182
|
<td><code>media</code></td>
|
package/tests/position.html
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
<style>
|
|
10
10
|
|
|
11
11
|
/* JavaScript */
|
|
12
|
-
#js-
|
|
12
|
+
#js-viewport {
|
|
13
13
|
height: 300px;
|
|
14
14
|
outline: 1px solid rgba(0,0,0,0.1);
|
|
15
15
|
position: relative;
|
|
@@ -26,7 +26,6 @@
|
|
|
26
26
|
|
|
27
27
|
#js-element {
|
|
28
28
|
position: absolute;
|
|
29
|
-
display: none;
|
|
30
29
|
width: 75px;
|
|
31
30
|
height: 75px;
|
|
32
31
|
background: rgba(0,0,0,0.1);
|
|
@@ -238,13 +237,13 @@
|
|
|
238
237
|
|
|
239
238
|
<h2>JavaScript</h2>
|
|
240
239
|
|
|
241
|
-
<div id="js-
|
|
240
|
+
<div id="js-viewport" class="uk-margin">
|
|
242
241
|
<div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
|
|
243
242
|
</div>
|
|
244
243
|
|
|
245
244
|
<div id="js-element"></div>
|
|
246
245
|
|
|
247
|
-
<div class="uk-grid uk-child-width-auto uk-form-stacked">
|
|
246
|
+
<div class="uk-grid uk-child-width-auto uk-form-stacked" style="margin-bottom: 100vh">
|
|
248
247
|
<div>
|
|
249
248
|
|
|
250
249
|
<div class="uk-margin">
|
|
@@ -327,27 +326,26 @@
|
|
|
327
326
|
|
|
328
327
|
<script>
|
|
329
328
|
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
boundary = $('#js-boundary'),
|
|
337
|
-
target = $('#js-target'),
|
|
338
|
-
offsetX,
|
|
339
|
-
offsetY;
|
|
329
|
+
const {$, $$, css, getEventPos, on, offset, positionAt} = UIkit.util;
|
|
330
|
+
let viewport = $('#js-viewport');
|
|
331
|
+
let element = $('#js-element');
|
|
332
|
+
let target = $('#js-target');
|
|
333
|
+
let offsetX;
|
|
334
|
+
let offsetY;
|
|
340
335
|
|
|
341
336
|
function position() {
|
|
342
|
-
|
|
337
|
+
positionAt(
|
|
343
338
|
element,
|
|
344
339
|
target,
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
340
|
+
{
|
|
341
|
+
viewport,
|
|
342
|
+
attach:{
|
|
343
|
+
element: [$('#js-element_x').value, $('#js-element_y').value],
|
|
344
|
+
target: [$('#js-target_x').value, $('#js-target_y').value]
|
|
345
|
+
},
|
|
346
|
+
offset: [$('#js-offset_x').value, $('#js-offset_y').value],
|
|
347
|
+
flip: [$('#js-flip_x').value, $('#js-flip_y').value]
|
|
348
|
+
}
|
|
351
349
|
);
|
|
352
350
|
}
|
|
353
351
|
|
|
@@ -359,33 +357,34 @@
|
|
|
359
357
|
|
|
360
358
|
});
|
|
361
359
|
|
|
360
|
+
let lastPos;
|
|
362
361
|
on(window, 'dragover', function (e) {
|
|
363
362
|
|
|
364
|
-
e
|
|
365
|
-
|
|
366
|
-
if (!ticking) {
|
|
367
|
-
requestAnimationFrame(function () {
|
|
363
|
+
const pos = getEventPos(e);
|
|
368
364
|
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
'left top',
|
|
374
|
-
(e.pageX - offset(boundary).left - offsetX) + ' ' + (e.pageY - offset(boundary).top - offsetY)
|
|
375
|
-
);
|
|
365
|
+
if (lastPos?.x === pos.x && lastPos?.y === pos.y) {
|
|
366
|
+
return;
|
|
367
|
+
}
|
|
368
|
+
lastPos = pos;
|
|
376
369
|
|
|
377
|
-
|
|
370
|
+
e.preventDefault();
|
|
378
371
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
372
|
+
// positions target at mouse cursor
|
|
373
|
+
positionAt(
|
|
374
|
+
target,
|
|
375
|
+
viewport,
|
|
376
|
+
{
|
|
377
|
+
offset: [e.pageX - offset(viewport).left - offsetX, e.pageY - offset(viewport).top - offsetY]
|
|
378
|
+
}
|
|
379
|
+
);
|
|
383
380
|
|
|
381
|
+
// positions element at target
|
|
382
|
+
position();
|
|
384
383
|
});
|
|
385
384
|
|
|
386
|
-
|
|
385
|
+
on($$('select,input'), 'change', position);
|
|
386
|
+
on(window, 'scroll', position);
|
|
387
387
|
|
|
388
|
-
util.css(element, 'display', 'block');
|
|
389
388
|
position();
|
|
390
389
|
|
|
391
390
|
</script>
|