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.
Files changed (83) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/css/uikit-core-rtl.css +108 -61
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +108 -61
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +108 -62
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +108 -62
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +7 -5
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +6 -14
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +6 -14
  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 +4 -5
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +4 -5
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +4 -5
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +19 -19
  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 +136 -70
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +142 -74
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
  44. package/src/images/components/nav-parent-icon.svg +3 -0
  45. package/src/images/components/navbar-parent-icon.svg +3 -0
  46. package/src/js/components/filter.js +5 -3
  47. package/src/js/core/height-viewport.js +6 -2
  48. package/src/js/core/icon.js +16 -0
  49. package/src/js/core/index.js +2 -0
  50. package/src/js/core/leader.js +2 -2
  51. package/src/js/core/navbar.js +44 -15
  52. package/src/js/core/scroll.js +38 -11
  53. package/src/js/mixin/media.js +4 -5
  54. package/src/js/mixin/position.js +19 -11
  55. package/src/js/mixin/togglable.js +8 -17
  56. package/src/js/util/style.js +4 -13
  57. package/src/js/util/viewport.js +2 -4
  58. package/src/less/components/dropdown.less +14 -0
  59. package/src/less/components/leader.less +1 -1
  60. package/src/less/components/nav.less +7 -37
  61. package/src/less/components/navbar.less +101 -13
  62. package/src/less/components/utility.less +10 -2
  63. package/src/less/theme/nav.less +0 -8
  64. package/src/less/theme/navbar.less +4 -6
  65. package/src/scss/components/dropdown.scss +14 -0
  66. package/src/scss/components/leader.scss +1 -1
  67. package/src/scss/components/nav.scss +7 -26
  68. package/src/scss/components/navbar.scss +89 -13
  69. package/src/scss/components/utility.scss +8 -1
  70. package/src/scss/mixins-theme.scss +15 -18
  71. package/src/scss/mixins.scss +14 -14
  72. package/src/scss/theme/nav.scss +0 -8
  73. package/src/scss/theme/navbar.scss +3 -2
  74. package/src/scss/variables-theme.scss +17 -11
  75. package/src/scss/variables.scss +17 -10
  76. package/tests/drop.html +66 -16
  77. package/tests/dropdown.html +103 -16
  78. package/tests/index.html +3 -3
  79. package/tests/nav.html +20 -87
  80. package/tests/navbar.html +283 -62
  81. package/tests/offcanvas.html +8 -8
  82. package/tests/utility.html +19 -0
  83. package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/tests/drop.html CHANGED
@@ -17,6 +17,13 @@
17
17
 
18
18
  .boundary-overflow { width: 250%; }
19
19
 
20
+ .scroll-container {
21
+ padding: 15px;
22
+ border: 1px dashed rgba(0,0,0,0.2);
23
+ overflow: auto;
24
+ -webkit-overflow-scrolling: touch;
25
+ }
26
+
20
27
  </style>
21
28
  </head>
22
29
 
@@ -412,28 +419,28 @@
412
419
  <div class="uk-margin" uk-margin>
413
420
 
414
421
  <div class="uk-inline">
415
- <button class="uk-button uk-button-default" type="button">Bottom Stretch Fade</button>
422
+ <button class="uk-button uk-button-default" type="button">Bottom Fade</button>
416
423
  <div uk-drop="pos: bottom-stretch; animate-out: true">
417
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>
418
425
  </div>
419
426
  </div>
420
427
 
421
428
  <div class="uk-inline">
422
- <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide</button>
429
+ <button class="uk-button uk-button-default" type="button">Bottom Slide</button>
423
430
  <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide">
424
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>
425
432
  </div>
426
433
  </div>
427
434
 
428
435
  <div class="uk-inline">
429
- <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Left</button>
436
+ <button class="uk-button uk-button-default" type="button">Bottom Slide Left</button>
430
437
  <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-left">
431
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>
432
439
  </div>
433
440
  </div>
434
441
 
435
442
  <div class="uk-inline">
436
- <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Right</button>
443
+ <button class="uk-button uk-button-default" type="button">Bottom Slide Right</button>
437
444
  <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
438
445
  <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
446
  </div>
@@ -444,28 +451,28 @@
444
451
  <div class="uk-margin" uk-margin>
445
452
 
446
453
  <div class="uk-inline">
447
- <button class="uk-button uk-button-default" type="button">Top Stretch Fade</button>
454
+ <button class="uk-button uk-button-default" type="button">Top Fade</button>
448
455
  <div uk-drop="pos: top-stretch; animate-out: true">
449
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>
450
457
  </div>
451
458
  </div>
452
459
 
453
460
  <div class="uk-inline">
454
- <button class="uk-button uk-button-default" type="button">Top Stretch Slide</button>
461
+ <button class="uk-button uk-button-default" type="button">Top Slide</button>
455
462
  <div uk-drop="pos: top-stretch; animate-out: true; animation: slide">
456
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>
457
464
  </div>
458
465
  </div>
459
466
 
460
467
  <div class="uk-inline">
461
- <button class="uk-button uk-button-default" type="button">Top Stretch Slide Left</button>
468
+ <button class="uk-button uk-button-default" type="button">Top Slide Left</button>
462
469
  <div uk-drop="pos: top-stretch; animate-out: true; animation: slide-left">
463
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>
464
471
  </div>
465
472
  </div>
466
473
 
467
474
  <div class="uk-inline">
468
- <button class="uk-button uk-button-default" type="button">Top Stretch Slide Right</button>
475
+ <button class="uk-button uk-button-default" type="button">Top Slide Right</button>
469
476
  <div uk-drop="pos: top-stretch; animate-out: true; animation: slide-right">
470
477
  <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
478
  </div>
@@ -476,28 +483,28 @@
476
483
  <div class="uk-margin" uk-margin>
477
484
 
478
485
  <div class="uk-inline">
479
- <button class="uk-button uk-button-default" type="button">Left Stretch Fade</button>
486
+ <button class="uk-button uk-button-default" type="button">Left Fade</button>
480
487
  <div uk-drop="pos: left-stretch; animate-out: true">
481
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>
482
489
  </div>
483
490
  </div>
484
491
 
485
492
  <div class="uk-inline">
486
- <button class="uk-button uk-button-default" type="button">Left Stretch Slide</button>
493
+ <button class="uk-button uk-button-default" type="button">Left Slide</button>
487
494
  <div uk-drop="pos: left-stretch; animate-out: true; animation: slide">
488
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>
489
496
  </div>
490
497
  </div>
491
498
 
492
499
  <div class="uk-inline">
493
- <button class="uk-button uk-button-default" type="button">Left Stretch Slide Left</button>
500
+ <button class="uk-button uk-button-default" type="button">Left Slide Left</button>
494
501
  <div uk-drop="pos: left-stretch; animate-out: true; animation: slide-left">
495
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>
496
503
  </div>
497
504
  </div>
498
505
 
499
506
  <div class="uk-inline">
500
- <button class="uk-button uk-button-default" type="button">Left Stretch Slide Right</button>
507
+ <button class="uk-button uk-button-default" type="button">Left Slide Right</button>
501
508
  <div uk-drop="pos: left-stretch; animate-out: true; animation: slide-right">
502
509
  <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
510
  </div>
@@ -508,28 +515,28 @@
508
515
  <div class="uk-margin" uk-margin>
509
516
 
510
517
  <div class="uk-inline">
511
- <button class="uk-button uk-button-default" type="button">Right Stretch Fade</button>
518
+ <button class="uk-button uk-button-default" type="button">Right Fade</button>
512
519
  <div uk-drop="pos: right-stretch; animate-out: true">
513
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>
514
521
  </div>
515
522
  </div>
516
523
 
517
524
  <div class="uk-inline">
518
- <button class="uk-button uk-button-default" type="button">Right Stretch Slide</button>
525
+ <button class="uk-button uk-button-default" type="button">Right Slide</button>
519
526
  <div uk-drop="pos: right-stretch; animate-out: true; animation: slide">
520
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>
521
528
  </div>
522
529
  </div>
523
530
 
524
531
  <div class="uk-inline">
525
- <button class="uk-button uk-button-default" type="button">Right Stretch Slide Left</button>
532
+ <button class="uk-button uk-button-default" type="button">Right Slide Left</button>
526
533
  <div uk-drop="pos: right-stretch; animate-out: true; animation: slide-left">
527
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>
528
535
  </div>
529
536
  </div>
530
537
 
531
538
  <div class="uk-inline">
532
- <button class="uk-button uk-button-default" type="button">Right Stretch Slide Right</button>
539
+ <button class="uk-button uk-button-default" type="button">Right Slide Right</button>
533
540
  <div uk-drop="pos: right-stretch; animate-out: true; animation: slide-right">
534
541
  <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
542
  </div>
@@ -537,6 +544,49 @@
537
544
 
538
545
  </div>
539
546
 
547
+ <div class="uk-child-width-1-4@m" uk-grid>
548
+ <div>
549
+ <div class="scroll-container uk-height-large uk-resize-vertical">
550
+
551
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Fade</button></div>
552
+ <div uk-drop="pos: bottom-stretch; animate-out: true">
553
+ <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>
554
+ </div>
555
+
556
+ </div>
557
+ </div>
558
+ <div>
559
+ <div class="scroll-container uk-height-large uk-resize-vertical">
560
+
561
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide</button></div>
562
+ <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide">
563
+ <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>
564
+ </div>
565
+
566
+ </div>
567
+ </div>
568
+ <div>
569
+ <div class="scroll-container uk-height-large uk-resize-vertical">
570
+
571
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Left</button></div>
572
+ <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-left">
573
+ <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>
574
+ </div>
575
+
576
+ </div>
577
+ </div>
578
+ <div>
579
+ <div class="scroll-container uk-height-large uk-resize-vertical">
580
+
581
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Right</button></div>
582
+ <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
583
+ <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>
584
+ </div>
585
+
586
+ </div>
587
+ </div>
588
+ </div>
589
+
540
590
  <h2>JavaScript Options</h2>
541
591
 
542
592
  <div class="uk-overflow-auto">
package/tests/dropdown.html CHANGED
@@ -14,6 +14,13 @@
14
14
  width: 100%;
15
15
  }
16
16
 
17
+ .scroll-container {
18
+ padding: 15px;
19
+ border: 1px dashed rgba(0,0,0,0.2);
20
+ overflow: auto;
21
+ -webkit-overflow-scrolling: touch;
22
+ }
23
+
17
24
  </style>
18
25
  </head>
19
26
 
@@ -23,6 +30,13 @@
23
30
 
24
31
  <h1>Dropdown</h1>
25
32
 
33
+ <div class="uk-margin">
34
+ <select id="js-size-switcher" class="uk-select uk-form-width-small">
35
+ <option value="">Default</option>
36
+ <option value="uk-dropdown-large">Large</option>
37
+ </select>
38
+ </div>
39
+
26
40
  <div uk-grid>
27
41
  <div class="uk-width-1-4@m">
28
42
 
@@ -378,7 +392,7 @@
378
392
  <div class="uk-margin" uk-margin>
379
393
 
380
394
  <div class="uk-inline">
381
- <button class="uk-button uk-button-default" type="button">Bottom Stretch Fade</button>
395
+ <button class="uk-button uk-button-default" type="button">Bottom Fade</button>
382
396
  <div uk-dropdown="pos: bottom-stretch; animate-out: true">
383
397
  <ul class="uk-nav uk-dropdown-nav">
384
398
  <li class="uk-active"><a href="#">Active</a></li>
@@ -389,7 +403,7 @@
389
403
  </div>
390
404
 
391
405
  <div class="uk-inline">
392
- <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide</button>
406
+ <button class="uk-button uk-button-default" type="button">Bottom Slide</button>
393
407
  <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
394
408
  <ul class="uk-nav uk-dropdown-nav">
395
409
  <li class="uk-active"><a href="#">Active</a></li>
@@ -400,7 +414,7 @@
400
414
  </div>
401
415
 
402
416
  <div class="uk-inline">
403
- <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Left</button>
417
+ <button class="uk-button uk-button-default" type="button">Bottom Slide Left</button>
404
418
  <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
405
419
  <ul class="uk-nav uk-dropdown-nav">
406
420
  <li class="uk-active"><a href="#">Active</a></li>
@@ -411,7 +425,7 @@
411
425
  </div>
412
426
 
413
427
  <div class="uk-inline">
414
- <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Right</button>
428
+ <button class="uk-button uk-button-default" type="button">Bottom Slide Right</button>
415
429
  <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
416
430
  <ul class="uk-nav uk-dropdown-nav">
417
431
  <li class="uk-active"><a href="#">Active</a></li>
@@ -426,7 +440,7 @@
426
440
  <div class="uk-margin" uk-margin>
427
441
 
428
442
  <div class="uk-inline">
429
- <button class="uk-button uk-button-default" type="button">Top Stretch Fade</button>
443
+ <button class="uk-button uk-button-default" type="button">Top Fade</button>
430
444
  <div uk-dropdown="pos: top-stretch; animate-out: true">
431
445
  <ul class="uk-nav uk-dropdown-nav">
432
446
  <li class="uk-active"><a href="#">Active</a></li>
@@ -437,7 +451,7 @@
437
451
  </div>
438
452
 
439
453
  <div class="uk-inline">
440
- <button class="uk-button uk-button-default" type="button">Top Stretch Slide</button>
454
+ <button class="uk-button uk-button-default" type="button">Top Slide</button>
441
455
  <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide">
442
456
  <ul class="uk-nav uk-dropdown-nav">
443
457
  <li class="uk-active"><a href="#">Active</a></li>
@@ -448,7 +462,7 @@
448
462
  </div>
449
463
 
450
464
  <div class="uk-inline">
451
- <button class="uk-button uk-button-default" type="button">Top Stretch Slide Left</button>
465
+ <button class="uk-button uk-button-default" type="button">Top Slide Left</button>
452
466
  <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-left">
453
467
  <ul class="uk-nav uk-dropdown-nav">
454
468
  <li class="uk-active"><a href="#">Active</a></li>
@@ -459,7 +473,7 @@
459
473
  </div>
460
474
 
461
475
  <div class="uk-inline">
462
- <button class="uk-button uk-button-default" type="button">Top Stretch Slide Right</button>
476
+ <button class="uk-button uk-button-default" type="button">Top Slide Right</button>
463
477
  <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-right">
464
478
  <ul class="uk-nav uk-dropdown-nav">
465
479
  <li class="uk-active"><a href="#">Active</a></li>
@@ -474,7 +488,7 @@
474
488
  <div class="uk-margin" uk-margin>
475
489
 
476
490
  <div class="uk-inline">
477
- <button class="uk-button uk-button-default" type="button">Left Stretch Fade</button>
491
+ <button class="uk-button uk-button-default" type="button">Left Fade</button>
478
492
  <div uk-dropdown="pos: left-stretch; animate-out: true">
479
493
  <ul class="uk-nav uk-dropdown-nav">
480
494
  <li class="uk-active"><a href="#">Active</a></li>
@@ -485,7 +499,7 @@
485
499
  </div>
486
500
 
487
501
  <div class="uk-inline">
488
- <button class="uk-button uk-button-default" type="button">Left Stretch Slide</button>
502
+ <button class="uk-button uk-button-default" type="button">Left Slide</button>
489
503
  <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide">
490
504
  <ul class="uk-nav uk-dropdown-nav">
491
505
  <li class="uk-active"><a href="#">Active</a></li>
@@ -496,7 +510,7 @@
496
510
  </div>
497
511
 
498
512
  <div class="uk-inline">
499
- <button class="uk-button uk-button-default" type="button">Left Stretch Slide Left</button>
513
+ <button class="uk-button uk-button-default" type="button">Left Slide Left</button>
500
514
  <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-left">
501
515
  <ul class="uk-nav uk-dropdown-nav">
502
516
  <li class="uk-active"><a href="#">Active</a></li>
@@ -507,7 +521,7 @@
507
521
  </div>
508
522
 
509
523
  <div class="uk-inline">
510
- <button class="uk-button uk-button-default" type="button">Left Stretch Slide Right</button>
524
+ <button class="uk-button uk-button-default" type="button">Left Slide Right</button>
511
525
  <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-right">
512
526
  <ul class="uk-nav uk-dropdown-nav">
513
527
  <li class="uk-active"><a href="#">Active</a></li>
@@ -522,7 +536,7 @@
522
536
  <div class="uk-margin" uk-margin>
523
537
 
524
538
  <div class="uk-inline">
525
- <button class="uk-button uk-button-default" type="button">Right Stretch Fade</button>
539
+ <button class="uk-button uk-button-default" type="button">Right Fade</button>
526
540
  <div uk-dropdown="pos: right-stretch; animate-out: true">
527
541
  <ul class="uk-nav uk-dropdown-nav">
528
542
  <li class="uk-active"><a href="#">Active</a></li>
@@ -533,7 +547,7 @@
533
547
  </div>
534
548
 
535
549
  <div class="uk-inline">
536
- <button class="uk-button uk-button-default" type="button">Right Stretch Slide</button>
550
+ <button class="uk-button uk-button-default" type="button">Right Slide</button>
537
551
  <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide">
538
552
  <ul class="uk-nav uk-dropdown-nav">
539
553
  <li class="uk-active"><a href="#">Active</a></li>
@@ -544,7 +558,7 @@
544
558
  </div>
545
559
 
546
560
  <div class="uk-inline">
547
- <button class="uk-button uk-button-default" type="button">Right Stretch Slide Left</button>
561
+ <button class="uk-button uk-button-default" type="button">Right Slide Left</button>
548
562
  <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-left">
549
563
  <ul class="uk-nav uk-dropdown-nav">
550
564
  <li class="uk-active"><a href="#">Active</a></li>
@@ -555,7 +569,7 @@
555
569
  </div>
556
570
 
557
571
  <div class="uk-inline">
558
- <button class="uk-button uk-button-default" type="button">Right Stretch Slide Right</button>
572
+ <button class="uk-button uk-button-default" type="button">Right Slide Right</button>
559
573
  <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-right">
560
574
  <ul class="uk-nav uk-dropdown-nav">
561
575
  <li class="uk-active"><a href="#">Active</a></li>
@@ -567,6 +581,65 @@
567
581
 
568
582
  </div>
569
583
 
584
+ <div class="uk-child-width-1-4@m" uk-grid>
585
+ <div>
586
+ <div class="scroll-container uk-height-large uk-resize-vertical">
587
+
588
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Fade</button></div>
589
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true">
590
+ <ul class="uk-nav uk-dropdown-nav">
591
+ <li class="uk-active"><a href="#">Active</a></li>
592
+ <li><a href="#">Item</a></li>
593
+ <li><a href="#">Item</a></li>
594
+ </ul>
595
+ </div>
596
+
597
+ </div>
598
+ </div>
599
+ <div>
600
+ <div class="scroll-container uk-height-large uk-resize-vertical">
601
+
602
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide</button></div>
603
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
604
+ <ul class="uk-nav uk-dropdown-nav">
605
+ <li class="uk-active"><a href="#">Active</a></li>
606
+ <li><a href="#">Item</a></li>
607
+ <li><a href="#">Item</a></li>
608
+ </ul>
609
+ </div>
610
+
611
+ </div>
612
+ </div>
613
+ <div>
614
+ <div class="scroll-container uk-height-large uk-resize-vertical">
615
+
616
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Left</button></div>
617
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
618
+ <ul class="uk-nav uk-dropdown-nav">
619
+ <li class="uk-active"><a href="#">Active</a></li>
620
+ <li><a href="#">Item</a></li>
621
+ <li><a href="#">Item</a></li>
622
+ </ul>
623
+ </div>
624
+
625
+ </div>
626
+ </div>
627
+ <div>
628
+ <div class="scroll-container uk-height-large uk-resize-vertical">
629
+
630
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Right</button></div>
631
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
632
+ <ul class="uk-nav uk-dropdown-nav">
633
+ <li class="uk-active"><a href="#">Active</a></li>
634
+ <li><a href="#">Item</a></li>
635
+ <li><a href="#">Item</a></li>
636
+ </ul>
637
+ </div>
638
+
639
+ </div>
640
+ </div>
641
+ </div>
642
+
570
643
  <h2>JavaScript Options</h2>
571
644
 
572
645
  <div class="uk-overflow-auto">
@@ -658,5 +731,19 @@
658
731
 
659
732
  </div>
660
733
 
734
+ <script>
735
+
736
+ var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
737
+
738
+ UIkit.util.on('#js-size-switcher', 'change', function () {
739
+ var value = this.value;
740
+ UIkit.util.$$('.uk-dropdown').forEach(function (table) {
741
+ UIkit.util.removeClass(table, options);
742
+ UIkit.util.addClass(table, value);
743
+ });
744
+ });
745
+
746
+ </script>
747
+
661
748
  </body>
662
749
  </html>
package/tests/index.html CHANGED
@@ -20,7 +20,7 @@
20
20
  <ul class="uk-navbar-nav">
21
21
  <li class="uk-active"><a href="#">Active</a></li>
22
22
  <li>
23
- <a href="#">Parent</a>
23
+ <a href="#">Parent <span uk-navbar-parent-icon></span></a>
24
24
  <div class="uk-navbar-dropdown">
25
25
  <ul class="uk-nav uk-navbar-dropdown-nav">
26
26
  <li class="uk-active"><a href="#">Active</a></li>
@@ -240,7 +240,7 @@
240
240
  <ul class="uk-nav-default uk-nav-parent-icon uk-margin-medium" uk-nav>
241
241
  <li class="uk-active"><a href="#">Active</a></li>
242
242
  <li class="uk-parent">
243
- <a href="#">Parent</a>
243
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
244
244
  <ul class="uk-nav-sub">
245
245
  <li><a href="#">Sub item</a></li>
246
246
  <li><a href="#">Sub item</a>
@@ -252,7 +252,7 @@
252
252
  </ul>
253
253
  </li>
254
254
  <li class="uk-parent">
255
- <a href="#">Parent</a>
255
+ <a href="#">Parent <span uk-nav-parent-icon></span></a>
256
256
  <ul class="uk-nav-sub">
257
257
  <li><a href="#">Sub item</a></li>
258
258
  <li><a href="#">Sub item</a></li>