diff options
Diffstat (limited to 'sass/vendor/bootstrap/scss/mixins/_grid.scss')
| -rw-r--r--[-rwxr-xr-x] | sass/vendor/bootstrap/scss/mixins/_grid.scss | 180 |
1 files changed, 106 insertions, 74 deletions
diff --git a/sass/vendor/bootstrap/scss/mixins/_grid.scss b/sass/vendor/bootstrap/scss/mixins/_grid.scss index 9cd8c7b..ff6941c 100755..100644 --- a/sass/vendor/bootstrap/scss/mixins/_grid.scss +++ b/sass/vendor/bootstrap/scss/mixins/_grid.scss @@ -1,100 +1,132 @@ -/// Grid system +// Grid system // // Generate semantic grid columns with these mixins. -@mixin make-container($gutters: $grid-gutter-widths) { - position: relative; - margin-left: auto; - margin-right: auto; +@mixin make-row($gutter: $grid-gutter-width) { + --#{$variable-prefix}gutter-x: #{$gutter}; + --#{$variable-prefix}gutter-y: 0; + display: flex; + flex-wrap: wrap; + 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 +} - @each $breakpoint in map-keys($gutters) { - @include media-breakpoint-up($breakpoint) { - $gutter: map-get($gutters, $breakpoint); - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); - } - } +@mixin make-col-ready($gutter: $grid-gutter-width) { + // 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 set the width + // later on to override this initial width. + flex-shrink: 0; + width: 100%; + 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: false, $columns: $grid-columns) { + @if $size { + flex: 0 0 auto; + width: percentage(divide($size, $columns)); -// 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) { - width: $container-max-width; - max-width: 100%; - } + } @else { + flex: 1 1 0; + max-width: 100%; } } -@mixin make-gutters($gutters: $grid-gutter-widths) { - @each $breakpoint in map-keys($gutters) { - @include media-breakpoint-up($breakpoint) { - $gutter: map-get($gutters, $breakpoint); - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); - } - } +@mixin make-col-auto() { + flex: 0 0 auto; + width: auto; } -@mixin make-row($gutters: $grid-gutter-widths) { - display: flex; - flex-wrap: wrap; +@mixin make-col-offset($size, $columns: $grid-columns) { + $num: divide($size, $columns); + margin-left: if($num == 0, 0, percentage($num)); +} - @each $breakpoint in map-keys($gutters) { - @include media-breakpoint-up($breakpoint) { - $gutter: map-get($gutters, $breakpoint); - margin-right: ($gutter / -2); - margin-left: ($gutter / -2); - } +// Row columns +// +// Specify on a parent element(e.g., .row) to force immediate children into NN +// numberof columns. Supports wrapping to new lines, but does not do a Masonry +// style grid. +@mixin row-cols($count) { + > * { + flex: 0 0 auto; + width: divide(100%, $count); } } -@mixin make-col-ready($gutters: $grid-gutter-widths) { - position: relative; - // Prevent columns from becoming too narrow when at smaller grid tiers by - // always setting `width: 100%;`. This works because we use `flex` values - // later on to override this initial width. - width: 100%; - min-height: 1px; // Prevent collapsing +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `$grid-columns`. - @each $breakpoint in map-keys($gutters) { - @include media-breakpoint-up($breakpoint) { - $gutter: map-get($gutters, $breakpoint); - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); +@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); + } + } + } } } -} -@mixin make-col($size, $columns: $grid-columns) { - flex: 0 0 percentage($size / $columns); - // width: 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); -} + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); -@mixin make-col-offset($size, $columns: $grid-columns) { - margin-left: percentage($size / $columns); -} + @include media-breakpoint-up($breakpoint, $breakpoints) { + .col#{$infix}-auto { + @include make-col-auto(); + } -@mixin make-col-push($size, $columns: $grid-columns) { - left: if($size > 0, percentage($size / $columns), auto); -} + @if $columns > 0 { + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + @include make-col($i, $columns); + } + } -@mixin make-col-pull($size, $columns: $grid-columns) { - right: if($size > 0, percentage($size / $columns), auto); -} + // `$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); + } + } + } + } -@mixin make-col-modifier($type, $size, $columns) { - // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626) - @if $type == push { - @include make-col-push($size, $columns); - } @else if $type == pull { - @include make-col-pull($size, $columns); - } @else if $type == offset { - @include make-col-offset($size, $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}; + } + } + } } } |