uikit 3.14.4-dev.e3664d0d2 → 3.14.4-dev.fea9fd466

package/src/scss/mixins-theme.scss

@@ -1269,17 +1269,6 @@
 }
 @mixin hook-inverse-component-nav(){
 
-    //
-    // Parent icon modifier
-    //
-
-    .uk-nav-parent-icon > .uk-parent > a::after {
-        @include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color);
-        @if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
-    }
-
-    .uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); }
-
     //
     // Default
     //
@@ -1362,6 +1351,10 @@
 }
 @mixin hook-inverse-component-navbar(){
 
+    //
+    // Nav Item
+    //
+
     .uk-navbar-nav > li > a {
         color: $inverse-navbar-nav-item-color;
         @if(mixin-exists(hook-inverse-navbar-nav-item)) {@include hook-inverse-navbar-nav-item();}
@@ -1383,11 +1376,19 @@
         @if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
     }
 
+    //
+    // Item
+    //
+
     .uk-navbar-item {
         color: $inverse-navbar-item-color;
         @if(mixin-exists(hook-inverse-navbar-item)) {@include hook-inverse-navbar-item();}
     }
 
+    //
+    // Toggle
+    //
+
     .uk-navbar-toggle {
         color: $inverse-navbar-toggle-color;
         @if(mixin-exists(hook-inverse-navbar-toggle)) {@include hook-inverse-navbar-toggle();}
@@ -1567,7 +1568,8 @@
         @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
     }
 
-    .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }
@@ -1704,7 +1706,6 @@
 @mixin hook-modal-close-full-hover(){}
 @mixin hook-modal-misc(){}
 @mixin hook-nav-sub(){}
-@mixin hook-nav-parent-icon(){}
 @mixin hook-nav-header(){}
 @mixin hook-nav-divider(){}
 @mixin hook-nav-default(){}
@@ -1723,7 +1724,6 @@
 @mixin hook-nav-primary-divider(){}
 @mixin hook-nav-dividers(){}
 @mixin hook-nav-misc(){}
-@mixin hook-inverse-nav-parent-icon(){}
 @mixin hook-inverse-nav-default-item(){}
 @mixin hook-inverse-nav-default-item-hover(){}
 @mixin hook-inverse-nav-default-item-active(){}
@@ -1754,10 +1754,7 @@
 @mixin hook-navbar-transparent(){}
 @mixin hook-navbar-sticky(){}
 @mixin hook-navbar-dropdown(){ box-shadow: $navbar-dropdown-box-shadow; }
-@mixin hook-navbar-dropdown-stretch(){
-    box-shadow: none;
-    background: $navbar-dropdown-stretch-background;
-}
+@mixin hook-navbar-dropdown-stretch(){ box-shadow: none; }
 @mixin hook-navbar-dropdown-dropbar(){ box-shadow: none; }
 @mixin hook-navbar-dropdown-nav(){ font-size: $navbar-dropdown-nav-font-size; }
 @mixin hook-navbar-dropdown-nav-item(){}

package/src/scss/mixins.scss

@@ -1020,17 +1020,6 @@
 }
 @mixin hook-inverse-component-nav(){
 
-    //
-    // Parent icon modifier
-    //
-
-    .uk-nav-parent-icon > .uk-parent > a::after {
-        @include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color);
-        @if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
-    }
-
-    .uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); }
-
     //
     // Default
     //
@@ -1113,6 +1102,10 @@
 }
 @mixin hook-inverse-component-navbar(){
 
+    //
+    // Nav Item
+    //
+
     .uk-navbar-nav > li > a {
         color: $inverse-navbar-nav-item-color;
         @if(mixin-exists(hook-inverse-navbar-nav-item)) {@include hook-inverse-navbar-nav-item();}
@@ -1134,11 +1127,19 @@
         @if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
     }
 
+    //
+    // Item
+    //
+
     .uk-navbar-item {
         color: $inverse-navbar-item-color;
         @if(mixin-exists(hook-inverse-navbar-item)) {@include hook-inverse-navbar-item();}
     }
 
+    //
+    // Toggle
+    //
+
     .uk-navbar-toggle {
         color: $inverse-navbar-toggle-color;
         @if(mixin-exists(hook-inverse-navbar-toggle)) {@include hook-inverse-navbar-toggle();}
@@ -1318,7 +1319,8 @@
         @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
     }
 
-    .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }
@@ -1431,7 +1433,6 @@
 @mixin hook-modal-close-full-hover(){}
 @mixin hook-modal-misc(){}
 @mixin hook-nav-sub(){}
-@mixin hook-nav-parent-icon(){}
 @mixin hook-nav-header(){}
 @mixin hook-nav-divider(){}
 @mixin hook-nav-default(){}
@@ -1450,7 +1451,6 @@
 @mixin hook-nav-primary-divider(){}
 @mixin hook-nav-dividers(){}
 @mixin hook-nav-misc(){}
-@mixin hook-inverse-nav-parent-icon(){}
 @mixin hook-inverse-nav-default-item(){}
 @mixin hook-inverse-nav-default-item-hover(){}
 @mixin hook-inverse-nav-default-item-active(){}

package/src/scss/theme/nav.scss

@@ -18,12 +18,6 @@ $nav-default-subtitle-font-size:                 12px !default;
 // @mixin hook-nav-sub(){}
 
 
-// Parent icon modifier
-// ========================================================================
-
-// @mixin hook-nav-parent-icon(){}
-
-
 // Header
 // ========================================================================
 
@@ -87,8 +81,6 @@ $nav-default-subtitle-font-size:                 12px !default;
 // Inverse
 // ========================================================================
 
-// @mixin hook-inverse-nav-parent-icon(){}
-
 // @mixin hook-inverse-nav-default-item(){}
 // @mixin hook-inverse-nav-default-item-hover(){}
 // @mixin hook-inverse-nav-default-item-active(){}

package/src/scss/theme/navbar.scss

@@ -10,10 +10,13 @@
 $navbar-gap:                                     30px !default;
 
 $navbar-nav-gap:                                 30px !default;
+
 $navbar-nav-item-padding-horizontal:             0 !default;
 
 $navbar-nav-item-font-size:                      $global-small-font-size !default;
 
+$navbar-item-padding-horizontal:                 0 !default;
+
 $navbar-dropdown-margin:                         15px !default;
 $navbar-dropdown-padding:                        25px !default;
 $navbar-dropdown-background:                     $global-background !default;
@@ -31,8 +34,6 @@ $navbar-dropdown-nav-font-size:                  $global-small-font-size !defaul
 
 $navbar-dropdown-box-shadow:                     0 5px 12px rgba(0,0,0,0.15) !default;
 
-$navbar-dropdown-stretch-background:             $global-muted-background !default;
-
 $navbar-dropbar-box-shadow:                      0 5px 7px rgba(0, 0, 0, 0.05) !default;
 
 $navbar-dropdown-grid-divider-border-width:      $global-border-width !default;

package/src/scss/variables-theme.scss

@@ -376,6 +376,7 @@ $dropdown-min-width: 200px !default;
 $dropdown-padding: 25px !default;
 $dropdown-background: $global-background !default;
 $dropdown-color: $global-color !default;
+$dropdown-large-padding: 40px !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
 $dropdown-nav-subtitle-font-size: 12px !default;
@@ -680,9 +681,6 @@ $nav-sublist-padding-vertical: 5px !default;
 $nav-sublist-padding-left: 15px !default;
 $nav-sublist-deeper-padding-left: 15px !default;
 $nav-sublist-item-padding-vertical: 2px !default;
-$nav-parent-icon-width: ($global-line-height * 1em) !default;
-$nav-parent-icon-height: $nav-parent-icon-width !default;
-$nav-parent-icon-color: $global-color !default;
 $nav-header-padding-vertical: $nav-item-padding-vertical !default;
 $nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
 $nav-header-font-size: $global-small-font-size !default;
@@ -718,12 +716,9 @@ $nav-primary-sublist-line-height: $global-line-height !default;
 $nav-primary-sublist-item-color: $global-muted-color !default;
 $nav-primary-sublist-item-hover-color: $global-color !default;
 $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
-$nav-dividers-margin-top: 0 !default;
+$nav-dividers-margin-top: 5px !default;
 $nav-dividers-border-width: $global-border-width !default;
 $nav-dividers-border: $global-border !default;
-$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;
-$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;
-$inverse-nav-parent-icon-color: $inverse-global-color !default;
 $inverse-nav-default-item-color: $inverse-global-muted-color !default;
 $inverse-nav-default-item-hover-color: $inverse-global-color !default;
 $inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default;
@@ -753,7 +748,8 @@ $navbar-nav-item-font-family: $global-font-family !default;
 $navbar-nav-item-hover-color: $global-color !default;
 $navbar-nav-item-onclick-color: $global-emphasis-color !default;
 $navbar-nav-item-active-color: $global-emphasis-color !default;
-$navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
+$navbar-parent-icon-margin-left: 4px !default;
+$navbar-item-padding-horizontal: 0 !default;
 $navbar-item-color: $global-color !default;
 $navbar-toggle-color: $global-muted-color !default;
 $navbar-toggle-hover-color: $global-color !default;
@@ -769,9 +765,20 @@ $navbar-dropdown-color: $global-color !default;
 $navbar-dropdown-color-mode: none !default;
 $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
-$navbar-dropdown-dropbar-margin-top: 0px !default;
-$navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
+$navbar-dropdown-large-shift-margin: 0 !default;
+$navbar-dropdown-large-padding: 40px !default;
+$navbar-dropdown-stretch-padding-top: 15px !default;
+$navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
+$navbar-dropdown-stretch-padding-horizontal: 15px !default;
+$navbar-dropdown-stretch-padding-horizontal-s: $global-gutter !default;
+$navbar-dropdown-stretch-padding-horizontal-m: $global-medium-gutter !default;
+$navbar-dropdown-stretch-background: $navbar-dropdown-background !default;
+$navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
+$navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
 $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
+$navbar-dropdown-dropbar-viewport-margin: 15px !default;
+$navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
+$navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
@@ -1182,7 +1189,6 @@ $modal-close-full-background: $modal-dialog-background !default;
 $navbar-nav-item-text-transform: uppercase !default;
 $navbar-dropdown-nav-font-size: $global-small-font-size !default;
 $navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
-$navbar-dropdown-stretch-background: $global-muted-background !default;
 $navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
 $navbar-dropdown-grid-divider-border-width: $global-border-width !default;
 $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default;

package/src/scss/variables.scss

@@ -375,6 +375,7 @@ $dropdown-min-width: 200px !default;
 $dropdown-padding: 15px !default;
 $dropdown-background: $global-muted-background !default;
 $dropdown-color: $global-color !default;
+$dropdown-large-padding: 40px !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
 $dropdown-nav-subtitle-font-size: $global-small-font-size !default;
@@ -678,9 +679,6 @@ $nav-sublist-padding-vertical: 5px !default;
 $nav-sublist-padding-left: 15px !default;
 $nav-sublist-deeper-padding-left: 15px !default;
 $nav-sublist-item-padding-vertical: 2px !default;
-$nav-parent-icon-width: ($global-line-height * 1em) !default;
-$nav-parent-icon-height: $nav-parent-icon-width !default;
-$nav-parent-icon-color: $global-color !default;
 $nav-header-padding-vertical: $nav-item-padding-vertical !default;
 $nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
 $nav-header-font-size: $global-small-font-size !default;
@@ -716,12 +714,9 @@ $nav-primary-sublist-line-height: $global-line-height !default;
 $nav-primary-sublist-item-color: $global-muted-color !default;
 $nav-primary-sublist-item-hover-color: $global-color !default;
 $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
-$nav-dividers-margin-top: 0 !default;
+$nav-dividers-margin-top: 5px !default;
 $nav-dividers-border-width: $global-border-width !default;
 $nav-dividers-border: $global-border !default;
-$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;
-$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;
-$inverse-nav-parent-icon-color: $inverse-global-color !default;
 $inverse-nav-default-item-color: $inverse-global-muted-color !default;
 $inverse-nav-default-item-hover-color: $inverse-global-color !default;
 $inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default;
@@ -751,7 +746,8 @@ $navbar-nav-item-font-family: $global-font-family !default;
 $navbar-nav-item-hover-color: $global-color !default;
 $navbar-nav-item-onclick-color: $global-emphasis-color !default;
 $navbar-nav-item-active-color: $global-emphasis-color !default;
-$navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
+$navbar-parent-icon-margin-left: 4px !default;
+$navbar-item-padding-horizontal: 15px !default;
 $navbar-item-color: $global-color !default;
 $navbar-toggle-color: $global-muted-color !default;
 $navbar-toggle-hover-color: $global-color !default;
@@ -767,9 +763,20 @@ $navbar-dropdown-color: $global-color !default;
 $navbar-dropdown-color-mode: none !default;
 $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
-$navbar-dropdown-dropbar-margin-top: 0px !default;
-$navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
+$navbar-dropdown-large-shift-margin: 0 !default;
+$navbar-dropdown-large-padding: 40px !default;
+$navbar-dropdown-stretch-padding-top: 15px !default;
+$navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
+$navbar-dropdown-stretch-padding-horizontal: 15px !default;
+$navbar-dropdown-stretch-padding-horizontal-s: $global-gutter !default;
+$navbar-dropdown-stretch-padding-horizontal-m: $global-medium-gutter !default;
+$navbar-dropdown-stretch-background: $navbar-dropdown-background !default;
+$navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
+$navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
 $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
+$navbar-dropdown-dropbar-viewport-margin: 15px !default;
+$navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
+$navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;

package/tests/drop.html

@@ -17,6 +17,13 @@
 
             .boundary-overflow { width: 250%; }
 
+            .scroll-container {
+                padding: 15px;
+                border: 1px dashed rgba(0,0,0,0.2);
+                overflow: auto;
+                -webkit-overflow-scrolling: touch;
+            }
+
         </style>
     </head>
 
@@ -412,28 +419,28 @@
             <div class="uk-margin" uk-margin>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Bottom Stretch Fade</button>
+                    <button class="uk-button uk-button-default" type="button">Bottom Fade</button>
                     <div uk-drop="pos: bottom-stretch; animate-out: true">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide</button>
+                    <button class="uk-button uk-button-default" type="button">Bottom Slide</button>
                     <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Left</button>
+                    <button class="uk-button uk-button-default" type="button">Bottom Slide Left</button>
                     <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-left">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Right</button>
+                    <button class="uk-button uk-button-default" type="button">Bottom Slide Right</button>
                     <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
                         <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>
                     </div>
@@ -444,28 +451,28 @@
             <div class="uk-margin" uk-margin>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Top Stretch Fade</button>
+                    <button class="uk-button uk-button-default" type="button">Top Fade</button>
                     <div uk-drop="pos: top-stretch; animate-out: true">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Top Stretch Slide</button>
+                    <button class="uk-button uk-button-default" type="button">Top Slide</button>
                     <div uk-drop="pos: top-stretch; animate-out: true; animation: slide">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Top Stretch Slide Left</button>
+                    <button class="uk-button uk-button-default" type="button">Top Slide Left</button>
                     <div uk-drop="pos: top-stretch; animate-out: true; animation: slide-left">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Top Stretch Slide Right</button>
+                    <button class="uk-button uk-button-default" type="button">Top Slide Right</button>
                     <div uk-drop="pos: top-stretch; animate-out: true; animation: slide-right">
                         <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>
                     </div>
@@ -476,28 +483,28 @@
             <div class="uk-margin" uk-margin>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left Stretch Fade</button>
+                    <button class="uk-button uk-button-default" type="button">Left Fade</button>
                     <div uk-drop="pos: left-stretch; animate-out: true">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left Stretch Slide</button>
+                    <button class="uk-button uk-button-default" type="button">Left Slide</button>
                     <div uk-drop="pos: left-stretch; animate-out: true; animation: slide">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left Stretch Slide Left</button>
+                    <button class="uk-button uk-button-default" type="button">Left Slide Left</button>
                     <div uk-drop="pos: left-stretch; animate-out: true; animation: slide-left">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left Stretch Slide Right</button>
+                    <button class="uk-button uk-button-default" type="button">Left Slide Right</button>
                     <div uk-drop="pos: left-stretch; animate-out: true; animation: slide-right">
                         <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>
                     </div>
@@ -508,28 +515,28 @@
             <div class="uk-margin" uk-margin>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right Stretch Fade</button>
+                    <button class="uk-button uk-button-default" type="button">Right Fade</button>
                     <div uk-drop="pos: right-stretch; animate-out: true">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right Stretch Slide</button>
+                    <button class="uk-button uk-button-default" type="button">Right Slide</button>
                     <div uk-drop="pos: right-stretch; animate-out: true; animation: slide">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right Stretch Slide Left</button>
+                    <button class="uk-button uk-button-default" type="button">Right Slide Left</button>
                     <div uk-drop="pos: right-stretch; animate-out: true; animation: slide-left">
                         <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>
                     </div>
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right Stretch Slide Right</button>
+                    <button class="uk-button uk-button-default" type="button">Right Slide Right</button>
                     <div uk-drop="pos: right-stretch; animate-out: true; animation: slide-right">
                         <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>
                     </div>
@@ -537,6 +544,49 @@
 
             </div>
 
+            <div class="uk-child-width-1-4@m" uk-grid>
+                <div>
+                    <div class="scroll-container uk-height-large uk-resize-vertical">
+
+                        <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Fade</button></div>
+                        <div uk-drop="pos: bottom-stretch; animate-out: true">
+                            <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>
+                        </div>
+
+                    </div>
+                </div>
+                <div>
+                    <div class="scroll-container uk-height-large uk-resize-vertical">
+
+                        <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide</button></div>
+                        <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide">
+                            <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>
+                        </div>
+
+                    </div>
+                </div>
+                <div>
+                    <div class="scroll-container uk-height-large uk-resize-vertical">
+
+                        <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Left</button></div>
+                        <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-left">
+                            <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>
+                        </div>
+
+                    </div>
+                </div>
+                <div>
+                    <div class="scroll-container uk-height-large uk-resize-vertical">
+
+                        <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Right</button></div>
+                        <div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
+                            <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>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
             <h2>JavaScript Options</h2>
 
             <div class="uk-overflow-auto">