diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins/_grid.scss')
-rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_grid.scss | 133 |
1 files changed, 98 insertions, 35 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid.scss b/vendor/twbs/bootstrap/scss/mixins/_grid.scss index 19babc09f..ff6941c46 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss @@ -1,58 +1,49 @@ -/// Grid system +// Grid system // // 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) { + --#{$variable-prefix}gutter-x: #{$gutter}; + --#{$variable-prefix}gutter-y: 0; display: flex; 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(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list + margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list + margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list } @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(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + margin-top: var(--#{$variable-prefix}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); +@mixin make-col($size: false, $columns: $grid-columns) { + @if $size { + flex: 0 0 auto; + width: percentage(divide($size, $columns)); + + } @else { + flex: 1 1 0; + max-width: 100%; + } } @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) { - $num: $size / $columns; + $num: divide($size, $columns); margin-left: if($num == 0, 0, percentage($num)); } @@ -63,7 +54,79 @@ // style grid. @mixin row-cols($count) { > * { - flex: 0 0 100% / $count; - max-width: 100% / $count; + flex: 0 0 auto; + width: divide(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) { + // .row-cols defaults must all appear before .col overrides so they can be overridden. + $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); + } + } + } + } + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + @include media-breakpoint-up($breakpoint, $breakpoints) { + .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} { + --#{$variable-prefix}gutter-x: #{$value}; + } + + .g#{$infix}-#{$key}, + .gy#{$infix}-#{$key} { + --#{$variable-prefix}gutter-y: #{$value}; + } + } + } } } |