mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-23 18:40:03 +00:00
- Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col') - Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding - Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports
58 lines
1.6 KiB
SCSS
58 lines
1.6 KiB
SCSS
// 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) {
|
|
|
|
// Common properties for all breakpoints
|
|
%grid-column {
|
|
position: relative;
|
|
// Prevent columns from collapsing when empty
|
|
min-height: 1px;
|
|
// Inner gutter via padding
|
|
padding-left: ($gutter / 2);
|
|
padding-right: ($gutter / 2);
|
|
|
|
@if $enable-flex {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
$breakpoint-counter: 0;
|
|
@each $breakpoint in map-keys($breakpoints) {
|
|
$breakpoint-counter: ($breakpoint-counter + 1);
|
|
|
|
@for $i from 1 through $columns {
|
|
.col-#{$breakpoint}-#{$i} {
|
|
@extend %grid-column;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
@for $i from 1 through $columns {
|
|
.col-#{$breakpoint}-#{$i} {
|
|
@include make-col($i, $columns, $gutter);
|
|
}
|
|
}
|
|
|
|
@each $modifier in (pull, push) {
|
|
@for $i from 0 through $columns {
|
|
.#{$modifier}-#{$breakpoint}-#{$i} {
|
|
@include make-col-modifier($modifier, $i, $columns)
|
|
}
|
|
}
|
|
}
|
|
|
|
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
|
@for $i from 0 through ($columns - 1) {
|
|
@if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
|
|
.offset-#{$breakpoint}-#{$i} {
|
|
@include make-col-modifier(offset, $i, $columns)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|