Your IP : 216.73.216.170
// Name: Tab
// Description: Defines styles for a tabbed navigation
//
// Component: `uk-tab`
//
// Modifiers: `uk-tab-flip`
// `uk-tab-center`
// `uk-tab-grid`
// `uk-tab-bottom`
// `uk-tab-left`
// `uk-tab-right`
// `uk-tab-responsive`
//
// States: `uk-active`
// `uk-disabled`
//
// ========================================================================
// Variables
// ========================================================================
@tab-border: #ddd;
@tab-border-width: 1px;
@tab-padding-horizontal: 12px;
@tab-padding-vertical: 8px;
@tab-padding-top: @tab-padding-vertical;
@tab-padding-bottom: @tab-padding-vertical;
@tab-margin-horizontal: 5px;
@tab-margin-vertical: 5px;
@tab-color: #07D;
@tab-hover-border: #f5f5f5;
@tab-hover-background: #f5f5f5;
@tab-hover-color: #059;
@tab-active-border: #ddd;
@tab-active-background: #fff;
@tab-active-color: #444;
@tab-disabled-color: #999;
/* ========================================================================
Component: Tab
========================================================================== */
.uk-tab {
margin: 0;
padding: 0;
list-style: none;
border-bottom: @tab-border-width solid @tab-border;
}
/*
* Micro clearfix on the deepest container
*/
.uk-tab:before,
.uk-tab:after {
content: " ";
display: table;
}
.uk-tab:after { clear: both; }
/*
* Items
* 1. Create position context for dropdowns
*/
.uk-tab > li {
margin-bottom: -@tab-border-width;
float: left;
/* 1 */
position: relative;
}
.uk-tab > li > a {
display: block;
padding: @tab-padding-top @tab-padding-horizontal @tab-padding-bottom @tab-padding-horizontal;
border: @tab-border-width solid transparent;
border-bottom-width: 0;
color: @tab-color;
text-decoration: none;
.hook-tab;
}
.uk-tab > li:nth-child(n+2) > a { margin-left: @tab-margin-horizontal; }
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Also apply if dropdown is opened
* 3. Remove default focus style
*/
.uk-tab > li > a:hover,
.uk-tab > li > a:focus, // 1
.uk-tab > li.uk-open > a { // 2
border-color: @tab-hover-border;
background: @tab-hover-background;
color: @tab-hover-color;
/* 2 */
outline: none;
.hook-tab-hover;
}
.uk-tab > li:not(.uk-active) > a:hover,
.uk-tab > li:not(.uk-active) > a:focus,
.uk-tab > li.uk-open:not(.uk-active) > a {
margin-bottom: @tab-border-width;
padding-bottom: @tab-padding-bottom - @tab-border-width;
}
/* Active */
.uk-tab > li.uk-active > a {
border-color: @tab-active-border;
border-bottom-color: transparent;
background: @tab-active-background;
color: @tab-active-color;
.hook-tab-active;
}
/* Disabled */
.uk-tab > li.uk-disabled > a {
color: @tab-disabled-color;
cursor: auto;
.hook-tab-disabled;
}
.uk-tab > li.uk-disabled > a:hover,
.uk-tab > li.uk-disabled > a:focus,
.uk-tab > li.uk-disabled.uk-active > a {
background: none;
border-color: transparent;
}
/* Modifier: 'tab-flip'
========================================================================== */
.uk-tab-flip > li { float: right; }
.uk-tab-flip > li:nth-child(n+2) > a {
margin-left: 0;
margin-right: @tab-margin-horizontal;
}
/* Modifier: 'tab-responsive'
========================================================================== */
/*
* Hidden by default
*/
.uk-tab-responsive { display: none; }
.uk-tab-responsive > a:before {
content: "\f0c9\00a0";
font-family: FontAwesome;
}
/* Phone landscape and smaller */
@media (max-width: @breakpoint-small-max) {
[data-uk-tab] > li { display: none; }
[data-uk-tab] > li.uk-tab-responsive { display: block; }
[data-uk-tab] > li.uk-tab-responsive > a {
margin-left: 0;
margin-right: 0;
}
}
/* Modifier: 'tab-center'
========================================================================== */
.uk-tab-center { border-bottom: @tab-border-width solid @tab-border; }
.uk-tab-center-bottom {
border-bottom: none;
border-top: @tab-border-width solid @tab-border;
}
.uk-tab-center:before,
.uk-tab-center:after {
content: " ";
display: table;
}
.uk-tab-center:after { clear: both; }
/*
* 1. Using `right` to prevent vertical scrollbar caused by centering if to many tabs
*/
.uk-tab-center .uk-tab {
position: relative;
right: 50%;
border: none;
float: right;
}
.uk-tab-center .uk-tab > li {
position: relative;
right: -50%;
}
.uk-tab-center .uk-tab > li > a { text-align: center; }
/* Modifier: 'tab-bottom'
========================================================================== */
.uk-tab-bottom {
border-top: @tab-border-width solid @tab-border;
border-bottom: none;
}
.uk-tab-bottom > li {
margin-top: -@tab-border-width;
margin-bottom: 0;
}
.uk-tab-bottom > li > a {
padding-top: @tab-padding-bottom;
padding-bottom: @tab-padding-top;
border-bottom-width: @tab-border-width;
border-top-width: 0;
}
.uk-tab-bottom > li:not(.uk-active) > a:hover,
.uk-tab-bottom > li:not(.uk-active) > a:focus,
.uk-tab-bottom > li.uk-open:not(.uk-active) > a {
margin-bottom: 0;
margin-top: @tab-border-width;
padding-bottom: @tab-padding-top;
padding-top: @tab-padding-bottom - @tab-border-width;
}
.uk-tab-bottom > li.uk-active > a {
border-top-color: transparent;
border-bottom-color: @tab-active-border;
}
/* Modifier: 'tab-grid'
========================================================================== */
/*
* 1. Create position context to prevent hidden border because of negative `z-index`
*/
.uk-tab-grid {
margin-left: -@tab-margin-horizontal;
border-bottom: none;
/* 1 */
position: relative;
z-index: 0;
}
.uk-tab-grid:before {
display: block;
position: absolute;
left: @tab-margin-horizontal;
right: 0;
bottom: -@tab-border-width;
border-top: @tab-border-width solid @tab-border;
/* 1 */
z-index: -1;
}
.uk-tab-grid > li:first-child > a { margin-left: @tab-margin-horizontal; }
.uk-tab-grid > li > a { text-align: center; }
/*
* If `uk-tab-bottom`
*/
.uk-tab-grid.uk-tab-bottom { border-top: none; }
.uk-tab-grid.uk-tab-bottom:before {
top: -@tab-border-width;
bottom: auto;
}
/* Modifier: 'tab-left', 'tab-right'
========================================================================== */
/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {
.uk-tab-left,
.uk-tab-right { border-bottom: none; }
.uk-tab-left > li,
.uk-tab-right > li {
margin-bottom: 0;
float: none;
}
.uk-tab-left > li > a,
.uk-tab-right > li > a {
padding-top: @tab-padding-vertical;
padding-bottom: @tab-padding-vertical;
}
.uk-tab-left > li:nth-child(n+2) > a,
.uk-tab-right > li:nth-child(n+2) > a {
margin-left: 0;
margin-top: @tab-margin-vertical;
}
.uk-tab-left > li.uk-active > a,
.uk-tab-right > li.uk-active > a { border-color: @tab-active-border; }
/*
* Modifier: 'tab-left'
*/
.uk-tab-left { border-right: @tab-border-width solid @tab-border; }
.uk-tab-left > li { margin-right: -@tab-border-width; }
.uk-tab-left > li > a {
border-bottom-width: @tab-border-width;
border-right-width: 0;
}
.uk-tab-left > li:not(.uk-active) > a:hover,
.uk-tab-left > li:not(.uk-active) > a:focus {
margin-bottom: 0;
margin-right: @tab-border-width;
padding-bottom: @tab-padding-vertical;
padding-right: @tab-padding-horizontal - @tab-border-width;
}
.uk-tab-left > li.uk-active > a { border-right-color: transparent; }
/*
* Modifier: 'tab-right'
*/
.uk-tab-right { border-left: @tab-border-width solid @tab-border; }
.uk-tab-right > li { margin-left: -@tab-border-width; }
.uk-tab-right > li > a {
border-bottom-width: @tab-border-width;
border-left-width: 0;
}
.uk-tab-right > li:not(.uk-active) > a:hover,
.uk-tab-right > li:not(.uk-active) > a:focus {
margin-bottom: 0;
margin-left: @tab-border-width;
padding-bottom: @tab-padding-vertical;
padding-left: @tab-padding-horizontal - @tab-border-width;
}
.uk-tab-right > li.uk-active > a { border-left-color: transparent; }
}
// Hooks
// ========================================================================
.hook-tab-misc;
.hook-tab() {}
.hook-tab-hover() {}
.hook-tab-active() {}
.hook-tab-disabled() {}
.hook-tab-misc() {}