uikit 3.14.2-dev.e270e98f7 → 3.14.3-dev.5325d42a0

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 (96) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/build/util.js +8 -2
  3. package/dist/css/uikit-core-rtl.css +93 -21
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +93 -21
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +99 -33
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +99 -33
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +106 -17
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +106 -17
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +71 -36
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +55 -35
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +55 -35
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +142 -36
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +276 -129
  38. package/dist/js/uikit-core.min.js +1 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +346 -164
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +11 -11
  44. package/src/js/components/parallax.js +16 -1
  45. package/src/js/core/accordion.js +3 -3
  46. package/src/js/core/alert.js +1 -1
  47. package/src/js/core/drop.js +47 -18
  48. package/src/js/core/height-viewport.js +15 -11
  49. package/src/js/core/navbar.js +19 -18
  50. package/src/js/core/scrollspy.js +4 -0
  51. package/src/js/core/toggle.js +9 -8
  52. package/src/js/mixin/parallax.js +54 -34
  53. package/src/js/mixin/position.js +36 -20
  54. package/src/js/mixin/togglable.js +110 -19
  55. package/src/js/util/animation.js +1 -0
  56. package/src/js/util/dom.js +4 -3
  57. package/src/js/util/position.js +24 -22
  58. package/src/js/util/viewport.js +7 -8
  59. package/src/less/components/drop.less +19 -4
  60. package/src/less/components/dropdown.less +21 -4
  61. package/src/less/components/margin.less +13 -14
  62. package/src/less/components/modal.less +19 -4
  63. package/src/less/components/nav.less +1 -1
  64. package/src/less/components/navbar.less +60 -19
  65. package/src/less/components/offcanvas.less +21 -21
  66. package/src/less/components/position.less +1 -1
  67. package/src/less/components/sticky.less +7 -0
  68. package/src/less/components/tooltip.less +1 -0
  69. package/src/less/components/utility.less +1 -2
  70. package/src/less/theme/dropdown.less +11 -0
  71. package/src/less/theme/navbar.less +10 -10
  72. package/src/scss/components/drop.scss +19 -4
  73. package/src/scss/components/dropdown.scss +21 -4
  74. package/src/scss/components/margin.scss +13 -14
  75. package/src/scss/components/modal.scss +19 -4
  76. package/src/scss/components/nav.scss +1 -1
  77. package/src/scss/components/navbar.scss +49 -8
  78. package/src/scss/components/offcanvas.scss +21 -21
  79. package/src/scss/components/position.scss +1 -1
  80. package/src/scss/components/sticky.scss +7 -0
  81. package/src/scss/components/tooltip.scss +1 -0
  82. package/src/scss/components/utility.scss +1 -2
  83. package/src/scss/mixins-theme.scss +8 -10
  84. package/src/scss/mixins.scss +2 -0
  85. package/src/scss/theme/dropdown.scss +8 -0
  86. package/src/scss/theme/navbar.scss +7 -0
  87. package/src/scss/variables-theme.scss +26 -11
  88. package/src/scss/variables.scss +24 -11
  89. package/tests/drop.html +165 -4
  90. package/tests/dropdown.html +234 -13
  91. package/tests/height-viewport.html +62 -0
  92. package/tests/navbar.html +333 -64
  93. package/tests/offcanvas.html +8 -8
  94. package/tests/sticky-navbar.html +132 -0
  95. package/tests/sticky-parallax.html +2 -1
  96. package/tests/sticky.html +5 -4
package/tests/drop.html CHANGED
@@ -15,7 +15,7 @@
15
15
  -webkit-overflow-scrolling: touch;
16
16
  }
17
17
 
18
- .boundary-overflow { width: 200%; }
18
+ .boundary-overflow { width: 250%; }
19
19
 
20
20
  </style>
21
21
  </head>
@@ -92,7 +92,14 @@
92
92
 
93
93
  <div class="uk-inline">
94
94
  <button class="uk-button uk-button-default" type="button">Hover only</button>
95
- <div uk-drop="mode: hover; delay-hide: 0">
95
+ <div uk-drop="mode: hover; animate-out: true;">
96
+ <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>
97
+ </div>
98
+ </div>
99
+
100
+ <div class="uk-inline">
101
+ <button class="uk-button uk-button-default" type="button">Out Animation</button>
102
+ <div uk-drop="animate-out: true">
96
103
  <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>
97
104
  </div>
98
105
  </div>
@@ -260,7 +267,7 @@
260
267
  <div class="uk-child-width-1-2@m" uk-grid>
261
268
  <div>
262
269
 
263
- <div class="boundary uk-height-medium uk-margin uk-flex uk-flex-between uk-flex-wrap">
270
+ <div class="boundary uk-height-medium uk-margin uk-flex uk-flex-around uk-flex-wrap">
264
271
  <div>
265
272
 
266
273
  <button class="uk-button uk-button-default" type="button">Bottom Right</button>
@@ -279,6 +286,12 @@
279
286
  <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
287
 
281
288
  </div>
289
+ <div>
290
+
291
+ <button class="uk-button uk-button-default" type="button">Bottom Justify</button>
292
+ <div class="uk-width-medium" uk-dropdown="pos: bottom-justify; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
293
+
294
+ </div>
282
295
  </div>
283
296
 
284
297
  </div>
@@ -303,6 +316,12 @@
303
316
  <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
317
 
305
318
  </div>
319
+ <div>
320
+
321
+ <button class="uk-button uk-button-default" type="button">Right Justify</button>
322
+ <div class="uk-width-medium" uk-dropdown="pos: right-justify; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
323
+
324
+ </div>
306
325
  </div>
307
326
 
308
327
  </div>
@@ -388,6 +407,136 @@
388
407
 
389
408
  </div>
390
409
 
410
+ <h2>Stretch</h2>
411
+
412
+ <div class="uk-margin" uk-margin>
413
+
414
+ <div class="uk-inline">
415
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Fade</button>
416
+ <div uk-drop="pos: bottom-stretch; animate-out: true">
417
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="uk-inline">
422
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide</button>
423
+ <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide">
424
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="uk-inline">
429
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Left</button>
430
+ <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-left">
431
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="uk-inline">
436
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Right</button>
437
+ <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
438
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
439
+ </div>
440
+ </div>
441
+
442
+ </div>
443
+
444
+ <div class="uk-margin" uk-margin>
445
+
446
+ <div class="uk-inline">
447
+ <button class="uk-button uk-button-default" type="button">Top Stretch Fade</button>
448
+ <div uk-drop="pos: top-stretch; animate-out: true">
449
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="uk-inline">
454
+ <button class="uk-button uk-button-default" type="button">Top Stretch Slide</button>
455
+ <div uk-drop="pos: top-stretch; animate-out: true; animation: slide">
456
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="uk-inline">
461
+ <button class="uk-button uk-button-default" type="button">Top Stretch Slide Left</button>
462
+ <div uk-drop="pos: top-stretch; animate-out: true; animation: slide-left">
463
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="uk-inline">
468
+ <button class="uk-button uk-button-default" type="button">Top Stretch Slide Right</button>
469
+ <div uk-drop="pos: top-stretch; animate-out: true; animation: slide-right">
470
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
471
+ </div>
472
+ </div>
473
+
474
+ </div>
475
+
476
+ <div class="uk-margin" uk-margin>
477
+
478
+ <div class="uk-inline">
479
+ <button class="uk-button uk-button-default" type="button">Left Stretch Fade</button>
480
+ <div uk-drop="pos: left-stretch; animate-out: true">
481
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="uk-inline">
486
+ <button class="uk-button uk-button-default" type="button">Left Stretch Slide</button>
487
+ <div uk-drop="pos: left-stretch; animate-out: true; animation: slide">
488
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="uk-inline">
493
+ <button class="uk-button uk-button-default" type="button">Left Stretch Slide Left</button>
494
+ <div uk-drop="pos: left-stretch; animate-out: true; animation: slide-left">
495
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
496
+ </div>
497
+ </div>
498
+
499
+ <div class="uk-inline">
500
+ <button class="uk-button uk-button-default" type="button">Left Stretch Slide Right</button>
501
+ <div uk-drop="pos: left-stretch; animate-out: true; animation: slide-right">
502
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
503
+ </div>
504
+ </div>
505
+
506
+ </div>
507
+
508
+ <div class="uk-margin" uk-margin>
509
+
510
+ <div class="uk-inline">
511
+ <button class="uk-button uk-button-default" type="button">Right Stretch Fade</button>
512
+ <div uk-drop="pos: right-stretch; animate-out: true">
513
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="uk-inline">
518
+ <button class="uk-button uk-button-default" type="button">Right Stretch Slide</button>
519
+ <div uk-drop="pos: right-stretch; animate-out: true; animation: slide">
520
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
521
+ </div>
522
+ </div>
523
+
524
+ <div class="uk-inline">
525
+ <button class="uk-button uk-button-default" type="button">Right Stretch Slide Left</button>
526
+ <div uk-drop="pos: right-stretch; animate-out: true; animation: slide-left">
527
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
528
+ </div>
529
+ </div>
530
+
531
+ <div class="uk-inline">
532
+ <button class="uk-button uk-button-default" type="button">Right Stretch Slide Right</button>
533
+ <div uk-drop="pos: right-stretch; animate-out: true; animation: slide-right">
534
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
535
+ </div>
536
+ </div>
537
+
538
+ </div>
539
+
391
540
  <h2>JavaScript Options</h2>
392
541
 
393
542
  <div class="uk-overflow-auto">
@@ -464,8 +613,14 @@
464
613
  <tr>
465
614
  <td><code>animation</code></td>
466
615
  <td>String</td>
616
+ <td>'uk-animation-fade'</td>
617
+ <td>The space separated names of animations to use. (Comma separate for animation out)</td>
618
+ </tr>
619
+ <tr>
620
+ <td><code>animate-out</code></td>
621
+ <td>Boolean</td>
467
622
  <td>false</td>
468
- <td>The space separated names of animations to use.</td>
623
+ <td>Use animation when closing the Drop.</td>
469
624
  </tr>
470
625
  <tr>
471
626
  <td><code>duration</code></td>
@@ -473,6 +628,12 @@
473
628
  <td>200</td>
474
629
  <td>The animation duration.</td>
475
630
  </tr>
631
+ <tr>
632
+ <td><code>container</code></td>
633
+ <td>Boolean</td>
634
+ <td>false</td>
635
+ <td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
636
+ </tr>
476
637
  </tbody>
477
638
  </table>
478
639
  </div>
package/tests/dropdown.html CHANGED
@@ -78,7 +78,7 @@
78
78
  <div class="uk-margin" uk-margin>
79
79
 
80
80
  <div class="uk-inline">
81
- <button class="uk-button uk-button-default" type="button">Hover</button>
81
+ <button class="uk-button uk-button-default" type="button">Hover, Click</button>
82
82
  <div uk-dropdown>
83
83
  <ul class="uk-nav uk-dropdown-nav">
84
84
  <li class="uk-active"><a href="#">Active</a></li>
@@ -99,7 +99,7 @@
99
99
  </div>
100
100
 
101
101
  <div class="uk-inline">
102
- <button class="uk-button uk-button-default" type="button">Click</button>
102
+ <button class="uk-button uk-button-default" type="button">Click only</button>
103
103
  <div uk-dropdown="mode: click">
104
104
  <ul class="uk-nav uk-dropdown-nav">
105
105
  <li class="uk-active"><a href="#">Active</a></li>
@@ -119,6 +119,38 @@
119
119
  </div>
120
120
  </div>
121
121
 
122
+ <div class="uk-inline">
123
+ <button class="uk-button uk-button-default" type="button">Hover only</button>
124
+ <div uk-dropdown="mode: hover">
125
+ <ul class="uk-nav uk-dropdown-nav">
126
+ <li class="uk-active"><a href="#">Active</a></li>
127
+ <li class="uk-parent">
128
+ <a href="#">Parent</a>
129
+ <ul class="uk-nav-sub">
130
+ <li><a href="#">Sub item</a></li>
131
+ <li><a href="#">Sub item</a></li>
132
+ </ul>
133
+ </li>
134
+ <li class="uk-nav-header">Header</li>
135
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
136
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
137
+ <li class="uk-nav-divider"></li>
138
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
139
+ </ul>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="uk-inline">
144
+ <button class="uk-button uk-button-default" type="button">Out Animation</button>
145
+ <div uk-dropdown="animate-out: true">
146
+ <ul class="uk-nav uk-dropdown-nav">
147
+ <li class="uk-active"><a href="#">Active</a></li>
148
+ <li><a href="#">Item</a></li>
149
+ <li><a href="#">Item</a></li>
150
+ </ul>
151
+ </div>
152
+ </div>
153
+
122
154
  <div class="uk-inline">
123
155
  <button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
124
156
  <div uk-dropdown="mode: click">
@@ -151,17 +183,6 @@
151
183
  </div>
152
184
  </div>
153
185
 
154
- <div class="uk-inline">
155
- <button class="uk-button uk-button-default" type="button">Hover only</button>
156
- <div uk-dropdown="mode: hover; delay-hide: 0">
157
- <ul class="uk-nav uk-dropdown-nav">
158
- <li class="uk-active"><a href="#">Active</a></li>
159
- <li><a href="#">Item</a></li>
160
- <li><a href="#">Item</a></li>
161
- </ul>
162
- </div>
163
- </div>
164
-
165
186
  <div class="uk-inline">
166
187
  <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
167
188
  <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
@@ -352,6 +373,200 @@
352
373
  </div>
353
374
  </div>
354
375
 
376
+ <h2>Stretch</h2>
377
+
378
+ <div class="uk-margin" uk-margin>
379
+
380
+ <div class="uk-inline">
381
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Fade</button>
382
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true">
383
+ <ul class="uk-nav uk-dropdown-nav">
384
+ <li class="uk-active"><a href="#">Active</a></li>
385
+ <li><a href="#">Item</a></li>
386
+ <li><a href="#">Item</a></li>
387
+ </ul>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="uk-inline">
392
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide</button>
393
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
394
+ <ul class="uk-nav uk-dropdown-nav">
395
+ <li class="uk-active"><a href="#">Active</a></li>
396
+ <li><a href="#">Item</a></li>
397
+ <li><a href="#">Item</a></li>
398
+ </ul>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="uk-inline">
403
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Left</button>
404
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
405
+ <ul class="uk-nav uk-dropdown-nav">
406
+ <li class="uk-active"><a href="#">Active</a></li>
407
+ <li><a href="#">Item</a></li>
408
+ <li><a href="#">Item</a></li>
409
+ </ul>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="uk-inline">
414
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Right</button>
415
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
416
+ <ul class="uk-nav uk-dropdown-nav">
417
+ <li class="uk-active"><a href="#">Active</a></li>
418
+ <li><a href="#">Item</a></li>
419
+ <li><a href="#">Item</a></li>
420
+ </ul>
421
+ </div>
422
+ </div>
423
+
424
+ </div>
425
+
426
+ <div class="uk-margin" uk-margin>
427
+
428
+ <div class="uk-inline">
429
+ <button class="uk-button uk-button-default" type="button">Top Stretch Fade</button>
430
+ <div uk-dropdown="pos: top-stretch; animate-out: true">
431
+ <ul class="uk-nav uk-dropdown-nav">
432
+ <li class="uk-active"><a href="#">Active</a></li>
433
+ <li><a href="#">Item</a></li>
434
+ <li><a href="#">Item</a></li>
435
+ </ul>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="uk-inline">
440
+ <button class="uk-button uk-button-default" type="button">Top Stretch Slide</button>
441
+ <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide">
442
+ <ul class="uk-nav uk-dropdown-nav">
443
+ <li class="uk-active"><a href="#">Active</a></li>
444
+ <li><a href="#">Item</a></li>
445
+ <li><a href="#">Item</a></li>
446
+ </ul>
447
+ </div>
448
+ </div>
449
+
450
+ <div class="uk-inline">
451
+ <button class="uk-button uk-button-default" type="button">Top Stretch Slide Left</button>
452
+ <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-left">
453
+ <ul class="uk-nav uk-dropdown-nav">
454
+ <li class="uk-active"><a href="#">Active</a></li>
455
+ <li><a href="#">Item</a></li>
456
+ <li><a href="#">Item</a></li>
457
+ </ul>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="uk-inline">
462
+ <button class="uk-button uk-button-default" type="button">Top Stretch Slide Right</button>
463
+ <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-right">
464
+ <ul class="uk-nav uk-dropdown-nav">
465
+ <li class="uk-active"><a href="#">Active</a></li>
466
+ <li><a href="#">Item</a></li>
467
+ <li><a href="#">Item</a></li>
468
+ </ul>
469
+ </div>
470
+ </div>
471
+
472
+ </div>
473
+
474
+ <div class="uk-margin" uk-margin>
475
+
476
+ <div class="uk-inline">
477
+ <button class="uk-button uk-button-default" type="button">Left Stretch Fade</button>
478
+ <div uk-dropdown="pos: left-stretch; animate-out: true">
479
+ <ul class="uk-nav uk-dropdown-nav">
480
+ <li class="uk-active"><a href="#">Active</a></li>
481
+ <li><a href="#">Item</a></li>
482
+ <li><a href="#">Item</a></li>
483
+ </ul>
484
+ </div>
485
+ </div>
486
+
487
+ <div class="uk-inline">
488
+ <button class="uk-button uk-button-default" type="button">Left Stretch Slide</button>
489
+ <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide">
490
+ <ul class="uk-nav uk-dropdown-nav">
491
+ <li class="uk-active"><a href="#">Active</a></li>
492
+ <li><a href="#">Item</a></li>
493
+ <li><a href="#">Item</a></li>
494
+ </ul>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="uk-inline">
499
+ <button class="uk-button uk-button-default" type="button">Left Stretch Slide Left</button>
500
+ <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-left">
501
+ <ul class="uk-nav uk-dropdown-nav">
502
+ <li class="uk-active"><a href="#">Active</a></li>
503
+ <li><a href="#">Item</a></li>
504
+ <li><a href="#">Item</a></li>
505
+ </ul>
506
+ </div>
507
+ </div>
508
+
509
+ <div class="uk-inline">
510
+ <button class="uk-button uk-button-default" type="button">Left Stretch Slide Right</button>
511
+ <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-right">
512
+ <ul class="uk-nav uk-dropdown-nav">
513
+ <li class="uk-active"><a href="#">Active</a></li>
514
+ <li><a href="#">Item</a></li>
515
+ <li><a href="#">Item</a></li>
516
+ </ul>
517
+ </div>
518
+ </div>
519
+
520
+ </div>
521
+
522
+ <div class="uk-margin" uk-margin>
523
+
524
+ <div class="uk-inline">
525
+ <button class="uk-button uk-button-default" type="button">Right Stretch Fade</button>
526
+ <div uk-dropdown="pos: right-stretch; animate-out: true">
527
+ <ul class="uk-nav uk-dropdown-nav">
528
+ <li class="uk-active"><a href="#">Active</a></li>
529
+ <li><a href="#">Item</a></li>
530
+ <li><a href="#">Item</a></li>
531
+ </ul>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="uk-inline">
536
+ <button class="uk-button uk-button-default" type="button">Right Stretch Slide</button>
537
+ <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide">
538
+ <ul class="uk-nav uk-dropdown-nav">
539
+ <li class="uk-active"><a href="#">Active</a></li>
540
+ <li><a href="#">Item</a></li>
541
+ <li><a href="#">Item</a></li>
542
+ </ul>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="uk-inline">
547
+ <button class="uk-button uk-button-default" type="button">Right Stretch Slide Left</button>
548
+ <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-left">
549
+ <ul class="uk-nav uk-dropdown-nav">
550
+ <li class="uk-active"><a href="#">Active</a></li>
551
+ <li><a href="#">Item</a></li>
552
+ <li><a href="#">Item</a></li>
553
+ </ul>
554
+ </div>
555
+ </div>
556
+
557
+ <div class="uk-inline">
558
+ <button class="uk-button uk-button-default" type="button">Right Stretch Slide Right</button>
559
+ <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-right">
560
+ <ul class="uk-nav uk-dropdown-nav">
561
+ <li class="uk-active"><a href="#">Active</a></li>
562
+ <li><a href="#">Item</a></li>
563
+ <li><a href="#">Item</a></li>
564
+ </ul>
565
+ </div>
566
+ </div>
567
+
568
+ </div>
569
+
355
570
  <h2>JavaScript Options</h2>
356
571
 
357
572
  <div class="uk-overflow-auto">
@@ -431,6 +646,12 @@
431
646
  <td>200</td>
432
647
  <td>The animation duration.</td>
433
648
  </tr>
649
+ <tr>
650
+ <td><code>container</code></td>
651
+ <td>Boolean</td>
652
+ <td>false</td>
653
+ <td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
654
+ </tr>
434
655
  </tbody>
435
656
  </table>
436
657
  </div>
package/tests/height-viewport.html CHANGED
@@ -138,6 +138,68 @@
138
138
  </div>
139
139
  </div>
140
140
 
141
+ <div class="uk-child-width-1-6@m uk-light" uk-grid style="height: 600px; overflow: auto;">
142
+ <div>
143
+
144
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-viewport">
145
+ <h1>CSS</h1>
146
+ </div>
147
+
148
+ </div>
149
+ <div>
150
+
151
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport>
152
+ <h1>JS</h1>
153
+ </div>
154
+
155
+ </div>
156
+ <div>
157
+
158
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true">
159
+ <div>
160
+ <h1>JS</h1>
161
+ <div>top: true</div>
162
+ </div>
163
+ </div>
164
+
165
+ </div>
166
+ <div>
167
+
168
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: true">
169
+ <div>
170
+ <h1>JS</h1>
171
+ <div>top: true</div>
172
+ <div>bottom: true</div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="uk-padding uk-background-secondary">Lorem ipsum dolor sit amet.</div>
177
+
178
+ </div>
179
+ <div>
180
+
181
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 10">
182
+ <div>
183
+ <h1>JS</h1>
184
+ <div>top: true</div>
185
+ <div>bottom: 10%</div>
186
+ </div>
187
+ </div>
188
+
189
+ </div>
190
+ <div>
191
+
192
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
193
+ <div>
194
+ <h1>JS</h1>
195
+ <div>top: true</div>
196
+ <div>bottom: 50px</div>
197
+ </div>
198
+ </div>
199
+
200
+ </div>
201
+ </div>
202
+
141
203
  <h2>JavaScript Options</h2>
142
204
 
143
205
  <div class="uk-overflow-auto">