%PDF-
%PDF-
Mini Shell
Mini Shell
// 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
//
// Markup:
//
// <!-- uk-navbar -->
// <nav class="uk-navbar">
// <ul class="uk-navbar-nav">
// <li class="uk-active"><a href=""></a></li>
// <li><a href=""></a></li>
// </ul>
// </nav>
//
// ========================================================================
// Variables
// ========================================================================
$navbar-background: #eee !default;
$navbar-color: #444 !default;
$navbar-link-color: #07D !default;
$navbar-link-hover-color: #059 !default;
$navbar-nav-height: 40px !default;
$navbar-nav-line-height: $navbar-nav-height !default;
$navbar-nav-padding-horizontal: 15px !default;
$navbar-nav-color: #444 !default;
$navbar-nav-font-size: 14px !default;
$navbar-nav-font-weight: normal !default;
$navbar-nav-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$navbar-nav-hover-background: #f5f5f5 !default;
$navbar-nav-hover-color: #444 !default;
$navbar-nav-onclick-background: #ddd !default;
$navbar-nav-onclick-color: #444 !default;
$navbar-nav-active-background: #f5f5f5 !default;
$navbar-nav-active-color: #444 !default;
$navbar-nav-subtitle-font-size: 10px !default;
$navbar-nav-subtitle-offset: 2px !default;
$navbar-brand-font-size: 18px !default;
$navbar-brand-color: #444 !default;
$navbar-brand-hover-color: #444 !default;
$navbar-toggle-font-size: 18px !default;
$navbar-toggle-color: #444 !default;
$navbar-toggle-hover-color: #444 !default;
$navbar-toggle-icon: "\f0c9" !default;
$navbar-toggle-icon-alt: "\f002" !default;
/* ========================================================================
Component: Navbar
========================================================================== */
.uk-navbar {
background: $navbar-background;
color: $navbar-color;
@include 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;
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;
@include 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;
@include hook-navbar-nav-hover();
}
/* OnClick */
.uk-navbar-nav > li > a:active {
background-color: $navbar-nav-onclick-background;
color: $navbar-nav-onclick-color;
@include hook-navbar-nav-onclick();
}
/* Active */
.uk-navbar-nav > li.uk-active > a {
background-color: $navbar-nav-active-background;
color: $navbar-nav-active-color;
@include 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 {
box-sizing: border-box;
display: block;
height: $navbar-nav-height;
padding: 0 $navbar-nav-padding-horizontal;
float: left;
@include 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;
text-decoration: none;
}
/*
* 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;
text-decoration: none;
}
/*
* 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
// ========================================================================
@include hook-navbar-misc();
// @mixin hook-navbar(){}
// @mixin hook-navbar-nav(){}
// @mixin hook-navbar-nav-hover(){}
// @mixin hook-navbar-nav-onclick(){}
// @mixin hook-navbar-nav-active(){}
// @mixin hook-navbar-content(){}
// @mixin hook-navbar-misc(){}
Zerion Mini Shell 1.0