diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_navbar.scss')
-rw-r--r-- | vendor/twbs/bootstrap/scss/_navbar.scss | 60 |
1 files changed, 45 insertions, 15 deletions
diff --git a/vendor/twbs/bootstrap/scss/_navbar.scss b/vendor/twbs/bootstrap/scss/_navbar.scss index 5c6e96399..5f10a62f1 100644 --- a/vendor/twbs/bootstrap/scss/_navbar.scss +++ b/vendor/twbs/bootstrap/scss/_navbar.scss @@ -25,13 +25,23 @@ // 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; + } + } } @@ -48,7 +58,7 @@ line-height: inherit; white-space: nowrap; - @include hover-focus { + @include hover-focus() { text-decoration: none; } } @@ -113,7 +123,7 @@ 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; } } @@ -139,11 +149,21 @@ &#{$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) { @@ -164,9 +184,19 @@ } // 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 { @@ -194,7 +224,7 @@ .navbar-brand { color: $navbar-light-brand-color; - @include hover-focus { + @include hover-focus() { color: $navbar-light-brand-hover-color; } } @@ -203,7 +233,7 @@ .nav-link { color: $navbar-light-color; - @include hover-focus { + @include hover-focus() { color: $navbar-light-hover-color; } @@ -226,7 +256,7 @@ } .navbar-toggler-icon { - background-image: $navbar-light-toggler-icon-bg; + background-image: escape-svg($navbar-light-toggler-icon-bg); } .navbar-text { @@ -234,7 +264,7 @@ a { color: $navbar-light-active-color; - @include hover-focus { + @include hover-focus() { color: $navbar-light-active-color; } } @@ -246,7 +276,7 @@ .navbar-brand { color: $navbar-dark-brand-color; - @include hover-focus { + @include hover-focus() { color: $navbar-dark-brand-hover-color; } } @@ -255,7 +285,7 @@ .nav-link { color: $navbar-dark-color; - @include hover-focus { + @include hover-focus() { color: $navbar-dark-hover-color; } @@ -278,7 +308,7 @@ } .navbar-toggler-icon { - background-image: $navbar-dark-toggler-icon-bg; + background-image: escape-svg($navbar-dark-toggler-icon-bg); } .navbar-text { @@ -286,7 +316,7 @@ a { color: $navbar-dark-active-color; - @include hover-focus { + @include hover-focus() { color: $navbar-dark-active-color; } } |