uikit 3.14.4-dev.fef7412a0 → 3.15.1-dev.a99898921

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.14.4-dev.fef7412a0",
+    "version": "3.15.1-dev.a99898921",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/drop.js

@@ -277,7 +277,7 @@ export default {
 
                     (() => {
                         const observer = observeResize(
-                            scrollParents(this.$el).concat(this.targetEl),
+                            scrollParents(this.$el).concat(this.target),
                             update
                         );
                         return () => observer.disconnect();
@@ -409,7 +409,7 @@ export default {
             this.$el.hidden = true;
 
             const boundary = query(this.boundary, this.$el);
-            const boundaryOffset = offsetViewport(boundary || window);
+            const boundaryOffset = offset(boundary || window);
             const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
             const viewportOffset = this.getViewportOffset(this.$el);
 

package/src/js/core/navbar.js

@@ -18,7 +18,6 @@ import {
     observeResize,
     offset,
     once,
-    parent,
     parents,
     query,
     remove,
@@ -74,7 +73,7 @@ export default {
         },
 
         dropbarAnchor({ dropbarAnchor }, $el) {
-            return query(dropbarAnchor, $el);
+            return query(dropbarAnchor, $el) || $el;
         },
 
         pos({ align }) {
@@ -295,8 +294,8 @@ export default {
                     return;
                 }
 
-                if (!parent(this.dropbar)) {
-                    after(this.dropbarAnchor || this.$el, this.dropbar);
+                if (this.dropbar.previousElementSibling !== this.dropbarAnchor) {
+                    after(this.dropbarAnchor, this.dropbar);
                 }
 
                 addClass(target, `${this.clsDrop}-dropbar`);
@@ -319,7 +318,8 @@ export default {
                     return;
                 }
 
-                this._observer = observeResize(target, () => {
+                const drop = this.getDropdown(target);
+                this._observer = observeResize([drop.$el, ...drop.target], () => {
                     const targetOffsets = parents(target, `.${this.clsDrop}`)
                         .concat(target)
                         .map((el) => offset(el));

package/src/js/core/switcher.js

@@ -52,9 +52,10 @@ export default {
                 }
 
                 const index = this.index();
-                this.connects.forEach((el) =>
-                    children(el).forEach((child, i) => toggleClass(child, this.cls, i === index))
-                );
+                this.connects.forEach((el) => {
+                    children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+                    this.lazyload(this.$el, children(el));
+                });
             },
 
             immediate: true,
@@ -87,8 +88,6 @@ export default {
     },
 
     connected() {
-        this.lazyload(this.$el, this.connects);
-
         // check for connects
         ready(() => this.$emit());
     },

package/src/js/core/toggle.js

@@ -51,6 +51,7 @@ export default {
 
             watch() {
                 this.updateAria();
+                this.lazyload(this.$el, this.target);
             },
 
             immediate: true,
@@ -62,8 +63,6 @@ export default {
             attr(this.$el, 'tabindex', '0');
         }
 
-        this.lazyload(this.$el, this.target);
-
         // check for target
         ready(() => this.$emit());
     },

package/src/js/mixin/lazyload.js

@@ -1,13 +1,20 @@
 import { $$, isFunction, observeIntersection, removeAttr, toNodes } from 'uikit-util';
 
 export default {
+    data: {
+        preload: 5,
+    },
+
     methods: {
         lazyload(observeTargets = this.$el, targets = this.$el) {
             this.registerObserver(
                 observeIntersection(observeTargets, (entries, observer) => {
                     for (const el of toNodes(isFunction(targets) ? targets() : targets)) {
-                        $$('[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+                        $$('[loading="lazy"]', el)
+                            .slice(0, this.preload - 1)
+                            .forEach((el) => removeAttr(el, 'loading'));
                     }
+
                     for (const el of entries
                         .filter(({ isIntersecting }) => isIntersecting)
                         .map(({ target }) => target)) {

package/src/js/mixin/togglable.js

@@ -209,6 +209,8 @@ export function toggleTransition(cmp) {
         css(el, {
             padding: 0,
             border: 0,
+            minWidth: 0,
+            minHeight: 0,
             [marginStartProp]: 0,
             width: dim.width,
             height: dim.height,

package/src/js/util/position.js

@@ -28,35 +28,13 @@ export function positionAt(element, target, options) {
 
 function getPosition(element, target, options) {
     const position = attachTo(element, target, options);
-
-    let {
-        attach: { element: elAttach, target: targetAttach },
-        offset: elOffset,
-        boundary,
-        viewportOffset,
-        placement,
-    } = options;
+    const { boundary, viewportOffset = 0, placement } = options;
 
     let offsetPosition = position;
     for (const [i, [prop, , start, end]] of Object.entries(dirs)) {
-        let viewports = scrollParents(target[i]);
-        const [scrollElement] = viewports;
-
-        let viewport = getIntersectionArea(...viewports.map(offsetViewport));
-
-        if (viewportOffset) {
-            viewport[start] += viewportOffset;
-            viewport[end] -= viewportOffset;
-        }
-
-        if (boundary) {
-            viewport = getIntersectionArea(viewport, offsetViewport(boundary));
-        }
-
-        const isInStartViewport = position[start] >= viewport[start];
-        const isInEndViewport = position[end] <= viewport[end];
+        const viewport = getViewport(target[i], viewportOffset, boundary, i);
 
-        if (isInStartViewport && isInEndViewport) {
+        if (isWithin(position, viewport, i)) {
             continue;
         }
 
@@ -64,17 +42,20 @@ function getPosition(element, target, options) {
 
         // Flip
         if (placement[i] === 'flip') {
+            const attach = options.attach.target[i];
             if (
-                (targetAttach[i] === end && isInEndViewport) ||
-                (targetAttach[i] === start && isInStartViewport)
+                (attach === end && position[end] <= viewport[end]) ||
+                (attach === start && position[start] >= viewport[start])
             ) {
                 continue;
             }
 
             offsetBy = flip(element, target, options, i)[start] - position[start];
 
-            if (!isInScrollArea(applyOffset(position, offsetBy, i), scrollElement, i)) {
-                if (isInScrollArea(position, scrollElement, i)) {
+            const scrollArea = getScrollArea(target[i], viewportOffset, i);
+
+            if (!isWithin(applyOffset(position, offsetBy, i), scrollArea, i)) {
+                if (isWithin(position, scrollArea, i)) {
                     continue;
                 }
 
@@ -82,18 +63,9 @@ function getPosition(element, target, options) {
                     return false;
                 }
 
-                const newPos = getPosition(element, target, {
-                    ...options,
-                    attach: {
-                        element: elAttach.map(flipAxis).reverse(),
-                        target: targetAttach.map(flipAxis).reverse(),
-                    },
-                    offset: elOffset.reverse(),
-                    placement: placement.reverse(),
-                    recursion: true,
-                });
-
-                if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+                const newPos = flipAxis(element, target, options);
+
+                if (newPos && isWithin(newPos, scrollArea, 1 - i)) {
                     return newPos;
                 }
 
@@ -103,6 +75,7 @@ function getPosition(element, target, options) {
             // Shift
         } else if (placement[i] === 'shift') {
             const targetDim = offset(target[i]);
+            const { offset: elOffset } = options;
             offsetBy =
                 clamp(
                     clamp(position[start], viewport[start], viewport[end] - position[prop]),
@@ -159,6 +132,30 @@ function moveBy(attach, end, dim) {
     return attach === 'center' ? dim / 2 : attach === end ? dim : 0;
 }
 
+function getViewport(element, viewportOffset, boundary, i) {
+    let viewport = getIntersectionArea(...scrollParents(element).map(offsetViewport));
+
+    if (viewportOffset) {
+        viewport[dirs[i][2]] += viewportOffset;
+        viewport[dirs[i][3]] -= viewportOffset;
+    }
+
+    if (boundary) {
+        viewport = getIntersectionArea(viewport, offset(boundary));
+    }
+
+    return viewport;
+}
+
+function getScrollArea(element, viewportOffset, i) {
+    const [prop, , start, end] = dirs[i];
+    const [scrollElement] = scrollParents(element);
+    const viewport = offsetViewport(scrollElement);
+    viewport[start] -= scrollElement[`scroll${ucfirst(start)}`] - viewportOffset;
+    viewport[end] = viewport[start] + scrollElement[`scroll${ucfirst(prop)}`] - viewportOffset;
+    return viewport;
+}
+
 function getIntersectionArea(...rects) {
     let area = {};
     for (const rect of rects) {
@@ -170,13 +167,9 @@ function getIntersectionArea(...rects) {
     return area;
 }
 
-function isInScrollArea(position, scrollElement, dir) {
-    const viewport = offsetViewport(scrollElement, false);
-    const [prop, , start, end] = dirs[dir];
-    viewport[start] -= scrollElement[`scroll${ucfirst(start)}`];
-    viewport[end] = viewport[start] + scrollElement[`scroll${ucfirst(prop)}`];
-
-    return position[start] >= viewport[start] && position[end] <= viewport[end];
+function isWithin(positionA, positionB, i) {
+    const [, , start, end] = dirs[i];
+    return positionA[start] >= positionB[start] && positionA[end] <= positionB[end];
 }
 
 function flip(element, target, { offset, attach }, i) {
@@ -189,6 +182,19 @@ function flip(element, target, { offset, attach }, i) {
     });
 }
 
+function flipAxis(element, target, options) {
+    return getPosition(element, target, {
+        ...options,
+        attach: {
+            element: options.attach.element.map(flipAttachAxis).reverse(),
+            target: options.attach.target.map(flipAttachAxis).reverse(),
+        },
+        offset: options.offset.reverse(),
+        placement: options.placement.reverse(),
+        recursion: true,
+    });
+}
+
 function flipAttach(attach, i) {
     const newAttach = [...attach];
     const index = dirs[i].indexOf(attach[i]);
@@ -198,13 +204,7 @@ function flipAttach(attach, i) {
     return newAttach;
 }
 
-function flipOffset(offset, i) {
-    offset = [...offset];
-    offset[i] *= -1;
-    return offset;
-}
-
-function flipAxis(prop) {
+function flipAttachAxis(prop) {
     for (let i = 0; i < dirs.length; i++) {
         const index = dirs[i].indexOf(prop);
         if (~index) {
@@ -212,3 +212,9 @@ function flipAxis(prop) {
         }
     }
 }
+
+function flipOffset(offset, i) {
+    offset = [...offset];
+    offset[i] *= -1;
+    return offset;
+}

package/src/less/components/nav.less

@@ -33,6 +33,8 @@
 @nav-sublist-deeper-padding-left:               15px;
 @nav-sublist-item-padding-vertical:             2px;
 
+@nav-parent-icon-margin-left:                   4px;
+
 @nav-header-padding-vertical:                   @nav-item-padding-vertical;
 @nav-header-padding-horizontal:                 @nav-item-padding-horizontal;
 @nav-header-font-size:                          @global-small-font-size;
@@ -441,7 +443,7 @@ ul.uk-nav-sub {
 .uk-nav-center .uk-nav-sub ul { padding-left: 0; }
 
 /* Parent icon  */
-.uk-nav-center .uk-nav-parent-icon { margin-left: 0; }
+.uk-nav-center .uk-nav-parent-icon { margin-left: @nav-parent-icon-margin-left; }
 
 
 /* Style modifier

package/src/less/components/navbar.less

@@ -77,13 +77,14 @@
 @navbar-dropdown-large-shift-margin:            0;
 @navbar-dropdown-large-padding:                 40px;
 
+@navbar-dropdown-dropbar-shift-margin:          0;
 @navbar-dropdown-dropbar-padding-top:           @navbar-dropdown-padding;
 @navbar-dropdown-dropbar-padding-bottom:        @navbar-dropdown-dropbar-padding-top;
-@navbar-dropdown-dropbar-padding-horizontal:    @navbar-nav-item-padding-horizontal;
 @navbar-dropdown-dropbar-viewport-margin:       15px;
 @navbar-dropdown-dropbar-viewport-margin-s:     @global-gutter;
 @navbar-dropdown-dropbar-viewport-margin-m:     @global-medium-gutter;
 
+@navbar-dropdown-dropbar-large-shift-margin:    0;
 @navbar-dropdown-dropbar-large-padding-top:     @navbar-dropdown-large-padding;
 @navbar-dropdown-dropbar-large-padding-bottom:  @navbar-dropdown-dropbar-large-padding-top;
 
@@ -444,6 +445,7 @@
 .uk-navbar-dropdown-large {
     --uk-position-shift-offset: @navbar-dropdown-large-shift-margin;
     padding: @navbar-dropdown-large-padding;
+    .hook-navbar-dropdown-large();
 }
 
 /*
@@ -459,9 +461,9 @@
     /* 2 */
     background: transparent;
     /* 3 */
-    padding: @navbar-dropdown-dropbar-padding-top @navbar-dropdown-dropbar-padding-horizontal @navbar-dropdown-dropbar-padding-bottom @navbar-dropdown-dropbar-padding-horizontal;
+    padding: @navbar-dropdown-dropbar-padding-top 0 @navbar-dropdown-dropbar-padding-bottom 0;
     --uk-position-offset: 0;
-    --uk-position-shift-offset: 0;
+    --uk-position-shift-offset: @navbar-dropdown-dropbar-shift-margin;
     --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin;
     .hook-navbar-dropdown-dropbar();
 }
@@ -481,8 +483,10 @@
 }
 
 .uk-navbar-dropdown-dropbar-large {
+    --uk-position-shift-offset: @navbar-dropdown-dropbar-large-shift-margin;
     padding-top: @navbar-dropdown-dropbar-large-padding-top;
     padding-bottom: @navbar-dropdown-dropbar-large-padding-bottom;
+    .hook-navbar-dropdown-dropbar-large();
 }
 
 
@@ -594,7 +598,9 @@
 .hook-navbar-transparent() {}
 .hook-navbar-sticky() {}
 .hook-navbar-dropdown() {}
+.hook-navbar-dropdown-large() {}
 .hook-navbar-dropdown-dropbar() {}
+.hook-navbar-dropdown-dropbar-large() {}
 .hook-navbar-dropdown-nav() {}
 .hook-navbar-dropdown-nav-item() {}
 .hook-navbar-dropdown-nav-item-hover() {}

package/src/less/theme/navbar.less

@@ -101,8 +101,12 @@
 
 .hook-navbar-dropdown() { box-shadow: @navbar-dropdown-box-shadow; }
 
+.hook-navbar-dropdown-large() {}
+
 .hook-navbar-dropdown-dropbar() { box-shadow: none; }
 
+.hook-navbar-dropdown-dropbar-large() {}
+
 
 // Dropdown nav
 // ========================================================================

package/src/scss/components/nav.scss

@@ -33,6 +33,8 @@ $nav-sublist-padding-left:                       15px !default;
 $nav-sublist-deeper-padding-left:                15px !default;
 $nav-sublist-item-padding-vertical:              2px !default;
 
+$nav-parent-icon-margin-left:                    4px !default;
+
 $nav-header-padding-vertical:                    $nav-item-padding-vertical !default;
 $nav-header-padding-horizontal:                  $nav-item-padding-horizontal !default;
 $nav-header-font-size:                           $global-small-font-size !default;
@@ -441,7 +443,7 @@ ul.uk-nav-sub {
 .uk-nav-center .uk-nav-sub ul { padding-left: 0; }
 
 /* Parent icon  */
-.uk-nav-center .uk-nav-parent-icon { margin-left: 0; }
+.uk-nav-center .uk-nav-parent-icon { margin-left: $nav-parent-icon-margin-left; }
 
 
 /* Style modifier

package/src/scss/components/navbar.scss

@@ -77,13 +77,14 @@ $navbar-dropdown-grid-gutter-vertical:           $navbar-dropdown-grid-gutter-ho
 $navbar-dropdown-large-shift-margin:             0 !default;
 $navbar-dropdown-large-padding:                  40px !default;
 
+$navbar-dropdown-dropbar-shift-margin:           0 !default;
 $navbar-dropdown-dropbar-padding-top:            $navbar-dropdown-padding !default;
 $navbar-dropdown-dropbar-padding-bottom:         $navbar-dropdown-dropbar-padding-top !default;
-$navbar-dropdown-dropbar-padding-horizontal:     $navbar-nav-item-padding-horizontal !default;
 $navbar-dropdown-dropbar-viewport-margin:        15px !default;
 $navbar-dropdown-dropbar-viewport-margin-s:      $global-gutter !default;
 $navbar-dropdown-dropbar-viewport-margin-m:      $global-medium-gutter !default;
 
+$navbar-dropdown-dropbar-large-shift-margin:     0 !default;
 $navbar-dropdown-dropbar-large-padding-top:      $navbar-dropdown-large-padding !default;
 $navbar-dropdown-dropbar-large-padding-bottom:   $navbar-dropdown-dropbar-large-padding-top !default;
 
@@ -444,6 +445,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 .uk-navbar-dropdown-large {
     --uk-position-shift-offset: #{$navbar-dropdown-large-shift-margin};
     padding: $navbar-dropdown-large-padding;
+    @if(mixin-exists(hook-navbar-dropdown-large)) {@include hook-navbar-dropdown-large();}
 }
 
 /*
@@ -459,9 +461,9 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     /* 2 */
     background: transparent;
     /* 3 */
-    padding: $navbar-dropdown-dropbar-padding-top $navbar-dropdown-dropbar-padding-horizontal $navbar-dropdown-dropbar-padding-bottom $navbar-dropdown-dropbar-padding-horizontal;
+    padding: $navbar-dropdown-dropbar-padding-top 0 $navbar-dropdown-dropbar-padding-bottom 0;
     --uk-position-offset: 0;
-    --uk-position-shift-offset: 0;
+    --uk-position-shift-offset: #{$navbar-dropdown-dropbar-shift-margin};
     --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin};
     @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
 }
@@ -481,8 +483,10 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 }
 
 .uk-navbar-dropdown-dropbar-large {
+    --uk-position-shift-offset: #{$navbar-dropdown-dropbar-large-shift-margin};
     padding-top: $navbar-dropdown-dropbar-large-padding-top;
     padding-bottom: $navbar-dropdown-dropbar-large-padding-bottom;
+    @if(mixin-exists(hook-navbar-dropdown-dropbar-large)) {@include hook-navbar-dropdown-dropbar-large();}
 }
 
 
@@ -594,7 +598,9 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 // @mixin hook-navbar-transparent(){}
 // @mixin hook-navbar-sticky(){}
 // @mixin hook-navbar-dropdown(){}
+// @mixin hook-navbar-dropdown-large(){}
 // @mixin hook-navbar-dropdown-dropbar(){}
+// @mixin hook-navbar-dropdown-dropbar-large(){}
 // @mixin hook-navbar-dropdown-nav(){}
 // @mixin hook-navbar-dropdown-nav-item(){}
 // @mixin hook-navbar-dropdown-nav-item-hover(){}

package/src/scss/mixins-theme.scss

@@ -1826,7 +1826,9 @@
 @mixin hook-navbar-transparent(){}
 @mixin hook-navbar-sticky(){}
 @mixin hook-navbar-dropdown(){ box-shadow: $navbar-dropdown-box-shadow; }
+@mixin hook-navbar-dropdown-large(){}
 @mixin hook-navbar-dropdown-dropbar(){ box-shadow: none; }
+@mixin hook-navbar-dropdown-dropbar-large(){}
 @mixin hook-navbar-dropdown-nav(){ font-size: $navbar-dropdown-nav-font-size; }
 @mixin hook-navbar-dropdown-nav-item(){}
 @mixin hook-navbar-dropdown-nav-item-hover(){}

package/src/scss/mixins.scss

@@ -1550,7 +1550,9 @@
 @mixin hook-navbar-transparent(){}
 @mixin hook-navbar-sticky(){}
 @mixin hook-navbar-dropdown(){}
+@mixin hook-navbar-dropdown-large(){}
 @mixin hook-navbar-dropdown-dropbar(){}
+@mixin hook-navbar-dropdown-dropbar-large(){}
 @mixin hook-navbar-dropdown-nav(){}
 @mixin hook-navbar-dropdown-nav-item(){}
 @mixin hook-navbar-dropdown-nav-item-hover(){}

package/src/scss/theme/navbar.scss

@@ -97,9 +97,13 @@ $navbar-dropdown-box-shadow:                     0 5px 12px rgba(0,0,0,0.15) !de
 
 
 
+// @mixin hook-navbar-dropdown-large(){}
 
 
 
+// @mixin hook-navbar-dropdown-dropbar-large(){}
+
+
 // Dropdown nav
 // ========================================================================
 

package/src/scss/variables-theme.scss

@@ -694,6 +694,7 @@ $nav-sublist-padding-vertical: 5px !default;
 $nav-sublist-padding-left: 15px !default;
 $nav-sublist-deeper-padding-left: 15px !default;
 $nav-sublist-item-padding-vertical: 2px !default;
+$nav-parent-icon-margin-left: 4px !default;
 $nav-header-padding-vertical: $nav-item-padding-vertical !default;
 $nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
 $nav-header-font-size: $global-small-font-size !default;
@@ -808,12 +809,13 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-large-shift-margin: 0 !default;
 $navbar-dropdown-large-padding: 40px !default;
+$navbar-dropdown-dropbar-shift-margin: 0 !default;
 $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
 $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
-$navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
 $navbar-dropdown-dropbar-viewport-margin: 15px !default;
 $navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
 $navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
+$navbar-dropdown-dropbar-large-shift-margin: 0 !default;
 $navbar-dropdown-dropbar-large-padding-top: $navbar-dropdown-large-padding !default;
 $navbar-dropdown-dropbar-large-padding-bottom: $navbar-dropdown-dropbar-large-padding-top !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;

package/src/scss/variables.scss

@@ -692,6 +692,7 @@ $nav-sublist-padding-vertical: 5px !default;
 $nav-sublist-padding-left: 15px !default;
 $nav-sublist-deeper-padding-left: 15px !default;
 $nav-sublist-item-padding-vertical: 2px !default;
+$nav-parent-icon-margin-left: 4px !default;
 $nav-header-padding-vertical: $nav-item-padding-vertical !default;
 $nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
 $nav-header-font-size: $global-small-font-size !default;
@@ -806,12 +807,13 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-large-shift-margin: 0 !default;
 $navbar-dropdown-large-padding: 40px !default;
+$navbar-dropdown-dropbar-shift-margin: 0 !default;
 $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
 $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
-$navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
 $navbar-dropdown-dropbar-viewport-margin: 15px !default;
 $navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
 $navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
+$navbar-dropdown-dropbar-large-shift-margin: 0 !default;
 $navbar-dropdown-dropbar-large-padding-top: $navbar-dropdown-large-padding !default;
 $navbar-dropdown-dropbar-large-padding-bottom: $navbar-dropdown-dropbar-large-padding-top !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;