// Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly.
- > .container,
- > .container-fluid {
+ %container-flex-properties {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
+
+ .container,
+ .container-fluid {
+ @extend %container-flex-properties;
+ }
+
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+ @extend %container-flex-properties;
+ }
+ }
}
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x;
- font-size: $navbar-brand-font-size;
+ @include font-size($navbar-brand-font-size);
line-height: inherit;
white-space: nowrap;
- @include hover-focus {
+ @include hover-focus() {
text-decoration: none;
}
}
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
- font-size: $navbar-toggler-font-size;
+ @include font-size($navbar-toggler-font-size);
line-height: 1;
background-color: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius);
- @include hover-focus {
+ @include hover-focus() {
text-decoration: none;
}
-
- // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
- &:not(:disabled):not(.disabled) {
- cursor: pointer;
- }
}
// Keep as a separate element so folks can easily override it with another icon
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
- > .container,
- > .container-fluid {
+ %container-navbar-expand-#{$breakpoint} {
padding-right: 0;
padding-left: 0;
}
+
+ > .container,
+ > .container-fluid {
+ @extend %container-navbar-expand-#{$breakpoint};
+ }
+
+ @each $size, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
+ @extend %container-navbar-expand-#{$breakpoint};
+ }
+ }
}
@include media-breakpoint-up($next) {
}
// For nesting containers, have to redeclare for alignment purposes
+ %container-nesting-#{$breakpoint} {
+ flex-wrap: nowrap;
+ }
+
> .container,
> .container-fluid {
- flex-wrap: nowrap;
+ @extend %container-nesting-#{$breakpoint};
+ }
+
+ @each $size, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
+ @extend %container-nesting-#{$breakpoint};
+ }
}
.navbar-collapse {
- display: flex !important; // stylelint-disable-line declaration-no-important
+ display: flex !important; // stylelint-disable-line declaration-no-important
// Changes flex-bases to auto because of an IE10 bug
flex-basis: auto;
.navbar-brand {
color: $navbar-light-brand-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-light-brand-hover-color;
}
}
.nav-link {
color: $navbar-light-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-light-hover-color;
}
}
.navbar-toggler-icon {
- background-image: $navbar-light-toggler-icon-bg;
+ background-image: escape-svg($navbar-light-toggler-icon-bg);
}
.navbar-text {
a {
color: $navbar-light-active-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-light-active-color;
}
}
.navbar-brand {
color: $navbar-dark-brand-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-dark-brand-hover-color;
}
}
.nav-link {
color: $navbar-dark-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-dark-hover-color;
}
}
.navbar-toggler-icon {
- background-image: $navbar-dark-toggler-icon-bg;
+ background-image: escape-svg($navbar-dark-toggler-icon-bg);
}
.navbar-text {
a {
color: $navbar-dark-active-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-dark-active-color;
}
}