uikit 3.13.2-dev.f1f339523 → 3.13.2-dev.f6cd10e37

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.13.2-dev.f1f339523",
+    "version": "3.13.2-dev.f6cd10e37",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -34,27 +34,27 @@
     },
     "homepage": "https://getuikit.com",
     "devDependencies": {
-        "@babel/core": "^7.16.0",
+        "@babel/core": "^7.17.8",
         "@babel/preset-env": "^7.16.4",
         "@rollup/plugin-alias": "^3.1.9",
-        "@rollup/plugin-babel": "^5.3.0",
+        "@rollup/plugin-babel": "^5.3.1",
         "@rollup/plugin-replace": "^3.0.1",
         "archiver": "^5.3.0",
         "camelcase": "^6.3.0",
         "clean-css": "^5.2.4",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.23",
-        "eslint": "^8.9.0",
-        "eslint-config-prettier": "^8.3.0",
-        "fs-extra": "^10.0.0",
+        "esbuild": "^0.14.27",
+        "eslint": "^8.11.0",
+        "eslint-config-prettier": "^8.5.0",
+        "fs-extra": "^10.0.1",
         "glob": "^7.2.0",
-        "inquirer": "^8.2.0",
+        "inquirer": "^8.2.1",
         "less": "^4.1.2",
         "minimist": "^1.2.5",
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
-        "prettier": "^2.5.1",
-        "rollup": "^2.68.0",
+        "prettier": "^2.6.0",
+        "rollup": "^2.70.1",
         "rollup-plugin-esbuild": "^4.8.2",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",

package/src/js/core/drop.js

@@ -129,7 +129,7 @@ export default {
                 if (this.isToggled()) {
                     this.hide(false);
                 } else {
-                    this.show(toggle.$el, false);
+                    this.show(toggle?.$el, false);
                 }
             },
         },
@@ -141,7 +141,7 @@ export default {
 
             handler(e, toggle) {
                 e.preventDefault();
-                this.show(toggle.$el);
+                this.show(toggle?.$el);
             },
         },
 
@@ -352,23 +352,26 @@ export default {
         },
 
         position() {
-            const boundary = this.boundary === true ? window : query(this.boundary, this.$el);
+            const boundary = query(this.boundary, this.$el) || window;
             removeClass(this.$el, `${this.clsDrop}-stack`);
             toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
 
             const boundaryOffset = offset(boundary);
-            const alignTo = this.boundaryAlign ? boundaryOffset : offset(this.target);
+            const targetOffset = offset(this.target);
+            const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
 
             if (this.align === 'justify') {
                 const prop = this.getAxis() === 'y' ? 'width' : 'height';
-                css(this.$el, prop, alignTo[prop]);
+                css(
+                    this.$el,
+                    prop,
+                    (this.boundaryAlign || boundary !== window ? boundaryOffset : targetOffset)[
+                        prop
+                    ]
+                );
             } else if (
-                boundary &&
                 this.$el.offsetWidth >
-                    Math.max(
-                        boundaryOffset.right - alignTo.left,
-                        alignTo.right - boundaryOffset.left
-                    )
+                Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left)
             ) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }

package/src/js/core/navbar.js

@@ -42,7 +42,6 @@ export default {
         delayShow: Number,
         delayHide: Number,
         dropbar: Boolean,
-        dropbarMode: String,
         dropbarAnchor: Boolean,
         duration: Number,
     },
@@ -59,7 +58,6 @@ export default {
         flip: 'x',
         boundary: true,
         dropbar: false,
-        dropbarMode: 'slide',
         dropbarAnchor: false,
         duration: 200,
         forceHeight: true,
@@ -68,8 +66,8 @@ export default {
     },
 
     computed: {
-        boundary({ boundary, boundaryAlign }, $el) {
-            return boundary === true || boundaryAlign ? $el : boundary;
+        boundary({ boundary }, $el) {
+            return boundary === true ? $el : boundary;
         },
 
         dropbarAnchor({ dropbarAnchor }, $el) {
@@ -299,10 +297,6 @@ export default {
                     return;
                 }
 
-                if (this.dropbarMode === 'slide') {
-                    addClass(this.dropbar, 'uk-navbar-dropbar-slide');
-                }
-
                 this.clsDrop && addClass($el, `${this.clsDrop}-dropbar`);
 
                 if (dir === 'bottom') {

package/src/less/components/navbar.less

@@ -468,20 +468,12 @@
  ========================================================================== */
 
 .uk-navbar-dropbar {
-    background: @navbar-dropbar-background;
-    .hook-navbar-dropbar();
-}
-
-/*
- * Slide modifier
- */
-
-.uk-navbar-dropbar-slide {
     position: absolute;
     z-index: @navbar-dropbar-z-index;
     left: 0;
     right: 0;
-    .hook-navbar-dropbar-slide();
+    background: @navbar-dropbar-background;
+    .hook-navbar-dropbar();
 }
 
 
@@ -514,7 +506,6 @@
 .hook-navbar-dropdown-nav-header() {}
 .hook-navbar-dropdown-nav-divider() {}
 .hook-navbar-dropbar(){}
-.hook-navbar-dropbar-slide(){}
 .hook-navbar-misc() {}
 
 

package/src/less/components/offcanvas.less

@@ -35,9 +35,11 @@
 @offcanvas-bar-padding-vertical-m:              @global-medium-gutter;
 @offcanvas-bar-padding-horizontal-m:            @global-medium-gutter;
 
-@offcanvas-close-position:                      20px;
+@offcanvas-close-position:                      5px;
 @offcanvas-close-padding:                       5px;
 
+@offcanvas-close-position-m:                    20px;
+
 @offcanvas-overlay-background:                  rgba(0,0,0,0.1);
 
 
@@ -206,6 +208,22 @@
     .hook-offcanvas-close();
 }
 
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-offcanvas-close {
+        top: @offcanvas-close-position-m;
+        right: @offcanvas-close-position-m;
+    }
+
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-offcanvas-close:first-child + * { margin-top: 0; }
+
 
 /* Overlay
  ========================================================================== */

package/src/less/theme/navbar.less

@@ -117,9 +117,7 @@
 // Dropbar
 // ========================================================================
 
-.hook-navbar-dropbar() {}
-
-.hook-navbar-dropbar-slide() { box-shadow: @navbar-dropbar-box-shadow; }
+.hook-navbar-dropbar() { box-shadow: @navbar-dropbar-box-shadow; }
 
 
 // Miscellaneous

package/src/scss/components/navbar.scss

@@ -468,20 +468,12 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
  ========================================================================== */
 
 .uk-navbar-dropbar {
-    background: $navbar-dropbar-background;
-    @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
-}
-
-/*
- * Slide modifier
- */
-
-.uk-navbar-dropbar-slide {
     position: absolute;
     z-index: $navbar-dropbar-z-index;
     left: 0;
     right: 0;
-    @if(mixin-exists(hook-navbar-dropbar-slide)) {@include hook-navbar-dropbar-slide();}
+    background: $navbar-dropbar-background;
+    @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
 }
 
 
@@ -514,7 +506,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 // @mixin hook-navbar-dropdown-nav-header(){}
 // @mixin hook-navbar-dropdown-nav-divider(){}
 // @mixin hook-navbar-dropbar(){}
-// @mixin hook-navbar-dropbar-slide(){}
 // @mixin hook-navbar-misc(){}
 
 

package/src/scss/components/offcanvas.scss

@@ -35,9 +35,11 @@ $offcanvas-bar-width-m:                          350px !default;
 $offcanvas-bar-padding-vertical-m:               $global-medium-gutter !default;
 $offcanvas-bar-padding-horizontal-m:             $global-medium-gutter !default;
 
-$offcanvas-close-position:                       20px !default;
+$offcanvas-close-position:                       5px !default;
 $offcanvas-close-padding:                        5px !default;
 
+$offcanvas-close-position-m:                     20px !default;
+
 $offcanvas-overlay-background:                   rgba(0,0,0,0.1) !default;
 
 
@@ -206,6 +208,22 @@ $offcanvas-overlay-background:                   rgba(0,0,0,0.1) !default;
     @if(mixin-exists(hook-offcanvas-close)) {@include hook-offcanvas-close();}
 }
 
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-offcanvas-close {
+        top: $offcanvas-close-position-m;
+        right: $offcanvas-close-position-m;
+    }
+
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-offcanvas-close:first-child + * { margin-top: 0; }
+
 
 /* Overlay
  ========================================================================== */

package/src/scss/mixins-theme.scss

@@ -1754,8 +1754,7 @@
 @mixin hook-navbar-dropdown-nav-item-active(){}
 @mixin hook-navbar-dropdown-nav-header(){}
 @mixin hook-navbar-dropdown-nav-divider(){}
-@mixin hook-navbar-dropbar(){}
-@mixin hook-navbar-dropbar-slide(){ box-shadow: $navbar-dropbar-box-shadow; }
+@mixin hook-navbar-dropbar(){ box-shadow: $navbar-dropbar-box-shadow; }
 @mixin hook-navbar-misc(){
 
     /*

package/src/scss/mixins.scss

@@ -1481,7 +1481,6 @@
 @mixin hook-navbar-dropdown-nav-header(){}
 @mixin hook-navbar-dropdown-nav-divider(){}
 @mixin hook-navbar-dropbar(){}
-@mixin hook-navbar-dropbar-slide(){}
 @mixin hook-navbar-misc(){}
 @mixin hook-inverse-navbar-nav-item(){}
 @mixin hook-inverse-navbar-nav-item-hover(){}

package/src/scss/theme/navbar.scss

@@ -113,8 +113,6 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 // Dropbar
 // ========================================================================
 
-// @mixin hook-navbar-dropbar(){}
-
 
 
 

package/src/scss/variables-theme.scss

@@ -790,8 +790,9 @@ $offcanvas-bar-color-mode: light !default;
 $offcanvas-bar-width-m: 350px !default;
 $offcanvas-bar-padding-vertical-m: $global-medium-gutter !default;
 $offcanvas-bar-padding-horizontal-m: $global-medium-gutter !default;
-$offcanvas-close-position: 20px !default;
+$offcanvas-close-position: 5px !default;
 $offcanvas-close-padding: 5px !default;
+$offcanvas-close-position-m: 20px !default;
 $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
 $overlay-padding-horizontal: $global-gutter !default;
 $overlay-padding-vertical: $global-gutter !default;

package/src/scss/variables.scss

@@ -788,8 +788,9 @@ $offcanvas-bar-color-mode: light !default;
 $offcanvas-bar-width-m: 350px !default;
 $offcanvas-bar-padding-vertical-m: $global-medium-gutter !default;
 $offcanvas-bar-padding-horizontal-m: $global-medium-gutter !default;
-$offcanvas-close-position: 20px !default;
+$offcanvas-close-position: 5px !default;
 $offcanvas-close-padding: 5px !default;
+$offcanvas-close-position-m: 20px !default;
 $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
 $overlay-padding-horizontal: $global-gutter !default;
 $overlay-padding-vertical: $global-gutter !default;

package/tests/navbar.html

@@ -1151,12 +1151,12 @@
 
             <div class="uk-margin">
 
-                <nav class="uk-navbar-container" uk-navbar="dropbar: true; dropbar-mode: push">
+                <nav class="uk-navbar-container" uk-navbar="dropbar: true">
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
                             <li>
-                                <a href="#">Push</a>
+                                <a href="#">Hover</a>
                                 <div class="uk-navbar-dropdown">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
@@ -1982,12 +1982,6 @@
                             <td>false</td>
                             <td>The dropbar selector. If true the dropbar will be inserted automatically.</td>
                         </tr>
-                        <tr>
-                            <td><code>dropbar-mode</code></td>
-                            <td>slide | push</td>
-                            <td>slide</td>
-                            <td>The dropbar mode. (`push` mode is not supported within Sticky component)</td>
-                        </tr>
                         <tr>
                             <td><code>duration</code></td>
                             <td>Number</td>

package/tests/search.html

@@ -294,7 +294,7 @@
                 </div>
             </nav>
 
-            <nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar; dropbar-mode: expand">
+            <nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar">
                 <div class="uk-navbar-left">
 
                     <a class="uk-navbar-item uk-logo" href="#">Dropbar</a>