sass-site/source/assets/stylesheets/regions/_navigation.scss

85 lines
1.5 KiB
SCSS
Raw Normal View History

2013-10-09 12:30:53 +02:00
.navigation {
@include padding-leader;
background: $color-background;
2013-02-09 04:10:33 +01:00
2013-10-09 12:30:53 +02:00
li {
@include trailer(.5);
2013-02-09 04:10:33 +01:00
2013-10-09 12:30:53 +02:00
&:last-child { margin-bottom: 0; }
2013-02-09 04:10:33 +01:00
}
a {
2013-10-09 12:30:53 +02:00
@include padding-leader(.5);
@include padding-trailer(.5);
display: block;
padding: {
right: $gutter-width;
left: $gutter-width;
}
background: mix($color-background, $color-background-shade);
2013-10-09 12:30:53 +02:00
&:hover,
&:focus { background: $color-background-shade; }
}
2012-11-28 17:23:08 +01:00
2013-10-09 12:30:53 +02:00
@include at-breakpoint($tablet-small) {
margin: {
right: 0;
left: 0;
2012-11-28 17:23:08 +01:00
}
2013-10-09 12:30:53 +02:00
ul { @extend %clear-fix-tablet-small; }
2012-11-28 17:23:08 +01:00
li {
2013-10-09 12:30:53 +02:00
float: left;
width: 50%;
2012-11-28 17:23:08 +01:00
2013-10-09 12:30:53 +02:00
&:nth-child(odd) {
clear: both;
padding-right: $gutter-width / 2;
}
2012-11-28 17:23:08 +01:00
2013-10-09 12:30:53 +02:00
&:nth-child(even) { padding-left: $gutter-width / 2; }
2012-11-28 17:23:08 +01:00
}
}
2013-10-09 12:30:53 +02:00
@include at-breakpoint($tablet-large) {
2013-10-10 20:20:39 +02:00
@extend %table-layout-cell-tablet-large;
2013-10-09 12:30:53 +02:00
margin: 0;
padding: 0;
text-align: right;
background: none;
2012-11-28 17:23:08 +01:00
2013-10-09 12:30:53 +02:00
&.collapse { display: table-cell !important; }
2013-02-09 04:10:33 +01:00
2013-10-09 12:30:53 +02:00
ul {
display: inline-block;
margin: 0 #{-$gutter-width} 0 $gutter-width;
2013-02-24 07:04:16 +01:00
}
2013-10-09 12:30:53 +02:00
li {
2013-02-24 07:04:16 +01:00
margin: {
2013-10-09 12:30:53 +02:00
right: $gutter-width;
bottom: 0;
2013-02-24 07:04:16 +01:00
}
2013-10-09 12:30:53 +02:00
width: auto;
2012-11-28 17:23:08 +01:00
2013-10-09 12:30:53 +02:00
&:nth-child(odd) {
clear: none;
padding-right: 0;
2012-11-29 18:33:08 +01:00
}
2013-02-11 03:39:30 +01:00
2013-10-09 12:30:53 +02:00
&:nth-child(even) { padding-left: 0; }
2013-02-11 03:39:30 +01:00
2013-10-09 12:30:53 +02:00
&:last-child { margin-right: 0; }
}
2013-02-11 03:39:30 +01:00
2013-10-09 12:30:53 +02:00
a {
background: none;
2013-02-11 03:39:30 +01:00
2013-10-09 12:30:53 +02:00
&:hover,
&:focus { background: $color-background-shade; }
}
}
}