uikit 3.14.4-dev.cd89debeb → 3.14.4-dev.f2e3be255

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 (73) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/css/uikit-core-rtl.css +68 -20
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +68 -20
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +65 -21
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +65 -21
  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 +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +22 -7
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +22 -7
  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 +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +22 -7
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +22 -7
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +3 -3
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +18 -3
  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 +87 -53
  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 +134 -85
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/images/backgrounds/nav-parent-close.svg +1 -1
  44. package/src/images/backgrounds/nav-parent-open.svg +1 -1
  45. package/src/images/backgrounds/navbar-parent-close.svg +3 -0
  46. package/src/images/backgrounds/navbar-parent-open.svg +3 -0
  47. package/src/js/components/sortable.js +2 -3
  48. package/src/js/core/height-viewport.js +9 -5
  49. package/src/js/core/navbar.js +44 -15
  50. package/src/js/core/sticky.js +8 -9
  51. package/src/js/mixin/position.js +24 -7
  52. package/src/js/mixin/slider-drag.js +20 -8
  53. package/src/js/util/dimensions.js +6 -6
  54. package/src/js/util/position.js +1 -0
  55. package/src/js/util/viewport.js +2 -27
  56. package/src/less/components/dropdown.less +8 -0
  57. package/src/less/components/nav.less +22 -4
  58. package/src/less/components/navbar.less +52 -14
  59. package/src/less/components/utility.less +12 -3
  60. package/src/less/theme/nav.less +3 -7
  61. package/src/less/theme/navbar.less +4 -6
  62. package/src/scss/components/dropdown.scss +8 -0
  63. package/src/scss/components/nav.scss +24 -6
  64. package/src/scss/components/navbar.scss +52 -14
  65. package/src/scss/components/utility.scss +12 -3
  66. package/src/scss/mixins-theme.scss +2 -5
  67. package/src/scss/theme/nav.scss +3 -7
  68. package/src/scss/theme/navbar.scss +3 -2
  69. package/src/scss/variables-theme.scss +24 -9
  70. package/src/scss/variables.scss +24 -7
  71. package/tests/drop.html +66 -16
  72. package/tests/dropdown.html +103 -16
  73. package/tests/navbar.html +2131 -1125
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>