uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.6002e7046

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,17 +11,21 @@ $nav-default-font-size:                          $global-small-font-size !defaul
 
 $nav-default-subtitle-font-size:                 12px !default;
 
+//
+// New
+//
 
-// Sublists
-// ========================================================================
-
-// @mixin hook-nav-sub(){}
+$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;
 
 
-// Parent icon modifier
+// Sublists
 // ========================================================================
 
-// @mixin hook-nav-parent-icon(){}
+// @mixin hook-nav-sub(){}
 
 
 // Header
@@ -72,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
 // ========================================================================
 
@@ -87,7 +113,8 @@ $nav-default-subtitle-font-size:                 12px !default;
 // Inverse
 // ========================================================================
 
-// @mixin hook-inverse-nav-parent-icon(){}
+$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(){}
@@ -101,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

@@ -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,11 +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-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;
-
 
 // Component
 // ========================================================================
@@ -64,12 +58,6 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 // @mixin hook-navbar-nav-item-active(){}
 
 
-// Parent icon modifier
-// ========================================================================
-
-// @mixin hook-nav-parent-icon(){}
-
-
 // Item
 // ========================================================================
 
@@ -109,9 +97,11 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 
 
 
+// @mixin hook-navbar-dropdown-large(){}
 
 
 
+// @mixin hook-navbar-dropdown-dropbar-large(){}
 
 
 // Dropdown nav
@@ -133,13 +123,13 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 // Dropbar
 // ========================================================================
 
-
+// @mixin hook-navbar-dropbar(){}
 
 
 // Miscellaneous
 // ========================================================================
 
-
+// @mixin hook-navbar-misc(){}
 
 
 // Inverse
@@ -150,8 +140,6 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 // @mixin hook-inverse-navbar-nav-item-onclick(){}
 // @mixin hook-inverse-navbar-nav-item-active(){}
 
-// @mixin hook-inverse-nav-parent-icon(){}
-
 // @mixin hook-inverse-navbar-item(){}
 
 // @mixin hook-inverse-navbar-toggle(){}

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;
@@ -681,9 +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-width: ($global-line-height * 1em) !default;
-$nav-parent-icon-height: $nav-parent-icon-width !default;
-$nav-parent-icon-color: $global-color !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;
@@ -719,12 +730,26 @@ $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-dividers-margin-top: 0 !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;
-$internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
-$internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2213%2010%207%204%201%2010%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
-$inverse-nav-parent-icon-color: $inverse-global-color !default;
 $inverse-nav-default-item-color: $inverse-global-muted-color !default;
 $inverse-nav-default-item-hover-color: $inverse-global-color !default;
 $inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default;
@@ -741,6 +766,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;
@@ -754,10 +790,7 @@ $navbar-nav-item-font-family: $global-font-family !default;
 $navbar-nav-item-hover-color: $global-color !default;
 $navbar-nav-item-onclick-color: $global-emphasis-color !default;
 $navbar-nav-item-active-color: $global-emphasis-color !default;
-$navbar-parent-icon-width: 12px !default;
-$navbar-parent-icon-height: 12px !default;
 $navbar-parent-icon-margin-left: 4px !default;
-$navbar-parent-icon-color: $navbar-nav-item-color !default;
 $navbar-item-padding-horizontal: 0 !default;
 $navbar-item-color: $global-color !default;
 $navbar-toggle-color: $global-muted-color !default;
@@ -772,19 +805,19 @@ $navbar-dropdown-padding: 25px !default;
 $navbar-dropdown-background: $global-background !default;
 $navbar-dropdown-color: $global-color !default;
 $navbar-dropdown-color-mode: none !default;
-$navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
+$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-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-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;
@@ -795,15 +828,11 @@ $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;
-$internal-navbar-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%203.5%206%208.5%2011%203.5%22%2F%3E%0A%3C%2Fsvg%3E" !default;
-$internal-navbar-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2211%208.5%206%203.5%201%208.5%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
 $inverse-navbar-nav-item-color: $inverse-global-muted-color !default;
 $inverse-navbar-nav-item-hover-color: $inverse-global-color !default;
 $inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color !default;
 $inverse-navbar-nav-item-active-color: $inverse-global-emphasis-color !default;
-$inverse-navbar-parent-icon-color: $inverse-navbar-nav-item-color !default;
 $inverse-navbar-item-color: $inverse-global-color !default;
 $inverse-navbar-toggle-color: $inverse-global-muted-color !default;
 $inverse-navbar-toggle-hover-color: $inverse-global-color !default;
@@ -1163,9 +1192,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;
@@ -1195,12 +1227,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;
 $placeholder-border: $global-border !default;
 $progress-border-radius: 500px !default;

package/src/scss/variables.scss

@@ -368,6 +368,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: 15px !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-muted-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;
@@ -375,6 +387,7 @@ $dropdown-min-width: 200px !default;
 $dropdown-padding: 15px !default;
 $dropdown-background: $global-muted-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;
@@ -679,9 +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-width: ($global-line-height * 1em) !default;
-$nav-parent-icon-height: $nav-parent-icon-width !default;
-$nav-parent-icon-color: $global-color !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;
@@ -717,12 +728,26 @@ $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-dividers-margin-top: 0 !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;
-$internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
-$internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2213%2010%207%204%201%2010%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
-$inverse-nav-parent-icon-color: $inverse-global-color !default;
 $inverse-nav-default-item-color: $inverse-global-muted-color !default;
 $inverse-nav-default-item-hover-color: $inverse-global-color !default;
 $inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default;
@@ -739,6 +764,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: 0px !default;
@@ -752,10 +788,7 @@ $navbar-nav-item-font-family: $global-font-family !default;
 $navbar-nav-item-hover-color: $global-color !default;
 $navbar-nav-item-onclick-color: $global-emphasis-color !default;
 $navbar-nav-item-active-color: $global-emphasis-color !default;
-$navbar-parent-icon-width: 12px !default;
-$navbar-parent-icon-height: 12px !default;
 $navbar-parent-icon-margin-left: 4px !default;
-$navbar-parent-icon-color: $navbar-nav-item-color !default;
 $navbar-item-padding-horizontal: 15px !default;
 $navbar-item-color: $global-color !default;
 $navbar-toggle-color: $global-muted-color !default;
@@ -774,15 +807,15 @@ $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-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-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;
@@ -793,15 +826,11 @@ $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;
-$internal-navbar-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%203.5%206%208.5%2011%203.5%22%2F%3E%0A%3C%2Fsvg%3E" !default;
-$internal-navbar-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2211%208.5%206%203.5%201%208.5%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
 $inverse-navbar-nav-item-color: $inverse-global-muted-color !default;
 $inverse-navbar-nav-item-hover-color: $inverse-global-color !default;
 $inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color !default;
 $inverse-navbar-nav-item-active-color: $inverse-global-emphasis-color !default;
-$inverse-navbar-parent-icon-color: $inverse-navbar-nav-item-color !default;
 $inverse-navbar-item-color: $inverse-global-color !default;
 $inverse-navbar-toggle-color: $inverse-global-muted-color !default;
 $inverse-navbar-toggle-hover-color: $inverse-global-color !default;

package/tests/accordion.html

@@ -189,9 +189,9 @@
                     </tr>
                     <tr>
                         <td><code>animation</code></td>
-                        <td>String</td>
+                        <td>Boolean</td>
                         <td>true</td>
-                        <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                        <td>Space-separated names of animations. Comma-separated for animation out.</td>
                     </tr>
                     <tr>
                         <td><code>duration</code></td>

package/tests/alert.html

@@ -98,9 +98,9 @@
                     <tbody>
                         <tr>
                             <td><code>animation</code></td>
-                            <td>Boolean|String</td>
+                            <td>Boolean</td>
                             <td>true</td>
-                            <td>On close fade out or use given animation.</td>
+                            <td>On close fade out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/countdown.html

@@ -114,7 +114,7 @@
             date.setDate(date.getDate() + 7);
             date = date.toISOString();
 
-            for (const el of document.querySelectorAll('[uk-countdown]')) {
+            for (const el of UIkit.util.$$('[uk-countdown]')) {
                 el.setAttribute('date', date);
             }