80 lines
2.1 KiB
SCSS
80 lines
2.1 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);
|
|
}
|
|
|
|
.navbar-toggler {
|
|
color: transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.75);
|
|
border-color: transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.75);
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='" + transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.75) + "' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|