mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
a8879c8f82
- 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
85 lines
2.4 KiB
SCSS
85 lines
2.4 KiB
SCSS
/// Grid system
|
|
//
|
|
// Generate semantic grid columns with these mixins.
|
|
|
|
@mixin make-container($gutter: $grid-gutter-width) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: ($gutter / 2);
|
|
padding-right: ($gutter / 2);
|
|
@if not $enable-flex {
|
|
@include clearfix();
|
|
}
|
|
}
|
|
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin make-row($gutter: $grid-gutter-width) {
|
|
@if $enable-flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
} @else {
|
|
@include clearfix();
|
|
}
|
|
margin-left: ($gutter / -2);
|
|
margin-right: ($gutter / -2);
|
|
}
|
|
|
|
@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
|
|
position: relative;
|
|
min-height: 1px; // Prevent collapsing
|
|
padding-right: ($gutter / 2);
|
|
padding-left: ($gutter / 2);
|
|
|
|
// 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.
|
|
@if $enable-flex {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
|
|
@if $enable-flex {
|
|
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);
|
|
} @else {
|
|
float: left;
|
|
width: percentage($size / $columns);
|
|
}
|
|
}
|
|
|
|
@mixin make-col-offset($size, $columns: $grid-columns) {
|
|
margin-left: percentage($size / $columns);
|
|
}
|
|
|
|
@mixin make-col-push($size, $columns: $grid-columns) {
|
|
left: if($size > 0, percentage($size / $columns), auto);
|
|
}
|
|
|
|
@mixin make-col-pull($size, $columns: $grid-columns) {
|
|
right: if($size > 0, percentage($size / $columns), auto);
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|