Your IP : 216.73.216.170
// Name: Navbar
// Description: Defines styles for the navigation bar
//
// Component: `uk-navbar`
//
// Sub-objects: `uk-navbar-nav`
// `uk-navbar-nav-subtitle`
// `uk-navbar-content`
// `uk-navbar-brand`
// `uk-navbar-toggle`
// `uk-navbar-toggle-alt`
// `uk-navbar-center`
// `uk-navbar-flip`
//
// Modifiers: `uk-navbar-attached`
//
// States: `uk-active`
// `uk-parent`
// `uk-open`
//
// Used by: Dropdown
//
// ========================================================================
// Variables
// ========================================================================
@navbar-background: #eee;
@navbar-color: #444;
@navbar-link-color: #07D;
@navbar-link-hover-color: #059;
@navbar-nav-height: 40px;
@navbar-nav-line-height: @navbar-nav-height;
@navbar-nav-padding-horizontal: 15px;
@navbar-nav-color: #444;
@navbar-nav-font-size: 14px;
@navbar-nav-font-weight: normal;
@navbar-nav-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@navbar-nav-hover-background: #f5f5f5;
@navbar-nav-hover-color: #444;
@navbar-nav-onclick-background: #ddd;
@navbar-nav-onclick-color: #444;
@navbar-nav-active-background: #f5f5f5;
@navbar-nav-active-color: #444;
@navbar-nav-subtitle-font-size: 10px;
@navbar-nav-subtitle-offset: 2px;
@navbar-brand-font-size: 18px;
@navbar-brand-color: #444;
@navbar-brand-hover-color: #444;
@navbar-toggle-font-size: 18px;
@navbar-toggle-color: #444;
@navbar-toggle-hover-color: #444;
@navbar-toggle-icon: "\f0c9";
@navbar-toggle-icon-alt: "\f002";
/* ========================================================================
Component: Navbar
========================================================================== */
.uk-navbar {
background: @navbar-background;
color: @navbar-color;
.hook-navbar;
}
/*
* Micro clearfix
*/
.uk-navbar:before,
.uk-navbar:after {
content: " ";
display: table;
}
.uk-navbar:after { clear: both; }
/* Sub-object: `uk-navbar-nav`
========================================================================== */
.uk-navbar-nav {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
/*
* 1. Create position context for dropdowns
*/
.uk-navbar-nav > li {
float: left;
/* 1 */
position: relative;
}
/*
* 1. Dimensions
* 2. Style
*/
.uk-navbar-nav > li > a {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
/* 1 */
height: @navbar-nav-height;
padding: 0 @navbar-nav-padding-horizontal;
line-height: @navbar-nav-line-height;
/* 2 */
color: @navbar-nav-color;
font-size: @navbar-nav-font-size;
font-family: @navbar-nav-font-family;
font-weight: @navbar-nav-font-weight;
.hook-navbar-nav;
}
/* Appear not as link */
.uk-navbar-nav > li > a[href='#'] { cursor: text; }
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Also apply if dropdown is opened
* 3. Remove default focus style
*/
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a:focus, // 1
.uk-navbar-nav > li.uk-open > a { // 2
background-color: @navbar-nav-hover-background;
color: @navbar-nav-hover-color;
/* 3 */
outline: none;
.hook-navbar-nav-hover;
}
/* OnClick */
.uk-navbar-nav > li > a:active {
background-color: @navbar-nav-onclick-background;
color: @navbar-nav-onclick-color;
.hook-navbar-nav-onclick;
}
/* Active */
.uk-navbar-nav > li.uk-active > a {
background-color: @navbar-nav-active-background;
color: @navbar-nav-active-color;
.hook-navbar-nav-active;
}
/* Sub-objects: `uk-navbar-nav-subtitle`
========================================================================== */
.uk-navbar-nav .uk-navbar-nav-subtitle { line-height: (@navbar-nav-line-height - @navbar-nav-subtitle-font-size - @navbar-nav-subtitle-offset); }
.uk-navbar-nav-subtitle > div {
margin-top: ((@navbar-nav-line-height - @navbar-nav-subtitle-font-size - @navbar-nav-font-size) / -2) + @navbar-nav-subtitle-offset;
font-size: @navbar-nav-subtitle-font-size;
line-height: @navbar-nav-subtitle-font-size + @navbar-nav-subtitle-offset;
}
/* Sub-objects: `uk-navbar-content`, `uk-navbar-brand`, `uk-navbar-toggle`
========================================================================== */
/*
* Imitate navbar items
*/
.uk-navbar-content,
.uk-navbar-brand,
.uk-navbar-toggle {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
height: @navbar-nav-height;
padding: 0 @navbar-nav-padding-horizontal;
float: left;
.hook-navbar-content;
}
/*
* Helper to center all child elements vertically
*/
.uk-navbar-content:before,
.uk-navbar-brand:before,
.uk-navbar-toggle:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
/* Sub-objects: `uk-navbar-content`
========================================================================== */
/*
* Better sibling spacing
*/
.uk-navbar-content + .uk-navbar-content:not(.uk-navbar-center) { padding-left: 0; }
/*
* Link colors
*/
.uk-navbar-content > a:not([class]) { color: @navbar-link-color; }
.uk-navbar-content > a:not([class]):hover { color: @navbar-link-hover-color; }
/* Sub-objects: `uk-navbar-brand`
========================================================================== */
.uk-navbar-brand {
font-size: @navbar-brand-font-size;
color: @navbar-brand-color;
}
/*
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-navbar-brand:hover,
.uk-navbar-brand:focus { // 1
color: @navbar-brand-hover-color;
text-decoration: none;
/* 2 */
outline: none;
}
/* Sub-object: `uk-navbar-toggle`
========================================================================== */
.uk-navbar-toggle {
font-size: @navbar-toggle-font-size;
color: @navbar-toggle-color;
}
/*
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-navbar-toggle:hover,
.uk-navbar-toggle:focus { // 1
color: @navbar-toggle-hover-color;
text-decoration: none;
/* 2 */
outline: none;
}
/*
* 1. Center icon vertically
*/
.uk-navbar-toggle:after {
content: @navbar-toggle-icon;
font-family: FontAwesome;
/* 1 */
vertical-align: middle;
}
.uk-navbar-toggle-alt:after { content: @navbar-toggle-icon-alt; }
/* Sub-object: `uk-navbar-center`
========================================================================== */
/*
* The element with this class needs to be last child in the navbar
* 1. This hack is needed because other float elements shift centered text
*/
.uk-navbar-center {
float: none;
text-align: center;
/* 1 */
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
/* Sub-object: `uk-navbar-flip`
========================================================================== */
.uk-navbar-flip { float: right; }
// Hooks
// ========================================================================
.hook-navbar-misc;
.hook-navbar() {}
.hook-navbar-nav() {}
.hook-navbar-nav-hover() {}
.hook-navbar-nav-onclick() {}
.hook-navbar-nav-active() {}
.hook-navbar-content() {}
.hook-navbar-misc() {}