]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | /// Grid system |
2 | // | |
3 | // Generate semantic grid columns with these mixins. | |
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 | // For each breakpoint, define the maximum width of the container in a media query | |
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 | // Prevent columns from becoming too narrow when at smaller grid tiers by | |
56 | // always setting `width: 100%;`. This works because we use `flex` values | |
57 | // later on to override this initial width. | |
58 | width: 100%; | |
59 | min-height: 1px; // Prevent collapsing | |
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 | // width: percentage($size / $columns); | |
73 | // Add a `max-width` to ensure content within each column does not blow out | |
74 | // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari | |
75 | // do not appear to require this. | |
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 | // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626) | |
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 | } |