This repository has been archived on 2023-08-21. You can view files and clone it, but cannot push or open issues or pull requests.
bluesky-bootstrap-theme/scss/components/_navbar.scss

70 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;
}
}