uikit 3.14.4-dev.6a00f7fe6 → 3.14.4-dev.74723a7ef

package/src/scss/components/navbar.scss

@@ -10,6 +10,7 @@
 //                  `uk-navbar-center-left`
 //                  `uk-navbar-center-right`
 //                  `uk-navbar-nav`
+//                  `uk-navbar-parent-icon`
 //                  `uk-navbar-item`
 //                  `uk-navbar-toggle`
 //                  `uk-navbar-subtitle`
@@ -37,10 +38,12 @@
 // ========================================================================
 
 $navbar-background:                              $global-muted-background !default;
+$navbar-gap:                                     0px !default; // Must have a unit because of `calc`
 $navbar-color-mode:                              none !default;
 
+$navbar-nav-gap:                                 0px !default; // Must have a unit because of `calc`
+
 $navbar-nav-item-height:                         80px !default;
-$navbar-nav-item-gap:                            0px !default; // Must have a unit because of `calc`
 $navbar-nav-item-padding-horizontal:             15px !default;
 $navbar-nav-item-color:                          $global-muted-color !default;
 $navbar-nav-item-font-size:                      $global-font-size !default;
@@ -49,7 +52,9 @@ $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-item-padding-horizontal:                 $navbar-nav-item-padding-horizontal !default;
+$navbar-parent-icon-margin-left:                 4px !default;
+
+$navbar-item-padding-horizontal:                 15px !default;
 $navbar-item-color:                              $global-color !default;
 
 $navbar-toggle-color:                            $global-muted-color !default;
@@ -69,9 +74,15 @@ $navbar-dropdown-color-mode:                     none !default;
 $navbar-dropdown-grid-gutter-horizontal:         $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical:           $navbar-dropdown-grid-gutter-horizontal !default;
 
-$navbar-dropdown-dropbar-margin-top:             0px !default;
-$navbar-dropdown-dropbar-margin-bottom:          $navbar-dropdown-dropbar-margin-top !default;
+$navbar-dropdown-large-shift-margin:             0 !default;
+$navbar-dropdown-large-padding:                  40px !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-nav-item-color:                 $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color:           $global-color !default;
@@ -84,7 +95,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;
 
 
@@ -98,7 +108,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar {
     display: flex;
-    --uk-navbar-nav-item-gap: #{$navbar-nav-item-gap};
     /* 1 */
     position: relative;
     @if(mixin-exists(hook-navbar)) {@include hook-navbar();}
@@ -123,17 +132,13 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 /*
  * 1. Align navs and items vertically if they have a different height
- * 2. Note: IE 11 requires an extra `div` which affects the center selector
  */
 
 .uk-navbar-left,
 .uk-navbar-right,
-// 2. [class*='uk-navbar-center'],
-.uk-navbar-center,
-.uk-navbar-center-left > *,
-.uk-navbar-center-right > * {
+[class*='uk-navbar-center'] {
     display: flex;
-    gap: var(--uk-navbar-nav-item-gap);
+    gap: $navbar-gap;
     /* 1 */
     align-items: center;
 }
@@ -175,8 +180,8 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
    top: 0;
 }
 
-.uk-navbar-center-left { right:  unquote('calc(100% + var(--uk-navbar-nav-item-gap))'); }
-.uk-navbar-center-right { left: unquote('calc(100% + var(--uk-navbar-nav-item-gap))'); }
+.uk-navbar-center-left { right:  unquote('calc(100% + #{$navbar-gap})'); }
+.uk-navbar-center-right { left: unquote('calc(100% + #{$navbar-gap})'); }
 
 [class*='uk-navbar-center-'] {
     width: max-content;
@@ -193,7 +198,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar-nav {
     display: flex;
-    gap: var(--uk-navbar-nav-item-gap);
+    gap: $navbar-nav-gap;
     /* 1 */
     margin: 0;
     padding: 0;
@@ -230,7 +235,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     /* 3 */
     box-sizing: border-box;
     min-height: $navbar-nav-item-height;
-    padding: 0 $navbar-nav-item-padding-horizontal;
     /* 4 */
     font-size: $navbar-nav-item-font-size;
     font-family: $navbar-nav-item-font-family;
@@ -243,6 +247,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
  */
 
 .uk-navbar-nav > li > a {
+    padding: 0 $navbar-nav-item-padding-horizontal;
     color: $navbar-nav-item-color;
     @if(mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();}
 }
@@ -271,6 +276,14 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 }
 
 
+/* Parent icon modifier
+ ========================================================================== */
+
+.uk-navbar-parent-icon { margin-left: $navbar-parent-icon-margin-left; }
+
+.uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotate(180deg); }
+
+
 /* Item
  ========================================================================== */
 
@@ -291,6 +304,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
  ========================================================================== */
 
 .uk-navbar-toggle {
+    padding: 0 $navbar-item-padding-horizontal;
     color: $navbar-toggle-color;
     @if(mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();}
 }
@@ -376,7 +390,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;
@@ -387,7 +400,13 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+ .uk-navbar-dropdown > :last-child { margin-bottom: 0; }
 
+// Color Mode
 @if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
 @if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} }
 
@@ -416,42 +435,48 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 5); }
 
 /*
- * Stretch modifier
- * 1. Allow scrolling
+ * Size modifier
  */
 
- .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;
-    @if(mixin-exists(hook-navbar-dropdown-stretch)) {@include hook-navbar-dropdown-stretch();}
+.uk-navbar-dropdown-large {
+    --uk-position-shift-offset: #{$navbar-dropdown-large-shift-margin};
+    padding: $navbar-dropdown-large-padding;
 }
 
 /*
  * Dropbar modifier
  * 1. Reset dropdown width to prevent to early shifting
- * 2. Set position
- * 3. Bottom padding for dropbar
- * 4. Horizontal padding
+ * 2. Reset style
+ * 3. Padding
  */
 
 .uk-navbar-dropdown-dropbar {
     /* 1 */
     width: auto;
     /* 2 */
-    --uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
+    background: transparent;
     /* 3 */
-    margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
-    /* 4 */
-    padding-left: $navbar-dropdown-dropbar-padding-horizontal;
-    padding-right: $navbar-dropdown-dropbar-padding-horizontal;
+    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();}
 }
 
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-s}; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-m}; }
+
+}
+
 
 /* Dropdown Nav
  * Adopts `uk-nav`
@@ -523,12 +548,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();}
 }
 
@@ -554,7 +586,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/components/utility.scss

@@ -147,6 +147,13 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 .uk-overflow-auto > :last-child { margin-bottom: 0; }
 
 
+/* Box Sizing
+ ========================================================================== */
+
+.uk-box-sizing-content { box-sizing: content-box; }
+.uk-box-sizing-border { box-sizing: border-box; }
+
+
 /* Resize
  ========================================================================== */
 
@@ -384,18 +391,27 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
  ========================================================================== */
 
 /*
- * 1. Required for `a`
+ * 1. Style
+ * 2. Required for `a`
+ * 3. Behave like image but can be overridden through flex utility classes
  */
 
 .uk-logo {
+    /* 1 */
     font-size: $logo-font-size;
     font-family: $logo-font-family;
     color: $logo-color;
-    /* 1 */
+    /* 2 */
     text-decoration: none;
     @if(mixin-exists(hook-logo)) {@include hook-logo();}
 }
 
+/* 3 */
+:where(.uk-logo) {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 /* Hover */
 .uk-logo:hover {
     color: $logo-hover-color;
@@ -404,7 +420,7 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     @if(mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
 }
 
-.uk-logo > :where(img, svg, video) { display: inline-block; }
+.uk-logo :where(img, svg, video) { display: block; }
 
 .uk-logo-inverse { display: none; }
 

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(){}
@@ -1269,17 +1271,6 @@
 }
 @mixin hook-inverse-component-nav(){
 
-    //
-    // Parent icon modifier
-    //
-
-    .uk-nav-parent-icon > .uk-parent > a::after {
-        @include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color);
-        @if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
-    }
-
-    .uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); }
-
     //
     // Default
     //
@@ -1350,18 +1341,72 @@
 
     .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();}
     }
 
 }
 @mixin hook-inverse-component-navbar(){
 
+    //
+    // Nav Item
+    //
+
     .uk-navbar-nav > li > a {
         color: $inverse-navbar-nav-item-color;
         @if(mixin-exists(hook-inverse-navbar-nav-item)) {@include hook-inverse-navbar-nav-item();}
@@ -1383,11 +1428,19 @@
         @if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
     }
 
+    //
+    // Item
+    //
+
     .uk-navbar-item {
         color: $inverse-navbar-item-color;
         @if(mixin-exists(hook-inverse-navbar-item)) {@include hook-inverse-navbar-item();}
     }
 
+    //
+    // Toggle
+    //
+
     .uk-navbar-toggle {
         color: $inverse-navbar-toggle-color;
         @if(mixin-exists(hook-inverse-navbar-toggle)) {@include hook-inverse-navbar-toggle();}
@@ -1567,7 +1620,8 @@
         @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
     }
 
-    .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }
@@ -1704,10 +1758,9 @@
 @mixin hook-modal-close-full-hover(){}
 @mixin hook-modal-misc(){}
 @mixin hook-nav-sub(){}
-@mixin hook-nav-parent-icon(){}
 @mixin hook-nav-header(){}
 @mixin hook-nav-divider(){}
-@mixin hook-nav-default(){ font-size: $nav-default-font-size; }
+@mixin hook-nav-default(){}
 @mixin hook-nav-default-item(){}
 @mixin hook-nav-default-item-hover(){}
 @mixin hook-nav-default-item-active(){}
@@ -1721,9 +1774,19 @@
 @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-parent-icon(){}
 @mixin hook-inverse-nav-default-item(){}
 @mixin hook-inverse-nav-default-item-hover(){}
 @mixin hook-inverse-nav-default-item-active(){}
@@ -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,10 +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;
-    background: $navbar-dropdown-stretch-background;
-}
 @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(){}
@@ -1766,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(){
 
     /*