uikit 3.14.4-dev.5e7e87ba7 → 3.14.4-dev.5fbbc45fb

package/src/js/util/position.js

@@ -15,6 +15,7 @@ export function positionAt(element, target, options) {
             ...options.attach,
         },
         offset: [0, 0],
+        placement: [],
         ...options,
     };
 
@@ -25,114 +26,36 @@ export function positionAt(element, target, options) {
     offset(element, getPosition(element, target, options));
 }
 
-function attachTo(element, target, options) {
-    let { attach, offset: offsetBy } = {
-        attach: {
-            element: ['left', 'top'],
-            target: ['left', 'top'],
-            ...options.attach,
-        },
-        offset: [0, 0],
-        ...options,
-    };
-
-    const position = offset(element);
-
-    for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
-        const targetOffset =
-            attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[i]);
-
-        position[start] = position[dir] =
-            targetOffset[start] +
-            moveBy(attach.target[i], end, targetOffset[prop]) -
-            moveBy(attach.element[i], end, position[prop]) +
-            +offsetBy[i];
-        position[end] = position[start] + position[prop];
-    }
-    return position;
-}
-
-function moveBy(start, end, dim) {
-    return start === 'center' ? dim / 2 : start === end ? dim : 0;
-}
-
 function getPosition(element, target, options) {
     const position = attachTo(element, target, options);
+    const { boundary, viewportOffset = 0, placement } = options;
 
-    let {
-        flip,
-        shift,
-        attach: { element: elAttach, target: targetAttach },
-        offset: elOffset,
-        boundary,
-        viewportOffset,
-    } = options;
-
-    if (!flip && !shift) {
-        return position;
-    }
-
-    const offsetPosition = { ...position };
-    for (const [i, [prop, dir, 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));
-        }
+    let offsetPosition = position;
+    for (const [i, [prop, , start, end]] of Object.entries(dirs)) {
+        const viewport = getViewport(target[i], viewportOffset, boundary, i);
 
-        const isInStartViewport = position[start] >= viewport[start];
-        const isInEndViewport = position[end] <= viewport[end];
-
-        if (isInStartViewport && isInEndViewport) {
+        if (isWithin(position, viewport, i)) {
             continue;
         }
 
         let offsetBy = 0;
-        const targetDim = offset(target[i]);
 
         // Flip
-        if (!intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i)) {
+        if (placement[i] === 'flip') {
+            const attach = options.attach.target[i];
             if (
-                !flip ||
-                (elAttach[i] === end && isInStartViewport) ||
-                (elAttach[i] === start && isInEndViewport)
+                (attach === end && position[end] <= viewport[end]) ||
+                (attach === start && position[start] >= viewport[start])
             ) {
                 continue;
             }
 
-            offsetBy =
-                (elAttach[i] === start
-                    ? -position[prop]
-                    : elAttach[i] === end
-                    ? position[prop]
-                    : 0) +
-                (targetAttach[i] === start
-                    ? targetDim[prop]
-                    : targetAttach[i] === end
-                    ? -targetDim[prop]
-                    : 0) -
-                elOffset[i] * 2;
+            offsetBy = flip(element, target, options, i)[start] - position[start];
 
-            if (
-                !isInScrollArea(
-                    {
-                        ...position,
-                        [start]: position[start] + offsetBy,
-                        [end]: position[end] + offsetBy,
-                    },
-                    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;
                 }
 
@@ -140,17 +63,9 @@ function getPosition(element, target, options) {
                     return false;
                 }
 
-                const newPos = getPosition(element, target, {
-                    ...options,
-                    attach: {
-                        element: elAttach.map(flipDir).reverse(),
-                        target: targetAttach.map(flipDir).reverse(),
-                    },
-                    offset: elOffset.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;
                 }
 
@@ -158,7 +73,9 @@ function getPosition(element, target, options) {
             }
 
             // Shift
-        } else if (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]),
@@ -167,13 +84,78 @@ function getPosition(element, target, options) {
                 ) - position[start];
         }
 
-        offsetPosition[start] = position[dir] = position[start] + offsetBy;
-        offsetPosition[end] += offsetBy;
+        offsetPosition = applyOffset(offsetPosition, offsetBy, i);
     }
 
     return offsetPosition;
 }
 
+function attachTo(element, target, options) {
+    let { attach, offset: offsetBy } = {
+        attach: {
+            element: ['left', 'top'],
+            target: ['left', 'top'],
+            ...options.attach,
+        },
+        offset: [0, 0],
+        ...options,
+    };
+
+    let elOffset = offset(element);
+
+    for (const [i, [prop, , start, end]] of Object.entries(dirs)) {
+        const targetOffset =
+            attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[i]);
+
+        elOffset = applyOffset(
+            elOffset,
+            targetOffset[start] -
+                elOffset[start] +
+                moveBy(attach.target[i], end, targetOffset[prop]) -
+                moveBy(attach.element[i], end, elOffset[prop]) +
+                +offsetBy[i],
+            i
+        );
+    }
+    return elOffset;
+}
+
+function applyOffset(position, offset, i) {
+    const [, dir, start, end] = dirs[i];
+    const newPos = { ...position };
+    newPos[start] = position[dir] = position[start] + offset;
+    newPos[end] += offset;
+    return newPos;
+}
+
+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) {
@@ -185,21 +167,44 @@ 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)}`];
+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) {
+    return attachTo(element, target, {
+        attach: {
+            element: flipAttach(attach.element, i),
+            target: flipAttach(attach.target, i),
+        },
+        offset: flipOffset(offset, i),
+    });
+}
 
-    return position[start] >= viewport[start] && position[end] <= viewport[end];
+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 intersectLine(dimA, dimB, dir) {
-    const [, , start, end] = dirs[dir];
-    return dimA[end] > dimB[start] && dimB[end] > dimA[start];
+function flipAttach(attach, i) {
+    const newAttach = [...attach];
+    const index = dirs[i].indexOf(attach[i]);
+    if (~index) {
+        newAttach[i] = dirs[i][1 - (index % 2) + 2];
+    }
+    return newAttach;
 }
 
-function flipDir(prop) {
+function flipAttachAxis(prop) {
     for (let i = 0; i < dirs.length; i++) {
         const index = dirs[i].indexOf(prop);
         if (~index) {
@@ -207,3 +212,9 @@ function flipDir(prop) {
         }
     }
 }
+
+function flipOffset(offset, i) {
+    offset = [...offset];
+    offset[i] *= -1;
+    return offset;
+}

package/src/less/components/dropbar.less

@@ -20,6 +20,9 @@
 @dropbar-color:                                 @global-color;
 @dropbar-color-mode:                            none;
 
+@dropbar-large-padding-top:                     40px;
+@dropbar-large-padding-bottom:                  @dropbar-large-padding-top;
+
 
 /* ========================================================================
    Component: Dropbar
@@ -81,6 +84,14 @@
 .uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
 .uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
 
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropbar-large {
+    padding-top: @dropbar-large-padding-top;
+    padding-bottom: @dropbar-large-padding-bottom;
+}
+
 
 /* Direction modifier
  ========================================================================== */

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,17 @@
 @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;
+
 @navbar-dropdown-nav-item-color:                @global-muted-color;
 @navbar-dropdown-nav-item-hover-color:          @global-color;
 @navbar-dropdown-nav-item-active-color:         @global-emphasis-color;
@@ -441,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();
 }
 
 /*
@@ -456,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();
 }
@@ -477,6 +482,13 @@
 
 }
 
+.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();
+}
+
 
 /* Dropdown Nav
  * Adopts `uk-nav`
@@ -586,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

@@ -20,7 +20,6 @@
 @navbar-dropdown-margin:                        15px;
 @navbar-dropdown-padding:                       25px;
 @navbar-dropdown-background:                    @global-background;
-@navbar-dropdown-grid-gutter-horizontal:        (@navbar-dropdown-padding * 2);
 
 @navbar-dropdown-nav-subtitle-font-size:        12px;
 
@@ -34,9 +33,6 @@
 
 @navbar-dropdown-box-shadow:                    0 5px 12px rgba(0,0,0,0.15);
 
-@navbar-dropdown-grid-divider-border-width:     @global-border-width;
-@navbar-dropdown-grid-divider-border:           @navbar-dropdown-nav-divider-border;
-
 
 // Component
 // ========================================================================
@@ -105,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
 // ========================================================================
@@ -133,34 +133,7 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-navbar-misc() {
-
-    /*
-     * Grid Divider
-     */
-
-    .uk-navbar-dropdown-grid > * { position: relative; }
-
-    .uk-navbar-dropdown-grid > :not(.uk-first-column)::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: (@navbar-dropdown-grid-gutter-horizontal / 2);
-        border-left: @navbar-dropdown-grid-divider-border-width solid @navbar-dropdown-grid-divider-border;
-    }
-
-    /* Vertical */
-    .uk-navbar-dropdown-grid.uk-grid-stack > .uk-grid-margin::before {
-        content: "";
-        position: absolute;
-        top: -(@navbar-dropdown-grid-gutter-vertical / 2);
-        left: @navbar-dropdown-grid-gutter-horizontal;
-        right: 0;
-        border-top: @navbar-dropdown-grid-divider-border-width solid @navbar-dropdown-grid-divider-border;
-    }
-
-}
+.hook-navbar-misc() {}
 
 
 // Inverse

package/src/scss/components/dropbar.scss

@@ -20,6 +20,9 @@ $dropbar-background:                             $global-muted-background !defau
 $dropbar-color:                                  $global-color !default;
 $dropbar-color-mode:                             none !default;
 
+$dropbar-large-padding-top:                      40px !default;
+$dropbar-large-padding-bottom:                   $dropbar-large-padding-top !default;
+
 
 /* ========================================================================
    Component: Dropbar
@@ -81,6 +84,14 @@ $dropbar-color-mode:                             none !default;
 @if ( $dropbar-color-mode == light ) { .uk-dropbar { @extend .uk-light !optional;} }
 @if ( $dropbar-color-mode == dark ) { .uk-dropbar { @extend .uk-dark !optional;} }
 
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropbar-large {
+    padding-top: $dropbar-large-padding-top;
+    padding-bottom: $dropbar-large-padding-bottom;
+}
+
 
 /* Direction modifier
  ========================================================================== */

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,17 @@ $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;
+
 $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;
@@ -441,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();}
 }
 
 /*
@@ -456,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();}
 }
@@ -477,6 +482,13 @@ $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();}
+}
+
 
 /* Dropdown Nav
  * Adopts `uk-nav`
@@ -586,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(){}
@@ -1835,34 +1837,7 @@
 @mixin hook-navbar-dropdown-nav-header(){}
 @mixin hook-navbar-dropdown-nav-divider(){}
 @mixin hook-navbar-dropbar(){}
-@mixin hook-navbar-misc(){
-
-    /*
-     * Grid Divider
-     */
-
-    .uk-navbar-dropdown-grid > * { position: relative; }
-
-    .uk-navbar-dropdown-grid > :not(.uk-first-column)::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: ($navbar-dropdown-grid-gutter-horizontal * 0.5);
-        border-left: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border;
-    }
-
-    /* Vertical */
-    .uk-navbar-dropdown-grid.uk-grid-stack > .uk-grid-margin::before {
-        content: "";
-        position: absolute;
-        top: -($navbar-dropdown-grid-gutter-vertical * 0.5);
-        left: $navbar-dropdown-grid-gutter-horizontal;
-        right: 0;
-        border-top: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border;
-    }
-
-}
+@mixin hook-navbar-misc(){}
 @mixin hook-inverse-navbar-nav-item(){}
 @mixin hook-inverse-navbar-nav-item-hover(){}
 @mixin hook-inverse-navbar-nav-item-onclick(){}

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

@@ -20,7 +20,6 @@ $navbar-item-padding-horizontal:                 0 !default;
 $navbar-dropdown-margin:                         15px !default;
 $navbar-dropdown-padding:                        25px !default;
 $navbar-dropdown-background:                     $global-background !default;
-$navbar-dropdown-grid-gutter-horizontal:         ($navbar-dropdown-padding * 2) !default;
 
 $navbar-dropdown-nav-subtitle-font-size:         12px !default;
 
@@ -34,9 +33,6 @@ $navbar-dropdown-nav-font-size:                  $global-small-font-size !defaul
 
 $navbar-dropdown-box-shadow:                     0 5px 12px rgba(0,0,0,0.15) !default;
 
-$navbar-dropdown-grid-divider-border-width:      $global-border-width !default;
-$navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-border !default;
-
 
 // Component
 // ========================================================================
@@ -101,8 +97,12 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 
 
 
+// @mixin hook-navbar-dropdown-large(){}
+
 
 
+// @mixin hook-navbar-dropdown-dropbar-large(){}
+
 
 // Dropdown nav
 // ========================================================================
@@ -129,7 +129,7 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 // Miscellaneous
 // ========================================================================
 
-
+// @mixin hook-navbar-misc(){}
 
 
 // Inverse