D-Net

// Name:            Tab

// Description:     Component to create a tabbed navigation

//

// Component:       `uk-tab`

//

// Modifiers:       `uk-tab-bottom`

//                  `uk-tab-left`

//                  `uk-tab-right`

//

// States:          `uk-active`

//                  `uk-disabled`

//

// ========================================================================

// Variables

// ========================================================================

$tab-margin-horizontal:                   20px !default;

$tab-item-padding-horizontal:             10px !default;

$tab-item-padding-vertical:               5px !default;

$tab-item-color:                          $global-muted-color !default;

$tab-item-hover-color:                    $global-color !default;

$tab-item-hover-text-decoration:          none !default;

$tab-item-active-color:                   $global-emphasis-color !default;

$tab-item-disabled-color:                 $global-muted-color !default;

/* ========================================================================

   Component: Tab

 ========================================================================== */

/*

 * 1. Allow items to wrap into the next line

 * 2. Gutter

 * 3. Reset lists

 */

.uk-tab {

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    /* 1 */

    -ms-flex-wrap: wrap;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap;

    /* 2 */

    margin-left: (-$tab-margin-horizontal);

    /* 3 */

    padding: 0;

    list-style: none;

    @if(mixin-exists(hook-tab)) {@include hook-tab();}

}

/*

 * 1. Space is allocated solely based on content dimensions: 0 0 auto

 * 2. Gutter

 * 3. Create position context for dropdowns

 */

.uk-tab > * {

    /* 1 */

    -ms-flex: none;

    -webkit-flex: none;

    flex: none;

    /* 2 */

    padding-left: $tab-margin-horizontal;

    /* 3 */

    position: relative;

}

/* Items

 ========================================================================== */

/*

 * Items must target `a` elements to exclude other elements (e.g. dropdowns)

 * 1. Center text if a width is set

 * 2. Style

 */

.uk-tab > * > a {

    /* 1 */

    display: block;

    text-align: center;

    /* 2 */

    padding: $tab-item-padding-vertical $tab-item-padding-horizontal;

    color: $tab-item-color;

    @if(mixin-exists(hook-tab-item)) {@include hook-tab-item();}

}

/* Hover + Focus */

.uk-tab > * > a:hover,

.uk-tab > * > a:focus {

    color: $tab-item-hover-color;

    text-decoration: $tab-item-hover-text-decoration;

    @if(mixin-exists(hook-tab-item-hover)) {@include hook-tab-item-hover();}

}

/* Active */

.uk-tab > .uk-active > a {

    color: $tab-item-active-color;

    @if(mixin-exists(hook-tab-item-active)) {@include hook-tab-item-active();}

}

/* Disabled */

.uk-tab > .uk-disabled > a {

    color: $tab-item-disabled-color;

    @if(mixin-exists(hook-tab-item-disabled)) {@include hook-tab-item-disabled();}

}

/* Position modifier

 ========================================================================== */

/*

 * Bottom

 */

.uk-tab-bottom {

    @if(mixin-exists(hook-tab-bottom)) {@include hook-tab-bottom();}

}

.uk-tab-bottom > * > a {

    @if(mixin-exists(hook-tab-bottom-item)) {@include hook-tab-bottom-item();}

}

/*

 * Left + Right

 * 1. Reset Gutter

 */

.uk-tab-left,

.uk-tab-right {

    -ms-flex-direction: column;

    -webkit-flex-direction: column;

    flex-direction: column;

    /* 1 */

    margin-left: 0;

}

/* 1 */

.uk-tab-left > *,

.uk-tab-right > * { padding-left: 0; }

.uk-tab-left {

    @if(mixin-exists(hook-tab-left)) {@include hook-tab-left();}

}

.uk-tab-right {

    @if(mixin-exists(hook-tab-right)) {@include hook-tab-right();}

}

.uk-tab-left > * > a {

    text-align: right;

    @if(mixin-exists(hook-tab-left-item)) {@include hook-tab-left-item();}

}

.uk-tab-right > * > a {

    text-align: left;

    @if(mixin-exists(hook-tab-right-item)) {@include hook-tab-right-item();}

}

// Hooks

// ========================================================================

@if(mixin-exists(hook-tab-misc)) {@include hook-tab-misc();}

// @mixin hook-tab(){}

// @mixin hook-tab-item(){}

// @mixin hook-tab-item-hover(){}

// @mixin hook-tab-item-active(){}

// @mixin hook-tab-item-disabled(){}

// @mixin hook-tab-bottom(){}

// @mixin hook-tab-bottom-item(){}

// @mixin hook-tab-left(){}

// @mixin hook-tab-left-item(){}

// @mixin hook-tab-right(){}

// @mixin hook-tab-right-item(){}

// @mixin hook-tab-misc(){}

// Inverse

// ========================================================================

$inverse-tab-item-color:                        $inverse-global-muted-color !default;

$inverse-tab-item-hover-color:                  $inverse-global-color !default;

$inverse-tab-item-active-color:                 $inverse-global-emphasis-color !default;

$inverse-tab-item-disabled-color:               $inverse-global-muted-color !default;

// @mixin hook-inverse-tab(){}

// @mixin hook-inverse-tab-item(){}

// @mixin hook-inverse-tab-item-hover(){}

// @mixin hook-inverse-tab-item-active(){}

// @mixin hook-inverse-tab-item-disabled(){}