jeena/home-assistant.github.io
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Update to site

Browse source
This commit is contained in:
Paulus Schoutsen 2014-12-21 12:17:37 -08:00
parent 3345fa5897
commit b0bdfe2fe9
244 changed files with 11618 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

155
sass/inuitcss/objects/_nav.scss Normal file
View file

@ -0,0 +1,155 @@
@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