137 lines
2.7 KiB
SCSS
137 lines
2.7 KiB
SCSS
// Navbar
|
|
|
|
// THIS DOES NOTHING
|
|
// .navbar {
|
|
// @include gradient-bg();
|
|
// }
|
|
|
|
// Button for toggling the navbar when in its collapsed state
|
|
.navbar-toggler {
|
|
background-color: transparent; // remove default button style
|
|
border: $border-width solid transparent; // remove default button style
|
|
|
|
// &:focus {
|
|
// box-shadow: 0 0 0 $navbar-toggler-focus-width;
|
|
// }
|
|
}
|
|
|
|
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
|
// where your navbar collapses.
|
|
// TODO : NB!!! THIS BREAKS THE MEDIA QUERY GENERATION
|
|
// .navbar-expand {
|
|
// @each $breakpoint in map-keys($grid-breakpoints) {
|
|
// $next: breakpoint-next($breakpoint, $grid-breakpoints);
|
|
// $infix: breakpoint-infix($next, $grid-breakpoints);
|
|
//
|
|
// // stylelint-disable-next-line scss/selector-no-union-class-name
|
|
// &#{$infix} {
|
|
// @include media-breakpoint-up($next) {
|
|
// .offcanvas {
|
|
// background-color: transparent;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// Navbar themes
|
|
.navbar-light {
|
|
.navbar-brand {
|
|
color: $navbar-light-brand-color-alt;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $navbar-light-brand-hover-color-alt;
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
.nav-link {
|
|
color: $navbar-light-color-alt;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $navbar-light-hover-color-alt;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $navbar-light-disabled-color-alt;
|
|
}
|
|
}
|
|
|
|
.show > .nav-link,
|
|
.nav-link.active {
|
|
color: $navbar-light-active-color-alt;
|
|
}
|
|
}
|
|
|
|
.navbar-toggler {
|
|
color: $navbar-light-color-alt;
|
|
border-color: $navbar-light-toggler-border-color-alt;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: escape-svg($navbar-light-toggler-icon-bg-alt);
|
|
}
|
|
|
|
.navbar-text {
|
|
color: $navbar-light-color-alt;
|
|
|
|
a,
|
|
a:hover,
|
|
a:focus {
|
|
color: $navbar-light-active-color-alt;
|
|
}
|
|
}
|
|
}
|
|
|
|
// White links against a dark background
|
|
.navbar-dark {
|
|
.navbar-brand {
|
|
color: $navbar-dark-brand-color-alt;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $navbar-dark-brand-hover-color-alt;
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
.nav-link {
|
|
color: $navbar-dark-color-alt;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $navbar-dark-hover-color-alt;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $navbar-dark-disabled-color-alt;
|
|
}
|
|
}
|
|
|
|
.show > .nav-link,
|
|
.nav-link.active {
|
|
color: $navbar-dark-active-color-alt;
|
|
}
|
|
}
|
|
|
|
.navbar-toggler {
|
|
color: $navbar-dark-color-alt;
|
|
border-color: $navbar-dark-toggler-border-color-alt;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: escape-svg($navbar-dark-toggler-icon-bg-alt);
|
|
}
|
|
|
|
.navbar-text {
|
|
color: $navbar-dark-color-alt;
|
|
a,
|
|
a:hover,
|
|
a:focus {
|
|
color: $navbar-dark-active-color-alt;
|
|
}
|
|
}
|
|
}
|