uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.6923b7e2c

package/tests/sticky-navbar.html

@@ -74,7 +74,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -175,7 +175,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -276,7 +276,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -377,7 +377,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -480,7 +480,7 @@
                                 <div class="uk-navbar-right">
 
                                     <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">
@@ -585,7 +585,7 @@
                                 <div class="uk-navbar-right">
 
                                     <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">

package/tests/sticky.html

@@ -407,14 +407,14 @@
 
         <script>
 
-            var options = UIkit.util.$$('#js-height-switcher option').map(function (option) { return option.value; });
-
-            UIkit.util.on('#js-height-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.js-overflow-flip').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            const {$$, addClass, on, removeClass } = UIkit.util;
+
+            on('#js-height-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.js-overflow-flip')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>

package/tests/switcher.html

@@ -358,7 +358,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/tab.html

@@ -188,7 +188,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/table.html

@@ -313,14 +313,14 @@
 
         <script>
 
-            var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
+            const {$$, addClass, on, removeClass } = UIkit.util;
 
-            UIkit.util.on('#js-size-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.uk-table').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            on('#js-size-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.uk-table')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>

package/tests/toggle.html

@@ -144,7 +144,7 @@
                             <td><code>mode</code></td>
                             <td>hover | click | media</td>
                             <td>click</td>
-                            <td>Comma separated list of trigger behaviour modes.</td>
+                            <td>Comma-separated list of trigger behaviour modes.</td>
                         </tr>
                         <tr>
                             <td><code>media</code></td>
@@ -162,7 +162,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/tooltip.html

@@ -90,7 +90,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/upload.html

@@ -36,30 +36,30 @@
 
             <script>
 
-                var bar = document.getElementById('js-progressbar');
+                const bar =  UIkit.util.$('#js-progressbar');
 
                 UIkit.upload('.js-upload', {
 
                     url: '',
                     multiple: true,
 
-                    beforeSend: function () {
+                    beforeSend() {
                         console.log('beforeSend', arguments);
                     },
-                    beforeAll: function () {
+                    beforeAll() {
                         console.log('beforeAll', arguments);
                     },
-                    load: function () {
+                    load() {
                         console.log('load', arguments);
                     },
-                    error: function () {
+                    error() {
                         console.log('error', arguments);
                     },
-                    complete: function () {
+                    complete() {
                         console.log('complete', arguments);
                     },
 
-                    loadStart: function (e) {
+                    loadStart(e) {
                         console.log('loadStart', arguments);
 
                         bar.hidden = false;
@@ -67,24 +67,24 @@
                         bar.value = e.loaded;
                     },
 
-                    progress: function (e) {
+                    progress(e) {
                         console.log('progress', arguments);
 
                         bar.max = e.total;
                         bar.value = e.loaded;
                     },
 
-                    loadEnd: function (e) {
+                    loadEnd(e) {
                         console.log('loadEnd', arguments);
 
                         bar.max = e.total;
                         bar.value = e.loaded;
                     },
 
-                    completeAll: function () {
+                    completeAll() {
                         console.log('completeAll', arguments);
 
-                        setTimeout(function () {
+                        setTimeout(() => {
                             bar.hidden = true;
                         }, 1000);
 

package/tests/utility.html

@@ -434,6 +434,25 @@
                         <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
                     </a>
                 </div>
+                <div>
+                    <p>Picture</p>
+                    <a class="uk-logo" href="#">
+                        <picture>
+                            <img src="images/photo.jpg" width="200" height="133" alt="">
+                        </picture>
+                    </a>
+                </div>
+                <div>
+                    <p>+ Inverse Picture</p>
+                    <a class="uk-logo" href="#">
+                        <picture>
+                            <img src="images/photo.jpg" width="200" height="133" alt="">
+                        </picture>
+                        <picture>
+                            <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
+                        </picture>
+                    </a>
+                </div>
             </div>
 
         </div>

package/src/images/backgrounds/nav-parent-open.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" stroke-width="1.1" points="13 10 7 4 1 10" />
-</svg>