@if $use-nav == true or $use-options == true or $use-pagination == true or $use-breadcrumb == true{
/*------------------------------------*\
$NAV
\*------------------------------------*/
/**
* Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
* When used on an `ol` or `ul`, this class throws the list into horizontal mode
* e.g.:
*
*
* Demo: jsfiddle.net/inuitcss/Vnph4
*
*/
.nav{
list-style:none;
margin-left:0;
@extend .cf;
> li{
&,
> a{
display:inline-block;
*display:inline;
zoom:1;
}
}
}
/**
* `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
*
*
*/
.nav--stacked{
> li{
display:list-item;
> a{
display:block;
}
}
}
/**
* `.nav--banner` extends `.nav` and centres the list, e.g.:
*
*
*/
.nav--banner{
text-align:center;
}
/**
* Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
*
*
*/
.nav--block{
line-height:1;
/**
* Remove whitespace caused by `inline-block`.
*/
letter-spacing:-0.31em;
word-spacing:-0.43em;
white-space:nowrap;
> li{
letter-spacing:normal;
word-spacing:normal;
> a{
padding:$half-spacing-unit;
}
}
}
/**
* Force a nav to occupy 100% of the available width of its parent. Extends
* `.nav`, e.g.:
*
*
* Thanks to @pimpl for this idea!
*/
.nav--fit{
display:table;
width:100%;
> li{
display:table-cell;
> a{
display:block;
}
}
}
/**
* Make a list of keywords. Extends `.nav`, e.g.:
*
`