157 lines
4 KiB
SCSS
157 lines
4 KiB
SCSS
|
|
// ----------------------------------
|
|
// Navigation
|
|
// ----------------------------------
|
|
|
|
.navigation {
|
|
|
|
// General styling (for all viewport widths)
|
|
@extend .clearfix;
|
|
@extend .container;
|
|
|
|
min-height: $navbar-height;
|
|
|
|
color: $navbar-link-color;
|
|
text-shadow: $navbar-link-text-shadow;
|
|
font-size: $font-size-navigation;
|
|
|
|
// Links inside navigation.
|
|
a {
|
|
color: $navbar-link-color;
|
|
&:hover,
|
|
&:active {
|
|
color: $navbar-link-hover-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Menu button
|
|
// -------------------
|
|
.menu-button {
|
|
@extend .button;
|
|
@include button-variant(white, #242424);
|
|
margin-top: 8px;
|
|
font-size: 24px;
|
|
|
|
// Hide for larger view-ports.
|
|
@media (min-width: $navbar-breakpoint-min) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// Menu
|
|
// -------------------
|
|
&-menu ul {
|
|
@extend .nav;
|
|
|
|
> li {
|
|
|
|
// Inline list for larger viewports.
|
|
@media (min-width: $navbar-breakpoint-min) {
|
|
|
|
display: inline-block;
|
|
|
|
a {
|
|
display: block;
|
|
@include navbar-vertical-align($line-height-computed + ($navbar-link-vertical-spacing * 2));
|
|
padding: $navbar-link-vertical-spacing 10px $navbar-link-vertical-spacing;
|
|
line-height: $line-height-computed;
|
|
|
|
margin-left: calc($navbar-link-spacing / 2);
|
|
margin-right: calc($navbar-link-spacing / 2);
|
|
|
|
&:hover {
|
|
color: $navbar-link-hover-color;
|
|
box-shadow: 0 (-$navbar-link-underline-height)
|
|
0 ($navbar-link-hover-underline) inset;
|
|
}
|
|
}
|
|
|
|
&.active a {
|
|
color: $navbar-link-active-color;
|
|
box-shadow: 0 (-$navbar-link-underline-height)
|
|
0 ($navbar-link-active-underline) inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Only for small viewports.
|
|
@media (max-width: $navbar-breakpoint-min) {
|
|
|
|
margin: 1em 0;
|
|
|
|
> li {
|
|
a {
|
|
display: block;
|
|
padding: .5em 1em;
|
|
|
|
background: $navbar-background;
|
|
&:hover {
|
|
background: darken($navbar-background, 10%);
|
|
}
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Always show menu for larger viewport.
|
|
@media (min-width: $navbar-breakpoint-min) {
|
|
&-menu.collapse {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// User Menu
|
|
// -------------------
|
|
&-user-menu {
|
|
@extend .nav, .pull-right;
|
|
margin-top: 10px;
|
|
|
|
&-login {
|
|
padding-top: .3em;
|
|
padding-bottom: .3em;
|
|
}
|
|
|
|
&-dropdown {
|
|
position: relative;
|
|
|
|
&-button {
|
|
display: inline-block;
|
|
padding: .3em .8em;
|
|
background: $usermenu-button-bg;
|
|
border-radius: $border-radius-base;
|
|
|
|
&:hover {
|
|
background: $usermenu-button-hover-bg;
|
|
}
|
|
}
|
|
|
|
&-list {
|
|
@extend .dropdown-menu;
|
|
@extend .dropdown-menu-right;
|
|
|
|
vertical-align: middle;
|
|
> li > a {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 1.5em;
|
|
margin-right: .4em;
|
|
}
|
|
|
|
text-shadow: none;
|
|
@include box-shadow($dropdown-shadow);
|
|
}
|
|
|
|
&.open &-list {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|