uikit 3.14.4-dev.838f092aa → 3.14.4-dev.a02c81d72

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 (75) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/css/uikit-core-rtl.css +68 -19
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +68 -19
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +65 -20
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +65 -20
  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 +23 -8
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +23 -8
  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 +90 -54
  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 +143 -90
  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/filter.js +5 -3
  48. package/src/js/components/sortable.js +2 -3
  49. package/src/js/core/height-viewport.js +11 -5
  50. package/src/js/core/navbar.js +44 -15
  51. package/src/js/core/sticky.js +8 -9
  52. package/src/js/mixin/modal.js +1 -1
  53. package/src/js/mixin/position.js +24 -7
  54. package/src/js/mixin/slider-drag.js +20 -8
  55. package/src/js/util/dimensions.js +6 -6
  56. package/src/js/util/position.js +1 -0
  57. package/src/js/util/viewport.js +2 -27
  58. package/src/less/components/dropdown.less +8 -0
  59. package/src/less/components/nav.less +22 -4
  60. package/src/less/components/navbar.less +52 -13
  61. package/src/less/components/utility.less +12 -3
  62. package/src/less/theme/nav.less +3 -7
  63. package/src/less/theme/navbar.less +4 -6
  64. package/src/scss/components/dropdown.scss +8 -0
  65. package/src/scss/components/nav.scss +24 -6
  66. package/src/scss/components/navbar.scss +52 -13
  67. package/src/scss/components/utility.scss +12 -3
  68. package/src/scss/mixins-theme.scss +2 -5
  69. package/src/scss/theme/nav.scss +3 -7
  70. package/src/scss/theme/navbar.scss +3 -2
  71. package/src/scss/variables-theme.scss +24 -9
  72. package/src/scss/variables.scss +24 -7
  73. package/tests/drop.html +66 -16
  74. package/tests/dropdown.html +103 -16
  75. package/tests/navbar.html +2131 -1125
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;
@@ -690,6 +691,8 @@ $nav-header-text-transform: uppercase !default;
690
691
  $nav-header-margin-top: $global-margin !default;
691
692
  $nav-divider-margin-vertical: 5px !default;
692
693
  $nav-divider-margin-horizontal: 0 !default;
694
+ $nav-default-font-size: $global-small-font-size !default;
695
+ $nav-default-line-height: $global-line-height !default;
693
696
  $nav-default-item-color: $global-muted-color !default;
694
697
  $nav-default-item-hover-color: $global-color !default;
695
698
  $nav-default-item-active-color: $global-emphasis-color !default;
@@ -697,11 +700,13 @@ $nav-default-subtitle-font-size: 12px !default;
697
700
  $nav-default-header-color: $global-emphasis-color !default;
698
701
  $nav-default-divider-border-width: $global-border-width !default;
699
702
  $nav-default-divider-border: $global-border !default;
703
+ $nav-default-sublist-font-size: $nav-default-font-size !default;
704
+ $nav-default-sublist-line-height: $nav-default-line-height !default;
700
705
  $nav-default-sublist-item-color: $global-muted-color !default;
701
706
  $nav-default-sublist-item-hover-color: $global-color !default;
702
707
  $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;
708
+ $nav-primary-font-size: $global-large-font-size !default;
709
+ $nav-primary-line-height: $global-line-height !default;
705
710
  $nav-primary-item-color: $global-muted-color !default;
706
711
  $nav-primary-item-hover-color: $global-color !default;
707
712
  $nav-primary-item-active-color: $global-emphasis-color !default;
@@ -709,14 +714,16 @@ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
709
714
  $nav-primary-header-color: $global-emphasis-color !default;
710
715
  $nav-primary-divider-border-width: $global-border-width !default;
711
716
  $nav-primary-divider-border: $global-border !default;
717
+ $nav-primary-sublist-font-size: $global-medium-font-size !default;
718
+ $nav-primary-sublist-line-height: $global-line-height !default;
712
719
  $nav-primary-sublist-item-color: $global-muted-color !default;
713
720
  $nav-primary-sublist-item-hover-color: $global-color !default;
714
721
  $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
715
722
  $nav-dividers-margin-top: 0 !default;
716
723
  $nav-dividers-border-width: $global-border-width !default;
717
724
  $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;
725
+ $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%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
726
+ $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%2213%2010%207%204%201%2010%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
720
727
  $inverse-nav-parent-icon-color: $inverse-global-color !default;
721
728
  $inverse-nav-default-item-color: $inverse-global-muted-color !default;
722
729
  $inverse-nav-default-item-hover-color: $inverse-global-color !default;
@@ -747,7 +754,10 @@ $navbar-nav-item-font-family: $global-font-family !default;
747
754
  $navbar-nav-item-hover-color: $global-color !default;
748
755
  $navbar-nav-item-onclick-color: $global-emphasis-color !default;
749
756
  $navbar-nav-item-active-color: $global-emphasis-color !default;
750
- $navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
757
+ $navbar-parent-icon-width: 12px !default;
758
+ $navbar-parent-icon-height: 12px !default;
759
+ $navbar-parent-icon-color: $navbar-nav-item-color !default;
760
+ $navbar-item-padding-horizontal: 0 !default;
751
761
  $navbar-item-color: $global-color !default;
752
762
  $navbar-toggle-color: $global-muted-color !default;
753
763
  $navbar-toggle-hover-color: $global-color !default;
@@ -763,8 +773,13 @@ $navbar-dropdown-color: $global-color !default;
763
773
  $navbar-dropdown-color-mode: none !default;
764
774
  $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
765
775
  $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;
776
+ $navbar-dropdown-large-padding: 40px !default;
777
+ $navbar-dropdown-stretch-padding-top: 15px !default;
778
+ $navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
779
+ $navbar-dropdown-stretch-padding-horizontal: 15px !default;
780
+ $navbar-dropdown-stretch-background: $global-background !default;
781
+ $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
782
+ $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
768
783
  $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
769
784
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
770
785
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
@@ -778,6 +793,8 @@ $navbar-dropdown-nav-sublist-item-hover-color: $global-color !default;
778
793
  $navbar-dropdown-nav-sublist-item-active-color: $global-emphasis-color !default;
779
794
  $navbar-dropbar-background: $navbar-dropdown-background !default;
780
795
  $navbar-dropbar-z-index: $global-z-index - 20 !default;
796
+ $internal-navbar-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%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%203.5%206%208.5%2011%203.5%22%2F%3E%0A%3C%2Fsvg%3E" !default;
797
+ $internal-navbar-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%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%2211%208.5%206%203.5%201%208.5%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
781
798
  $inverse-navbar-nav-item-color: $inverse-global-muted-color !default;
782
799
  $inverse-navbar-nav-item-hover-color: $inverse-global-color !default;
783
800
  $inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color !default;
@@ -1173,11 +1190,9 @@ $modal-footer-border-width: $global-border-width !default;
1173
1190
  $modal-footer-border: $global-border !default;
1174
1191
  $modal-close-full-padding: $global-margin !default;
1175
1192
  $modal-close-full-background: $modal-dialog-background !default;
1176
- $nav-default-font-size: $global-small-font-size !default;
1177
1193
  $navbar-nav-item-text-transform: uppercase !default;
1178
1194
  $navbar-dropdown-nav-font-size: $global-small-font-size !default;
1179
1195
  $navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
1180
- $navbar-dropdown-stretch-background: $global-muted-background !default;
1181
1196
  $navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
1182
1197
  $navbar-dropdown-grid-divider-border-width: $global-border-width !default;
1183
1198
  $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;
@@ -688,6 +689,8 @@ $nav-header-text-transform: uppercase !default;
688
689
  $nav-header-margin-top: $global-margin !default;
689
690
  $nav-divider-margin-vertical: 5px !default;
690
691
  $nav-divider-margin-horizontal: 0 !default;
692
+ $nav-default-font-size: $global-font-size !default;
693
+ $nav-default-line-height: $global-line-height !default;
691
694
  $nav-default-item-color: $global-muted-color !default;
692
695
  $nav-default-item-hover-color: $global-color !default;
693
696
  $nav-default-item-active-color: $global-emphasis-color !default;
@@ -695,11 +698,13 @@ $nav-default-subtitle-font-size: $global-small-font-size !default;
695
698
  $nav-default-header-color: $global-emphasis-color !default;
696
699
  $nav-default-divider-border-width: $global-border-width !default;
697
700
  $nav-default-divider-border: $global-border !default;
701
+ $nav-default-sublist-font-size: $nav-default-font-size !default;
702
+ $nav-default-sublist-line-height: $nav-default-line-height !default;
698
703
  $nav-default-sublist-item-color: $global-muted-color !default;
699
704
  $nav-default-sublist-item-hover-color: $global-color !default;
700
705
  $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;
706
+ $nav-primary-font-size: $global-large-font-size !default;
707
+ $nav-primary-line-height: $global-line-height !default;
703
708
  $nav-primary-item-color: $global-muted-color !default;
704
709
  $nav-primary-item-hover-color: $global-color !default;
705
710
  $nav-primary-item-active-color: $global-emphasis-color !default;
@@ -707,14 +712,16 @@ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
707
712
  $nav-primary-header-color: $global-emphasis-color !default;
708
713
  $nav-primary-divider-border-width: $global-border-width !default;
709
714
  $nav-primary-divider-border: $global-border !default;
715
+ $nav-primary-sublist-font-size: $global-medium-font-size !default;
716
+ $nav-primary-sublist-line-height: $global-line-height !default;
710
717
  $nav-primary-sublist-item-color: $global-muted-color !default;
711
718
  $nav-primary-sublist-item-hover-color: $global-color !default;
712
719
  $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
713
720
  $nav-dividers-margin-top: 0 !default;
714
721
  $nav-dividers-border-width: $global-border-width !default;
715
722
  $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;
723
+ $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%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
724
+ $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%2213%2010%207%204%201%2010%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
718
725
  $inverse-nav-parent-icon-color: $inverse-global-color !default;
719
726
  $inverse-nav-default-item-color: $inverse-global-muted-color !default;
720
727
  $inverse-nav-default-item-hover-color: $inverse-global-color !default;
@@ -745,7 +752,10 @@ $navbar-nav-item-font-family: $global-font-family !default;
745
752
  $navbar-nav-item-hover-color: $global-color !default;
746
753
  $navbar-nav-item-onclick-color: $global-emphasis-color !default;
747
754
  $navbar-nav-item-active-color: $global-emphasis-color !default;
748
- $navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
755
+ $navbar-parent-icon-width: 12px !default;
756
+ $navbar-parent-icon-height: 12px !default;
757
+ $navbar-parent-icon-color: $navbar-nav-item-color !default;
758
+ $navbar-item-padding-horizontal: 15px !default;
749
759
  $navbar-item-color: $global-color !default;
750
760
  $navbar-toggle-color: $global-muted-color !default;
751
761
  $navbar-toggle-hover-color: $global-color !default;
@@ -761,8 +771,13 @@ $navbar-dropdown-color: $global-color !default;
761
771
  $navbar-dropdown-color-mode: none !default;
762
772
  $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
763
773
  $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;
774
+ $navbar-dropdown-large-padding: 40px !default;
775
+ $navbar-dropdown-stretch-padding-top: 15px !default;
776
+ $navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
777
+ $navbar-dropdown-stretch-padding-horizontal: 15px !default;
778
+ $navbar-dropdown-stretch-background: $global-background !default;
779
+ $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
780
+ $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
766
781
  $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
767
782
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
768
783
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
@@ -776,6 +791,8 @@ $navbar-dropdown-nav-sublist-item-hover-color: $global-color !default;
776
791
  $navbar-dropdown-nav-sublist-item-active-color: $global-emphasis-color !default;
777
792
  $navbar-dropbar-background: $navbar-dropdown-background !default;
778
793
  $navbar-dropbar-z-index: $global-z-index - 20 !default;
794
+ $internal-navbar-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%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%203.5%206%208.5%2011%203.5%22%2F%3E%0A%3C%2Fsvg%3E" !default;
795
+ $internal-navbar-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%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%2211%208.5%206%203.5%201%208.5%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
779
796
  $inverse-navbar-nav-item-color: $inverse-global-muted-color !default;
780
797
  $inverse-navbar-nav-item-hover-color: $inverse-global-color !default;
781
798
  $inverse-navbar-nav-item-onclick-color: $inverse-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">