uikit 3.14.4-dev.dbd727038 → 3.14.4-dev.e2919bbf7

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.14.4-dev.dbd727038",
+    "version": "3.14.4-dev.e2919bbf7",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/components/nav-parent-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
+</svg>

package/src/js/core/icon.js

@@ -2,6 +2,8 @@ import SVG from './svg';
 import closeIcon from '../../images/components/close-icon.svg';
 import closeLarge from '../../images/components/close-large.svg';
 import marker from '../../images/components/marker.svg';
+import navParentIcon from '../../images/components/nav-parent-icon.svg';
+import navParentIconLarge from '../../images/components/nav-parent-icon-large.svg';
 import navbarParentIcon from '../../images/components/navbar-parent-icon.svg';
 import navbarToggleIcon from '../../images/components/navbar-toggle-icon.svg';
 import overlayIcon from '../../images/components/overlay-icon.svg';
@@ -20,6 +22,7 @@ import {
     $,
     addClass,
     apply,
+    closest,
     css,
     each,
     hasClass,
@@ -36,6 +39,8 @@ const icons = {
     marker,
     'close-icon': closeIcon,
     'close-large': closeLarge,
+    'nav-parent-icon': navParentIcon,
+    'nav-parent-icon-large': navParentIconLarge,
     'navbar-parent-icon': navbarParentIcon,
     'navbar-toggle-icon': navbarToggleIcon,
     'overlay-icon': overlayIcon,
@@ -98,6 +103,15 @@ export const IconComponent = {
     },
 };
 
+export const NavParentIcon = {
+    extends: IconComponent,
+
+    beforeConnect() {
+        const icon = this.$props.icon;
+        this.icon = closest(this.$el, '.uk-nav-primary') ? `${icon}-large` : icon;
+    },
+};
+
 export const Slidenav = {
     extends: IconComponent,
 

package/src/js/core/index.js

@@ -29,6 +29,7 @@ export { default as Video } from './video';
 // Icon components
 export { Close } from './icon';
 export { Spinner } from './icon';
+export { NavParentIcon } from './icon';
 export { Slidenav as SlidenavNext } from './icon';
 export { Slidenav as SlidenavPrevious } from './icon';
 export { Search as SearchIcon } from './icon';

package/src/js/core/leader.js

@@ -1,6 +1,6 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-import { attr, getCssVar, toggleClass, unwrap, wrapInner } from 'uikit-util';
+import { attr, css, toggleClass, unwrap, wrapInner } from 'uikit-util';
 import Resize from '../mixin/resize';
 
 export default {
@@ -19,7 +19,7 @@ export default {
 
     computed: {
         fill({ fill }) {
-            return fill || getCssVar('leader-fill-content');
+            return fill || css(this.$el, '--uk-leader-fill-content');
         },
     },
 

package/src/js/mixin/media.js

@@ -1,6 +1,6 @@
 import {
     createEvent,
-    getCssVar,
+    css,
     isNumeric,
     isString,
     on,
@@ -19,7 +19,7 @@ export default {
     },
 
     connected() {
-        const media = toMedia(this.media);
+        const media = toMedia(this.media, this.$el);
         this.matchMedia = true;
         if (media) {
             this.mediaObj = window.matchMedia(media);
@@ -40,11 +40,10 @@ export default {
     },
 };
 
-function toMedia(value) {
+function toMedia(value, element) {
     if (isString(value)) {
         if (startsWith(value, '@')) {
-            const name = `breakpoint-${value.substr(1)}`;
-            value = toFloat(getCssVar(name));
+            value = toFloat(css(element, `uk-breakpoint-${value.substr(1)}`));
         } else if (isNaN(value)) {
             return value;
         }

package/src/js/mixin/position.js

@@ -2,7 +2,6 @@ import {
     css,
     dimensions,
     flipPosition,
-    getCssVar,
     includes,
     isRtl,
     positionAt,
@@ -77,7 +76,7 @@ export default {
         getPositionOffset(element) {
             return (
                 toPx(
-                    this.offset === false ? getCssVar('position-offset', element) : this.offset,
+                    this.offset === false ? css(element, '--uk-position-offset') : this.offset,
                     this.axis === 'x' ? 'width' : 'height',
                     element
                 ) * (includes(['left', 'top'], this.dir) ? -1 : 1)
@@ -88,14 +87,14 @@ export default {
             return includes(['center', 'justify', 'stretch'], this.align)
                 ? 0
                 : toPx(
-                      getCssVar('position-shift-offset', element),
+                      css(element, '--uk-position-shift-offset'),
                       this.axis === 'y' ? 'width' : 'height',
                       element
                   ) * (includes(['left', 'top'], this.align) ? 1 : -1);
         },
 
         getViewportOffset(element) {
-            return toPx(getCssVar('position-viewport-offset', element));
+            return toPx(css(element, '--uk-position-viewport-offset'));
         },
     },
 };

package/src/js/util/style.js

@@ -8,6 +8,7 @@ import {
     isString,
     isUndefined,
     memoize,
+    startsWith,
     toNodes,
 } from './lang';
 
@@ -62,18 +63,11 @@ export function css(element, property, value, priority = '') {
     return elements[0];
 }
 
-const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-export function getCssVar(name, element = document.documentElement) {
-    return css(element, `--uk-${name}`).replace(propertyRe, '$2');
-}
-
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => vendorPropName(name));
 
-const cssPrefixes = ['webkit', 'moz'];
-
 function vendorPropName(name) {
-    if (name[0] === '-') {
+    if (startsWith(name, '--')) {
         return name;
     }
 
@@ -85,11 +79,8 @@ function vendorPropName(name) {
         return name;
     }
 
-    let i = cssPrefixes.length,
-        prefixedName;
-
-    while (i--) {
-        prefixedName = `-${cssPrefixes[i]}-${name}`;
+    for (const prefix of ['webkit', 'moz']) {
+        const prefixedName = `-${prefix}-${name}`;
         if (prefixedName in style) {
             return prefixedName;
         }

package/src/less/components/dropdown.less

@@ -70,6 +70,12 @@
 /* Show */
 .uk-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropdown > :last-child { margin-bottom: 0; }
+
 
 /* Size modifier
  ========================================================================== */

package/src/less/components/leader.less

@@ -49,7 +49,7 @@
  * Pass fill character to JS
  */
 
-:root { --uk-leader-fill-content: '@{leader-fill-content}'; }
+:root { --uk-leader-fill-content: @leader-fill-content; }
 
 
 // Hooks

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;
@@ -76,13 +72,10 @@
 @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
@@ -152,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
@@ -352,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
@@ -372,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() {}
@@ -396,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;
@@ -419,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
     //
@@ -511,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`
@@ -408,6 +409,12 @@
 /* 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) {}

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
  ========================================================================== */
 
@@ -413,7 +420,7 @@
     .hook-logo-hover();
 }
 
-.uk-logo > :where(img, svg, video) { display: block; }
+.uk-logo :where(img, svg, video) { display: block; }
 
 .uk-logo-inverse { display: none; }
 
@@ -525,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

@@ -18,12 +18,6 @@
 .hook-nav-sub() {}
 
 
-// Parent icon modifier
-// ========================================================================
-
-.hook-nav-parent-icon() {}
-
-
 // Header
 // ========================================================================
 
@@ -87,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/scss/components/dropdown.scss

@@ -70,6 +70,12 @@ $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
  ========================================================================== */

package/src/scss/components/leader.scss

@@ -49,7 +49,7 @@ $leader-fill-margin-left:                        $global-small-gutter !default;
  * Pass fill character to JS
  */
 
-:root { --uk-leader-fill-content: '#{$leader-fill-content}'; }
+:root { --uk-leader-fill-content: #{$leader-fill-content}; }
 
 
 // Hooks

package/src/scss/components/nav.scss

@@ -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-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-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;
@@ -76,13 +72,10 @@ $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-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;
-
 
 /* ========================================================================
    Component: Nav
@@ -152,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;
-    @include svg-fill($internal-nav-parent-close-image, "#000", $nav-parent-icon-color);
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    @if(mixin-exists(hook-nav-parent-icon)) {@include hook-nav-parent-icon();}
-}
+.uk-nav-parent-icon { margin-left: auto; }
 
-.uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include 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
@@ -352,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
@@ -372,7 +356,6 @@ ul.uk-nav-sub {
 @if(mixin-exists(hook-nav-misc)) {@include hook-nav-misc();}
 
 // @mixin hook-nav-sub(){}
-// @mixin hook-nav-parent-icon(){}
 // @mixin hook-nav-header(){}
 // @mixin hook-nav-divider(){}
 // @mixin hook-nav-default(){}
@@ -396,7 +379,6 @@ ul.uk-nav-sub {
 // Inverse
 // ========================================================================
 
-$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;
@@ -419,7 +401,6 @@ $inverse-nav-dividers-border:                    $inverse-global-border !default
 
 
 
-// @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(){}

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`
@@ -408,6 +409,12 @@ $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;} }

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
  ========================================================================== */
 
@@ -413,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: block; }
+.uk-logo :where(img, svg, video) { display: block; }
 
 .uk-logo-inverse { display: none; }
 

package/src/scss/mixins-theme.scss

@@ -1269,17 +1269,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
     //
@@ -1579,7 +1568,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; }
 
 }
@@ -1716,7 +1706,6 @@
 @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(){}
@@ -1735,7 +1724,6 @@
 @mixin hook-nav-primary-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(){}

package/src/scss/mixins.scss

@@ -1020,17 +1020,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
     //
@@ -1330,7 +1319,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; }
 
 }
@@ -1443,7 +1433,6 @@
 @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(){}
@@ -1462,7 +1451,6 @@
 @mixin hook-nav-primary-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(){}