71 lines
1.5 KiB
SCSS
71 lines
1.5 KiB
SCSS
|
// Mixin and colors
|
||
|
|
||
|
@mixin navheader() {
|
||
|
box-shadow: $large-shadow;
|
||
|
@include borders();
|
||
|
border-left: 0;
|
||
|
border-right: 0;
|
||
|
}
|
||
|
|
||
|
@mixin colorize-navbar() {
|
||
|
@each $name, $color in list-colors() {
|
||
|
&-#{$name} { @include navbar-color(get-color($name), #FFF, #000); }
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@mixin navbar-color($background-color, $light-color, $dark-color) {
|
||
|
background-color:$background-color;
|
||
|
|
||
|
a {
|
||
|
color: transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.5);
|
||
|
&:hover, &:active {
|
||
|
color: getTextColorFromBackground($background-color, $light-color, $dark-color);
|
||
|
}
|
||
|
|
||
|
&.disabled, &.navlink.disabled {
|
||
|
color: transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.75);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
h1, h2, h3, h4, h5, h6 {
|
||
|
color: getTextColorFromBackground($background-color, $light-color, $dark-color);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.navhead, .navbar {
|
||
|
@include navheader();
|
||
|
@include colorize-navbar;
|
||
|
}
|
||
|
|
||
|
.navhead .navbar, .navbar-transparent {
|
||
|
border: none;
|
||
|
box-shadow: none;
|
||
|
background-color:transparent;
|
||
|
}
|
||
|
|
||
|
.navbar {
|
||
|
padding:0;
|
||
|
padding-left:$baselinerem;
|
||
|
padding-right:$baselinerem;
|
||
|
ul {
|
||
|
padding-bottom:0;
|
||
|
}
|
||
|
@include li-no-margin();
|
||
|
|
||
|
.nav-item .nav-link, .navbar-brand {
|
||
|
padding:$baselinerem/2;
|
||
|
}
|
||
|
|
||
|
.nav-link:hover, .navbar-brand:hover {
|
||
|
background-color: rgba(0,0,0,0.05);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.dropdown-menu {
|
||
|
box-shadow: $narrow-shadow, $inset-shadow;
|
||
|
color: #444;
|
||
|
a, a:hover, a:active {
|
||
|
color: #444;
|
||
|
}
|
||
|
}
|