diff options
Diffstat (limited to 'src/sass/bootstrap4/mixins/_grid.scss')
| -rw-r--r-- | src/sass/bootstrap4/mixins/_grid.scss | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/src/sass/bootstrap4/mixins/_grid.scss b/src/sass/bootstrap4/mixins/_grid.scss new file mode 100644 index 0000000..94b8295 --- /dev/null +++ b/src/sass/bootstrap4/mixins/_grid.scss @@ -0,0 +1,75 @@ +/// 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) { + @each $breakpoint, $container-max-width in $max-widths { + @include media-breakpoint-up($breakpoint) { + 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($gutter: $grid-gutter-width) { + position: relative; + @if not $enable-flex { + float: left; + } + min-height: 1px; + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); +} + +@mixin make-col-span($size, $columns: $grid-columns) { + @if $enable-flex { + flex: 0 0 percentage($size / $columns); + } @else { + 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); + } +} |
