uikit 3.14.4-dev.cd89debeb → 3.14.4-dev.d472fe41a

package/src/less/components/nav.less

@@ -3,13 +3,13 @@
 //
 // Component:       `uk-nav`
 //
-// Sub-objects:     `uk-nav-header`
+// Sub-objects:     `uk-nav-parent-icon`
+//                  `uk-nav-header`
 //                  `uk-nav-divider`
 //                  `uk-nav-subtitle`
 //                  `uk-nav-sub`
 //
-// Modifiers:       `uk-nav-parent-icon`
-//                  `uk-nav-default`
+// Modifiers:       `uk-nav-default`
 //                  `uk-nav-primary`
 //                  `uk-nav-center`,
 //                  `uk-nav-divider`
@@ -33,10 +33,6 @@
 @nav-sublist-deeper-padding-left:               15px;
 @nav-sublist-item-padding-vertical:             2px;
 
-@nav-parent-icon-width:                         (@global-line-height * 1em);
-@nav-parent-icon-height:                        @nav-parent-icon-width;
-@nav-parent-icon-color:                         @global-color;
-
 @nav-header-padding-vertical:                   @nav-item-padding-vertical;
 @nav-header-padding-horizontal:                 @nav-item-padding-horizontal;
 @nav-header-font-size:                          @global-small-font-size;
@@ -46,6 +42,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 +51,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,17 +66,16 @@
 @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;
 
-@nav-dividers-margin-top:                       0;
+@nav-dividers-margin-top:                       5px;
 @nav-dividers-border-width:                     @global-border-width;
 @nav-dividers-border:                           @global-border;
 
-@internal-nav-parent-close-image:               "../../images/backgrounds/nav-parent-close.svg";
-@internal-nav-parent-open-image:                "../../images/backgrounds/nav-parent-open.svg";
-
 
 /* ========================================================================
    Component: Nav
@@ -146,18 +145,9 @@ ul.uk-nav-sub {
 /* Parent icon modifier
  ========================================================================== */
 
-.uk-nav-parent-icon > .uk-parent > a::after {
-    content: "";
-    width: @nav-parent-icon-width;
-    height: @nav-parent-icon-height;
-    margin-left: auto;
-    .svg-fill(@internal-nav-parent-close-image, "#000", @nav-parent-icon-color);
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    .hook-nav-parent-icon();
-}
+.uk-nav-parent-icon { margin-left: auto; }
 
-.uk-nav-parent-icon > .uk-parent.uk-open > a::after { .svg-fill(@internal-nav-parent-open-image, "#000", @nav-parent-icon-color); }
+.uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon { transform: rotate(180deg); }
 
 
 /* Header
@@ -186,6 +176,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 +233,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 +249,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 +259,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 +306,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; }
@@ -334,7 +336,7 @@ ul.uk-nav-sub {
 .uk-nav-center .uk-nav-sub ul { padding-left: 0; }
 
 /* Parent icon modifier  */
-.uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after { margin-left: 0; }
+.uk-nav-center .uk-nav-parent-icon { margin-left: 0; }
 
 
 /* Style modifier
@@ -354,7 +356,6 @@ ul.uk-nav-sub {
 .hook-nav-misc();
 
 .hook-nav-sub() {}
-.hook-nav-parent-icon() {}
 .hook-nav-header() {}
 .hook-nav-divider() {}
 .hook-nav-default() {}
@@ -378,7 +379,6 @@ ul.uk-nav-sub {
 // Inverse
 // ========================================================================
 
-@inverse-nav-parent-icon-color:                 @inverse-global-color;
 @inverse-nav-default-item-color:                @inverse-global-muted-color;
 @inverse-nav-default-item-hover-color:          @inverse-global-color;
 @inverse-nav-default-item-active-color:         @inverse-global-emphasis-color;
@@ -401,17 +401,6 @@ ul.uk-nav-sub {
 
 .hook-inverse() {
 
-    //
-    // Parent icon modifier
-    //
-
-    .uk-nav-parent-icon > .uk-parent > a::after {
-        .svg-fill(@internal-nav-parent-close-image, "#000", @inverse-nav-parent-icon-color);
-        .hook-inverse-nav-parent-icon();
-    }
-
-    .uk-nav-parent-icon > .uk-parent.uk-open > a::after { .svg-fill(@internal-nav-parent-open-image, "#000", @inverse-nav-parent-icon-color); }
-
     //
     // Default
     //
@@ -493,7 +482,6 @@ ul.uk-nav-sub {
 
 }
 
-.hook-inverse-nav-parent-icon() {}
 .hook-inverse-nav-default-item() {}
 .hook-inverse-nav-default-item-hover() {}
 .hook-inverse-nav-default-item-active() {}

package/src/less/components/navbar.less

@@ -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`
@@ -51,7 +52,9 @@
 @navbar-nav-item-onclick-color:                 @global-emphasis-color;
 @navbar-nav-item-active-color:                  @global-emphasis-color;
 
-@navbar-item-padding-horizontal:                @navbar-nav-item-padding-horizontal;
+@navbar-parent-icon-margin-left:                4px;
+
+@navbar-item-padding-horizontal:                15px;
 @navbar-item-color:                             @global-color;
 
 @navbar-toggle-color:                           @global-muted-color;
@@ -71,9 +74,22 @@
 @navbar-dropdown-grid-gutter-horizontal:        @global-gutter;
 @navbar-dropdown-grid-gutter-vertical:          @navbar-dropdown-grid-gutter-horizontal;
 
-@navbar-dropdown-dropbar-margin-top:            0px;
-@navbar-dropdown-dropbar-margin-bottom:         @navbar-dropdown-dropbar-margin-top;
+@navbar-dropdown-large-shift-margin:            0;
+@navbar-dropdown-large-padding:                 40px;
+
+@navbar-dropdown-stretch-padding-top:           15px;
+@navbar-dropdown-stretch-padding-bottom:        @navbar-dropdown-stretch-padding-top;
+@navbar-dropdown-stretch-padding-horizontal:    15px;
+@navbar-dropdown-stretch-padding-horizontal-s:  @global-gutter;
+@navbar-dropdown-stretch-padding-horizontal-m:  @global-medium-gutter;
+@navbar-dropdown-stretch-background:            @navbar-dropdown-background;
+
+@navbar-dropdown-dropbar-padding-top:           @navbar-dropdown-padding;
+@navbar-dropdown-dropbar-padding-bottom:        @navbar-dropdown-dropbar-padding-top;
 @navbar-dropdown-dropbar-padding-horizontal:    @navbar-nav-item-padding-horizontal;
+@navbar-dropdown-dropbar-viewport-margin:       15px;
+@navbar-dropdown-dropbar-viewport-margin-s:     @global-gutter;
+@navbar-dropdown-dropbar-viewport-margin-m:     @global-medium-gutter;
 
 @navbar-dropdown-nav-item-color:                @global-muted-color;
 @navbar-dropdown-nav-item-hover-color:          @global-color;
@@ -227,7 +243,6 @@
     /* 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;
@@ -240,6 +255,7 @@
  */
 
 .uk-navbar-nav > li > a {
+    padding: 0 @navbar-nav-item-padding-horizontal;
     color: @navbar-nav-item-color;
     .hook-navbar-nav-item();
 }
@@ -268,6 +284,14 @@
 }
 
 
+/* 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
  ========================================================================== */
 
@@ -288,6 +312,7 @@
  ========================================================================== */
 
 .uk-navbar-toggle {
+    padding: 0 @navbar-item-padding-horizontal;
     color: @navbar-toggle-color;
     .hook-navbar-toggle();
 }
@@ -384,7 +409,13 @@
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+ .uk-navbar-dropdown > :last-child { margin-bottom: 0; }
 
+// Color Mode
 .uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
 .uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
 
@@ -412,44 +443,88 @@
 .uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 4); }
 .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 5); }
 
+/*
+ * Size modifier
+ */
+
+.uk-navbar-dropdown-large {
+    --uk-position-shift-offset: @navbar-dropdown-large-shift-margin;
+    padding: @navbar-dropdown-large-padding;
+}
+
 /*
  * Stretch modifier
  * 1. Allow scrolling
+ * 2. Style
  */
 
- .uk-navbar-dropdown-stretch {
+.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;
     .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
- * 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;
-    --uk-position-viewport-offset: 0;
+    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-shift-offset: 0;
+    --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin;
     .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`
@@ -578,6 +653,10 @@
 
 .hook-inverse() {
 
+    //
+    // Nav Item
+    //
+
     .uk-navbar-nav > li > a {
         color: @inverse-navbar-nav-item-color;
         .hook-inverse-navbar-nav-item();
@@ -599,11 +678,19 @@
         .hook-inverse-navbar-nav-item-active();
     }
 
+    //
+    // Item
+    //
+
     .uk-navbar-item {
         color: @inverse-navbar-item-color;
         .hook-inverse-navbar-item();
     }
 
+    //
+    // Toggle
+    //
+
     .uk-navbar-toggle {
         color: @inverse-navbar-toggle-color;
         .hook-inverse-navbar-toggle();

package/src/less/components/utility.less

@@ -147,6 +147,13 @@
 .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 @@
  ========================================================================== */
 
 /*
- * 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 +420,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; }
 
@@ -516,7 +532,8 @@
         .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; }
 
 }

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
 // ========================================================================
@@ -22,12 +18,6 @@
 .hook-nav-sub() {}
 
 
-// Parent icon modifier
-// ========================================================================
-
-.hook-nav-parent-icon() {}
-
-
 // Header
 // ========================================================================
 
@@ -43,7 +33,7 @@
 // Default style modifier
 // ========================================================================
 
-.hook-nav-default() { font-size: @nav-default-font-size; }
+.hook-nav-default() {}
 
 .hook-nav-default-item() {}
 
@@ -91,8 +81,6 @@
 // Inverse
 // ========================================================================
 
-.hook-inverse-nav-parent-icon() {}
-
 .hook-inverse-nav-default-item() {}
 .hook-inverse-nav-default-item-hover() {}
 .hook-inverse-nav-default-item-active() {}

package/src/less/theme/navbar.less

@@ -10,10 +10,13 @@
 @navbar-gap:                                    30px;
 
 @navbar-nav-gap:                                30px;
+
 @navbar-nav-item-padding-horizontal:            0;
 
 @navbar-nav-item-font-size:                     @global-small-font-size;
 
+@navbar-item-padding-horizontal:                0;
+
 @navbar-dropdown-margin:                        15px;
 @navbar-dropdown-padding:                       25px;
 @navbar-dropdown-background:                    @global-background;
@@ -31,8 +34,6 @@
 
 @navbar-dropdown-box-shadow:                    0 5px 12px rgba(0,0,0,0.15);
 
-@navbar-dropdown-stretch-background:            @global-muted-background;
-
 @navbar-dropbar-box-shadow:                     0 5px 7px rgba(0, 0, 0, 0.05);
 
 @navbar-dropdown-grid-divider-border-width:     @global-border-width;
@@ -106,10 +107,7 @@
 
 .hook-navbar-dropdown() { box-shadow: @navbar-dropdown-box-shadow; }
 
-.hook-navbar-dropdown-stretch() {
-    box-shadow: none;
-    background: @navbar-dropdown-stretch-background;
-}
+.hook-navbar-dropdown-stretch() { box-shadow: none; }
 
 .hook-navbar-dropdown-dropbar() { box-shadow: none; }
 

package/src/scss/components/dropdown.scss

@@ -25,6 +25,8 @@ $dropdown-padding:                               15px !default;
 $dropdown-background:                            $global-muted-background !default;
 $dropdown-color:                                 $global-color !default;
 
+$dropdown-large-padding:                         40px !default;
+
 $dropdown-nav-item-color:                        $global-muted-color !default;
 $dropdown-nav-item-hover-color:                  $global-color !default;
 $dropdown-nav-subtitle-font-size:                $global-small-font-size !default;
@@ -68,6 +70,18 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
 /* Show */
 .uk-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropdown > :last-child { margin-bottom: 0; }
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropdown-large { padding: $dropdown-large-padding; }
+
 
 /* Stretch modifier
  ========================================================================== */