Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

156 lines (132 sloc) 2.832 kb
@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.:
*
<ul class=nav>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*
* 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.:
*
<ul class="nav nav--stacked">
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*
*/
.nav--stacked{
> li{
display:list-item;
> a{
display:block;
}
}
}
/**
* `.nav--banner` extends `.nav` and centres the list, e.g.:
*
<ul class="nav nav--banner">
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*
*/
.nav--banner{
text-align:center;
}
/**
* Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
*
<ul class="nav nav--block">
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*
*/
.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.:
*
<ul class="nav nav--fit">
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*
* 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.:
*
`<ul class="nav nav--keywords>`
*
*/
.nav--keywords{
> li{
&:after{
content:"\002C" "\00A0";
}
&:last-child:after{
display:none;
}
}
}
}//endif
Jump to Line
Something went wrong with that request. Please try again.