sass-site/source/assets/stylesheets/regions/_navigation.scss
₍˄ุ.͡˳̫.˄ุ₎ 5387c0a164 WIP
2013-10-11 16:06:20 -04:00

85 lines
1.5 KiB
SCSS

.navigation {
@include padding-leader;
background: $color-background;
li {
@include trailer(.5);
&:last-child { margin-bottom: 0; }
}
a {
@include padding-leader(.5);
@include padding-trailer(.5);
display: block;
padding: {
right: $gutter-width;
left: $gutter-width;
}
background: mix($color-background, $color-background-shade);
&:hover,
&:focus { background: $color-background-shade; }
}
@include breakpoint($tablet-small) {
margin: {
right: 0;
left: 0;
}
ul { @extend %clear-fix-tablet-small; }
li {
float: left;
width: 50%;
&:nth-child(odd) {
clear: both;
padding-right: $gutter-width / 2;
}
&:nth-child(even) { padding-left: $gutter-width / 2; }
}
}
@include breakpoint($tablet-large) {
@extend %table-layout-cell-tablet-large;
margin: 0;
padding: 0;
text-align: right;
background: none;
&.collapse { display: table-cell !important; }
ul {
display: inline-block;
margin: 0 #{-$gutter-width} 0 $gutter-width;
}
li {
margin: {
right: $gutter-width;
bottom: 0;
}
width: auto;
&:nth-child(odd) {
clear: none;
padding-right: 0;
}
&:nth-child(even) { padding-left: 0; }
&:last-child { margin-right: 0; }
}
a {
background: none;
&:hover,
&:focus { background: $color-background-shade; }
}
}
}