127 lines
3.1 KiB
Text
127 lines
3.1 KiB
Text
|
|
// ----------------------------------
|
|
// Navigation
|
|
// ----------------------------------
|
|
|
|
.navigation {
|
|
|
|
// General styling (for all viewport widths)
|
|
&:extend(.clearfix all);
|
|
&:extend(.container all);
|
|
|
|
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 {
|
|
.button();
|
|
.button-variant(white, #242424);
|
|
margin-top: 8px;
|
|
font-size: 24px;
|
|
|
|
// Hide for larger view-ports.
|
|
@media (min-width: @navbar-breakpoint-min) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Menu
|
|
// -------------------
|
|
&-menu ul {
|
|
&:extend(.nav);
|
|
|
|
> li {
|
|
|
|
// Inline list for larger viewports.
|
|
@media (min-width: @navbar-breakpoint-min) {
|
|
|
|
display: inline-block;
|
|
|
|
a {
|
|
display: block;
|
|
.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: (@navbar-link-spacing / 2);
|
|
margin-right: (@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: 18px;
|
|
|
|
> li {
|
|
display: inline-block;
|
|
|
|
.icon {
|
|
margin-right: .2em;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
padding-left: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|