uikit 3.14.3-dev.5325d42a0 → 3.14.4-dev.008162cc3

package/src/less/components/nav.less

@@ -46,6 +46,8 @@
 @nav-divider-margin-vertical:                   5px;
 @nav-divider-margin-horizontal:                 0;
 
+@nav-default-font-size:                         @global-font-size;
+@nav-default-line-height:                       @global-line-height;
 @nav-default-item-color:                        @global-muted-color;
 @nav-default-item-hover-color:                  @global-color;
 @nav-default-item-active-color:                 @global-emphasis-color;
@@ -53,12 +55,14 @@
 @nav-default-header-color:                      @global-emphasis-color;
 @nav-default-divider-border-width:              @global-border-width;
 @nav-default-divider-border:                    @global-border;
+@nav-default-sublist-font-size:                 @nav-default-font-size;
+@nav-default-sublist-line-height:               @nav-default-line-height;
 @nav-default-sublist-item-color:                @global-muted-color;
 @nav-default-sublist-item-hover-color:          @global-color;
 @nav-default-sublist-item-active-color:         @global-emphasis-color;
 
-@nav-primary-item-font-size:                    @global-large-font-size;
-@nav-primary-item-line-height:                  @global-line-height;
+@nav-primary-font-size:                         @global-large-font-size;
+@nav-primary-line-height:                       @global-line-height;
 @nav-primary-item-color:                        @global-muted-color;
 @nav-primary-item-hover-color:                  @global-color;
 @nav-primary-item-active-color:                 @global-emphasis-color;
@@ -66,6 +70,8 @@
 @nav-primary-header-color:                      @global-emphasis-color;
 @nav-primary-divider-border-width:              @global-border-width;
 @nav-primary-divider-border:                    @global-border;
+@nav-primary-sublist-font-size:                 @global-medium-font-size;
+@nav-primary-sublist-line-height:               @global-line-height;
 @nav-primary-sublist-item-color:                @global-muted-color;
 @nav-primary-sublist-item-hover-color:          @global-color;
 @nav-primary-sublist-item-active-color:         @global-emphasis-color;
@@ -186,6 +192,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-default {
+    font-size: @nav-default-font-size;
+    line-height: @nav-default-line-height;
     .hook-nav-default();
 }
 
@@ -241,6 +249,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-default .uk-nav-sub {
+    font-size: @nav-default-sublist-font-size;
+    line-height: @nav-default-sublist-line-height;
+}
+
 .uk-nav-default .uk-nav-sub a { color: @nav-default-sublist-item-color; }
 
 .uk-nav-default .uk-nav-sub a:hover { color: @nav-default-sublist-item-hover-color; }
@@ -252,6 +265,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-primary {
+    font-size: @nav-primary-font-size;
+    line-height: @nav-primary-line-height;
     .hook-nav-primary();
 }
 
@@ -260,8 +275,6 @@ ul.uk-nav-sub {
  */
 
 .uk-nav-primary > li > a {
-    font-size: @nav-primary-item-font-size;
-    line-height: @nav-primary-item-line-height;
     color: @nav-primary-item-color;
     .hook-nav-primary-item();
 }
@@ -309,6 +322,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-primary .uk-nav-sub {
+    font-size: @nav-primary-sublist-font-size;
+    line-height: @nav-primary-sublist-line-height;
+}
+
 .uk-nav-primary .uk-nav-sub a { color: @nav-primary-sublist-item-color; }
 
 .uk-nav-primary .uk-nav-sub a:hover { color: @nav-primary-sublist-item-hover-color; }

package/src/less/components/navbar.less

@@ -37,10 +37,12 @@
 // ========================================================================
 
 @navbar-background:                             @global-muted-background;
+@navbar-gap:                                    0px; // Must have a unit because of `calc`
 @navbar-color-mode:                             none;
 
+@navbar-nav-gap:                                0px; // Must have a unit because of `calc`
+
 @navbar-nav-item-height:                        80px;
-@navbar-nav-item-gap:                           0;
 @navbar-nav-item-padding-horizontal:            15px;
 @navbar-nav-item-color:                         @global-muted-color;
 @navbar-nav-item-font-size:                     @global-font-size;
@@ -98,7 +100,6 @@
 
 .uk-navbar {
     display: flex;
-    --uk-navbar-nav-item-gap: @navbar-nav-item-gap;
     /* 1 */
     position: relative;
     .hook-navbar();
@@ -123,17 +124,13 @@
 
 /*
  * 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,14 +172,8 @@
    top: 0;
 }
 
-.uk-navbar-center-left {
-    right: 100%; // Fallback if gap is 0
-    right:  ~'calc(100% + var(--uk-navbar-nav-item-gap))';
-}
-.uk-navbar-center-right {
-    left: 100%; // Fallback if gap is 0
-    left: ~'calc(100% + var(--uk-navbar-nav-item-gap))';
-}
+.uk-navbar-center-left { right:  ~'calc(100% + @{navbar-gap})'; }
+.uk-navbar-center-right { left: ~'calc(100% + @{navbar-gap})'; }
 
 [class*='uk-navbar-center-'] {
     width: max-content;
@@ -199,7 +190,7 @@
 
 .uk-navbar-nav {
     display: flex;
-    gap: var(--uk-navbar-nav-item-gap);
+    gap: @navbar-nav-gap;
     /* 1 */
     margin: 0;
     padding: 0;

package/src/less/components/utility.less

@@ -384,18 +384,27 @@
  ========================================================================== */
 
 /*
- * 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;
     .hook-logo();
 }
 
+/* 3 */
+:where(.uk-logo) {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 /* Hover */
 .uk-logo:hover {
     color: @logo-hover-color;
@@ -404,7 +413,7 @@
     .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/less/theme/nav.less

@@ -7,14 +7,10 @@
 // Variables
 // ========================================================================
 
-@nav-default-subtitle-font-size:                12px;
-
-//
-// New
-//
-
 @nav-default-font-size:                         @global-small-font-size;
 
+@nav-default-subtitle-font-size:                12px;
+
 
 // Sublists
 // ========================================================================
@@ -43,7 +39,7 @@
 // Default style modifier
 // ========================================================================
 
-.hook-nav-default() { font-size: @nav-default-font-size; }
+.hook-nav-default() {}
 
 .hook-nav-default-item() {}
 

package/src/less/theme/navbar.less

@@ -7,7 +7,9 @@
 // Variables
 // ========================================================================
 
-@navbar-nav-item-gap:                           30px;
+@navbar-gap:                                    30px;
+
+@navbar-nav-gap:                                30px;
 @navbar-nav-item-padding-horizontal:            0;
 
 @navbar-nav-item-font-size:                     @global-small-font-size;

package/src/scss/components/nav.scss

@@ -46,6 +46,8 @@ $nav-header-margin-top:                          $global-margin !default;
 $nav-divider-margin-vertical:                    5px !default;
 $nav-divider-margin-horizontal:                  0 !default;
 
+$nav-default-font-size:                          $global-font-size !default;
+$nav-default-line-height:                        $global-line-height !default;
 $nav-default-item-color:                         $global-muted-color !default;
 $nav-default-item-hover-color:                   $global-color !default;
 $nav-default-item-active-color:                  $global-emphasis-color !default;
@@ -53,12 +55,14 @@ $nav-default-subtitle-font-size:                 $global-small-font-size !defaul
 $nav-default-header-color:                       $global-emphasis-color !default;
 $nav-default-divider-border-width:               $global-border-width !default;
 $nav-default-divider-border:                     $global-border !default;
+$nav-default-sublist-font-size:                  $nav-default-font-size !default;
+$nav-default-sublist-line-height:                $nav-default-line-height !default;
 $nav-default-sublist-item-color:                 $global-muted-color !default;
 $nav-default-sublist-item-hover-color:           $global-color !default;
 $nav-default-sublist-item-active-color:          $global-emphasis-color !default;
 
-$nav-primary-item-font-size:                     $global-large-font-size !default;
-$nav-primary-item-line-height:                   $global-line-height !default;
+$nav-primary-font-size:                          $global-large-font-size !default;
+$nav-primary-line-height:                        $global-line-height !default;
 $nav-primary-item-color:                         $global-muted-color !default;
 $nav-primary-item-hover-color:                   $global-color !default;
 $nav-primary-item-active-color:                  $global-emphasis-color !default;
@@ -66,6 +70,8 @@ $nav-primary-subtitle-font-size:                 $global-medium-font-size !defau
 $nav-primary-header-color:                       $global-emphasis-color !default;
 $nav-primary-divider-border-width:               $global-border-width !default;
 $nav-primary-divider-border:                     $global-border !default;
+$nav-primary-sublist-font-size:                  $global-medium-font-size !default;
+$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;
@@ -186,6 +192,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-default {
+    font-size: $nav-default-font-size;
+    line-height: $nav-default-line-height;
     @if(mixin-exists(hook-nav-default)) {@include hook-nav-default();}
 }
 
@@ -241,6 +249,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-default .uk-nav-sub {
+    font-size: $nav-default-sublist-font-size;
+    line-height: $nav-default-sublist-line-height;
+}
+
 .uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; }
 
 .uk-nav-default .uk-nav-sub a:hover { color: $nav-default-sublist-item-hover-color; }
@@ -252,6 +265,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-primary {
+    font-size: $nav-primary-font-size;
+    line-height: $nav-primary-line-height;
     @if(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();}
 }
 
@@ -260,8 +275,6 @@ ul.uk-nav-sub {
  */
 
 .uk-nav-primary > li > a {
-    font-size: $nav-primary-item-font-size;
-    line-height: $nav-primary-item-line-height;
     color: $nav-primary-item-color;
     @if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();}
 }
@@ -309,6 +322,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-primary .uk-nav-sub {
+    font-size: $nav-primary-sublist-font-size;
+    line-height: $nav-primary-sublist-line-height;
+}
+
 .uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; }
 
 .uk-nav-primary .uk-nav-sub a:hover { color: $nav-primary-sublist-item-hover-color; }

package/src/scss/components/navbar.scss

@@ -37,10 +37,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:                            0 !default;
 $navbar-nav-item-padding-horizontal:             15px !default;
 $navbar-nav-item-color:                          $global-muted-color !default;
 $navbar-nav-item-font-size:                      $global-font-size !default;
@@ -98,7 +100,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 +124,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,14 +172,8 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
    top: 0;
 }
 
-.uk-navbar-center-left {
-    right: 100%; // Fallback if gap is 0
-    right:  unquote('calc(100% + var(--uk-navbar-nav-item-gap))');
-}
-.uk-navbar-center-right {
-    left: 100%; // Fallback if gap is 0
-    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;
@@ -199,7 +190,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;

package/src/scss/components/utility.scss

@@ -384,18 +384,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 +413,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

@@ -1707,7 +1707,7 @@
 @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(){}

package/src/scss/theme/nav.scss

@@ -7,14 +7,10 @@
 // Variables
 // ========================================================================
 
-$nav-default-subtitle-font-size:                 12px !default;
-
-//
-// New
-//
-
 $nav-default-font-size:                          $global-small-font-size !default;
 
+$nav-default-subtitle-font-size:                 12px !default;
+
 
 // Sublists
 // ========================================================================
@@ -43,7 +39,7 @@ $nav-default-font-size:                          $global-small-font-size !defaul
 // Default style modifier
 // ========================================================================
 
-
+// @mixin hook-nav-default(){}
 
 // @mixin hook-nav-default-item(){}
 

package/src/scss/theme/navbar.scss

@@ -7,7 +7,9 @@
 // Variables
 // ========================================================================
 
-$navbar-nav-item-gap:                            30px !default;
+$navbar-gap:                                     30px !default;
+
+$navbar-nav-gap:                                 30px !default;
 $navbar-nav-item-padding-horizontal:             0 !default;
 
 $navbar-nav-item-font-size:                      $global-small-font-size !default;

package/src/scss/variables-theme.scss

@@ -690,6 +690,8 @@ $nav-header-text-transform: uppercase !default;
 $nav-header-margin-top: $global-margin !default;
 $nav-divider-margin-vertical: 5px !default;
 $nav-divider-margin-horizontal: 0 !default;
+$nav-default-font-size: $global-small-font-size !default;
+$nav-default-line-height: $global-line-height !default;
 $nav-default-item-color: $global-muted-color !default;
 $nav-default-item-hover-color: $global-color !default;
 $nav-default-item-active-color: $global-emphasis-color !default;
@@ -697,11 +699,13 @@ $nav-default-subtitle-font-size: 12px !default;
 $nav-default-header-color: $global-emphasis-color !default;
 $nav-default-divider-border-width: $global-border-width !default;
 $nav-default-divider-border: $global-border !default;
+$nav-default-sublist-font-size: $nav-default-font-size !default;
+$nav-default-sublist-line-height: $nav-default-line-height !default;
 $nav-default-sublist-item-color: $global-muted-color !default;
 $nav-default-sublist-item-hover-color: $global-color !default;
 $nav-default-sublist-item-active-color: $global-emphasis-color !default;
-$nav-primary-item-font-size: $global-large-font-size !default;
-$nav-primary-item-line-height: $global-line-height !default;
+$nav-primary-font-size: $global-large-font-size !default;
+$nav-primary-line-height: $global-line-height !default;
 $nav-primary-item-color: $global-muted-color !default;
 $nav-primary-item-hover-color: $global-color !default;
 $nav-primary-item-active-color: $global-emphasis-color !default;
@@ -709,6 +713,8 @@ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
 $nav-primary-header-color: $global-emphasis-color !default;
 $nav-primary-divider-border-width: $global-border-width !default;
 $nav-primary-divider-border: $global-border !default;
+$nav-primary-sublist-font-size: $global-medium-font-size !default;
+$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;
@@ -736,9 +742,10 @@ $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-dividers-border: $inverse-global-border !default;
 $navbar-background: $global-muted-background !default;
+$navbar-gap: 30px !default;
 $navbar-color-mode: none !default;
+$navbar-nav-gap: 30px !default;
 $navbar-nav-item-height: 80px !default;
-$navbar-nav-item-gap: 30px !default;
 $navbar-nav-item-padding-horizontal: 0 !default;
 $navbar-nav-item-color: $global-muted-color !default;
 $navbar-nav-item-font-size: $global-small-font-size !default;
@@ -1172,7 +1179,6 @@ $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-default-font-size: $global-small-font-size !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;

package/src/scss/variables.scss

@@ -688,6 +688,8 @@ $nav-header-text-transform: uppercase !default;
 $nav-header-margin-top: $global-margin !default;
 $nav-divider-margin-vertical: 5px !default;
 $nav-divider-margin-horizontal: 0 !default;
+$nav-default-font-size: $global-font-size !default;
+$nav-default-line-height: $global-line-height !default;
 $nav-default-item-color: $global-muted-color !default;
 $nav-default-item-hover-color: $global-color !default;
 $nav-default-item-active-color: $global-emphasis-color !default;
@@ -695,11 +697,13 @@ $nav-default-subtitle-font-size: $global-small-font-size !default;
 $nav-default-header-color: $global-emphasis-color !default;
 $nav-default-divider-border-width: $global-border-width !default;
 $nav-default-divider-border: $global-border !default;
+$nav-default-sublist-font-size: $nav-default-font-size !default;
+$nav-default-sublist-line-height: $nav-default-line-height !default;
 $nav-default-sublist-item-color: $global-muted-color !default;
 $nav-default-sublist-item-hover-color: $global-color !default;
 $nav-default-sublist-item-active-color: $global-emphasis-color !default;
-$nav-primary-item-font-size: $global-large-font-size !default;
-$nav-primary-item-line-height: $global-line-height !default;
+$nav-primary-font-size: $global-large-font-size !default;
+$nav-primary-line-height: $global-line-height !default;
 $nav-primary-item-color: $global-muted-color !default;
 $nav-primary-item-hover-color: $global-color !default;
 $nav-primary-item-active-color: $global-emphasis-color !default;
@@ -707,6 +711,8 @@ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
 $nav-primary-header-color: $global-emphasis-color !default;
 $nav-primary-divider-border-width: $global-border-width !default;
 $nav-primary-divider-border: $global-border !default;
+$nav-primary-sublist-font-size: $global-medium-font-size !default;
+$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;
@@ -734,9 +740,10 @@ $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-dividers-border: $inverse-global-border !default;
 $navbar-background: $global-muted-background !default;
+$navbar-gap: 0px !default;
 $navbar-color-mode: none !default;
+$navbar-nav-gap: 0px !default;
 $navbar-nav-item-height: 80px !default;
-$navbar-nav-item-gap: 0 !default;
 $navbar-nav-item-padding-horizontal: 15px !default;
 $navbar-nav-item-color: $global-muted-color !default;
 $navbar-nav-item-font-size: $global-font-size !default;

package/tests/drop.html

@@ -622,6 +622,12 @@
                             <td>false</td>
                             <td>Use animation when closing the Drop.</td>
                         </tr>
+                        <tr>
+                            <td><code>bg-scroll</code></td>
+                            <td>Boolean</td>
+                            <td>true</td>
+                            <td>Allow background scrolling while drop is opened.</td>
+                        </tr>
                         <tr>
                             <td><code>duration</code></td>
                             <td>Number</td>