uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.7db3661de

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.4bd89c5ca",
+    "version": "3.14.4-dev.7db3661de",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/{backgrounds/navbar-parent-open.svg → components/navbar-parent-icon.svg}

@@ -1,3 +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="11 8.5 6 3.5 1 8.5" />
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
 </svg>

package/src/js/core/height-viewport.js

@@ -45,8 +45,11 @@ export default {
             let minHeight = '';
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
+            const { body, scrollingElement } = document;
             const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
-            const { height: viewportHeight } = offsetViewport(scrollElement);
+            const { height: viewportHeight } = offsetViewport(
+                scrollElement === body ? scrollingElement : scrollElement
+            );
 
             if (this.expand) {
                 minHeight = Math.max(
@@ -56,7 +59,6 @@ export default {
                     0
                 );
             } else {
-                const { body, scrollingElement } = document;
                 const isScrollingElement =
                     scrollingElement === scrollElement || body === scrollElement;
 

package/src/js/core/icon.js

@@ -2,6 +2,9 @@ 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';
 import paginationNext from '../../images/components/pagination-next.svg';
@@ -19,6 +22,7 @@ import {
     $,
     addClass,
     apply,
+    closest,
     css,
     each,
     hasClass,
@@ -35,6 +39,9 @@ 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,
     'pagination-next': paginationNext,
@@ -96,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,10 +29,12 @@ 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';
 export { IconComponent as Marker } from './icon';
+export { IconComponent as NavbarParentIcon } from './icon';
 export { IconComponent as NavbarToggleIcon } from './icon';
 export { IconComponent as OverlayIcon } from './icon';
 export { IconComponent as PaginationNext } 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/core/scroll.js

@@ -1,4 +1,4 @@
-import { $, scrollIntoView, trigger } from 'uikit-util';
+import { $, off, on, scrollIntoView, trigger, within } from 'uikit-util';
 
 export default {
     props: {
@@ -9,6 +9,14 @@ export default {
         offset: 0,
     },
 
+    connected() {
+        registerClick(this);
+    },
+
+    disconnected() {
+        unregisterClick(this);
+    },
+
     methods: {
         async scrollTo(el) {
             el = (el && $(el)) || document.body;
@@ -19,18 +27,37 @@ export default {
             }
         },
     },
+};
 
-    events: {
-        click(e) {
-            if (e.defaultPrevented) {
-                return;
-            }
+const components = new Set();
+function registerClick(cmp) {
+    if (!components.size) {
+        on(document, 'click', clickHandler);
+    }
+
+    components.add(cmp);
+}
 
+function unregisterClick(cmp) {
+    components.delete(cmp);
+
+    if (!components.length) {
+        off(document, 'click', clickHandler);
+    }
+}
+
+function clickHandler(e) {
+    if (e.defaultPrevented) {
+        return;
+    }
+
+    for (const component of components) {
+        if (within(component.$el, e.target)) {
             e.preventDefault();
-            this.scrollTo(getTargetElement(this.$el));
-        },
-    },
-};
+            component.scrollTo(getTargetElement(component.$el));
+        }
+    }
+}
 
 export function getTargetElement(el) {
     return document.getElementById(decodeURIComponent(el.hash).substring(1));

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/js/util/viewport.js

@@ -128,12 +128,10 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, s
 export function offsetViewport(scrollElement) {
     const window = toWindow(scrollElement);
     const {
-        document: { body, documentElement },
+        document: { documentElement },
     } = window;
     let viewportElement =
-        scrollElement === scrollingElement(scrollElement) || scrollElement === body
-            ? window
-            : scrollElement;
+        scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
 
     const { visualViewport } = window;
     if (isWindow(viewportElement) && visualViewport) {

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
@@ -149,21 +142,12 @@ ul.uk-nav-sub {
 .uk-nav-sub a { padding: @nav-sublist-item-padding-vertical 0; }
 
 
-/* Parent icon modifier
+/* Parent icon
  ========================================================================== */
 
-.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
@@ -351,13 +335,18 @@ ul.uk-nav-sub {
 .uk-nav-center .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; }
+/* Parent icon  */
+.uk-nav-center .uk-nav-parent-icon { margin-left: 0; }
 
 
 /* Style modifier
  ========================================================================== */
 
+/*
+ * Divider
+ * Naming is in plural to prevent conflicts with divider sub object.
+ */
+
 .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
     margin-top: @nav-dividers-margin-top;
     padding-top: @nav-dividers-margin-top;
@@ -372,7 +361,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 +384,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 +406,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
     //
@@ -506,12 +482,11 @@ ul.uk-nav-sub {
 
     .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
         border-top-color: @inverse-nav-dividers-border;
-        .hook-nav-dividers();
+        .hook-inverse-nav-dividers();
     }
 
 }
 
-.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,10 +52,7 @@
 @navbar-nav-item-onclick-color:                 @global-emphasis-color;
 @navbar-nav-item-active-color:                  @global-emphasis-color;
 
-@navbar-parent-icon-width:                      12px;
-@navbar-parent-icon-height:                     12px;
 @navbar-parent-icon-margin-left:                4px;
-@navbar-parent-icon-color:                      @navbar-nav-item-color;
 
 @navbar-item-padding-horizontal:                15px;
 @navbar-item-color:                             @global-color;
@@ -89,6 +87,9 @@
 @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;
@@ -104,9 +105,6 @@
 @navbar-dropbar-background:                     @navbar-dropdown-background;
 @navbar-dropbar-z-index:                        @global-z-index - 20;
 
-@internal-navbar-parent-close-image:            "../../images/backgrounds/navbar-parent-close.svg";
-@internal-navbar-parent-open-image:             "../../images/backgrounds/navbar-parent-open.svg";
-
 
 /* ========================================================================
    Component: Navbar
@@ -289,19 +287,9 @@
 /* Parent icon modifier
  ========================================================================== */
 
-.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
-    content: "";
-    width: @navbar-parent-icon-width;
-    height: @navbar-parent-icon-height;
-    margin-left: @navbar-parent-icon-margin-left;
-    .svg-fill(@internal-navbar-parent-close-image, "#000", @navbar-parent-icon-color);
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    .hook-nav-parent-icon();
-}
+.uk-navbar-parent-icon { margin-left: @navbar-parent-icon-margin-left; }
 
-.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after { .svg-fill(@internal-navbar-parent-open-image, "#000", @navbar-parent-icon-color); }
+.uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotate(180deg); }
 
 
 /* Item
@@ -421,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) {}
@@ -512,9 +506,24 @@
     /* 3 */
     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`
@@ -637,7 +646,6 @@
 @inverse-navbar-nav-item-hover-color:          @inverse-global-color;
 @inverse-navbar-nav-item-onclick-color:        @inverse-global-emphasis-color;
 @inverse-navbar-nav-item-active-color:         @inverse-global-emphasis-color;
-@inverse-navbar-parent-icon-color:             @inverse-navbar-nav-item-color;
 @inverse-navbar-item-color:                    @inverse-global-color;
 @inverse-navbar-toggle-color:                  @inverse-global-muted-color;
 @inverse-navbar-toggle-hover-color:            @inverse-global-color;
@@ -669,18 +677,6 @@
         .hook-inverse-navbar-nav-item-active();
     }
 
-    //
-    // Parent icon modifier
-    //
-
-    .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
-        .svg-fill(@internal-navbar-parent-close-image, "#000", @inverse-navbar-parent-icon-color);
-        .hook-inverse-nav-parent-icon();
-    }
-    
-    .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-    .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after { .svg-fill(@internal-navbar-parent-open-image, "#000", @inverse-navbar-parent-icon-color); }
-
     //
     // Item
     //
@@ -711,7 +707,6 @@
 .hook-inverse-navbar-nav-item-hover() {}
 .hook-inverse-navbar-nav-item-onclick() {}
 .hook-inverse-navbar-nav-item-active() {}
-.hook-inverse-nav-parent-icon() {}
 .hook-inverse-navbar-item() {}
 .hook-inverse-navbar-toggle() {}
 .hook-inverse-navbar-toggle-hover() {}

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/less/theme/navbar.less

@@ -68,12 +68,6 @@
 .hook-navbar-nav-item-active() {}
 
 
-// Parent icon modifier
-// ========================================================================
-
-.hook-nav-parent-icon() {}
-
-
 // Item
 // ========================================================================
 
@@ -181,8 +175,6 @@
 .hook-inverse-navbar-nav-item-onclick() {}
 .hook-inverse-navbar-nav-item-active() {}
 
-.hook-inverse-nav-parent-icon() {}
-
 .hook-inverse-navbar-item() {}
 
 .hook-inverse-navbar-toggle() {}