D-Net

// 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-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;

@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;

    line-height: @nav-primary-item-line-height;

    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() {}