1 |
|
2 |
|
3 |
|
4 |
|
5 | @mixin make-row($gutter: $grid-gutter-width) {
|
6 | --#{$variable-prefix}gutter-x: #{$gutter};
|
7 | --#{$variable-prefix}gutter-y: 0;
|
8 | display: flex;
|
9 | flex-wrap: wrap;
|
10 | margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1);
|
11 | margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5);
|
12 | margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5);
|
13 | }
|
14 |
|
15 | @mixin make-col-ready($gutter: $grid-gutter-width) {
|
16 |
|
17 | box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
|
18 |
|
19 |
|
20 |
|
21 | flex-shrink: 0;
|
22 | width: 100%;
|
23 | max-width: 100%;
|
24 | padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5);
|
25 | padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5);
|
26 | margin-top: var(--#{$variable-prefix}gutter-y);
|
27 | }
|
28 |
|
29 | @mixin make-col($size: false, $columns: $grid-columns) {
|
30 | @if $size {
|
31 | flex: 0 0 auto;
|
32 | width: percentage(divide($size, $columns));
|
33 |
|
34 | } @else {
|
35 | flex: 1 1 0;
|
36 | max-width: 100%;
|
37 | }
|
38 | }
|
39 |
|
40 | @mixin make-col-auto() {
|
41 | flex: 0 0 auto;
|
42 | width: auto;
|
43 | }
|
44 |
|
45 | @mixin make-col-offset($size, $columns: $grid-columns) {
|
46 | $num: divide($size, $columns);
|
47 | margin-left: if($num == 0, 0, percentage($num));
|
48 | }
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 | @mixin row-cols($count) {
|
56 | > * {
|
57 | flex: 0 0 auto;
|
58 | width: divide(100%, $count);
|
59 | }
|
60 | }
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 | @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
68 | @each $breakpoint in map-keys($breakpoints) {
|
69 | $infix: breakpoint-infix($breakpoint, $breakpoints);
|
70 |
|
71 | @include media-breakpoint-up($breakpoint, $breakpoints) {
|
72 |
|
73 | .col#{$infix} {
|
74 | flex: 1 0 0%;
|
75 | }
|
76 |
|
77 | .row-cols#{$infix}-auto > * {
|
78 | @include make-col-auto();
|
79 | }
|
80 |
|
81 | @if $grid-row-columns > 0 {
|
82 | @for $i from 1 through $grid-row-columns {
|
83 | .row-cols#{$infix}-#{$i} {
|
84 | @include row-cols($i);
|
85 | }
|
86 | }
|
87 | }
|
88 |
|
89 | .col#{$infix}-auto {
|
90 | @include make-col-auto();
|
91 | }
|
92 |
|
93 | @if $columns > 0 {
|
94 | @for $i from 1 through $columns {
|
95 | .col#{$infix}-#{$i} {
|
96 | @include make-col($i, $columns);
|
97 | }
|
98 | }
|
99 |
|
100 |
|
101 | @for $i from 0 through ($columns - 1) {
|
102 | @if not ($infix == "" and $i == 0) {
|
103 | .offset#{$infix}-#{$i} {
|
104 | @include make-col-offset($i, $columns);
|
105 | }
|
106 | }
|
107 | }
|
108 | }
|
109 |
|
110 |
|
111 |
|
112 |
|
113 | @each $key, $value in $gutters {
|
114 | .g#{$infix}-#{$key},
|
115 | .gx#{$infix}-#{$key} {
|
116 | --#{$variable-prefix}gutter-x: #{$value};
|
117 | }
|
118 |
|
119 | .g#{$infix}-#{$key},
|
120 | .gy#{$infix}-#{$key} {
|
121 | --#{$variable-prefix}gutter-y: #{$value};
|
122 | }
|
123 | }
|
124 | }
|
125 | }
|
126 | }
|
127 |
|
128 | @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
|
129 | @each $breakpoint in map-keys($breakpoints) {
|
130 | $infix: breakpoint-infix($breakpoint, $breakpoints);
|
131 |
|
132 | @include media-breakpoint-up($breakpoint, $breakpoints) {
|
133 | @if $columns > 0 {
|
134 | @for $i from 1 through $columns {
|
135 | .g-col#{$infix}-#{$i} {
|
136 | grid-column: auto / span $i;
|
137 | }
|
138 | }
|
139 |
|
140 |
|
141 |
|
142 | @for $i from 1 through ($columns - 1) {
|
143 | .g-start#{$infix}-#{$i} {
|
144 | grid-column-start: $i;
|
145 | }
|
146 | }
|
147 | }
|
148 | }
|
149 | }
|
150 | }
|