X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=scss%2Fbootstrap%2Fmixins%2F_grid-framework.scss;fp=scss%2Fbootstrap%2Fmixins%2F_grid-framework.scss;h=ff7e1496a6ba1e1c4f8aea8388a6b170aee351a6;hb=8430d6a060aeeb59f6bfd733e3abbae2927f4b25;hp=0000000000000000000000000000000000000000;hpb=40df769531f3a9fc7d9567586a8c0aa26964771a;p=roojs1 diff --git a/scss/bootstrap/mixins/_grid-framework.scss b/scss/bootstrap/mixins/_grid-framework.scss new file mode 100644 index 0000000000..ff7e1496a6 --- /dev/null +++ b/scss/bootstrap/mixins/_grid-framework.scss @@ -0,0 +1,66 @@ +// 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; + width: 100%; + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + // Allow columns to stretch full width below their breakpoints + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + @extend %grid-column; + } + } + .col#{$infix}, + .col#{$infix}-auto { + @extend %grid-column; + } + + @include media-breakpoint-up($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .col#{$infix} { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .col#{$infix}-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; // Reset earlier grid tiers + } + + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + @include make-col($i, $columns); + } + } + + .order#{$infix}-first { order: -1; } + + .order#{$infix}-last { order: $columns + 1; } + + @for $i from 0 through $columns { + .order#{$infix}-#{$i} { order: $i; } + } + + // `$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); + } + } + } + } + } +}