sass-site/source/assets/css/regions/_navigation.scss
2018-10-26 23:06:47 -07:00

73 lines
1.2 KiB
SCSS

.navigation {
font-weight: $font-weight-bold;
text-transform: uppercase;
ul { @include padding-leader; }
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 sl-breakpoint--medium {
@include span(9 omega);
@include font-size-small;
background: none;
&.collapse { display: block !important; }
ul {
@extend %medium-clear-fix;
text-align: right;
white-space: nowrap;
}
li {
@include span(6);
float: none;
display: inline-block;
margin: {
right: 0;
bottom: 0;
}
width: auto;
&:nth-child(odd) {
@include omega;
float: none;
margin-right: 0;
}
&:last-child { margin-right: 0; }
a {
&,
&:hover,
&:focus { background: none; }
}
}
}
@include sl-breakpoint--large {
@include font-size-regular;
li { margin-left: $gutter-width; }
}
}