uikit 3.13.9 → 3.13.10-dev.4de12886e

package/tests/navbar.html

@@ -26,7 +26,7 @@
             <h1>Navbar</h1>
 
             <div uk-grid>
-                <div class="uk-width-2-3@m">
+                <div class="uk-width-1-2@m">
 
                     <nav class="uk-navbar-container uk-margin" uk-navbar>
                         <div class="uk-navbar-left">
@@ -103,7 +103,7 @@
                     <h2>Transparent</h2>
 
                     <div class="uk-margin uk-position-relative uk-light">
-                        <canvas class="uk-background-cover" style="background-image: url('images/dark.jpg')" width="1000" height="200"></canvas>
+                        <canvas class="uk-background-cover" style="background-image: url('images/dark.jpg')" width="1000" height="300"></canvas>
                         <div class="uk-position-top">
                             <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
                                 <div class="uk-navbar-left">
@@ -144,7 +144,7 @@
                     </div>
 
                     <div class="uk-margin uk-position-relative uk-dark">
-                        <canvas class="uk-background-cover" style="background-image: url('images/light.jpg')" width="1000" height="200"></canvas>
+                        <canvas class="uk-background-cover" style="background-image: url('images/light.jpg')" width="1000" height="300"></canvas>
                         <div class="uk-position-top">
                             <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
                                 <div class="uk-navbar-left">
@@ -185,7 +185,7 @@
                     </div>
 
                 </div>
-                <div class="uk-width-1-3@m">
+                <div class="uk-width-1-4@m">
 
                     <div class="uk-navbar-dropdown test">
 
@@ -220,6 +220,20 @@
                     </div>
 
                 </div>
+                <div class="uk-width-1-4@m">
+
+                    <div class="uk-navbar-dropdown test">
+
+                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                            <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                        </ul>
+
+                    </div>
+
+                </div>
             </div>
 
             <h2>Dropdown</h2>
@@ -1707,6 +1721,43 @@
                 </div>
             </nav>
 
+            <h2>Justify</h2>
+
+            <nav class="uk-navbar-container uk-margin">
+                <div class="uk-navbar-justify" uk-navbar>
+                    <div class="uk-navbar-left">
+
+                        <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="#">Parent</a></li>
+                            <li><a href="#">Item</a></li>
+                            <li><a href="#">Item</a></li>
+                        </ul>
+
+                    </div>
+                    <div class="uk-navbar-right">
+
+                        <ul class="uk-navbar-nav">
+                            <li><a href="#">Item</a></li>
+                        </ul>
+
+                        <div class="uk-navbar-item">
+                            <ul class="uk-grid-small" uk-grid>
+                                <li>
+                                    <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
+                                </li>
+                                <li>
+                                    <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+                </div>
+            </nav>
+
             <h2>Layouts</h2>
 
         </div>

package/tests/position.html

@@ -9,7 +9,7 @@
         <style>
 
             /* JavaScript */
-            #js-boundary {
+            #js-viewport {
                 height: 300px;
                 outline: 1px solid rgba(0,0,0,0.1);
                 position: relative;
@@ -26,7 +26,6 @@
 
             #js-element {
                 position: absolute;
-                display: none;
                 width: 75px;
                 height: 75px;
                 background: rgba(0,0,0,0.1);
@@ -238,13 +237,13 @@
 
             <h2>JavaScript</h2>
 
-            <div id="js-boundary" class="uk-margin">
+            <div id="js-viewport" class="uk-margin">
                 <div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
             </div>
 
             <div id="js-element"></div>
 
-            <div class="uk-grid uk-child-width-auto uk-form-stacked">
+            <div class="uk-grid uk-child-width-auto uk-form-stacked" style="margin-bottom: 100vh">
                 <div>
 
                     <div class="uk-margin">
@@ -327,27 +326,26 @@
 
         <script>
 
-            var util = UIkit.util,
-                $ = util.$,
-                on = util.on,
-                offset = util.offset,
-                ticking,
-                element = $('#js-element'),
-                boundary = $('#js-boundary'),
-                target = $('#js-target'),
-                offsetX,
-                offsetY;
+            const {$, $$, css, getEventPos, on, offset, positionAt} = UIkit.util;
+            let viewport = $('#js-viewport');
+            let element = $('#js-element');
+            let target = $('#js-target');
+            let offsetX;
+            let offsetY;
 
             function position() {
-                util.positionAt(
+                positionAt(
                     element,
                     target,
-                    $('#js-element_x').value + ' ' + $('#js-element_y').value,
-                    $('#js-target_x').value + ' ' + $('#js-target_y').value,
-                    $('#js-offset_x').value + ' ' + $('#js-offset_y').value,
-                    null,
-                    $('#js-flip_x').value + $('#js-flip_y').value,
-                    boundary
+                    {
+                        viewport,
+                        attach:{
+                            element: [$('#js-element_x').value, $('#js-element_y').value],
+                            target: [$('#js-target_x').value, $('#js-target_y').value]
+                        },
+                        offset: [$('#js-offset_x').value, $('#js-offset_y').value],
+                        flip: [$('#js-flip_x').value, $('#js-flip_y').value]
+                    }
                 );
             }
 
@@ -359,33 +357,34 @@
 
             });
 
+            let lastPos;
             on(window, 'dragover', function (e) {
 
-                e.preventDefault();
-
-                if (!ticking) {
-                    requestAnimationFrame(function () {
+                const pos = getEventPos(e);
 
-                        util.positionAt(
-                            target,
-                            boundary,
-                            'left top',
-                            'left top',
-                            (e.pageX - offset(boundary).left - offsetX) + ' ' + (e.pageY - offset(boundary).top - offsetY)
-                        );
+                if (lastPos?.x === pos.x && lastPos?.y === pos.y) {
+                    return;
+                }
+                lastPos = pos;
 
-                        position();
+                e.preventDefault();
 
-                        ticking = false;
-                    });
-                    ticking = true;
-                }
+                // positions target at mouse cursor
+                positionAt(
+                    target,
+                    viewport,
+                    {
+                        offset: [e.pageX - offset(viewport).left - offsetX, e.pageY - offset(viewport).top - offsetY]
+                    }
+                );
 
+                // positions element at target
+                position();
             });
 
-            util.$$('select,input').forEach(el => on(el, 'change', position));
+            on($$('select,input'), 'change', position);
+            on(window, 'scroll', position);
 
-            util.css(element, 'display', 'block');
             position();
 
         </script>

package/tests/sticky-parallax.html

@@ -258,5 +258,21 @@
 
         </div>
 
+        <div class="uk-section uk-section-muted uk-flex uk-flex-center uk-flex-middle uk-text-center">
+            <div class="uk-container">
+
+                <h1 class="uk-heading-2xlarge">Reveal Following Section</h1>
+
+            </div>
+        </div>
+
+        <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-position-z-index-negative" uk-sticky="position: bottom; top: -100%; bottom: body">
+            <div class="uk-container">
+
+                <h1 class="uk-heading-2xlarge">Sticky Section</h1>
+
+            </div>
+        </div>
+
     </body>
 </html>

package/tests/sticky.html

@@ -8,7 +8,10 @@
         <script src="js/test.js"></script>
         <style>
 
-            .viewport { border: 1px dashed rgba(0,0,0,0.2); }
+            .container {
+                height: 500px;
+                border: 1px dashed rgba(0,0,0,0.2);
+            }
 
         </style>
     </head>
@@ -19,65 +22,238 @@
 
             <h1>Sticky</h1>
 
-            <div class="uk-grid">
-                <div class="uk-width-5-6">
-                    <div class="viewport uk-margin">
-                        <div class="uk-grid uk-child-width-1-6" uk-height-viewport="offset-top: true">
-                            <div>
+            <h2>Position</h2>
 
-                                <div class="uk-card uk-card-primary uk-card-body" uk-sticky="offset: 50; bottom: !.viewport">Stick to container; 50px offset</div>
+            <div class="container uk-margin">
+                <div class="uk-grid uk-grid-small uk-child-width-1-4">
+                    <div>
 
-                            </div>
-                            <div>
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="bottom: !.container">
+                            position: top<br>
+                            end: !.container
+                        </div>
+
+                    </div>
+                    <div>
+
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; bottom: !.container">
+                            position: bottom<br>
+                            end: !.container
+                        </div>
+
+                    </div>
+                    <div>
+
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: auto; bottom: !.container">
+                            position: auto<br>
+                            end: !.container
+                        </div>
+
+                    </div>
+                    <div>
+
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: auto; bottom: !.container" style="height: 600px">
+                            position: auto<br>
+                            end: !.container
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+            <h2>Start and End</h2>
+
+            <div class="container uk-margin">
+                <div class="uk-grid uk-grid-small uk-child-width-1-4">
+                    <div>
+
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="top: 50; bottom: !.container">
+                            start: 50<br>
+                            end: !.container
+                        </div>
+
+                    </div>
+                    <div>
 
-                                <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 50vh; target-offset: 10">Sticky after 50vh; Scroll up if initially above paragraph below</div>
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="top: 50%; bottom: !.container">
+                            start: 50%<br>
+                            end: !.container
+                        </div>
+
+                    </div>
+                    <div>
 
-                            </div>
-                            <div>
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="top: 10vh; bottom: 30vh">
+                            start: 10vh<br>
+                            end: 30vh
+                        </div>
 
-                                <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: !.viewport; animation: uk-animation-slide-top">Stick below container; animation</div>
+                    </div>
+                    <div>
 
-                            </div>
-                            <div>
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="top: 50; bottom: 200">
+                            top: 50<br>
+                            end: 200
+                        </div>
 
-                                <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: #hash">Stick until next paragraph</div>
+                    </div>
+                </div>
+            </div>
 
-                            </div>
-                            <div>
+            <h2>Offset</h2>
 
-                                <div class="uk-card uk-card-primary uk-card-body" uk-sticky="show-on-up: true; animation: uk-animation-slide-top">Sticky on scroll up; animation</div>
+            <div class="container uk-margin">
+                <div class="uk-grid uk-grid-small uk-child-width-1-4">
+                    <div>
 
-                            </div>
-                            <div>
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50; bottom: !.container">
+                            offset: 50<br>
+                            bottom: !.container
+                        </div>
 
-                                <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 300; animation: uk-animation-slide-top; media: 640">Sticky after 300px scrolling; @media 640px</div>
+                    </div>
+                    <div>
 
-                            </div>
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50%; bottom: !.container">
+                            offset: 50%<br>
+                            bottom: !.container
                         </div>
+
                     </div>
+                    <div>
 
-                    <p id="hash" class="uk-margin-large">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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50vh; bottom: !.container">
+                            offset: 50vh<br>
+                            bottom: !.container
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+            <h2>Target Offset, Animation, Show On Up and Media</h2>
+
+            <div class="container uk-margin">
+                <div class="uk-grid uk-grid-small uk-child-width-1-4">
+                    <div>
+
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="top: 50vh; target-offset: 10; bottom: !.container ~ h2">
+                            start: 50vh<br>
+                            target-offset: 10<br>
+                            end: !.container ~ h2
+                        </div>
+
+                    </div>
+                    <div>
 
-                    <div class="viewport uk-margin">
-                        <div class="uk-grid uk-child-width-1-6" uk-height-viewport>
-                            <div>
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="top: !.container; bottom: !.container ~ h2; animation: uk-animation-slide-top">
+                            start: !.container<br>
+                            end: !.container ~ h2<br>
+                            animation: uk-animation-slide-top
+                        </div>
 
-                                <div class="uk-card uk-card-primary uk-card-body" uk-sticky="position: bottom; bottom: !.viewport">Sticky bottom</div>
+                    </div>
+                    <div>
 
-                            </div>
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="bottom: !.container + .paragraph; show-on-up: true; animation: uk-animation-slide-top">
+                            end: !.container + .paragraph<br>
+                            show-on-up: true<br>
+                            animation: uk-animation-slide-top
                         </div>
+
                     </div>
+                     <div>
 
+                        <div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="top: 300; bottom: !.container + .paragraph; animation: uk-animation-slide-top; media: 640">
+                            start: 300<br>
+                            end: !.container + .paragraph<br>
+                            animation: uk-animation-slide-top<br>
+                            media: 640
+                        </div>
+
+                    </div>
                 </div>
-                <div class="uk-width-1-6">
-                    <div class="viewport" style="min-height: 200vh;">
-                        <div>
-                            <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: !.viewport">
-                                <p>Oversized Content</p>
+            </div>
+
+            <p class="paragraph uk-margin-large-top">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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+            <p class="uk-margin-large-bottom">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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+            <h2>Oversized Content</h2>
+
+            <div class="uk-margin">
+                <div class="uk-grid">
+                    <div class="uk-width-1-4">
+
+                        <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: !.uk-grid">
+
+                            <h3>Heading 1</h3>
+
+                            <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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                            <h3>Heading 2</h3>
+
+                            <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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                            <h3>Heading 3</h3>
+
+                            <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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. 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</p>
-                            </div>
                         </div>
+
+                    </div>
+                    <div class="uk-width-3-4">
+
+                        <h2>Heading 1</h2>
+
+                        <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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                        <h2>Heading 2</h2>
+
+                        <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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                        <h2>Heading 3</h2>
+
+                        <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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                        <h2>Heading 4</h2>
+
+                        <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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
                     </div>
                 </div>
             </div>

package/src/js/core/core.js

@@ -1,25 +0,0 @@
-import { css, inBrowser, on, toMs } from 'uikit-util';
-
-export default function () {
-    if (!inBrowser) {
-        return;
-    }
-
-    let started = 0;
-    on(
-        document,
-        'animationstart',
-        ({ target }) => {
-            if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
-                started++;
-                css(document.documentElement, 'overflowX', 'hidden');
-                setTimeout(() => {
-                    if (!--started) {
-                        css(document.documentElement, 'overflowX', '');
-                    }
-                }, toMs(css(target, 'animationDuration')) + 100);
-            }
-        },
-        true
-    );
-}