1 |
|
2 |
|
3 |
|
4 |
|
5 | @mixin make-container($gutters: $grid-gutter-widths) {
|
6 | position: relative;
|
7 | margin-left: auto;
|
8 | margin-right: auto;
|
9 |
|
10 | @each $breakpoint in map-keys($gutters) {
|
11 | @include media-breakpoint-up($breakpoint) {
|
12 | $gutter: map-get($gutters, $breakpoint);
|
13 | padding-right: ($gutter / 2);
|
14 | padding-left: ($gutter / 2);
|
15 | }
|
16 | }
|
17 | }
|
18 |
|
19 |
|
20 |
|
21 | @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
22 | @each $breakpoint, $container-max-width in $max-widths {
|
23 | @include media-breakpoint-up($breakpoint, $breakpoints) {
|
24 | width: $container-max-width;
|
25 | max-width: 100%;
|
26 | }
|
27 | }
|
28 | }
|
29 |
|
30 | @mixin make-gutters($gutters: $grid-gutter-widths) {
|
31 | @each $breakpoint in map-keys($gutters) {
|
32 | @include media-breakpoint-up($breakpoint) {
|
33 | $gutter: map-get($gutters, $breakpoint);
|
34 | padding-right: ($gutter / 2);
|
35 | padding-left: ($gutter / 2);
|
36 | }
|
37 | }
|
38 | }
|
39 |
|
40 | @mixin make-row($gutters: $grid-gutter-widths) {
|
41 | display: flex;
|
42 | flex-wrap: wrap;
|
43 |
|
44 | @each $breakpoint in map-keys($gutters) {
|
45 | @include media-breakpoint-up($breakpoint) {
|
46 | $gutter: map-get($gutters, $breakpoint);
|
47 | margin-right: ($gutter / -2);
|
48 | margin-left: ($gutter / -2);
|
49 | }
|
50 | }
|
51 | }
|
52 |
|
53 | @mixin make-col-ready($gutters: $grid-gutter-widths) {
|
54 | position: relative;
|
55 |
|
56 |
|
57 |
|
58 | width: 100%;
|
59 | min-height: 1px;
|
60 |
|
61 | @each $breakpoint in map-keys($gutters) {
|
62 | @include media-breakpoint-up($breakpoint) {
|
63 | $gutter: map-get($gutters, $breakpoint);
|
64 | padding-right: ($gutter / 2);
|
65 | padding-left: ($gutter / 2);
|
66 | }
|
67 | }
|
68 | }
|
69 |
|
70 | @mixin make-col($size, $columns: $grid-columns) {
|
71 | flex: 0 0 percentage($size / $columns);
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | max-width: percentage($size / $columns);
|
77 | }
|
78 |
|
79 | @mixin make-col-offset($size, $columns: $grid-columns) {
|
80 | margin-left: percentage($size / $columns);
|
81 | }
|
82 |
|
83 | @mixin make-col-push($size, $columns: $grid-columns) {
|
84 | left: if($size > 0, percentage($size / $columns), auto);
|
85 | }
|
86 |
|
87 | @mixin make-col-pull($size, $columns: $grid-columns) {
|
88 | right: if($size > 0, percentage($size / $columns), auto);
|
89 | }
|
90 |
|
91 | @mixin make-col-modifier($type, $size, $columns) {
|
92 |
|
93 | @if $type == push {
|
94 | @include make-col-push($size, $columns);
|
95 | } @else if $type == pull {
|
96 | @include make-col-pull($size, $columns);
|
97 | } @else if $type == offset {
|
98 | @include make-col-offset($size, $columns);
|
99 | }
|
100 | }
|