summaryrefslogtreecommitdiff
path: root/src/sass/bootstrap4/mixins/_grid.scss
diff options
context:
space:
mode:
authorMax2017-05-18 14:03:27 +0200
committerMax2017-05-18 14:03:27 +0200
commitf597e2fe949a1e18eb778b9a5bd102de88570555 (patch)
tree7e42e6f91dd3e764cd2cf0c4f61f48501c2ed98f /src/sass/bootstrap4/mixins/_grid.scss
downloaddocs.maxmail.xyz-f597e2fe949a1e18eb778b9a5bd102de88570555.tar.gz
Initial commit.HEADmaster
Diffstat (limited to 'src/sass/bootstrap4/mixins/_grid.scss')
-rw-r--r--src/sass/bootstrap4/mixins/_grid.scss75
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);
+ }
+}