Your IP : 216.73.216.170
// Name: Subnav
// Description: Defines styles for the sub navigation
//
// Component: `uk-subnav`
//
// Modifiers: `uk-subnav-line`
// `uk-subnav-pill`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@subnav-font-size: 1rem;
@subnav-margin: 10px;
@subnav-color: #07D;
@subnav-hover-color: #059;
@subnav-disabled-color: #999;
@subnav-line-border-height: 10px;
@subnav-line-border: #ddd;
@subnav-line-border-width: 1px;
@subnav-pill-padding-vertical: 3px;
@subnav-pill-padding-horizontal: 9px;
@subnav-pill-hover-background: #eee;
@subnav-pill-hover-color: #444;
@subnav-pill-active-background: #00a8e6;
@subnav-pill-active-color: #fff;
/* ========================================================================
Component: Subnav
========================================================================== */
/*
* 1. Remove default list style
* 2. Remove whitespace between child elements when using `inline-block`
*/
.uk-subnav {
/* 1 */
padding: 0;
list-style: none;
/* 2 */
font-size: 0.001px;
}
/* Items
========================================================================== */
/*
* 1. Create position context for dropdowns
* 2. Reset whitespace hack
*/
.uk-subnav > li {
/* 1 */
position: relative;
/* 2 */
font-size: @subnav-font-size;
vertical-align: top;
}
.uk-subnav > li,
.uk-subnav > li > a,
.uk-subnav > li > span { display: inline-block; }
.uk-subnav > li:nth-child(n+2) { margin-left: @subnav-margin; }
/*
* Items
*/
.uk-subnav > li > a,
.uk-subnav > li > span {
.hook-subnav-item;
}
.uk-subnav > li > a {
color: @subnav-color;
.hook-subnav-link;
}
.uk-subnav > li > a:hover {
color: @subnav-hover-color;
.hook-subnav-link-hover;
}
/*
* Active
*/
.uk-subnav > li.uk-active > a {
.hook-subnav-active;
}
/*
* Disabled
*/
.uk-subnav > li > span {
color: @subnav-disabled-color;
.hook-subnav-disabled;
}
/* Modifier: 'subnav-line'
========================================================================== */
.uk-subnav-line > li:nth-child(n+2):before {
content: "";
display: inline-block;
height: @subnav-line-border-height;
margin-right: @subnav-margin;
border-left: @subnav-line-border-width solid @subnav-line-border;
.hook-subnav-line-divider;
}
/* Modifier: 'subnav-pill'
========================================================================== */
.uk-subnav-pill > li > a,
.uk-subnav-pill > li > span {
padding: @subnav-pill-padding-vertical @subnav-pill-padding-horizontal;
text-decoration: none;
.hook-subnav-pill;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-subnav-pill > li > a:hover,
.uk-subnav-pill > li > a:focus { // 1
background: @subnav-pill-hover-background;
color: @subnav-pill-hover-color;
/* 2 */
outline: none;
.hook-subnav-pill-hover;
}
/*
* Active
* `li` needed for higher specificity to override hover
*/
.uk-subnav-pill > li.uk-active > a {
background: @subnav-pill-active-background;
color: @subnav-pill-active-color;
.hook-subnav-pill-active;
}
// Hooks
// ========================================================================
.hook-subnav-misc;
.hook-subnav-item() {}
.hook-subnav-link() {}
.hook-subnav-link-hover() {}
.hook-subnav-active() {}
.hook-subnav-disabled() {}
.hook-subnav-line-divider() {}
.hook-subnav-pill() {}
.hook-subnav-pill-hover() {}
.hook-subnav-pill-active() {}
.hook-subnav-misc() {}