diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/mixins/_grid.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/mixins/_grid.scss | 116 |
1 files changed, 84 insertions, 32 deletions
diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss index b72d150..0ef9d1f 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid.scss @@ -2,53 +2,39 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container($gutter: $grid-gutter-width) { - width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; - margin-right: auto; - margin-left: auto; -} - @mixin make-row($gutter: $grid-gutter-width) { + --bs-gutter-x: #{$gutter}; + --bs-gutter-y: 0; display: flex; + flex: 1 0 100%; flex-wrap: wrap; - margin-right: -$gutter / 2; - margin-left: -$gutter / 2; -} - -// For each breakpoint, define the maximum width of the container in a media query -@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { - @each $breakpoint, $container-max-width in $max-widths { - @include media-breakpoint-up($breakpoint, $breakpoints) { - max-width: $container-max-width; - } - } - @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5"); + margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist + margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist + margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist } @mixin make-col-ready($gutter: $grid-gutter-width) { - position: relative; + // Add box sizing if only the grid is loaded + box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null); // Prevent columns from becoming too narrow when at smaller grid tiers by - // always setting `width: 100%;`. This works because we use `flex` values + // always setting `width: 100%;`. This works because we set the width // later on to override this initial width. + flex-shrink: 0; width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; + max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid + padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist + padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist + margin-top: var(--bs-gutter-y); } @mixin make-col($size, $columns: $grid-columns) { - flex: 0 0 percentage($size / $columns); - // Add a `max-width` to ensure content within each column does not blow out - // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari - // do not appear to require this. - max-width: percentage($size / $columns); + flex: 0 0 auto; + width: percentage($size / $columns); } @mixin make-col-auto() { flex: 0 0 auto; width: auto; - max-width: 100%; // Reset earlier grid tiers } @mixin make-col-offset($size, $columns: $grid-columns) { @@ -63,7 +49,73 @@ // style grid. @mixin row-cols($count) { & > * { - flex: 0 0 100% / $count; - max-width: 100% / $count; + flex: 0 0 auto; + width: 100% / $count; + } +} + +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `$grid-columns`. + +@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + @include media-breakpoint-up($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .col#{$infix} { + flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 + } + + .row-cols#{$infix}-auto > * { + @include make-col-auto(); + } + + @if $grid-row-columns > 0 { + @for $i from 1 through $grid-row-columns { + .row-cols#{$infix}-#{$i} { + @include row-cols($i); + } + } + } + + .col#{$infix}-auto { + @include make-col-auto(); + } + + @if $columns > 0 { + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + @include make-col($i, $columns); + } + } + + // `$columns - 1` because offsetting by the width of an entire row isn't possible + @for $i from 0 through ($columns - 1) { + @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 + .offset#{$infix}-#{$i} { + @include make-col-offset($i, $columns); + } + } + } + } + + // Gutters + // + // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns. + @each $key, $value in $gutters { + .g#{$infix}-#{$key}, + .gx#{$infix}-#{$key} { + --bs-gutter-x: #{$value}; + } + + .g#{$infix}-#{$key}, + .gy#{$infix}-#{$key} { + --bs-gutter-y: #{$value}; + } + } + } } } |