rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

Easy merging of new grid breakpoints and containers (#26714)

Browse Source 
This change follows exactly what was done for the `$grays`, `$colors`, and `$theme-colors` lists in #23260. This allows for easy addition of new breakpoints or grid containers also.
This commit is contained in:
Mitko Georgiev 2018-10-23 05:48:44 +03:00 committed by XhmikosR
parent dd539094ea
commit ee1daf090a
1 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
scss/_variables.scss
View File

@ -184,13 +184,18 @@ $paragraph-margin-bottom: 1rem !default;
// Define the minimum dimensions at which your layout will change, // Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries. // adapting to different screen sizes, for use in media queries.
$grid-breakpoints: ( $grid-breakpoints: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grid-breakpoints: map-merge(
(
xs: 0, xs: 0,
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,
xl: 1200px xl: 1200px
) !default; ),
$grid-breakpoints
);
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints); @include _assert-starts-at-zero($grid-breakpoints);
@ -200,12 +205,17 @@ $grid-breakpoints: (
// //
// Define the maximum width of `.container` for different screen sizes. // Define the maximum width of `.container` for different screen sizes.
$container-max-widths: ( $container-max-widths: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$container-max-widths: map-merge(
(
sm: 540px, sm: 540px,
md: 720px, md: 720px,
lg: 960px, lg: 960px,
xl: 1140px xl: 1140px
) !default; ),
$container-max-widths
);
@include _assert-ascending($container-max-widths, "$container-max-widths"); @include _assert-ascending($container-max-widths, "$container-max-widths");