|
0
|
1 // Framework grid generation
|
|
|
2 //
|
|
|
3 // Used only by Bootstrap to generate the correct number of grid classes given
|
|
|
4 // any value of `$grid-columns`.
|
|
|
5
|
|
|
6 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
|
|
7 // Common properties for all breakpoints
|
|
|
8 %grid-column {
|
|
|
9 position: relative;
|
|
|
10 width: 100%;
|
|
|
11 min-height: 1px; // Prevent columns from collapsing when empty
|
|
|
12 padding-right: ($gutter / 2);
|
|
|
13 padding-left: ($gutter / 2);
|
|
|
14 }
|
|
|
15
|
|
|
16 @each $breakpoint in map-keys($breakpoints) {
|
|
|
17 $infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
|
18
|
|
|
19 // Allow columns to stretch full width below their breakpoints
|
|
|
20 @for $i from 1 through $columns {
|
|
|
21 .col#{$infix}-#{$i} {
|
|
|
22 @extend %grid-column;
|
|
|
23 }
|
|
|
24 }
|
|
|
25 .col#{$infix},
|
|
|
26 .col#{$infix}-auto {
|
|
|
27 @extend %grid-column;
|
|
|
28 }
|
|
|
29
|
|
|
30 @include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
|
31 // Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
|
32 .col#{$infix} {
|
|
|
33 flex-basis: 0;
|
|
|
34 flex-grow: 1;
|
|
|
35 max-width: 100%;
|
|
|
36 }
|
|
|
37 .col#{$infix}-auto {
|
|
|
38 flex: 0 0 auto;
|
|
|
39 width: auto;
|
|
|
40 max-width: none; // Reset earlier grid tiers
|
|
|
41 }
|
|
|
42
|
|
|
43 @for $i from 1 through $columns {
|
|
|
44 .col#{$infix}-#{$i} {
|
|
|
45 @include make-col($i, $columns);
|
|
|
46 }
|
|
|
47 }
|
|
|
48
|
|
|
49 @for $i from 1 through $columns {
|
|
|
50 .order#{$infix}-#{$i} {
|
|
|
51 order: $i;
|
|
|
52 }
|
|
|
53 }
|
|
|
54 }
|
|
|
55 }
|
|
|
56 }
|
