uikit 3.11.1 → 3.11.2-dev.03e47c2ff

package/tests/js/index.js

@@ -1,5 +1,5 @@
 /* global UIkit, TESTS */
-import {addClass, css, fastdom, on, prepend, removeClass, ucfirst} from 'uikit-util';
+import { addClass, css, fastdom, on, prepend, removeClass, ucfirst } from 'uikit-util';
 
 const tests = TESTS;
 const storage = window.sessionStorage;
@@ -14,10 +14,13 @@ request.send(null);
 
 const themes = request.status === 200 ? JSON.parse(request.responseText) : {};
 const styles = {
-    core: {css: '../dist/css/uikit-core.css'},
-    theme: {css: '../dist/css/uikit.css'}
+    core: { css: '../dist/css/uikit-core.css' },
+    theme: { css: '../dist/css/uikit.css' },
 };
-const component = location.pathname.split('/').pop().replace(/.html$/, '');
+const component = location.pathname
+    .split('/')
+    .pop()
+    .replace(/.html$/, '');
 
 for (const theme in themes) {
     styles[theme] = themes[theme];
@@ -26,7 +29,7 @@ for (const theme in themes) {
 const variations = {
     '': 'Default',
     light: 'Dark',
-    dark: 'Light'
+    dark: 'Light',
 };
 
 if (getParam('style') && getParam('style').match(/\.(json|css)$/)) {
@@ -44,102 +47,128 @@ docEl.dir = dir;
 const style = styles[storage[key]] || styles.theme;
 
 // add style
-document.writeln(`<link rel="stylesheet" href="${dir !== 'rtl' ? style.css : style.css.replace('.css', '-rtl.css')}">`);
+document.writeln(
+    `<link rel="stylesheet" href="${
+        dir !== 'rtl' ? style.css : style.css.replace('.css', '-rtl.css')
+    }">`
+);
 
 // add javascript
 document.writeln('<script src="../dist/js/uikit.js"></script>');
-document.writeln(`<script src="${style.icons ? style.icons : '../dist/js/uikit-icons.js'}"></script>`);
-
-on(window, 'load', () => setTimeout(() => fastdom.write(() => {
-
-    const $body = document.body;
-    const $container = prepend($body, `
+document.writeln(
+    `<script src="${style.icons ? style.icons : '../dist/js/uikit-icons.js'}"></script>`
+);
+
+on(window, 'load', () =>
+    setTimeout(
+        () =>
+            fastdom.write(() => {
+                const $body = document.body;
+                const $container = prepend(
+                    $body,
+                    `
         <div class="uk-container">
             <select class="uk-select uk-form-width-small" style="margin: 20px 20px 20px 0">
                 <option value="index.html">Overview</option>
-                ${tests.map(name => `<option value="${name}.html">${name.split('-').map(ucfirst).join(' ')}</option>`).join('')}
+                ${tests
+                    .map(
+                        (name) =>
+                            `<option value="${name}.html">${name
+                                .split('-')
+                                .map(ucfirst)
+                                .join(' ')}</option>`
+                    )
+                    .join('')}
             </select>
             <select class="uk-select uk-form-width-small" style="margin: 20px">
-                ${Object.keys(styles).map(style => `<option value="${style}">${ucfirst(style)}</option>`).join('')}
+                ${Object.keys(styles)
+                    .map((style) => `<option value="${style}">${ucfirst(style)}</option>`)
+                    .join('')}
             </select>
             <select class="uk-select uk-form-width-small" style="margin: 20px">
-                ${Object.keys(variations).map(name => `<option value="${name}">${variations[name]}</option>`).join('')}
+                ${Object.keys(variations)
+                    .map((name) => `<option value="${name}">${variations[name]}</option>`)
+                    .join('')}
             </select>
             <label style="margin: 20px">
                 <input type="checkbox" class="uk-checkbox"/>
                 <span style="margin: 5px">RTL</span>
             </label>
         </div>
-    `);
-
-    const [$tests, $styles, $inverse, $rtl] = $container.children;
-
-    // Tests
-    // ------------------------------
-
-    on($tests, 'change', () => {
-        if ($tests.value) {
-            location.href = `${$tests.value}${styles.custom ? `?style=${getParam('style')}` : ''}`;
-        }
-    });
-    $tests.value = `${component || 'index'}.html`;
-
-    // Styles
-    // ------------------------------
-
-    on($styles, 'change', () => {
-        storage[key] = $styles.value;
-        location.reload();
-    });
-    $styles.value = storage[key];
-
-    // Variations
-    // ------------------------------
-
-    $inverse.value = storage[keyinverse];
-
-    if ($inverse.value) {
-
-        removeClass(document.querySelectorAll('*'),
-            'uk-navbar-container',
-            'uk-card-default',
-            'uk-card-muted',
-            'uk-card-primary',
-            'uk-card-secondary',
-            'uk-tile-default',
-            'uk-tile-muted',
-            'uk-tile-primary',
-            'uk-tile-secondary',
-            'uk-section-default',
-            'uk-section-muted',
-            'uk-section-primary',
-            'uk-section-secondary',
-            'uk-overlay-default',
-            'uk-overlay-primary'
-        );
-
-        css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
-        addClass($body, `uk-${$inverse.value}`);
-
-    }
-
-    on($inverse, 'change', () => {
-        storage[keyinverse] = $inverse.value;
-        location.reload();
-    });
-
-    // RTL
-    // ------------------------------
-
-    on($rtl, 'change', ({target}) => {
-        storage._uikit_dir = target.checked ? 'rtl' : 'ltr';
-        location.reload();
-    });
-    $rtl.firstElementChild.checked = dir === 'rtl';
-
-    css(docEl, 'paddingTop', '');
-
-}), 100));
+    `
+                );
+
+                const [$tests, $styles, $inverse, $rtl] = $container.children;
+
+                // Tests
+                // ------------------------------
+
+                on($tests, 'change', () => {
+                    if ($tests.value) {
+                        location.href = `${$tests.value}${
+                            styles.custom ? `?style=${getParam('style')}` : ''
+                        }`;
+                    }
+                });
+                $tests.value = `${component || 'index'}.html`;
+
+                // Styles
+                // ------------------------------
+
+                on($styles, 'change', () => {
+                    storage[key] = $styles.value;
+                    location.reload();
+                });
+                $styles.value = storage[key];
+
+                // Variations
+                // ------------------------------
+
+                $inverse.value = storage[keyinverse];
+
+                if ($inverse.value) {
+                    removeClass(
+                        document.querySelectorAll('*'),
+                        'uk-navbar-container',
+                        'uk-card-default',
+                        'uk-card-muted',
+                        'uk-card-primary',
+                        'uk-card-secondary',
+                        'uk-tile-default',
+                        'uk-tile-muted',
+                        'uk-tile-primary',
+                        'uk-tile-secondary',
+                        'uk-section-default',
+                        'uk-section-muted',
+                        'uk-section-primary',
+                        'uk-section-secondary',
+                        'uk-overlay-default',
+                        'uk-overlay-primary'
+                    );
+
+                    css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
+                    addClass($body, `uk-${$inverse.value}`);
+                }
+
+                on($inverse, 'change', () => {
+                    storage[keyinverse] = $inverse.value;
+                    location.reload();
+                });
+
+                // RTL
+                // ------------------------------
+
+                on($rtl, 'change', ({ target }) => {
+                    storage._uikit_dir = target.checked ? 'rtl' : 'ltr';
+                    location.reload();
+                });
+                $rtl.firstElementChild.checked = dir === 'rtl';
+
+                css(docEl, 'paddingTop', '');
+            }),
+        100
+    )
+);
 
 css(docEl, 'paddingTop', '80px');
 

package/tests/lightbox.html

@@ -29,7 +29,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">900x600</figcaption>
                         </figure>
                     </a>
@@ -39,7 +39,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">700x500</figcaption>
                         </figure>
                     </a>
@@ -49,7 +49,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">1800x1200</figcaption>
                         </figure>
                     </a>
@@ -59,7 +59,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">1000x2000</figcaption>
                         </figure>
                     </a>
@@ -69,7 +69,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">2000x500</figcaption>
                         </figure>
                     </a>
@@ -84,7 +84,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="Image">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">Image</figcaption>
                         </figure>
                     </a>
@@ -94,7 +94,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">Video</figcaption>
                         </figure>
                     </a>
@@ -104,7 +104,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">YouTube</figcaption>
                         </figure>
                     </a>
@@ -114,7 +114,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">Vimeo</figcaption>
                         </figure>
                     </a>
@@ -124,7 +124,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe">
                         <figure>
-                            <img src="images/photo.jpg" width="400" alt="">
+                            <img src="images/photo.jpg" width="400" height="267" alt="">
                             <figcaption class="uk-margin-small-top">Iframe</figcaption>
                         </figure>
                     </a>

package/tests/marker.html

@@ -18,7 +18,7 @@
                 <div>
 
                     <div class="uk-inline uk-dark">
-                        <img src="images/light.jpg" alt="">
+                        <img src="images/light.jpg" width="1800" height="1200" alt="">
                         <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
                         <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
                         <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
@@ -28,7 +28,7 @@
                 <div>
 
                     <div class="uk-inline uk-light">
-                        <img src="images/dark.jpg" alt="">
+                        <img src="images/dark.jpg" width="1800" height="1200" alt="">
                         <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
                         <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
                         <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>

package/tests/modal.html

@@ -328,8 +328,7 @@
             </div>
         </div>
 
-        <!-- uk-flex-top is needed to make vertical margin work for IE11 -->
-        <div id="modal-center" class="uk-flex-top" uk-modal>
+        <div id="modal-center" uk-modal>
             <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
 
                 <button class="uk-modal-close-default" type="button" uk-close></button>
@@ -339,7 +338,7 @@
             </div>
         </div>
 
-        <div id="modal-center-scrollbar" class="uk-flex-top" uk-modal>
+        <div id="modal-center-scrollbar" uk-modal>
             <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
 
                 <button class="uk-modal-close-default" type="button" uk-close></button>
@@ -367,28 +366,28 @@
             </div>
         </div>
 
-        <div id="modal-media-image" class="uk-flex-top" uk-modal>
+        <div id="modal-media-image" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <img src="images/photo.jpg" alt="">
+                <img src="images/photo.jpg" width="1800" height="1200" alt="">
             </div>
         </div>
 
-        <div id="modal-media-video" class="uk-flex-top" uk-modal>
+        <div id="modal-media-video" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" controls playsinline uk-video></video>
+                <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" controls playsinline uk-video></video>
             </div>
         </div>
 
-        <div id="modal-media-youtube" class="uk-flex-top" uk-modal>
+        <div id="modal-media-youtube" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
                 <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" uk-video></iframe>
             </div>
         </div>
 
-        <div id="modal-media-vimeo" class="uk-flex-top" uk-modal>
+        <div id="modal-media-vimeo" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
                 <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" uk-video></iframe>

package/tests/navbar.html

@@ -1345,7 +1345,7 @@
                     <div class="uk-navbar-item">
                         <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
                     </div>
-                    <div class="uk-navbar-item"><img src="images/photo.jpg" width="100" alt=""></div>
+                    <div class="uk-navbar-item"><img src="images/photo.jpg" width="100" height="67" alt=""></div>
                     <div class="uk-navbar-item">Search</div>
                     <div class="uk-navbar-item">
                         <form>
@@ -2001,7 +2001,7 @@
             <h2>Mouse Tracker</h2>
 
             <div id="js-mousetracker" class="uk-position-relative">
-                <img src="images/photo.jpg" alt="">
+                <img src="images/photo.jpg" width="1800" height="1200" alt="">
                 <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center" style="height: 150px; width: 150px;">
                     <div id="js-mousetarget" class="uk-position-center"></div>
                 </div>

package/tests/overlay.html

@@ -18,7 +18,7 @@
                 <div>
 
                     <div class="uk-inline">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-overlay uk-overlay-default uk-position-bottom">
                             <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                         </div>
@@ -28,7 +28,7 @@
                 <div>
 
                     <div class="uk-inline">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-overlay uk-overlay-primary uk-position-bottom">
                             <p>Primary Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                         </div>
@@ -38,7 +38,7 @@
                 <div>
 
                     <div class="uk-inline">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-overlay-default uk-position-cover"></div>
                         <div class="uk-overlay uk-position-bottom uk-dark">
                             <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
@@ -49,7 +49,7 @@
                 <div>
 
                     <div class="uk-inline">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-overlay-primary uk-position-cover"></div>
                         <div class="uk-overlay uk-position-bottom uk-light">
                             <p>Primary Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
@@ -63,7 +63,7 @@
                 <div>
 
                     <div class="uk-inline uk-light">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-position-center">
                             <span uk-overlay-icon></span>
                         </div>
@@ -73,7 +73,7 @@
                 <div>
 
                     <div class="uk-inline uk-light">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-overlay-default uk-position-cover">
                             <div class="uk-position-center">
                                 <span uk-overlay-icon></span>
@@ -85,7 +85,7 @@
                 <div>
 
                     <div class="uk-inline uk-light">
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         <div class="uk-overlay-primary uk-position-cover">
                             <div class="uk-position-center">
                                 <span uk-overlay-icon></span>

package/tests/parallax.html

@@ -35,24 +35,33 @@
                     </div>
                 </div>
 
-                <h2>Start and End Steps</h2>
+                <h2>Start and End Stops</h2>
 
-                <div id="test-start-end-steps" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
+                <div id="test-start-end-stops" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
                     <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
                         <h1 uk-parallax="opacity: 0,1; y: -200,0; scale: 2,1;">Headline</h1>
                         <p uk-parallax="opacity: 0,1; y: 200,0; scale: 0,1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     </div>
                 </div>
 
-                <h2>Multiple Steps</h2>
+                <h2>Multiple Stops</h2>
 
-                <div id="test-multiple-steps" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
+                <div id="test-multiple-stops" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
                     <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
                         <h1 uk-parallax="x: -200,200,-200,200; scale: 2,1,2,1;">Headline</h1>
                         <p uk-parallax="x: 200,-200,200,-200; scale: 1,0,1,0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     </div>
                 </div>
 
+                <h2>Stop Positions</h2>
+
+                <div id="test-stop-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,50 50%, 200">
+                    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
+                        <h1 uk-parallax="x: -200,200 20%,-200 80%,200; scale: 1,1 50%,2;">Headline</h1>
+                        <p uk-parallax="x: 200,-200 20%,200 80%,-200; scale: 1,1 50%,2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+                </div>
+
                 <h2>Target</h2>
 
                 <div id="test-target" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -400">
@@ -181,7 +190,7 @@
 
                 <h2>Animated properties</h2>
 
-                <p>You can define multiple steps by using a comma separated list of values. (e.g. x: 0,50,150)</p>
+                <p>You can define multiple animation stops by using a comma separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
 
                 <div class="uk-overflow-auto">
                     <table class="uk-table uk-table-striped">