uikit/src/less/components/iconnav.less

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

// Name:            Iconnav
// Description:     Component to create icon navigations
//
// Component:       `uk-iconnav`
//
// Modifier:        `uk-iconnav-vertical`
//
// States:          `uk-active`
//
// ========================================================================


// Variables
// ========================================================================

@iconnav-margin-horizontal:                      @global-small-margin;
@iconnav-margin-vertical:                        @iconnav-margin-horizontal;

@iconnav-item-color:                             @global-muted-color;

@iconnav-item-hover-color:                       @global-color;

@iconnav-item-active-color:                      @global-color;


/* ========================================================================
   Component: Iconnav
 ========================================================================== */

/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */

.uk-iconnav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    margin-left: -@iconnav-margin-horizontal;
    .hook-iconnav;
}

/*
 * Space is allocated based on content dimensions, but shrinks: 0 1 auto
 * 1. Gutter
 */

.uk-iconnav > * {
    /* 1 */
    padding-left: @iconnav-margin-horizontal;
}


/* Items
 ========================================================================== */

/*
 * Items must target `a` elements to exclude other elements (e.g. dropdowns)
 * 1. Prevent gap if child element is `inline-block`, e.g. an icon
 * 2. Style
 */

.uk-iconnav > * > a {
    /* 1 */
    display: block;
    /* 2 */
    color: @iconnav-item-color;
    .hook-iconnav-item;
}

/* Hover + Focus */
.uk-iconnav > * > a:hover,
.uk-iconnav > * > a:focus {
    color: @iconnav-item-hover-color;
    outline: none;
    .hook-iconnav-item-hover;
}

/* Active */
.uk-iconnav > .uk-active > a {
    color: @iconnav-item-active-color;
    .hook-iconnav-item-active;
}


/* Modifier: 'uk-iconnav-vertical'
 ========================================================================== */

/*
 * 1. Change direction
 * 2. Gutter
 */

.uk-iconnav-vertical {
    /* 1 */
    flex-direction: column;
    /* 2 */
    margin-left: 0;
    margin-top: -@iconnav-margin-vertical;
}

/* 2 */
.uk-iconnav-vertical > * {
    padding-left: 0;
    padding-top: @iconnav-margin-vertical;
}


// Hooks
// ========================================================================

.hook-iconnav-misc;

.hook-iconnav() {}
.hook-iconnav-item() {}
.hook-iconnav-item-hover() {}
.hook-iconnav-item-active() {}
.hook-iconnav-misc() {}


// Inverse
// ========================================================================

@inverse-iconnav-item-color:               @inverse-global-muted-color;
@inverse-iconnav-item-hover-color:         @inverse-global-color;
@inverse-iconnav-item-active-color:        @inverse-global-color;

.hook-inverse() {

    .uk-iconnav > * > a {
        color: @inverse-iconnav-item-color;
        .hook-inverse-iconnav-item;
    }

    .uk-iconnav > * > a:hover,
    .uk-iconnav > * > a:focus {
        color: @inverse-iconnav-item-hover-color;
        .hook-inverse-iconnav-item-hover;
    }

    .uk-iconnav > .uk-active > a {
        color: @inverse-iconnav-item-active-color;
        .hook-inverse-iconnav-item-active;
    }

}

.hook-inverse-iconnav-item() {}
.hook-inverse-iconnav-item-hover() {}
.hook-inverse-iconnav-item-active() {}