1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
7 |
|
8 | %grid-column {
|
9 | position: relative;
|
10 | width: 100%;
|
11 | min-height: 1px;
|
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 |
|
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 |
|
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;
|
41 | }
|
42 |
|
43 | @for $i from 1 through $columns {
|
44 | .col#{$infix}-#{$i} {
|
45 | @include make-col($i, $columns);
|
46 | }
|
47 | }
|
48 |
|
49 | .order#{$infix}-first { order: -1; }
|
50 |
|
51 | .order#{$infix}-last { order: $columns + 1; }
|
52 |
|
53 | @for $i from 0 through $columns {
|
54 | .order#{$infix}-#{$i} { order: $i; }
|
55 | }
|
56 |
|
57 |
|
58 | @for $i from 0 through ($columns - 1) {
|
59 | @if not ($infix == "" and $i == 0) {
|
60 | .offset#{$infix}-#{$i} {
|
61 | @include make-col-offset($i, $columns);
|
62 | }
|
63 | }
|
64 | }
|
65 | }
|
66 | }
|
67 | }
|