diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_grid.scss | 10 | ||||
| -rw-r--r-- | scss/_navbar.scss | 39 |
2 files changed, 45 insertions, 4 deletions
diff --git a/scss/_grid.scss b/scss/_grid.scss index 5b8b8cb23..d36ee75d8 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -21,9 +21,17 @@ } @include media-breakpoint-up($breakpoint, $grid-breakpoints) { - .container-#{$breakpoint} { + %responsive-container-#{$breakpoint} { max-width: $container-max-width; } + + @each $name, $width in $grid-breakpoints { + @if ($container-max-width > $width or $breakpoint == $name) { + .container#{breakpoint-infix($name, $grid-breakpoints)} { + @extend %responsive-container-#{$breakpoint}; + } + } + } } } } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 64c15f534..f9e2b792a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -25,12 +25,23 @@ // Because flex properties aren't inherited, we need to redeclare these first // few properties so that content nested within behave properly. - > [class^="container"] { + %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; + } + } } @@ -139,10 +150,21 @@ &#{$infix} { @include media-breakpoint-down($breakpoint) { - > [class^="container"] { + %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) { @@ -163,10 +185,21 @@ } // For nesting containers, have to redeclare for alignment purposes - > [class^="container"] { + %container-nesting-#{$breakpoint} { flex-wrap: nowrap; } + > .container, + > .container-fluid { + @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 |