uikit 3.13.8-dev.f030a8b39 → 3.13.9

package/src/scss/mixins-theme.scss

@@ -809,7 +809,6 @@
 @mixin hook-dropdown-nav(){ font-size: $dropdown-nav-font-size; }
 @mixin hook-dropdown-nav-item(){}
 @mixin hook-dropdown-nav-item-hover(){}
-@mixin hook-dropdown-nav-subtitle(){}
 @mixin hook-dropdown-nav-header(){}
 @mixin hook-dropdown-nav-divider(){}
 @mixin hook-dropdown-misc(){}
@@ -1707,14 +1706,12 @@
 @mixin hook-nav-default-item(){}
 @mixin hook-nav-default-item-hover(){}
 @mixin hook-nav-default-item-active(){}
-@mixin hook-nav-default-subtitle(){}
 @mixin hook-nav-default-header(){}
 @mixin hook-nav-default-divider(){}
 @mixin hook-nav-primary(){}
 @mixin hook-nav-primary-item(){}
 @mixin hook-nav-primary-item-hover(){}
 @mixin hook-nav-primary-item-active(){}
-@mixin hook-nav-primary-subtitle(){}
 @mixin hook-nav-primary-header(){}
 @mixin hook-nav-primary-divider(){}
 @mixin hook-nav-dividers(){}
@@ -1755,7 +1752,6 @@
 @mixin hook-navbar-dropdown-nav-item(){}
 @mixin hook-navbar-dropdown-nav-item-hover(){}
 @mixin hook-navbar-dropdown-nav-item-active(){}
-@mixin hook-navbar-dropdown-nav-subtitle(){}
 @mixin hook-navbar-dropdown-nav-header(){}
 @mixin hook-navbar-dropdown-nav-divider(){}
 @mixin hook-navbar-dropbar(){ box-shadow: $navbar-dropbar-box-shadow; }

package/src/scss/mixins.scss

@@ -584,7 +584,6 @@
 @mixin hook-dropdown-nav(){}
 @mixin hook-dropdown-nav-item(){}
 @mixin hook-dropdown-nav-item-hover(){}
-@mixin hook-dropdown-nav-subtitle(){}
 @mixin hook-dropdown-nav-header(){}
 @mixin hook-dropdown-nav-divider(){}
 @mixin hook-dropdown-misc(){}
@@ -1437,14 +1436,12 @@
 @mixin hook-nav-default-item(){}
 @mixin hook-nav-default-item-hover(){}
 @mixin hook-nav-default-item-active(){}
-@mixin hook-nav-default-subtitle(){}
 @mixin hook-nav-default-header(){}
 @mixin hook-nav-default-divider(){}
 @mixin hook-nav-primary(){}
 @mixin hook-nav-primary-item(){}
 @mixin hook-nav-primary-item-hover(){}
 @mixin hook-nav-primary-item-active(){}
-@mixin hook-nav-primary-subtitle(){}
 @mixin hook-nav-primary-header(){}
 @mixin hook-nav-primary-divider(){}
 @mixin hook-nav-dividers(){}
@@ -1481,7 +1478,6 @@
 @mixin hook-navbar-dropdown-nav-item(){}
 @mixin hook-navbar-dropdown-nav-item-hover(){}
 @mixin hook-navbar-dropdown-nav-item-active(){}
-@mixin hook-navbar-dropdown-nav-subtitle(){}
 @mixin hook-navbar-dropdown-nav-header(){}
 @mixin hook-navbar-dropdown-nav-divider(){}
 @mixin hook-navbar-dropbar(){}

package/src/scss/theme/dropdown.scss

@@ -34,8 +34,6 @@ $dropdown-box-shadow:                            0 5px 12px rgba(0,0,0,0.15) !de
 
 // @mixin hook-dropdown-nav-item-hover(){}
 
-// @mixin hook-dropdown-nav-subtitle(){}
-
 // @mixin hook-dropdown-nav-header(){}
 
 // @mixin hook-dropdown-nav-divider(){}

package/src/scss/theme/nav.scss

@@ -49,8 +49,6 @@ $nav-default-font-size:                          $global-small-font-size !defaul
 
 // @mixin hook-nav-default-item-active(){}
 
-// @mixin hook-nav-default-subtitle(){}
-
 // @mixin hook-nav-default-header(){}
 
 // @mixin hook-nav-default-divider(){}
@@ -67,8 +65,6 @@ $nav-default-font-size:                          $global-small-font-size !defaul
 
 // @mixin hook-nav-primary-item-active(){}
 
-// @mixin hook-nav-primary-subtitle(){}
-
 // @mixin hook-nav-primary-header(){}
 
 // @mixin hook-nav-primary-divider(){}

package/src/scss/theme/navbar.scss

@@ -105,8 +105,6 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 
 // @mixin hook-navbar-dropdown-nav-item-hover(){}
 
-// @mixin hook-navbar-dropdown-nav-subtitle(){}
-
 // @mixin hook-navbar-dropdown-nav-header(){}
 
 // @mixin hook-navbar-dropdown-nav-divider(){}

package/src/scss/variables-theme.scss

@@ -376,7 +376,6 @@ $dropdown-background: $global-background !default;
 $dropdown-color: $global-color !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
-$dropdown-nav-subtitle-font-size: $global-small-font-size !default;
 $dropdown-nav-header-color: $global-emphasis-color !default;
 $dropdown-nav-divider-border-width: $global-border-width !default;
 $dropdown-nav-divider-border: $global-border !default;
@@ -685,7 +684,6 @@ $nav-divider-margin-horizontal: 0 !default;
 $nav-default-item-color: $global-muted-color !default;
 $nav-default-item-hover-color: $global-color !default;
 $nav-default-item-active-color: $global-emphasis-color !default;
-$nav-default-subtitle-font-size: $global-small-font-size !default;
 $nav-default-header-color: $global-emphasis-color !default;
 $nav-default-divider-border-width: $global-border-width !default;
 $nav-default-divider-border: $global-border !default;
@@ -697,7 +695,6 @@ $nav-primary-item-line-height: $global-line-height !default;
 $nav-primary-item-color: $global-muted-color !default;
 $nav-primary-item-hover-color: $global-color !default;
 $nav-primary-item-active-color: $global-emphasis-color !default;
-$nav-primary-subtitle-font-size: $global-medium-font-size !default;
 $nav-primary-header-color: $global-emphasis-color !default;
 $nav-primary-divider-border-width: $global-border-width !default;
 $nav-primary-divider-border: $global-border !default;
@@ -751,11 +748,10 @@ $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-dropbar-margin-top: 0px !default;
 $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
-$navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
+$navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
-$navbar-dropdown-nav-subtitle-font-size: $global-small-font-size !default;
 $navbar-dropdown-nav-header-color: $global-emphasis-color !default;
 $navbar-dropdown-nav-divider-border-width: $global-border-width !default;
 $navbar-dropdown-nav-divider-border: $global-border !default;

package/src/scss/variables.scss

@@ -375,7 +375,6 @@ $dropdown-background: $global-muted-background !default;
 $dropdown-color: $global-color !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
-$dropdown-nav-subtitle-font-size: $global-small-font-size !default;
 $dropdown-nav-header-color: $global-emphasis-color !default;
 $dropdown-nav-divider-border-width: $global-border-width !default;
 $dropdown-nav-divider-border: $global-border !default;
@@ -683,7 +682,6 @@ $nav-divider-margin-horizontal: 0 !default;
 $nav-default-item-color: $global-muted-color !default;
 $nav-default-item-hover-color: $global-color !default;
 $nav-default-item-active-color: $global-emphasis-color !default;
-$nav-default-subtitle-font-size: $global-small-font-size !default;
 $nav-default-header-color: $global-emphasis-color !default;
 $nav-default-divider-border-width: $global-border-width !default;
 $nav-default-divider-border: $global-border !default;
@@ -695,7 +693,6 @@ $nav-primary-item-line-height: $global-line-height !default;
 $nav-primary-item-color: $global-muted-color !default;
 $nav-primary-item-hover-color: $global-color !default;
 $nav-primary-item-active-color: $global-emphasis-color !default;
-$nav-primary-subtitle-font-size: $global-medium-font-size !default;
 $nav-primary-header-color: $global-emphasis-color !default;
 $nav-primary-divider-border-width: $global-border-width !default;
 $nav-primary-divider-border: $global-border !default;
@@ -749,11 +746,10 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-dropbar-margin-top: 0px !default;
 $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
-$navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
+$navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
-$navbar-dropdown-nav-subtitle-font-size: $global-small-font-size !default;
 $navbar-dropdown-nav-header-color: $global-emphasis-color !default;
 $navbar-dropdown-nav-divider-border-width: $global-border-width !default;
 $navbar-dropdown-nav-divider-border: $global-border !default;

package/tests/dropdown.html

@@ -24,7 +24,7 @@
             <h1>Dropdown</h1>
 
             <div uk-grid>
-                <div class="uk-width-1-4@m">
+                <div class="uk-width-1-3@m">
 
                     <div class="uk-dropdown test">
 
@@ -59,21 +59,7 @@
                     </div>
 
                 </div>
-                <div class="uk-width-1-4@m">
-
-                    <div class="uk-dropdown test">
-
-                        <ul class="uk-nav uk-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 class="uk-width-1-2@m">
+                <div class="uk-width-2-3@m">
 
                     <div class="uk-margin" uk-margin>
 

package/tests/nav.html

@@ -287,33 +287,6 @@
                 </div>
             </div>
 
-            <div class="uk-child-width-1-4@m" uk-grid>
-                <div>
-
-                    <h2>Default</h2>
-
-                    <ul class="uk-nav uk-nav-default">
-                        <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
-                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
-                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
-                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
-                    </ul>
-
-                </div>
-                <div>
-
-                    <h2>Primary</h2>
-
-                    <ul class="uk-nav uk-nav-primary">
-                        <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
-                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
-                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
-                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
-                    </ul>
-
-                </div>
-            </div>
-
             <h2>JavaScript Options</h2>
 
             <table class="uk-table uk-table-striped">

package/tests/navbar.html

@@ -26,7 +26,7 @@
             <h1>Navbar</h1>
 
             <div uk-grid>
-                <div class="uk-width-1-2@m">
+                <div class="uk-width-2-3@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="300"></canvas>
+                        <canvas class="uk-background-cover" style="background-image: url('images/dark.jpg')" width="1000" height="200"></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="300"></canvas>
+                        <canvas class="uk-background-cover" style="background-image: url('images/light.jpg')" width="1000" height="200"></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-4@m">
+                <div class="uk-width-1-3@m">
 
                     <div class="uk-navbar-dropdown test">
 
@@ -220,20 +220,6 @@
                     </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>

package/tests/position.html

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