uikit3-rails 0.1.0

data/assets/stylesheets/components/mixin.less

@@ -0,0 +1,20 @@
+//
+// Component:       Mixin
+// Description:     Defines mixins which are used across all components
+//
+// ========================================================================
+
+
+// SVG
+// ========================================================================
+
+.svg-fill(@src, @color-default, @color-new) {
+
+    @escape-color-default: escape(@color-default);
+    @escape-color-new: escape("@{color-new}");
+
+    @data-uri: data-uri('image/svg+xml;charset=UTF-8', "@{src}");
+    @replace-src: replace("@{data-uri}", "@{escape-color-default}", "@{escape-color-new}", "g");
+
+    background-image: e(@replace-src);
+}

data/assets/stylesheets/components/modal.less

@@ -0,0 +1,403 @@
+// Name:            Modal
+// Description:     Component to create modal dialogs
+//
+// Component:       `uk-modal`
+//
+// Sub-objects:     `uk-modal-page`
+//                  `uk-modal-dialog`
+//                  `uk-modal-header`
+//                  `uk-modal-body`
+//                  `uk-modal-footer`
+//                  `uk-modal-title`
+//                  `uk-modal-close`
+//                  `uk-modal-caption`
+//
+// Adopted:         `uk-modal-close-default`
+//                  `uk-modal-close-outside`
+//                  `uk-modal-close-full`
+//
+// Modifiers:       `uk-modal-container`
+//                  `uk-modal-full`
+//                  `uk-modal-lightbox`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@modal-z-index:                                 @global-z-index + 10;
+@modal-background:                              rgba(0,0,0,0.6);
+
+@modal-padding-horizontal:                      15px;
+@modal-padding-horizontal-s:                    @global-gutter;
+@modal-padding-horizontal-m:                    @global-medium-gutter;
+
+@modal-dialog-margin-vertical:                  50px;
+@modal-dialog-margin-vertical-xs:               15px;
+@modal-dialog-margin-horizontal:                @modal-dialog-margin-vertical-xs;
+@modal-dialog-width:                            600px;
+@modal-dialog-background:                       @global-background;
+
+@modal-container-width:                         1200px;
+
+@modal-body-padding-horizontal:                 @global-gutter;
+@modal-body-padding-vertical:                   @global-gutter;
+
+@modal-header-padding-horizontal:               @global-gutter;
+@modal-header-padding-vertical:                 (@modal-header-padding-horizontal / 2);
+@modal-header-background:                       @global-muted-background;
+
+@modal-footer-padding-horizontal:               @global-gutter;
+@modal-footer-padding-vertical:                 (@modal-footer-padding-horizontal / 2);
+@modal-footer-background:                       @global-muted-background;
+
+@modal-title-font-size:                         @global-xlarge-font-size;
+@modal-title-line-height:                       1.3;
+
+@modal-close-position:                          @global-small-margin;
+@modal-close-padding:                           5px;
+
+@modal-close-outside-position:                  0;
+@modal-close-outside-translate:                 100%;
+@modal-close-outside-color:                     lighten(@global-inverse-color, 20%);
+@modal-close-outside-hover-color:               @global-inverse-color;
+
+@modal-caption-margin-top:                      @global-margin;
+@modal-caption-color:                           #fff;
+
+
+/* ========================================================================
+   Component: Modal
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Allow scrolling for the modal dialog
+ * 4. Horizontal padding
+ * 5. Mask the background page
+ * 6. Fade-in transition
+ */
+
+.uk-modal {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: @modal-z-index;
+    /* 3 */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* 4 */
+    padding-left: @modal-padding-horizontal;
+    padding-right: @modal-padding-horizontal;
+    /* 5 */
+    background: @modal-background;
+    /* 6 */
+    opacity: 0;
+    -webkit-transition: opacity 0.15s linear;
+    transition: opacity 0.15s linear;
+    .hook-modal;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-modal {
+        padding-left: @modal-padding-horizontal-s;
+        padding-right: @modal-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-modal {
+        padding-left: @modal-padding-horizontal-m;
+        padding-right: @modal-padding-horizontal-m;
+    }
+
+}
+
+/*
+ * Open
+ */
+
+.uk-modal.uk-open { opacity: 1; }
+
+
+/* Page
+ ========================================================================== */
+
+/*
+ * Prevent scrollbars
+ */
+
+.uk-modal-page { overflow: hidden; }
+
+
+/* Dialog
+ ========================================================================== */
+
+/*
+ * 1. Create position context for caption, spinner and close button
+ * 2. Dimensions
+ * 3. Style
+ * 4. Slide-in transition
+ */
+
+.uk-modal-dialog {
+    /* 1 */
+    position: relative;
+    /* 2 */
+    box-sizing: border-box;
+    margin: @modal-dialog-margin-vertical auto;
+    width: @modal-dialog-width;
+    max-width: 100%;
+    /* 3 */
+    background: @modal-dialog-background;
+    /* 4 */
+    opacity: 0;
+    -webkit-transform: translateY(-100px);
+    transform: translateY(-100px);
+    -webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out;
+    transition: opacity 0.3s linear, transform 0.3s ease-out;
+    .hook-modal-dialog;
+}
+
+/* Phone portrait and smaller */
+@media (max-width: @breakpoint-xsmall-max) {
+
+    .uk-modal-dialog {
+        margin-top: @modal-dialog-margin-vertical-xs;
+        margin-bottom: @modal-dialog-margin-vertical-xs;
+    }
+
+}
+
+/*
+ * Open
+ */
+
+.uk-open > .uk-modal-dialog {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Container size
+ * Take the same size as the Container component
+ */
+
+.uk-modal-container .uk-modal-dialog { width: @modal-container-width; }
+
+/*
+ * Full size
+ * 1. Remove padding and background from modal
+ * 2. Reset all default declarations from modal dialog
+ */
+
+/* 1 */
+.uk-modal-full {
+    padding: 0;
+    background: none;
+}
+
+/* 2 */
+.uk-modal-full .uk-modal-dialog {
+    margin: 0;
+    width: 100%;
+    max-width: 100%;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    .hook-modal-full;
+}
+
+
+/* Lightbox modifier
+ ========================================================================== */
+
+.uk-modal-lightbox { background: rgba(0,0,0,0.9); }
+
+.uk-modal-lightbox .uk-modal-dialog {
+    margin-left: @modal-dialog-margin-horizontal;
+    margin-right: @modal-dialog-margin-horizontal;
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-modal-body {
+    padding: @modal-body-padding-vertical @modal-body-padding-horizontal;
+    .hook-modal-body;
+}
+
+.uk-modal-header {
+    padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
+    background: @modal-header-background;
+    .hook-modal-header;
+}
+
+.uk-modal-footer {
+    padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
+    background: @modal-footer-background;
+    .hook-modal-footer;
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-modal-body::before,
+.uk-modal-body::after,
+.uk-modal-header::before,
+.uk-modal-header::after,
+.uk-modal-footer::before,
+.uk-modal-footer::after {
+    content: "";
+    display: table;
+}
+
+.uk-modal-body::after,
+.uk-modal-header::after,
+.uk-modal-footer::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-modal-body > :last-child,
+.uk-modal-header > :last-child,
+.uk-modal-footer > :last-child { margin-bottom: 0; }
+
+
+/* Title
+ ========================================================================== */
+
+.uk-modal-title {
+    font-size: @modal-title-font-size;
+    line-height: @modal-title-line-height;
+    .hook-modal-title;
+}
+
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+
+[class*='uk-modal-close-'] {
+    position: absolute;
+    top: @modal-close-position;
+    right: @modal-close-position;
+    padding: @modal-close-padding;
+    .hook-modal-close;
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+[class*='uk-modal-close-']:first-child + * { margin-top: 0; }
+
+/*
+ * Hover
+ */
+
+[class*='uk-modal-close-']:hover {
+    .hook-modal-close-hover;
+}
+
+/*
+ * Default
+ */
+
+.uk-modal-close-default {
+    .hook-modal-close-default;
+}
+
+.uk-modal-close-default:hover {
+    .hook-modal-close-default-hover;
+}
+
+/*
+ * Outside
+ */
+
+.uk-modal-close-outside {
+    top: @modal-close-outside-position;
+    right: @modal-close-outside-position;
+    -webkit-transform: translate(@modal-close-outside-translate, -(@modal-close-outside-translate));
+    transform: translate(@modal-close-outside-translate, -(@modal-close-outside-translate));
+    color: @modal-close-outside-color;
+    .hook-modal-close-outside;
+}
+
+.uk-modal-close-outside:hover {
+    color: @modal-close-outside-hover-color;
+    .hook-modal-close-outside-hover;
+}
+
+/*
+ * Full
+ */
+
+.uk-modal-close-full {
+    .hook-modal-close-full;
+}
+
+.uk-modal-close-full:hover {
+    .hook-modal-close-full-hover;
+}
+
+
+/* Caption
+ ========================================================================== */
+
+.uk-modal-caption {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    margin-top: @modal-caption-margin-top;
+    color: @modal-caption-color;
+    text-align: center;
+    .hook-modal-caption;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-modal-misc;
+
+.hook-modal() {}
+.hook-modal-dialog() {}
+.hook-modal-full() {}
+.hook-modal-header() {}
+.hook-modal-body() {}
+.hook-modal-footer() {}
+.hook-modal-title() {}
+.hook-modal-close() {}
+.hook-modal-close-hover() {}
+.hook-modal-close-default() {}
+.hook-modal-close-default-hover() {}
+.hook-modal-close-outside() {}
+.hook-modal-close-outside-hover() {}
+.hook-modal-close-full() {}
+.hook-modal-close-full-hover() {}
+.hook-modal-caption() {}
+.hook-modal-misc() {}

data/assets/stylesheets/components/nav.less

@@ -0,0 +1,438 @@
+// Name:            Nav
+// Description:     Defines styles for list navigations
+//
+// Component:       `uk-nav`
+//
+// Sub-objects:     `uk-nav-header`
+//                  `uk-nav-divider`
+//                  `uk-nav-sub`
+//
+// Modifiers:       `uk-nav-parent-icon`
+//                  `uk-nav-default`
+//                  `uk-nav-primary`
+//                  `uk-nav-center`
+//
+// States:          `uk-active`
+//                  `uk-parent`
+//                  `uk-open`
+//                  `uk-touch`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@nav-item-padding-vertical:                     5px;
+@nav-item-padding-horizontal:                   0;
+
+@nav-sublist-padding-vertical:                  5px;
+@nav-sublist-padding-left:                      15px;
+@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;
+@nav-header-text-transform:                     uppercase;
+@nav-header-margin-top:                         @global-margin;
+
+@nav-divider-margin-vertical:                   5px;
+@nav-divider-margin-horizontal:                 0;
+
+@nav-default-item-color:                        @global-muted-color;
+@nav-default-item-hover-color:                  @global-color;
+@nav-default-item-active-color:                 @global-emphasis-color;
+@nav-default-header-color:                      @global-emphasis-color;
+@nav-default-divider-border-width:              @global-border-width;
+@nav-default-divider-border:                    @global-border;
+@nav-default-sublist-item-color:                @global-muted-color;
+@nav-default-sublist-item-hover-color:          @global-color;
+
+@nav-primary-item-font-size:                    @global-large-font-size;
+@nav-primary-item-color:                        @global-muted-color;
+@nav-primary-item-hover-color:                  @global-color;
+@nav-primary-item-active-color:                 @global-emphasis-color;
+@nav-primary-header-color:                      @global-emphasis-color;
+@nav-primary-divider-border-width:              @global-border-width;
+@nav-primary-divider-border:                    @global-border;
+@nav-primary-sublist-item-color:                @global-muted-color;
+@nav-primary-sublist-item-hover-color:          @global-color;
+
+@internal-nav-parent-close-image:               "../../images/backgrounds/nav-parent-close.svg";
+@internal-nav-parent-open-image:                "../../images/backgrounds/nav-parent-open.svg";
+
+
+/* ========================================================================
+   Component: Nav
+ ========================================================================== */
+
+/*
+ * Reset
+ * 1. Prepare lists
+ * 2. Prepare links
+ * 3. Remove default focus style
+ */
+
+/* 1 */
+.uk-nav,
+.uk-nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* 2 */
+.uk-nav li > a {
+    display: block;
+    text-decoration: none;
+}
+
+/* 3 */
+.uk-nav li > a:focus { outline: none; }
+
+/*
+ * Items
+ * Must target `a` elements to exclude other elements (e.g. lists)
+ */
+
+.uk-nav > li > a { padding: @nav-item-padding-vertical @nav-item-padding-horizontal; }
+
+
+/* Sublists
+ ========================================================================== */
+
+/*
+ * Level 2
+ * `ul` needed for higher specificity to override padding
+ */
+
+ul.uk-nav-sub {
+    padding: @nav-sublist-padding-vertical 0 @nav-sublist-padding-vertical @nav-sublist-padding-left;
+    .hook-nav-sub;
+}
+
+/*
+ * Level 3 and deeper
+ */
+
+.uk-nav-sub ul { padding-left: @nav-sublist-deeper-padding-left; }
+
+/*
+ * Items
+ */
+
+.uk-nav-sub a { padding: @nav-sublist-item-padding-vertical 0; }
+
+
+/* Parent icon modifier
+ ========================================================================== */
+
+.uk-nav-parent-icon > .uk-parent > a::after {
+    content: "";
+    width: @nav-parent-icon-width;
+    height: @nav-parent-icon-height;
+    float: right;
+    .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 > .uk-parent.uk-open > a::after { .svg-fill(@internal-nav-parent-open-image, "#000", @nav-parent-icon-color); }
+
+
+/* Header
+ ========================================================================== */
+
+.uk-nav-header {
+    padding: @nav-header-padding-vertical @nav-header-padding-horizontal;
+    text-transform: @nav-header-text-transform;
+    font-size: @nav-header-font-size;
+    .hook-nav-header;
+}
+
+.uk-nav-header:not(:first-child) { margin-top: @nav-header-margin-top; }
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-nav-divider {
+    margin: @nav-divider-margin-vertical @nav-divider-margin-horizontal;
+    .hook-nav-divider;
+}
+
+
+/* Default modifier
+ ========================================================================== */
+
+.uk-nav-default {
+    .hook-nav-default;
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-default > li > a {
+    color: @nav-default-item-color;
+    .hook-nav-default-item;
+}
+
+/* Hover + Focus */
+.uk-nav-default > li > a:hover,
+.uk-nav-default > li > a:focus {
+    color: @nav-default-item-hover-color;
+    .hook-nav-default-item-hover;
+}
+
+/* Active */
+.uk-nav-default > li.uk-active > a {
+    color: @nav-default-item-active-color;
+    .hook-nav-default-item-active;
+}
+
+/*
+ * Header
+ */
+
+.uk-nav-default .uk-nav-header {
+    color: @nav-default-header-color;
+    .hook-nav-default-header;
+}
+
+/*
+ * Divider
+ */
+
+.uk-nav-default .uk-nav-divider {
+    border-top: @nav-default-divider-border-width solid @nav-default-divider-border;
+    .hook-nav-default-divider;
+}
+
+/*
+ * Sublists
+ */
+
+.uk-nav-default .uk-nav-sub a { color: @nav-default-sublist-item-color; }
+
+.uk-nav-default .uk-nav-sub a:hover,
+.uk-nav-default .uk-nav-sub a:focus { color: @nav-default-sublist-item-hover-color; }
+
+
+/* Primary modifier
+ ========================================================================== */
+
+.uk-nav-primary {
+    .hook-nav-primary;
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-primary > li > a {
+    font-size: @nav-primary-item-font-size;
+    color: @nav-primary-item-color;
+    .hook-nav-primary-item;
+}
+
+/* Hover + Focus */
+.uk-nav-primary > li > a:hover,
+.uk-nav-primary > li > a:focus {
+    color: @nav-primary-item-hover-color;
+    .hook-nav-primary-item-hover;
+}
+
+/* Active */
+.uk-nav-primary > li.uk-active > a {
+    color: @nav-primary-item-active-color;
+    .hook-nav-primary-item-active;
+}
+
+/*
+ * Header
+ */
+
+.uk-nav-primary .uk-nav-header {
+    color: @nav-primary-header-color;
+    .hook-nav-primary-header;
+}
+
+/*
+ * Divider
+ */
+
+.uk-nav-primary .uk-nav-divider {
+    border-top: @nav-primary-divider-border-width solid @nav-primary-divider-border;
+    .hook-nav-primary-divider;
+}
+
+/*
+ * Sublists
+ */
+
+.uk-nav-primary .uk-nav-sub a { color: @nav-primary-sublist-item-color; }
+
+.uk-nav-primary .uk-nav-sub a:hover,
+.uk-nav-primary .uk-nav-sub a:focus { color: @nav-primary-sublist-item-hover-color; }
+
+
+/* Alignment modifier
+ ========================================================================== */
+
+.uk-nav-center { text-align: center; }
+
+/* Sublists */
+.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 { position: absolute; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-nav-misc;
+
+.hook-nav-sub() {}
+.hook-nav-parent-icon() {}
+.hook-nav-header() {}
+.hook-nav-divider() {}
+.hook-nav-default() {}
+.hook-nav-default-item() {}
+.hook-nav-default-item-hover() {}
+.hook-nav-default-item-active() {}
+.hook-nav-default-header() {}
+.hook-nav-default-divider() {}
+.hook-nav-primary() {}
+.hook-nav-primary-item() {}
+.hook-nav-primary-item-hover() {}
+.hook-nav-primary-item-active() {}
+.hook-nav-primary-header() {}
+.hook-nav-primary-divider() {}
+.hook-nav-misc() {}
+
+
+// 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;
+@inverse-nav-default-header-color:             @inverse-global-emphasis-color;
+@inverse-nav-default-divider-border:           @inverse-global-border;
+@inverse-nav-default-sublist-item-color:       @inverse-global-muted-color;
+@inverse-nav-default-sublist-item-hover-color: @inverse-global-color;
+
+@inverse-nav-primary-item-color:               @inverse-global-muted-color;
+@inverse-nav-primary-item-hover-color:         @inverse-global-color;
+@inverse-nav-primary-item-active-color:        @inverse-global-emphasis-color;
+@inverse-nav-primary-header-color:             @inverse-global-emphasis-color;
+@inverse-nav-primary-divider-border:           @inverse-global-border;
+@inverse-nav-primary-sublist-item-color:       @inverse-global-muted-color;
+@inverse-nav-primary-sublist-item-hover-color: @inverse-global-color;
+
+.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
+    //
+
+    .uk-nav-default > li > a {
+        color: @inverse-nav-default-item-color;
+        .hook-inverse-nav-default-item;
+    }
+
+    .uk-nav-default > li > a:hover,
+    .uk-nav-default > li > a:focus {
+        color: @inverse-nav-default-item-hover-color;
+        .hook-inverse-nav-default-item-hover;
+    }
+
+    .uk-nav-default > li.uk-active > a {
+        color: @inverse-nav-default-item-active-color;
+        .hook-inverse-nav-default-item-active;
+    }
+
+    .uk-nav-default .uk-nav-header {
+        color: @inverse-nav-default-header-color;
+        .hook-inverse-nav-default-header;
+    }
+
+    .uk-nav-default .uk-nav-divider {
+        border-top-color: @inverse-nav-default-divider-border;
+        .hook-inverse-nav-default-divider;
+    }
+
+    .uk-nav-default .uk-nav-sub a { color: @inverse-nav-default-sublist-item-color; }
+
+    .uk-nav-default .uk-nav-sub a:hover,
+    .uk-nav-default .uk-nav-sub a:focus { color: @inverse-nav-default-sublist-item-hover-color; }
+
+    //
+    // Primary
+    //
+
+    .uk-nav-primary > li > a {
+        color: @inverse-nav-primary-item-color;
+        .hook-inverse-nav-primary-item;
+    }
+
+    .uk-nav-primary > li > a:hover,
+    .uk-nav-primary > li > a:focus {
+        color: @inverse-nav-primary-item-hover-color;
+        .hook-inverse-nav-primary-item-hover;
+    }
+
+    .uk-nav-primary > li.uk-active > a {
+        color: @inverse-nav-primary-item-active-color;
+        .hook-inverse-nav-primary-item-active;
+    }
+
+    .uk-nav-primary .uk-nav-header {
+        color: @inverse-nav-primary-header-color;
+        .hook-inverse-nav-primary-header;
+    }
+
+    .uk-nav-primary .uk-nav-divider {
+        border-top-color: @inverse-nav-primary-divider-border;
+        .hook-inverse-nav-primary-divider;
+    }
+
+    .uk-nav-primary .uk-nav-sub a { color: @inverse-nav-primary-sublist-item-color; }
+
+    .uk-nav-primary .uk-nav-sub a:hover,
+    .uk-nav-primary .uk-nav-sub a:focus { color: @inverse-nav-primary-sublist-item-hover-color; }
+
+}
+
+.hook-inverse-nav-parent-icon() {}
+.hook-inverse-nav-default-item() {}
+.hook-inverse-nav-default-item-hover() {}
+.hook-inverse-nav-default-item-active() {}
+.hook-inverse-nav-default-header() {}
+.hook-inverse-nav-default-divider() {}
+.hook-inverse-nav-primary-item() {}
+.hook-inverse-nav-primary-item-hover() {}
+.hook-inverse-nav-primary-item-active() {}
+.hook-inverse-nav-primary-header() {}
+.hook-inverse-nav-primary-divider() {}