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

80 lines
2.1 KiB
SCSS
Raw Normal View History

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