uikit 3.14.4-dev.e2919bbf7 → 3.14.4-dev.eb440d70c

package/src/scss/components/navbar.scss

@@ -77,13 +77,6 @@ $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-stretch-padding-top:            15px !default;
-$navbar-dropdown-stretch-padding-bottom:         $navbar-dropdown-stretch-padding-top !default;
-$navbar-dropdown-stretch-padding-horizontal:     15px !default;
-$navbar-dropdown-stretch-padding-horizontal-s:   $global-gutter !default;
-$navbar-dropdown-stretch-padding-horizontal-m:   $global-medium-gutter !default;
-$navbar-dropdown-stretch-background:             $navbar-dropdown-background !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;
@@ -91,6 +84,9 @@ $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-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;
@@ -102,7 +98,6 @@ $navbar-dropdown-nav-sublist-item-color:         $global-muted-color !default;
 $navbar-dropdown-nav-sublist-item-hover-color:   $global-color !default;
 $navbar-dropdown-nav-sublist-item-active-color:  $global-emphasis-color !default;
 
-$navbar-dropbar-background:                      $navbar-dropdown-background !default;
 $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 
@@ -398,7 +393,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     /* 3 */
     box-sizing: border-box;
     width: $navbar-dropdown-width;
-    max-width: 100vw;
     /* 4 */
     padding: $navbar-dropdown-padding;
     background: $navbar-dropdown-background;
@@ -452,45 +446,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     padding: $navbar-dropdown-large-padding;
 }
 
-/*
- * Stretch modifier
- * 1. Allow scrolling
- * 2. Style
- */
-
-.uk-navbar-dropdown-stretch {
-    --uk-position-offset: 0;
-    --uk-position-shift-offset: 0;
-    --uk-position-viewport-offset: 0;
-    /* 1 */
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    /* 2 */
-    padding: $navbar-dropdown-stretch-padding-top $navbar-dropdown-stretch-padding-horizontal $navbar-dropdown-stretch-padding-bottom $navbar-dropdown-stretch-padding-horizontal;
-    background: $navbar-dropdown-stretch-background;
-    @if(mixin-exists(hook-navbar-dropdown-stretch)) {@include hook-navbar-dropdown-stretch();}
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-
-    .uk-navbar-dropdown-stretch {
-        padding-left: $navbar-dropdown-stretch-padding-horizontal-s;
-        padding-right: $navbar-dropdown-stretch-padding-horizontal-s;
-    }
-
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-
-    .uk-navbar-dropdown-stretch {
-        padding-left: $navbar-dropdown-stretch-padding-horizontal-m;
-        padding-right: $navbar-dropdown-stretch-padding-horizontal-m;
-    }
-
-}
-
 /*
  * Dropbar modifier
  * 1. Reset dropdown width to prevent to early shifting
@@ -505,6 +460,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     background: transparent;
     /* 3 */
     padding: $navbar-dropdown-dropbar-padding-top $navbar-dropdown-dropbar-padding-horizontal $navbar-dropdown-dropbar-padding-bottom $navbar-dropdown-dropbar-padding-horizontal;
+    --uk-position-offset: 0;
     --uk-position-shift-offset: 0;
     --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin};
     @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
@@ -524,6 +480,10 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 }
 
+.uk-navbar-dropdown-dropbar-large {
+    padding-top: $navbar-dropdown-dropbar-large-padding-top;
+    padding-bottom: $navbar-dropdown-dropbar-large-padding-bottom;
+}
 
 
 /* Dropdown Nav
@@ -596,12 +556,19 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 /* Dropbar
  ========================================================================== */
 
+/*
+ * 1. Reset dropbar
+ * 2. Width
+ */
+
 .uk-navbar-dropbar {
-    position: absolute;
+    /* 1 */
+    display: block !important;
     z-index: $navbar-dropbar-z-index;
+    padding: 0;
+    /* 2 */
     left: 0;
     right: 0;
-    background: $navbar-dropbar-background;
     @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
 }
 
@@ -627,7 +594,6 @@ $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-stretch(){}
 // @mixin hook-navbar-dropdown-dropbar(){}
 // @mixin hook-navbar-dropdown-nav(){}
 // @mixin hook-navbar-dropdown-nav-item(){}

package/src/scss/mixins-theme.scss

@@ -805,11 +805,13 @@
 
 }
 @mixin hook-drop-misc(){}
+@mixin hook-dropbar(){}
+@mixin hook-dropbar-top(){ box-shadow: $dropbar-top-box-shadow; }
+@mixin hook-dropbar-bottom(){ box-shadow: $dropbar-bottom-box-shadow; }
+@mixin hook-dropbar-left(){ box-shadow: $dropbar-left-box-shadow; }
+@mixin hook-dropbar-right(){ box-shadow: $dropbar-right-box-shadow; }
+@mixin hook-dropbar-misc(){}
 @mixin hook-dropdown(){ box-shadow: $dropdown-box-shadow; }
-@mixin hook-dropdown-stretch(){
-    box-shadow: none;
-    background: $dropdown-stretch-background;
-}
 @mixin hook-dropdown-nav(){ font-size: $dropdown-nav-font-size; }
 @mixin hook-dropdown-nav-item(){}
 @mixin hook-dropdown-nav-item-hover(){}
@@ -1339,13 +1341,63 @@
 
     .uk-nav-primary .uk-nav-sub li.uk-active > a { color: $inverse-nav-primary-sublist-item-active-color; }
 
+    //
+    // Secondary
+    //
+
+    .uk-nav-secondary > li > a {
+        color: $inverse-nav-secondary-item-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-item)) {@include hook-inverse-nav-secondary-item();}
+    }
+
+    .uk-nav-secondary > li > a:hover {
+        color: $inverse-nav-secondary-item-hover-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-item-hover)) {@include hook-inverse-nav-secondary-item-hover();}
+    }
+
+    .uk-nav-secondary > li.uk-active > a {
+        color: $inverse-nav-secondary-item-active-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-item-active)) {@include hook-inverse-nav-secondary-item-active();}
+    }
+
+    .uk-nav-secondary .uk-nav-subtitle {
+        color: $inverse-nav-secondary-subtitle-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-subtitle)) {@include hook-inverse-nav-secondary-subtitle();}
+    }
+
+    .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
+        color: $inverse-nav-secondary-subtitle-hover-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-subtitle-hover)) {@include hook-inverse-nav-secondary-subtitle-hover();}
+    }
+
+    .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
+        color: $inverse-nav-secondary-subtitle-active-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-subtitle-active)) {@include hook-inverse-nav-secondary-subtitle-active();}
+    }
+
+    .uk-nav-secondary .uk-nav-header {
+        color: $inverse-nav-secondary-header-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-header)) {@include hook-inverse-nav-secondary-header();}
+    }
+
+    .uk-nav-secondary .uk-nav-divider {
+        border-top-color: $inverse-nav-secondary-divider-border;
+        @if(mixin-exists(hook-inverse-nav-secondary-divider)) {@include hook-inverse-nav-secondary-divider();}
+    }
+
+    .uk-nav-secondary .uk-nav-sub a { color: $inverse-nav-secondary-sublist-item-color; }
+
+    .uk-nav-secondary .uk-nav-sub a:hover { color: $inverse-nav-secondary-sublist-item-hover-color; }
+
+    .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $inverse-nav-secondary-sublist-item-active-color; }
+
     //
     // Dividers
     //
 
     .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
         border-top-color: $inverse-nav-dividers-border;
-        @if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
+        @if(mixin-exists(hook-inverse-nav-dividers)) {@include hook-inverse-nav-dividers();}
     }
 
 }
@@ -1722,6 +1774,17 @@
 @mixin hook-nav-primary-subtitle(){}
 @mixin hook-nav-primary-header(){}
 @mixin hook-nav-primary-divider(){}
+@mixin hook-nav-secondary(){
+    > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {  margin-top: $nav-background-margin-top; }
+}
+@mixin hook-nav-secondary-item(){ padding: $nav-background-item-padding-vertical $nav-background-item-padding-horizontal; }
+@mixin hook-nav-secondary-item-hover(){ background-color: $nav-background-item-hover-background; }
+@mixin hook-nav-secondary-item-active(){ background-color: $nav-background-item-active-background; }
+@mixin hook-nav-secondary-subtitle(){}
+@mixin hook-nav-secondary-subtitle-hover(){}
+@mixin hook-nav-secondary-subtitle-active(){}
+@mixin hook-nav-secondary-header(){}
+@mixin hook-nav-secondary-divider(){}
 @mixin hook-nav-dividers(){}
 @mixin hook-nav-misc(){}
 @mixin hook-inverse-nav-default-item(){}
@@ -1734,6 +1797,15 @@
 @mixin hook-inverse-nav-primary-item-active(){}
 @mixin hook-inverse-nav-primary-header(){}
 @mixin hook-inverse-nav-primary-divider(){}
+@mixin hook-inverse-nav-secondary-item(){}
+@mixin hook-inverse-nav-secondary-item-hover(){ background-color: $inverse-nav-background-item-hover-background; }
+@mixin hook-inverse-nav-secondary-item-active(){ background-color: $inverse-nav-background-item-active-background; }
+@mixin hook-inverse-nav-secondary-subtitle(){}
+@mixin hook-inverse-nav-secondary-subtitle-hover(){}
+@mixin hook-inverse-nav-secondary-subtitle-active(){}
+@mixin hook-inverse-nav-secondary-header(){}
+@mixin hook-inverse-nav-secondary-divider(){}
+@mixin hook-inverse-nav-dividers(){}
 @mixin hook-navbar(){}
 @mixin hook-navbar-container(){}
 @mixin hook-navbar-nav-item(){
@@ -1754,7 +1826,6 @@
 @mixin hook-navbar-transparent(){}
 @mixin hook-navbar-sticky(){}
 @mixin hook-navbar-dropdown(){ box-shadow: $navbar-dropdown-box-shadow; }
-@mixin hook-navbar-dropdown-stretch(){ box-shadow: none; }
 @mixin hook-navbar-dropdown-dropbar(){ box-shadow: none; }
 @mixin hook-navbar-dropdown-nav(){ font-size: $navbar-dropdown-nav-font-size; }
 @mixin hook-navbar-dropdown-nav-item(){}
@@ -1763,7 +1834,7 @@
 @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; }
+@mixin hook-navbar-dropbar(){}
 @mixin hook-navbar-misc(){
 
     /*

package/src/scss/mixins.scss

@@ -580,8 +580,13 @@
 
 }
 @mixin hook-drop-misc(){}
+@mixin hook-dropbar(){}
+@mixin hook-dropbar-top(){}
+@mixin hook-dropbar-bottom(){}
+@mixin hook-dropbar-left(){}
+@mixin hook-dropbar-right(){}
+@mixin hook-dropbar-misc(){}
 @mixin hook-dropdown(){}
-@mixin hook-dropdown-stretch(){}
 @mixin hook-dropdown-nav(){}
 @mixin hook-dropdown-nav-item(){}
 @mixin hook-dropdown-nav-item-hover(){}
@@ -1090,13 +1095,63 @@
 
     .uk-nav-primary .uk-nav-sub li.uk-active > a { color: $inverse-nav-primary-sublist-item-active-color; }
 
+    //
+    // Secondary
+    //
+
+    .uk-nav-secondary > li > a {
+        color: $inverse-nav-secondary-item-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-item)) {@include hook-inverse-nav-secondary-item();}
+    }
+
+    .uk-nav-secondary > li > a:hover {
+        color: $inverse-nav-secondary-item-hover-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-item-hover)) {@include hook-inverse-nav-secondary-item-hover();}
+    }
+
+    .uk-nav-secondary > li.uk-active > a {
+        color: $inverse-nav-secondary-item-active-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-item-active)) {@include hook-inverse-nav-secondary-item-active();}
+    }
+
+    .uk-nav-secondary .uk-nav-subtitle {
+        color: $inverse-nav-secondary-subtitle-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-subtitle)) {@include hook-inverse-nav-secondary-subtitle();}
+    }
+
+    .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
+        color: $inverse-nav-secondary-subtitle-hover-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-subtitle-hover)) {@include hook-inverse-nav-secondary-subtitle-hover();}
+    }
+
+    .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
+        color: $inverse-nav-secondary-subtitle-active-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-subtitle-active)) {@include hook-inverse-nav-secondary-subtitle-active();}
+    }
+
+    .uk-nav-secondary .uk-nav-header {
+        color: $inverse-nav-secondary-header-color;
+        @if(mixin-exists(hook-inverse-nav-secondary-header)) {@include hook-inverse-nav-secondary-header();}
+    }
+
+    .uk-nav-secondary .uk-nav-divider {
+        border-top-color: $inverse-nav-secondary-divider-border;
+        @if(mixin-exists(hook-inverse-nav-secondary-divider)) {@include hook-inverse-nav-secondary-divider();}
+    }
+
+    .uk-nav-secondary .uk-nav-sub a { color: $inverse-nav-secondary-sublist-item-color; }
+
+    .uk-nav-secondary .uk-nav-sub a:hover { color: $inverse-nav-secondary-sublist-item-hover-color; }
+
+    .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $inverse-nav-secondary-sublist-item-active-color; }
+
     //
     // Dividers
     //
 
     .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
         border-top-color: $inverse-nav-dividers-border;
-        @if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
+        @if(mixin-exists(hook-inverse-nav-dividers)) {@include hook-inverse-nav-dividers();}
     }
 
 }
@@ -1449,6 +1504,15 @@
 @mixin hook-nav-primary-subtitle(){}
 @mixin hook-nav-primary-header(){}
 @mixin hook-nav-primary-divider(){}
+@mixin hook-nav-secondary(){}
+@mixin hook-nav-secondary-item(){}
+@mixin hook-nav-secondary-item-hover(){}
+@mixin hook-nav-secondary-item-active(){}
+@mixin hook-nav-secondary-subtitle(){}
+@mixin hook-nav-secondary-subtitle-hover(){}
+@mixin hook-nav-secondary-subtitle-active(){}
+@mixin hook-nav-secondary-header(){}
+@mixin hook-nav-secondary-divider(){}
 @mixin hook-nav-dividers(){}
 @mixin hook-nav-misc(){}
 @mixin hook-inverse-nav-default-item(){}
@@ -1461,6 +1525,15 @@
 @mixin hook-inverse-nav-primary-item-active(){}
 @mixin hook-inverse-nav-primary-header(){}
 @mixin hook-inverse-nav-primary-divider(){}
+@mixin hook-inverse-nav-secondary-item(){}
+@mixin hook-inverse-nav-secondary-item-hover(){}
+@mixin hook-inverse-nav-secondary-item-active(){}
+@mixin hook-inverse-nav-secondary-subtitle(){}
+@mixin hook-inverse-nav-secondary-subtitle-hover(){}
+@mixin hook-inverse-nav-secondary-subtitle-active(){}
+@mixin hook-inverse-nav-secondary-header(){}
+@mixin hook-inverse-nav-secondary-divider(){}
+@mixin hook-inverse-nav-dividers(){}
 @mixin hook-navbar(){}
 @mixin hook-navbar-container(){}
 @mixin hook-navbar-nav-item(){}
@@ -1477,7 +1550,6 @@
 @mixin hook-navbar-transparent(){}
 @mixin hook-navbar-sticky(){}
 @mixin hook-navbar-dropdown(){}
-@mixin hook-navbar-dropdown-stretch(){}
 @mixin hook-navbar-dropdown-dropbar(){}
 @mixin hook-navbar-dropdown-nav(){}
 @mixin hook-navbar-dropdown-nav-item(){}

package/src/scss/theme/_import.scss

@@ -39,6 +39,7 @@
 @import "accordion.scss";
 @import "drop.scss";
 @import "dropdown.scss";
+@import "dropbar.scss";
 @import "modal.scss";
 @import "slider.scss";
 @import "sticky.scss";

package/src/scss/theme/dropbar.scss

@@ -0,0 +1,44 @@
+//
+// Component: Dropbar
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$dropbar-padding-top:                            25px !default;
+$dropbar-background:                             $global-background !default;
+
+//
+// New
+//
+
+$dropbar-top-box-shadow:                         0 12px 7px -6px rgba(0, 0, 0, 0.05) !default;
+$dropbar-bottom-box-shadow:                      0 -12px 7px -6px rgba(0, 0, 0, 0.05) !default;
+$dropbar-left-box-shadow:                        12px 0 7px -6px rgba(0, 0, 0, 0.05) !default;
+$dropbar-right-box-shadow:                       -12px 0 7px -6px rgba(0, 0, 0, 0.05) !default;
+
+
+// Component
+// ========================================================================
+
+// @mixin hook-dropbar(){}
+
+
+// Direction modifier
+// ========================================================================
+
+
+
+
+
+
+
+
+
+
+// Miscellaneous
+// ========================================================================
+
+// @mixin hook-dropbar-misc(){}

package/src/scss/theme/dropdown.scss

@@ -20,8 +20,6 @@ $dropdown-nav-font-size:                         $global-small-font-size !defaul
 
 $dropdown-box-shadow:                            0 5px 12px rgba(0,0,0,0.15) !default;
 
-$dropdown-stretch-background:                    $global-muted-background !default;
-
 
 // Component
 // ========================================================================
@@ -29,12 +27,6 @@ $dropdown-stretch-background:                    $global-muted-background !defau
 
 
 
-// Stretch modifier
-// ========================================================================
-
-
-
-
 // Nav
 // ========================================================================
 

package/src/scss/theme/nav.scss

@@ -11,6 +11,16 @@ $nav-default-font-size:                          $global-small-font-size !defaul
 
 $nav-default-subtitle-font-size:                 12px !default;
 
+//
+// New
+//
+
+$nav-background-margin-top:                      0 !default;
+$nav-background-item-padding-horizontal:         10px !default;
+$nav-background-item-padding-vertical:           10px !default;
+$nav-background-item-hover-background:           $global-muted-background !default;
+$nav-background-item-active-background:          $global-muted-background !default;
+
 
 // Sublists
 // ========================================================================
@@ -66,6 +76,28 @@ $nav-default-subtitle-font-size:                 12px !default;
 // @mixin hook-nav-primary-divider(){}
 
 
+// Secondary style modifier
+// ========================================================================
+
+
+
+
+
+
+
+
+
+// @mixin hook-nav-secondary-subtitle(){}
+
+// @mixin hook-nav-secondary-subtitle-hover(){}
+
+// @mixin hook-nav-secondary-subtitle-active(){}
+
+// @mixin hook-nav-secondary-header(){}
+
+// @mixin hook-nav-secondary-divider(){}
+
+
 // Style modifier
 // ========================================================================
 
@@ -81,6 +113,9 @@ $nav-default-subtitle-font-size:                 12px !default;
 // Inverse
 // ========================================================================
 
+$inverse-nav-background-item-hover-background:   $inverse-global-muted-background !default;
+$inverse-nav-background-item-active-background:  $inverse-global-muted-background !default;
+
 // @mixin hook-inverse-nav-default-item(){}
 // @mixin hook-inverse-nav-default-item-hover(){}
 // @mixin hook-inverse-nav-default-item-active(){}
@@ -93,4 +128,13 @@ $nav-default-subtitle-font-size:                 12px !default;
 // @mixin hook-inverse-nav-primary-header(){}
 // @mixin hook-inverse-nav-primary-divider(){}
 
+// @mixin hook-inverse-nav-secondary-item(){}
+
+
+// @mixin hook-inverse-nav-secondary-subtitle(){}
+// @mixin hook-inverse-nav-secondary-subtitle-hover(){}
+// @mixin hook-inverse-nav-secondary-subtitle-active(){}
+// @mixin hook-inverse-nav-secondary-header(){}
+// @mixin hook-inverse-nav-secondary-divider(){}
+
 // @mixin hook-inverse-nav-dividers(){}

package/src/scss/theme/navbar.scss

@@ -34,8 +34,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-dropbar-box-shadow:                      0 5px 7px rgba(0, 0, 0, 0.05) !default;
-
 $navbar-dropdown-grid-divider-border-width:      $global-border-width !default;
 $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-border !default;
 
@@ -106,8 +104,6 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 
 
 
-
-
 // Dropdown nav
 // ========================================================================
 
@@ -127,7 +123,7 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 // Dropbar
 // ========================================================================
 
-
+// @mixin hook-navbar-dropbar(){}
 
 
 // Miscellaneous

package/src/scss/variables-theme.scss

@@ -369,6 +369,18 @@ $drop-z-index: $global-z-index + 20 !default;
 $drop-margin: $global-margin !default;
 $drop-viewport-margin: 15px !default;
 $drop-width: 300px !default;
+$dropbar-margin: 0 !default;
+$dropbar-z-index: $global-z-index + 20 !default;
+$dropbar-padding-top: 25px !default;
+$dropbar-padding-bottom: $dropbar-padding-top !default;
+$dropbar-padding-horizontal: 15px !default;
+$dropbar-padding-horizontal-s: $global-gutter !default;
+$dropbar-padding-horizontal-m: $global-medium-gutter !default;
+$dropbar-background: $global-background !default;
+$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;
 $dropdown-z-index: $global-z-index + 20 !default;
 $dropdown-margin: $global-small-margin !default;
 $dropdown-viewport-margin: 15px !default;
@@ -376,6 +388,7 @@ $dropdown-min-width: 200px !default;
 $dropdown-padding: 25px !default;
 $dropdown-background: $global-background !default;
 $dropdown-color: $global-color !default;
+$dropdown-color-mode: none !default;
 $dropdown-large-padding: 40px !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
@@ -716,6 +729,23 @@ $nav-primary-sublist-line-height: $global-line-height !default;
 $nav-primary-sublist-item-color: $global-muted-color !default;
 $nav-primary-sublist-item-hover-color: $global-color !default;
 $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
+$nav-secondary-font-size: $global-font-size !default;
+$nav-secondary-line-height: $global-line-height !default;
+$nav-secondary-item-color: $global-emphasis-color !default;
+$nav-secondary-item-hover-color: $global-emphasis-color !default;
+$nav-secondary-item-active-color: $global-emphasis-color !default;
+$nav-secondary-subtitle-font-size: $global-small-font-size !default;
+$nav-secondary-subtitle-color: $global-muted-color !default;
+$nav-secondary-subtitle-hover-color: $global-color !default;
+$nav-secondary-subtitle-active-color: $global-emphasis-color !default;
+$nav-secondary-header-color: $global-emphasis-color !default;
+$nav-secondary-divider-border-width: $global-border-width !default;
+$nav-secondary-divider-border: $global-border !default;
+$nav-secondary-sublist-font-size: $global-small-font-size !default;
+$nav-secondary-sublist-line-height: $global-line-height !default;
+$nav-secondary-sublist-item-color: $global-muted-color !default;
+$nav-secondary-sublist-item-hover-color: $global-color !default;
+$nav-secondary-sublist-item-active-color: $global-emphasis-color !default;
 $nav-dividers-margin-top: 5px !default;
 $nav-dividers-border-width: $global-border-width !default;
 $nav-dividers-border: $global-border !default;
@@ -735,6 +765,17 @@ $inverse-nav-primary-divider-border: $inverse-global-border !default;
 $inverse-nav-primary-sublist-item-color: $inverse-global-muted-color !default;
 $inverse-nav-primary-sublist-item-hover-color: $inverse-global-color !default;
 $inverse-nav-primary-sublist-item-active-color: $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-item-color: $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-item-hover-color: $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-item-active-color: $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-subtitle-color: $inverse-global-muted-color !default;
+$inverse-nav-secondary-subtitle-hover-color: $inverse-global-color !default;
+$inverse-nav-secondary-subtitle-active-color: $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-header-color: $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-divider-border: $inverse-global-border !default;
+$inverse-nav-secondary-sublist-item-color: $inverse-global-muted-color !default;
+$inverse-nav-secondary-sublist-item-hover-color: $inverse-global-color !default;
+$inverse-nav-secondary-sublist-item-active-color: $inverse-global-emphasis-color !default;
 $inverse-nav-dividers-border: $inverse-global-border !default;
 $navbar-background: $global-muted-background !default;
 $navbar-gap: 30px !default;
@@ -767,18 +808,14 @@ $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !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-stretch-padding-top: 15px !default;
-$navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
-$navbar-dropdown-stretch-padding-horizontal: 15px !default;
-$navbar-dropdown-stretch-padding-horizontal-s: $global-gutter !default;
-$navbar-dropdown-stretch-padding-horizontal-m: $global-medium-gutter !default;
-$navbar-dropdown-stretch-background: $navbar-dropdown-background !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-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;
@@ -789,7 +826,6 @@ $navbar-dropdown-nav-divider-border: $global-border !default;
 $navbar-dropdown-nav-sublist-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-sublist-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-sublist-item-active-color: $global-emphasis-color !default;
-$navbar-dropbar-background: $navbar-dropdown-background !default;
 $navbar-dropbar-z-index: $global-z-index - 20 !default;
 $inverse-navbar-nav-item-color: $inverse-global-muted-color !default;
 $inverse-navbar-nav-item-hover-color: $inverse-global-color !default;
@@ -1154,9 +1190,12 @@ $dotnav-item-border: rgba($global-color, 0.4) !default;
 $dotnav-item-hover-border: transparent !default;
 $dotnav-item-onclick-border: transparent !default;
 $dotnav-item-active-border: transparent !default;
+$dropbar-top-box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.05) !default;
+$dropbar-bottom-box-shadow: 0 -12px 7px -6px rgba(0, 0, 0, 0.05) !default;
+$dropbar-left-box-shadow: 12px 0 7px -6px rgba(0, 0, 0, 0.05) !default;
+$dropbar-right-box-shadow: -12px 0 7px -6px rgba(0, 0, 0, 0.05) !default;
 $dropdown-nav-font-size: $global-small-font-size !default;
 $dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
-$dropdown-stretch-background: $global-muted-background !default;
 $form-range-thumb-border-width: $global-border-width !default;
 $form-range-thumb-border: darken($global-border, 10%) !default;
 $form-range-track-border-radius: 500px !default;
@@ -1186,10 +1225,16 @@ $modal-footer-border-width: $global-border-width !default;
 $modal-footer-border: $global-border !default;
 $modal-close-full-padding: $global-margin !default;
 $modal-close-full-background: $modal-dialog-background !default;
+$nav-background-margin-top: 0 !default;
+$nav-background-item-padding-horizontal: 10px !default;
+$nav-background-item-padding-vertical: 10px !default;
+$nav-background-item-hover-background: $global-muted-background !default;
+$nav-background-item-active-background: $global-muted-background !default;
+$inverse-nav-background-item-hover-background: $inverse-global-muted-background !default;
+$inverse-nav-background-item-active-background: $inverse-global-muted-background !default;
 $navbar-nav-item-text-transform: uppercase !default;
 $navbar-dropdown-nav-font-size: $global-small-font-size !default;
 $navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
-$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
 $navbar-dropdown-grid-divider-border-width: $global-border-width !default;
 $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default;
 $placeholder-border-width: $global-border-width !default;