uikit 3.14.4-dev.cd89debeb → 3.14.4-dev.d472fe41a

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 (82) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/css/uikit-core-rtl.css +134 -66
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +134 -66
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +131 -67
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +131 -67
  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 +27 -20
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +27 -20
  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 +23 -16
  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 +114 -66
  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 +167 -102
  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/components/sortable.js +2 -3
  48. package/src/js/core/height-viewport.js +11 -5
  49. package/src/js/core/icon.js +16 -0
  50. package/src/js/core/index.js +2 -0
  51. package/src/js/core/navbar.js +44 -15
  52. package/src/js/core/sticky.js +8 -9
  53. package/src/js/mixin/position.js +24 -7
  54. package/src/js/mixin/slider-drag.js +20 -8
  55. package/src/js/mixin/togglable.js +8 -17
  56. package/src/js/util/dimensions.js +6 -6
  57. package/src/js/util/position.js +1 -0
  58. package/src/js/util/viewport.js +2 -27
  59. package/src/less/components/dropdown.less +14 -0
  60. package/src/less/components/nav.less +29 -41
  61. package/src/less/components/navbar.less +101 -14
  62. package/src/less/components/utility.less +21 -4
  63. package/src/less/theme/nav.less +3 -15
  64. package/src/less/theme/navbar.less +4 -6
  65. package/src/scss/components/dropdown.scss +14 -0
  66. package/src/scss/components/nav.scss +29 -30
  67. package/src/scss/components/navbar.scss +89 -14
  68. package/src/scss/components/utility.scss +19 -3
  69. package/src/scss/mixins-theme.scss +16 -19
  70. package/src/scss/mixins.scss +14 -14
  71. package/src/scss/theme/nav.scss +3 -15
  72. package/src/scss/theme/navbar.scss +3 -2
  73. package/src/scss/variables-theme.scss +25 -14
  74. package/src/scss/variables.scss +25 -12
  75. package/tests/drop.html +66 -16
  76. package/tests/dropdown.html +103 -16
  77. package/tests/index.html +3 -3
  78. package/tests/nav.html +20 -87
  79. package/tests/navbar.html +2131 -1130
  80. package/tests/offcanvas.html +8 -8
  81. package/tests/utility.html +19 -0
  82. package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/src/scss/variables-theme.scss CHANGED
@@ -376,6 +376,7 @@ $dropdown-min-width: 200px !default;
376
376
  $dropdown-padding: 25px !default;
377
377
  $dropdown-background: $global-background !default;
378
378
  $dropdown-color: $global-color !default;
379
+ $dropdown-large-padding: 40px !default;
379
380
  $dropdown-nav-item-color: $global-muted-color !default;
380
381
  $dropdown-nav-item-hover-color: $global-color !default;
381
382
  $dropdown-nav-subtitle-font-size: 12px !default;
@@ -680,9 +681,6 @@ $nav-sublist-padding-vertical: 5px !default;
680
681
  $nav-sublist-padding-left: 15px !default;
681
682
  $nav-sublist-deeper-padding-left: 15px !default;
682
683
  $nav-sublist-item-padding-vertical: 2px !default;
683
- $nav-parent-icon-width: ($global-line-height * 1em) !default;
684
- $nav-parent-icon-height: $nav-parent-icon-width !default;
685
- $nav-parent-icon-color: $global-color !default;
686
684
  $nav-header-padding-vertical: $nav-item-padding-vertical !default;
687
685
  $nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
688
686
  $nav-header-font-size: $global-small-font-size !default;
@@ -690,6 +688,8 @@ $nav-header-text-transform: uppercase !default;
690
688
  $nav-header-margin-top: $global-margin !default;
691
689
  $nav-divider-margin-vertical: 5px !default;
692
690
  $nav-divider-margin-horizontal: 0 !default;
691
+ $nav-default-font-size: $global-small-font-size !default;
692
+ $nav-default-line-height: $global-line-height !default;
693
693
  $nav-default-item-color: $global-muted-color !default;
694
694
  $nav-default-item-hover-color: $global-color !default;
695
695
  $nav-default-item-active-color: $global-emphasis-color !default;
@@ -697,11 +697,13 @@ $nav-default-subtitle-font-size: 12px !default;
697
697
  $nav-default-header-color: $global-emphasis-color !default;
698
698
  $nav-default-divider-border-width: $global-border-width !default;
699
699
  $nav-default-divider-border: $global-border !default;
700
+ $nav-default-sublist-font-size: $nav-default-font-size !default;
701
+ $nav-default-sublist-line-height: $nav-default-line-height !default;
700
702
  $nav-default-sublist-item-color: $global-muted-color !default;
701
703
  $nav-default-sublist-item-hover-color: $global-color !default;
702
704
  $nav-default-sublist-item-active-color: $global-emphasis-color !default;
703
- $nav-primary-item-font-size: $global-large-font-size !default;
704
- $nav-primary-item-line-height: $global-line-height !default;
705
+ $nav-primary-font-size: $global-large-font-size !default;
706
+ $nav-primary-line-height: $global-line-height !default;
705
707
  $nav-primary-item-color: $global-muted-color !default;
706
708
  $nav-primary-item-hover-color: $global-color !default;
707
709
  $nav-primary-item-active-color: $global-emphasis-color !default;
@@ -709,15 +711,14 @@ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
709
711
  $nav-primary-header-color: $global-emphasis-color !default;
710
712
  $nav-primary-divider-border-width: $global-border-width !default;
711
713
  $nav-primary-divider-border: $global-border !default;
714
+ $nav-primary-sublist-font-size: $global-medium-font-size !default;
715
+ $nav-primary-sublist-line-height: $global-line-height !default;
712
716
  $nav-primary-sublist-item-color: $global-muted-color !default;
713
717
  $nav-primary-sublist-item-hover-color: $global-color !default;
714
718
  $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
715
- $nav-dividers-margin-top: 0 !default;
719
+ $nav-dividers-margin-top: 5px !default;
716
720
  $nav-dividers-border-width: $global-border-width !default;
717
721
  $nav-dividers-border: $global-border !default;
718
- $internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
719
- $internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
720
- $inverse-nav-parent-icon-color: $inverse-global-color !default;
721
722
  $inverse-nav-default-item-color: $inverse-global-muted-color !default;
722
723
  $inverse-nav-default-item-hover-color: $inverse-global-color !default;
723
724
  $inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default;
@@ -747,7 +748,8 @@ $navbar-nav-item-font-family: $global-font-family !default;
747
748
  $navbar-nav-item-hover-color: $global-color !default;
748
749
  $navbar-nav-item-onclick-color: $global-emphasis-color !default;
749
750
  $navbar-nav-item-active-color: $global-emphasis-color !default;
750
- $navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
751
+ $navbar-parent-icon-margin-left: 4px !default;
752
+ $navbar-item-padding-horizontal: 0 !default;
751
753
  $navbar-item-color: $global-color !default;
752
754
  $navbar-toggle-color: $global-muted-color !default;
753
755
  $navbar-toggle-hover-color: $global-color !default;
@@ -763,9 +765,20 @@ $navbar-dropdown-color: $global-color !default;
763
765
  $navbar-dropdown-color-mode: none !default;
764
766
  $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
765
767
  $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
766
- $navbar-dropdown-dropbar-margin-top: 0px !default;
767
- $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
768
+ $navbar-dropdown-large-shift-margin: 0 !default;
769
+ $navbar-dropdown-large-padding: 40px !default;
770
+ $navbar-dropdown-stretch-padding-top: 15px !default;
771
+ $navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
772
+ $navbar-dropdown-stretch-padding-horizontal: 15px !default;
773
+ $navbar-dropdown-stretch-padding-horizontal-s: $global-gutter !default;
774
+ $navbar-dropdown-stretch-padding-horizontal-m: $global-medium-gutter !default;
775
+ $navbar-dropdown-stretch-background: $navbar-dropdown-background !default;
776
+ $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
777
+ $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
768
778
  $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
779
+ $navbar-dropdown-dropbar-viewport-margin: 15px !default;
780
+ $navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
781
+ $navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
769
782
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
770
783
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
771
784
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
@@ -1173,11 +1186,9 @@ $modal-footer-border-width: $global-border-width !default;
1173
1186
  $modal-footer-border: $global-border !default;
1174
1187
  $modal-close-full-padding: $global-margin !default;
1175
1188
  $modal-close-full-background: $modal-dialog-background !default;
1176
- $nav-default-font-size: $global-small-font-size !default;
1177
1189
  $navbar-nav-item-text-transform: uppercase !default;
1178
1190
  $navbar-dropdown-nav-font-size: $global-small-font-size !default;
1179
1191
  $navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
1180
- $navbar-dropdown-stretch-background: $global-muted-background !default;
1181
1192
  $navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
1182
1193
  $navbar-dropdown-grid-divider-border-width: $global-border-width !default;
1183
1194
  $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default;
package/src/scss/variables.scss CHANGED
@@ -375,6 +375,7 @@ $dropdown-min-width: 200px !default;
375
375
  $dropdown-padding: 15px !default;
376
376
  $dropdown-background: $global-muted-background !default;
377
377
  $dropdown-color: $global-color !default;
378
+ $dropdown-large-padding: 40px !default;
378
379
  $dropdown-nav-item-color: $global-muted-color !default;
379
380
  $dropdown-nav-item-hover-color: $global-color !default;
380
381
  $dropdown-nav-subtitle-font-size: $global-small-font-size !default;
@@ -678,9 +679,6 @@ $nav-sublist-padding-vertical: 5px !default;
678
679
  $nav-sublist-padding-left: 15px !default;
679
680
  $nav-sublist-deeper-padding-left: 15px !default;
680
681
  $nav-sublist-item-padding-vertical: 2px !default;
681
- $nav-parent-icon-width: ($global-line-height * 1em) !default;
682
- $nav-parent-icon-height: $nav-parent-icon-width !default;
683
- $nav-parent-icon-color: $global-color !default;
684
682
  $nav-header-padding-vertical: $nav-item-padding-vertical !default;
685
683
  $nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
686
684
  $nav-header-font-size: $global-small-font-size !default;
@@ -688,6 +686,8 @@ $nav-header-text-transform: uppercase !default;
688
686
  $nav-header-margin-top: $global-margin !default;
689
687
  $nav-divider-margin-vertical: 5px !default;
690
688
  $nav-divider-margin-horizontal: 0 !default;
689
+ $nav-default-font-size: $global-font-size !default;
690
+ $nav-default-line-height: $global-line-height !default;
691
691
  $nav-default-item-color: $global-muted-color !default;
692
692
  $nav-default-item-hover-color: $global-color !default;
693
693
  $nav-default-item-active-color: $global-emphasis-color !default;
@@ -695,11 +695,13 @@ $nav-default-subtitle-font-size: $global-small-font-size !default;
695
695
  $nav-default-header-color: $global-emphasis-color !default;
696
696
  $nav-default-divider-border-width: $global-border-width !default;
697
697
  $nav-default-divider-border: $global-border !default;
698
+ $nav-default-sublist-font-size: $nav-default-font-size !default;
699
+ $nav-default-sublist-line-height: $nav-default-line-height !default;
698
700
  $nav-default-sublist-item-color: $global-muted-color !default;
699
701
  $nav-default-sublist-item-hover-color: $global-color !default;
700
702
  $nav-default-sublist-item-active-color: $global-emphasis-color !default;
701
- $nav-primary-item-font-size: $global-large-font-size !default;
702
- $nav-primary-item-line-height: $global-line-height !default;
703
+ $nav-primary-font-size: $global-large-font-size !default;
704
+ $nav-primary-line-height: $global-line-height !default;
703
705
  $nav-primary-item-color: $global-muted-color !default;
704
706
  $nav-primary-item-hover-color: $global-color !default;
705
707
  $nav-primary-item-active-color: $global-emphasis-color !default;
@@ -707,15 +709,14 @@ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
707
709
  $nav-primary-header-color: $global-emphasis-color !default;
708
710
  $nav-primary-divider-border-width: $global-border-width !default;
709
711
  $nav-primary-divider-border: $global-border !default;
712
+ $nav-primary-sublist-font-size: $global-medium-font-size !default;
713
+ $nav-primary-sublist-line-height: $global-line-height !default;
710
714
  $nav-primary-sublist-item-color: $global-muted-color !default;
711
715
  $nav-primary-sublist-item-hover-color: $global-color !default;
712
716
  $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
713
- $nav-dividers-margin-top: 0 !default;
717
+ $nav-dividers-margin-top: 5px !default;
714
718
  $nav-dividers-border-width: $global-border-width !default;
715
719
  $nav-dividers-border: $global-border !default;
716
- $internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
717
- $internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
718
- $inverse-nav-parent-icon-color: $inverse-global-color !default;
719
720
  $inverse-nav-default-item-color: $inverse-global-muted-color !default;
720
721
  $inverse-nav-default-item-hover-color: $inverse-global-color !default;
721
722
  $inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default;
@@ -745,7 +746,8 @@ $navbar-nav-item-font-family: $global-font-family !default;
745
746
  $navbar-nav-item-hover-color: $global-color !default;
746
747
  $navbar-nav-item-onclick-color: $global-emphasis-color !default;
747
748
  $navbar-nav-item-active-color: $global-emphasis-color !default;
748
- $navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
749
+ $navbar-parent-icon-margin-left: 4px !default;
750
+ $navbar-item-padding-horizontal: 15px !default;
749
751
  $navbar-item-color: $global-color !default;
750
752
  $navbar-toggle-color: $global-muted-color !default;
751
753
  $navbar-toggle-hover-color: $global-color !default;
@@ -761,9 +763,20 @@ $navbar-dropdown-color: $global-color !default;
761
763
  $navbar-dropdown-color-mode: none !default;
762
764
  $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
763
765
  $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
764
- $navbar-dropdown-dropbar-margin-top: 0px !default;
765
- $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
766
+ $navbar-dropdown-large-shift-margin: 0 !default;
767
+ $navbar-dropdown-large-padding: 40px !default;
768
+ $navbar-dropdown-stretch-padding-top: 15px !default;
769
+ $navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
770
+ $navbar-dropdown-stretch-padding-horizontal: 15px !default;
771
+ $navbar-dropdown-stretch-padding-horizontal-s: $global-gutter !default;
772
+ $navbar-dropdown-stretch-padding-horizontal-m: $global-medium-gutter !default;
773
+ $navbar-dropdown-stretch-background: $navbar-dropdown-background !default;
774
+ $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
775
+ $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
766
776
  $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
777
+ $navbar-dropdown-dropbar-viewport-margin: 15px !default;
778
+ $navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
779
+ $navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
767
780
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
768
781
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
769
782
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
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">