mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
357 lines
12 KiB
357 lines
12 KiB
// Name: Nav
|
|
// Description: Defines styles for list navigations
|
|
//
|
|
// Component: `uk-nav`
|
|
//
|
|
// Sub-objects: `uk-nav-header`
|
|
// `uk-nav-divider`
|
|
// `uk-nav-sub`
|
|
//
|
|
// Modifiers: `uk-nav-parent-icon`
|
|
// `uk-nav-default`
|
|
// `uk-nav-primary`
|
|
// `uk-nav-center`
|
|
//
|
|
// States: `uk-active`
|
|
// `uk-parent`
|
|
// `uk-open`
|
|
// `uk-touch`
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
$nav-item-padding-vertical: 5px !default;
|
|
$nav-item-padding-horizontal: 0 !default;
|
|
|
|
$nav-sublist-padding-vertical: 5px !default;
|
|
$nav-sublist-padding-left: 15px !default;
|
|
$nav-sublist-deeper-padding-left: 15px !default;
|
|
$nav-sublist-item-padding-vertical: 2px !default;
|
|
|
|
$nav-parent-icon-width: ($global-line-height * 1em) !default;
|
|
$nav-parent-icon-height: $nav-parent-icon-width !default;
|
|
$nav-parent-icon-color: $global-color !default;
|
|
|
|
$nav-header-padding-vertical: $nav-item-padding-vertical !default;
|
|
$nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
|
|
$nav-header-font-size: $global-small-font-size !default;
|
|
$nav-header-text-transform: uppercase !default;
|
|
$nav-header-margin-top: $global-margin !default;
|
|
|
|
$nav-divider-margin-vertical: 5px !default;
|
|
$nav-divider-margin-horizontal: 0 !default;
|
|
|
|
$nav-default-item-color: $global-muted-color !default;
|
|
$nav-default-item-hover-color: $global-color !default;
|
|
$nav-default-item-active-color: $global-emphasis-color !default;
|
|
$nav-default-header-color: $global-emphasis-color !default;
|
|
$nav-default-divider-border-width: $global-border-width !default;
|
|
$nav-default-divider-border: $global-border !default;
|
|
$nav-default-sublist-item-color: $global-muted-color !default;
|
|
$nav-default-sublist-item-hover-color: $global-color !default;
|
|
|
|
$nav-primary-item-font-size: $global-large-font-size !default;
|
|
$nav-primary-item-line-height: $global-line-height !default;
|
|
$nav-primary-item-color: $global-muted-color !default;
|
|
$nav-primary-item-hover-color: $global-color !default;
|
|
$nav-primary-item-active-color: $global-emphasis-color !default;
|
|
$nav-primary-header-color: $global-emphasis-color !default;
|
|
$nav-primary-divider-border-width: $global-border-width !default;
|
|
$nav-primary-divider-border: $global-border !default;
|
|
$nav-primary-sublist-item-color: $global-muted-color !default;
|
|
$nav-primary-sublist-item-hover-color: $global-color !default;
|
|
|
|
$internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
$internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Nav
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Reset
|
|
* 1. Prepare lists
|
|
* 2. Prepare links
|
|
* 3. Remove default focus style
|
|
*/
|
|
|
|
/* 1 */
|
|
.uk-nav,
|
|
.uk-nav ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
/* 2 */
|
|
.uk-nav li > a {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 3 */
|
|
.uk-nav li > a:focus { outline: none; }
|
|
|
|
/*
|
|
* Items
|
|
* Must target `a` elements to exclude other elements (e.g. lists)
|
|
*/
|
|
|
|
.uk-nav > li > a { padding: $nav-item-padding-vertical $nav-item-padding-horizontal; }
|
|
|
|
|
|
/* Sublists
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Level 2
|
|
* `ul` needed for higher specificity to override padding
|
|
*/
|
|
|
|
ul.uk-nav-sub {
|
|
padding: $nav-sublist-padding-vertical 0 $nav-sublist-padding-vertical $nav-sublist-padding-left;
|
|
@if(mixin-exists(hook-nav-sub)) {@include hook-nav-sub();}
|
|
}
|
|
|
|
/*
|
|
* Level 3 and deeper
|
|
*/
|
|
|
|
.uk-nav-sub ul { padding-left: $nav-sublist-deeper-padding-left; }
|
|
|
|
/*
|
|
* Items
|
|
*/
|
|
|
|
.uk-nav-sub a { padding: $nav-sublist-item-padding-vertical 0; }
|
|
|
|
|
|
/* Parent icon modifier
|
|
========================================================================== */
|
|
|
|
.uk-nav-parent-icon > .uk-parent > a::after {
|
|
content: "";
|
|
width: $nav-parent-icon-width;
|
|
height: $nav-parent-icon-height;
|
|
float: right;
|
|
@include svg-fill($internal-nav-parent-close-image, "#000", $nav-parent-icon-color);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
@if(mixin-exists(hook-nav-parent-icon)) {@include hook-nav-parent-icon();}
|
|
}
|
|
|
|
.uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $nav-parent-icon-color); }
|
|
|
|
|
|
/* Header
|
|
========================================================================== */
|
|
|
|
.uk-nav-header {
|
|
padding: $nav-header-padding-vertical $nav-header-padding-horizontal;
|
|
text-transform: $nav-header-text-transform;
|
|
font-size: $nav-header-font-size;
|
|
@if(mixin-exists(hook-nav-header)) {@include hook-nav-header();}
|
|
}
|
|
|
|
.uk-nav-header:not(:first-child) { margin-top: $nav-header-margin-top; }
|
|
|
|
|
|
/* Divider
|
|
========================================================================== */
|
|
|
|
.uk-nav-divider {
|
|
margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal;
|
|
@if(mixin-exists(hook-nav-divider)) {@include hook-nav-divider();}
|
|
}
|
|
|
|
|
|
/* Default modifier
|
|
========================================================================== */
|
|
|
|
.uk-nav-default {
|
|
@if(mixin-exists(hook-nav-default)) {@include hook-nav-default();}
|
|
}
|
|
|
|
/*
|
|
* Items
|
|
*/
|
|
|
|
.uk-nav-default > li > a {
|
|
color: $nav-default-item-color;
|
|
@if(mixin-exists(hook-nav-default-item)) {@include hook-nav-default-item();}
|
|
}
|
|
|
|
/* Hover + Focus */
|
|
.uk-nav-default > li > a:hover,
|
|
.uk-nav-default > li > a:focus {
|
|
color: $nav-default-item-hover-color;
|
|
@if(mixin-exists(hook-nav-default-item-hover)) {@include hook-nav-default-item-hover();}
|
|
}
|
|
|
|
/* Active */
|
|
.uk-nav-default > li.uk-active > a {
|
|
color: $nav-default-item-active-color;
|
|
@if(mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();}
|
|
}
|
|
|
|
/*
|
|
* Header
|
|
*/
|
|
|
|
.uk-nav-default .uk-nav-header {
|
|
color: $nav-default-header-color;
|
|
@if(mixin-exists(hook-nav-default-header)) {@include hook-nav-default-header();}
|
|
}
|
|
|
|
/*
|
|
* Divider
|
|
*/
|
|
|
|
.uk-nav-default .uk-nav-divider {
|
|
border-top: $nav-default-divider-border-width solid $nav-default-divider-border;
|
|
@if(mixin-exists(hook-nav-default-divider)) {@include hook-nav-default-divider();}
|
|
}
|
|
|
|
/*
|
|
* Sublists
|
|
*/
|
|
|
|
.uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; }
|
|
|
|
.uk-nav-default .uk-nav-sub a:hover,
|
|
.uk-nav-default .uk-nav-sub a:focus { color: $nav-default-sublist-item-hover-color; }
|
|
|
|
|
|
/* Primary modifier
|
|
========================================================================== */
|
|
|
|
.uk-nav-primary {
|
|
@if(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();}
|
|
}
|
|
|
|
/*
|
|
* Items
|
|
*/
|
|
|
|
.uk-nav-primary > li > a {
|
|
font-size: $nav-primary-item-font-size;
|
|
line-height: $nav-primary-item-line-height;
|
|
color: $nav-primary-item-color;
|
|
@if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();}
|
|
}
|
|
|
|
/* Hover + Focus */
|
|
.uk-nav-primary > li > a:hover,
|
|
.uk-nav-primary > li > a:focus {
|
|
color: $nav-primary-item-hover-color;
|
|
@if(mixin-exists(hook-nav-primary-item-hover)) {@include hook-nav-primary-item-hover();}
|
|
}
|
|
|
|
/* Active */
|
|
.uk-nav-primary > li.uk-active > a {
|
|
color: $nav-primary-item-active-color;
|
|
@if(mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();}
|
|
}
|
|
|
|
/*
|
|
* Header
|
|
*/
|
|
|
|
.uk-nav-primary .uk-nav-header {
|
|
color: $nav-primary-header-color;
|
|
@if(mixin-exists(hook-nav-primary-header)) {@include hook-nav-primary-header();}
|
|
}
|
|
|
|
/*
|
|
* Divider
|
|
*/
|
|
|
|
.uk-nav-primary .uk-nav-divider {
|
|
border-top: $nav-primary-divider-border-width solid $nav-primary-divider-border;
|
|
@if(mixin-exists(hook-nav-primary-divider)) {@include hook-nav-primary-divider();}
|
|
}
|
|
|
|
/*
|
|
* Sublists
|
|
*/
|
|
|
|
.uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; }
|
|
|
|
.uk-nav-primary .uk-nav-sub a:hover,
|
|
.uk-nav-primary .uk-nav-sub a:focus { color: $nav-primary-sublist-item-hover-color; }
|
|
|
|
|
|
/* Alignment modifier
|
|
========================================================================== */
|
|
|
|
.uk-nav-center { text-align: center; }
|
|
|
|
/* Sublists */
|
|
.uk-nav-center .uk-nav-sub,
|
|
.uk-nav-center .uk-nav-sub ul { padding-left: 0; }
|
|
|
|
/* Parent icon modifier */
|
|
.uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after { position: absolute; }
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
@if(mixin-exists(hook-nav-misc)) {@include hook-nav-misc();}
|
|
|
|
// @mixin hook-nav-sub(){}
|
|
// @mixin hook-nav-parent-icon(){}
|
|
// @mixin hook-nav-header(){}
|
|
// @mixin hook-nav-divider(){}
|
|
// @mixin hook-nav-default(){}
|
|
// @mixin hook-nav-default-item(){}
|
|
// @mixin hook-nav-default-item-hover(){}
|
|
// @mixin hook-nav-default-item-active(){}
|
|
// @mixin hook-nav-default-header(){}
|
|
// @mixin hook-nav-default-divider(){}
|
|
// @mixin hook-nav-primary(){}
|
|
// @mixin hook-nav-primary-item(){}
|
|
// @mixin hook-nav-primary-item-hover(){}
|
|
// @mixin hook-nav-primary-item-active(){}
|
|
// @mixin hook-nav-primary-header(){}
|
|
// @mixin hook-nav-primary-divider(){}
|
|
// @mixin hook-nav-misc(){}
|
|
|
|
|
|
// Inverse
|
|
// ========================================================================
|
|
|
|
$inverse-nav-parent-icon-color: $inverse-global-color !default;
|
|
$inverse-nav-default-item-color: $inverse-global-muted-color !default;
|
|
$inverse-nav-default-item-hover-color: $inverse-global-color !default;
|
|
$inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default;
|
|
$inverse-nav-default-header-color: $inverse-global-emphasis-color !default;
|
|
$inverse-nav-default-divider-border: $inverse-global-border !default;
|
|
$inverse-nav-default-sublist-item-color: $inverse-global-muted-color !default;
|
|
$inverse-nav-default-sublist-item-hover-color: $inverse-global-color !default;
|
|
|
|
$inverse-nav-primary-item-color: $inverse-global-muted-color !default;
|
|
$inverse-nav-primary-item-hover-color: $inverse-global-color !default;
|
|
$inverse-nav-primary-item-active-color: $inverse-global-emphasis-color !default;
|
|
$inverse-nav-primary-header-color: $inverse-global-emphasis-color !default;
|
|
$inverse-nav-primary-divider-border: $inverse-global-border !default;
|
|
$inverse-nav-primary-sublist-item-color: $inverse-global-muted-color !default;
|
|
$inverse-nav-primary-sublist-item-hover-color: $inverse-global-color !default;
|
|
|
|
|
|
|
|
// @mixin hook-inverse-nav-parent-icon(){}
|
|
// @mixin hook-inverse-nav-default-item(){}
|
|
// @mixin hook-inverse-nav-default-item-hover(){}
|
|
// @mixin hook-inverse-nav-default-item-active(){}
|
|
// @mixin hook-inverse-nav-default-header(){}
|
|
// @mixin hook-inverse-nav-default-divider(){}
|
|
// @mixin hook-inverse-nav-primary-item(){}
|
|
// @mixin hook-inverse-nav-primary-item-hover(){}
|
|
// @mixin hook-inverse-nav-primary-item-active(){}
|
|
// @mixin hook-inverse-nav-primary-header(){}
|
|
// @mixin hook-inverse-nav-primary-divider(){}
|
|
|