uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.0856bd8a6

package/tests/sticky-navbar.html

@@ -424,7 +424,7 @@
 
             <div class="tm-header">
                 <div uk-sticky="start: 200; end: #transparent-dropdown; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
-                    <nav class="uk-navbar-container">
+                    <nav class="uk-navbar-container uk-light">
                         <div class="uk-container uk-container-expand">
                             <div uk-navbar>
                                 <div class="uk-navbar-left">
@@ -525,16 +525,16 @@
 
         </div>
 
-        <div id="transparent-dropbar" class="uk-section-secondary uk-preserve-color">
+        <div id="transparent-dropbar" class="uk-section-secondary uk-preserve-color uk-inverse-light">
 
             <div class="tm-header">
-                <div uk-sticky="start: 200; end: #transparent-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
-                    <nav class="uk-navbar-container">
+                <div uk-sticky="start: 200; end: #transparent-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent">
+                    <nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent">
                         <div class="uk-container uk-container-expand">
-                            <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
+                            <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; dropbar-transparent-mode: remove;">
                                 <div class="uk-navbar-left">
 
-                                    <a class="uk-navbar-item uk-logo" href="#">Transparent + Dropbar</a>
+                                    <a class="uk-navbar-item uk-logo" href="#">Transparent + Dropbar Remove</a>
 
                                     <ul class="uk-navbar-nav">
                                         <li class="uk-active"><a href="">Active</a></li>
@@ -630,16 +630,140 @@
 
         </div>
 
-        <div id="sticky-transparent-dropbar-remove" class="uk-section-secondary uk-preserve-color" style="background-image: url('images/dark.jpg');">
+        <div id="sticky-transparent-dropbar-remove" class="uk-section-secondary uk-preserve-color uk-inverse-light" style="background-image: url('images/dark.jpg');">
 
             <div class="tm-header">
                 <div uk-sticky="end: #sticky-transparent-dropbar-remove; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-                    <nav class="uk-navbar-container uk-navbar-transparent uk-light">
+                    <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="sel-active: .uk-navbar-transparent">
                         <div class="uk-container uk-container-expand">
                             <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; dropbar-transparent-mode: remove;">
                                 <div class="uk-navbar-left">
 
-                                    <a class="uk-navbar-item uk-logo" href="#">Sticky + Transparent + Dropbar Remove</a>
+                                    <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Dropbar Remove</a>
+
+                                    <ul class="uk-navbar-nav">
+                                        <li class="uk-active"><a href="">Active</a></li>
+                                        <li>
+                                            <a href="">Parent</a>
+                                            <div class="uk-navbar-dropdown">
+                                                <ul class="uk-nav uk-navbar-dropdown-nav">
+                                                    <li class="uk-active"><a href="#">Active</a></li>
+                                                    <li class="uk-parent">
+                                                        <a href="#">Parent</a>
+                                                        <ul class="uk-nav-sub">
+                                                            <li><a href="#">Sub item</a></li>
+                                                            <li><a href="#">Sub item</a></li>
+                                                        </ul>
+                                                    </li>
+                                                    <li class="uk-nav-header">Header</li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                                    <li class="uk-nav-divider"></li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                                </ul>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <a href="">Parent</a>
+                                            <div class="uk-navbar-dropdown">
+                                                <ul class="uk-nav uk-navbar-dropdown-nav">
+                                                    <li class="uk-active"><a href="#">Active</a></li>
+                                                    <li class="uk-parent">
+                                                        <a href="#">Parent</a>
+                                                        <ul class="uk-nav-sub">
+                                                            <li><a href="#">Sub item</a></li>
+                                                            <li><a href="#">Sub item</a></li>
+                                                        </ul>
+                                                    </li>
+                                                    <li class="uk-nav-header">Header</li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                                    <li class="uk-nav-divider"></li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                                </ul>
+                                            </div>
+                                        </li>
+                                        <li><a href="">Item</a></li>
+                                    </ul>
+
+                                </div>
+                                <div class="uk-navbar-right">
+
+                                    <a class="uk-navbar-toggle uk-navbar-toggle-animate" href uk-navbar-toggle-icon></a>
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
+                                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                                            <li class="uk-active"><a href="#">Active</a></li>
+                                            <li class="uk-parent">
+                                                <a href="#">Parent</a>
+                                                <ul class="uk-nav-sub">
+                                                    <li><a href="#">Sub item</a></li>
+                                                    <li><a href="#">Sub item</a></li>
+                                                </ul>
+                                            </li>
+                                            <li class="uk-nav-header">Header</li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                            <li class="uk-nav-divider"></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                        </ul>
+                                    </div>
+
+                                    <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
+                                    <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; pos: bottom-center; stretch: true; animation: slide-top; animate-out: true; bg-scroll: false;">
+                                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                                            <li class="uk-active"><a href="#">Active</a></li>
+                                            <li class="uk-parent">
+                                                <a href="#">Parent</a>
+                                                <ul class="uk-nav-sub">
+                                                    <li><a href="#">Sub item</a></li>
+                                                    <li><a href="#">Sub item</a></li>
+                                                </ul>
+                                            </li>
+                                            <li class="uk-nav-header">Header</li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                            <li class="uk-nav-divider"></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                        </ul>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+
+            <div class="uk-section uk-light">
+                <div class="uk-container">
+
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+
+                </div>
+            </div>
+
+        </div>
+
+        <div id="sticky-transparent-dropbar-behind" class="uk-section-secondary uk-preserve-color uk-inverse-light" style="background-image: url('images/dark.jpg');">
+
+            <div class="tm-header">
+                <div uk-sticky="end: #sticky-transparent-dropbar-behind; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
+                    <nav class="uk-navbar-container uk-navbar-transparent uk-position-relative uk-position-z-index-high" uk-inverse>
+                        <div class="uk-container uk-container-expand">
+                            <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; dropbar-transparent-mode: behind;">
+                                <div class="uk-navbar-left">
+
+                                    <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Dropbar Behind</a>
 
                                     <ul class="uk-navbar-nav">
                                         <li class="uk-active"><a href="">Active</a></li>
@@ -709,8 +833,8 @@
                                     </div>
 
                                     <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-dropbar uk-dropbar-top uk-padding-remove-top" uk-drop="mode: click; pos: bottom-center; stretch: true; animation: slide-top; animate-out: true; bg-scroll: false;">
-                                        <div class="uk-navbar-item uk-invisible"></div>
+                                    <div class="uk-dropbar uk-dropbar-top uk-position-z-index uk-padding-remove-top" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true; container: #sticky-transparent-dropbar-behind [uk-sticky]; bg-scroll: false;">
+                                        <div uk-height-placeholder="!.tm-header"></div>
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">
@@ -755,16 +879,16 @@
 
         </div>
 
-        <div id="sticky-transparent-dropbar-behind" class="uk-section-secondary uk-preserve-color" style="background-image: url('images/light.jpg');">
+        <div id="sticky-transparent-dropbar-behind-blend" class="uk-section-default uk-preserve-color" style="background-image: url('images/light.jpg');">
 
             <div class="tm-header">
-                <div class="uk-blend-difference uk-position-z-index-high" uk-sticky="end: #sticky-transparent-dropbar-behind; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-                    <nav class="uk-navbar-container uk-navbar-transparent uk-dark">
+                <div class="uk-blend-difference uk-position-z-index-high" uk-sticky="end: #sticky-transparent-dropbar-behind-blend; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
+                    <nav class="uk-navbar-container uk-navbar-transparent uk-light">
                         <div class="uk-container uk-container-expand">
-                            <div uk-navbar="target-y: #sticky-transparent-dropbar-behind .uk-navbar-container; container: #sticky-transparent-dropbar-behind .tm-header; dropbar: true; dropbar-anchor: !.tm-header > *; dropbar-transparent-mode: behind; close-on-scroll: true">
+                            <div uk-navbar="target-y: #sticky-transparent-dropbar-behind-blend .uk-navbar-container; container: #sticky-transparent-dropbar-behind-blend .tm-header; dropbar: true; dropbar-anchor: !.tm-header > *; dropbar-transparent-mode: behind; close-on-scroll: true">
                                 <div class="uk-navbar-left">
 
-                                    <a class="uk-navbar-item uk-logo" href="#">Sticky + Transparent + Dropbar Behind</a>
+                                    <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Dropbar Behind + Blend</a>
 
                                     <ul class="uk-navbar-nav">
                                         <li class="uk-active"><a href="">Active</a></li>
@@ -815,7 +939,7 @@
                                 <div class="uk-navbar-right">
 
                                     <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-navbar-dropdown uk-padding-remove-top" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: #sticky-transparent-dropbar-behind .uk-navbar-container; container: #sticky-transparent-dropbar-behind .tm-header;">
+                                    <div class="uk-navbar-dropdown uk-padding-remove-top" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: #sticky-transparent-dropbar-behind-blend .uk-navbar-container; container: #sticky-transparent-dropbar-behind-blend .tm-header;">
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">
@@ -834,8 +958,8 @@
                                     </div>
 
                                     <a class="uk-navbar-toggle uk-navbar-toggle-animate" href uk-navbar-toggle-icon></a>
-                                    <div class="uk-dropbar uk-dropbar-top uk-position-z-index uk-padding-remove-top" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true; container: #sticky-transparent-dropbar-behind .tm-header; bg-scroll: false;">
-                                        <div class="uk-navbar-item uk-invisible"></div>
+                                    <div class="uk-dropbar uk-dropbar-top uk-position-z-index uk-padding-remove-top" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true; container: #sticky-transparent-dropbar-behind-blend .tm-header; bg-scroll: false;">
+                                        <div uk-height-placeholder="!.tm-header"></div>
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">
@@ -884,12 +1008,12 @@
 
             <div class="tm-header uk-position-top">
                 <div uk-sticky="end: #sticky-transparent-recolor; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-                    <nav class="uk-navbar-container uk-navbar-transparent uk-dark">
+                    <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="sel-active: .uk-navbar-transparent">
                         <div class="uk-container uk-container-expand">
                             <div uk-navbar>
                                 <div class="uk-navbar-left">
 
-                                    <a class="uk-navbar-item uk-logo" href="#">Sticky + Transparent + Recolor</a>
+                                    <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Recolor</a>
 
                                     <ul class="uk-navbar-nav">
                                         <li class="uk-active"><a href="">Active</a></li>
@@ -959,8 +1083,7 @@
                                     </div>
 
                                     <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-dropbar uk-dropbar-top uk-padding-remove-top" uk-drop="mode: click; pos: bottom-center; stretch: true; animation: slide-top; animate-out: true; bg-scroll: false;">
-                                        <div class="uk-navbar-item uk-invisible"></div>
+                                    <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; pos: bottom-center; stretch: true; animation: slide-top; animate-out: true; bg-scroll: false;">
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">
@@ -986,6 +1109,7 @@
             </div>
 
             <div class="uk-section uk-section-default">
+                <div uk-height-placeholder="#sticky-transparent-recolor .tm-header"></div>
                 <div class="uk-container">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
@@ -1059,5 +1183,239 @@
 
         </div>
 
+        <div id="sticky-transparent-recolor-tiles" class="uk-position-relative">
+
+            <div class="tm-header uk-position-top">
+                <div uk-sticky="end: #sticky-transparent-recolor-tiles; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
+                    <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right">
+                        <div class="uk-container uk-container-expand">
+                            <div uk-navbar>
+                                <div class="uk-navbar-left">
+
+                                    <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Recolor Partially</a>
+
+                                    <ul class="uk-navbar-nav">
+                                        <li class="uk-active"><a href="">Active</a></li>
+                                        <li>
+                                            <a href="">Parent</a>
+                                            <div class="uk-navbar-dropdown">
+                                                <ul class="uk-nav uk-navbar-dropdown-nav">
+                                                    <li class="uk-active"><a href="#">Active</a></li>
+                                                    <li class="uk-parent">
+                                                        <a href="#">Parent</a>
+                                                        <ul class="uk-nav-sub">
+                                                            <li><a href="#">Sub item</a></li>
+                                                            <li><a href="#">Sub item</a></li>
+                                                        </ul>
+                                                    </li>
+                                                    <li class="uk-nav-header">Header</li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                                    <li class="uk-nav-divider"></li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                                </ul>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <a href="">Parent</a>
+                                            <div class="uk-navbar-dropdown">
+                                                <ul class="uk-nav uk-navbar-dropdown-nav">
+                                                    <li class="uk-active"><a href="#">Active</a></li>
+                                                    <li class="uk-parent">
+                                                        <a href="#">Parent</a>
+                                                        <ul class="uk-nav-sub">
+                                                            <li><a href="#">Sub item</a></li>
+                                                            <li><a href="#">Sub item</a></li>
+                                                        </ul>
+                                                    </li>
+                                                    <li class="uk-nav-header">Header</li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                                    <li class="uk-nav-divider"></li>
+                                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                                </ul>
+                                            </div>
+                                        </li>
+                                        <li><a href="">Item</a></li>
+                                    </ul>
+
+                                </div>
+                                <div class="uk-navbar-center">
+
+                                    <a class="uk-navbar-item uk-logo" href="#">Logo</a>
+
+                                    <ul class="uk-navbar-nav">
+                                        <li class="uk-active"><a href="">Active</a></li>
+                                        <li><a href="#">Center</a></li>
+                                    </ul>
+
+                                </div>
+                                <div class="uk-navbar-right">
+
+                                    <a class="uk-navbar-toggle uk-navbar-toggle-animate" href uk-navbar-toggle-icon></a>
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
+                                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                                            <li class="uk-active"><a href="#">Active</a></li>
+                                            <li class="uk-parent">
+                                                <a href="#">Parent</a>
+                                                <ul class="uk-nav-sub">
+                                                    <li><a href="#">Sub item</a></li>
+                                                    <li><a href="#">Sub item</a></li>
+                                                </ul>
+                                            </li>
+                                            <li class="uk-nav-header">Header</li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                            <li class="uk-nav-divider"></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                        </ul>
+                                    </div>
+
+                                    <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
+                                    <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; pos: bottom-center; stretch: true; animation: slide-top; animate-out: true; bg-scroll: false;">
+                                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                                            <li class="uk-active"><a href="#">Active</a></li>
+                                            <li class="uk-parent">
+                                                <a href="#">Parent</a>
+                                                <ul class="uk-nav-sub">
+                                                    <li><a href="#">Sub item</a></li>
+                                                    <li><a href="#">Sub item</a></li>
+                                                </ul>
+                                            </li>
+                                            <li class="uk-nav-header">Header</li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                            <li class="uk-nav-divider"></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                        </ul>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+
+
+            <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
+                <div>
+
+                    <div class="uk-tile uk-tile-default uk-tile-large">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-tile uk-tile-primary uk-tile-large">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-tile uk-tile-secondary uk-tile-large">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
+                <div>
+
+                    <div class="uk-tile uk-tile-primary uk-tile-large">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-tile uk-tile-muted uk-tile-large">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-tile uk-tile-default uk-tile-large">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
+                <div>
+
+                    <div class="uk-tile uk-tile-default uk-tile-large">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-tile uk-tile-secondary uk-tile-large">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-tile uk-tile-muted uk-tile-large">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="uk-section uk-section-secondary uk-preserve-color uk-inverse-light">
+                <div class="uk-container">
+
+                    <div class="uk-panel uk-light uk-margin-medium">
+                        <h3>Section Primary with cards</h3>
+                    </div>
+
+                    <div class="uk-grid-match uk-child-width-expand@m" uk-grid>
+                        <div>
+                            <div class="uk-card uk-card-default uk-card-body">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="uk-card uk-card-default uk-card-body">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+
     </body>
 </html>

package/src/images/icons/pagekit.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="3,1 17,1 17,16 10,16 10,13 14,13 14,4 6,4 6,16 10,16 10,19 3,19 " />
-</svg>

package/src/js/mixin/internal/scroll.js

@@ -1,39 +0,0 @@
-import { css, matches, on, scrollParent, width } from 'uikit-util';
-
-let prevented;
-export function preventBackgroundScroll(el) {
-    // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
-    const off = on(
-        el,
-        'touchmove',
-        (e) => {
-            if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
-                return;
-            }
-
-            let { scrollHeight, clientHeight, scrollWidth, clientWidth } = scrollParent(e.target);
-
-            if (e.cancelable && clientHeight >= scrollHeight && clientWidth >= scrollWidth) {
-                e.preventDefault();
-            }
-        },
-        { passive: false },
-    );
-
-    if (prevented) {
-        return off;
-    }
-    prevented = true;
-
-    const { scrollingElement } = document;
-    css(scrollingElement, {
-        overflowY: CSS.supports('overflow', 'clip') ? 'clip' : 'hidden',
-        touchAction: 'none',
-        paddingRight: width(window) - scrollingElement.clientWidth || '',
-    });
-    return () => {
-        prevented = false;
-        off();
-        css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
-    };
-}