| 1 |
efrain |
1 |
/// Grid system
|
|
|
2 |
//
|
|
|
3 |
// Generate semantic grid columns with these mixins.
|
|
|
4 |
|
|
|
5 |
@mixin make-container($gutter: $grid-gutter-width) {
|
|
|
6 |
width: 100%;
|
|
|
7 |
padding-right: $gutter * .5;
|
|
|
8 |
padding-left: $gutter * .5;
|
|
|
9 |
margin-right: auto;
|
|
|
10 |
margin-left: auto;
|
|
|
11 |
}
|
|
|
12 |
|
|
|
13 |
@mixin make-row($gutter: $grid-gutter-width) {
|
|
|
14 |
display: flex;
|
|
|
15 |
flex-wrap: wrap;
|
|
|
16 |
margin-right: -$gutter * .5;
|
|
|
17 |
margin-left: -$gutter * .5;
|
|
|
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 |
max-width: $container-max-width;
|
|
|
25 |
}
|
|
|
26 |
}
|
|
|
27 |
@include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
|
|
|
28 |
}
|
|
|
29 |
|
|
|
30 |
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
|
|
31 |
position: relative;
|
|
|
32 |
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
|
33 |
// always setting `width: 100%;`. This works because we use `flex` values
|
|
|
34 |
// later on to override this initial width.
|
|
|
35 |
width: 100%;
|
|
|
36 |
padding-right: $gutter * .5;
|
|
|
37 |
padding-left: $gutter * .5;
|
|
|
38 |
}
|
|
|
39 |
|
|
|
40 |
@mixin make-col($size, $columns: $grid-columns) {
|
|
|
41 |
flex: 0 0 percentage(divide($size, $columns));
|
|
|
42 |
// Add a `max-width` to ensure content within each column does not blow out
|
|
|
43 |
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
|
44 |
// do not appear to require this.
|
|
|
45 |
max-width: percentage(divide($size, $columns));
|
|
|
46 |
}
|
|
|
47 |
|
|
|
48 |
@mixin make-col-auto() {
|
|
|
49 |
flex: 0 0 auto;
|
|
|
50 |
width: auto;
|
|
|
51 |
max-width: 100%; // Reset earlier grid tiers
|
|
|
52 |
}
|
|
|
53 |
|
|
|
54 |
@mixin make-col-offset($size, $columns: $grid-columns) {
|
|
|
55 |
$num: divide($size, $columns);
|
|
|
56 |
margin-left: if($num == 0, 0, percentage($num));
|
|
|
57 |
}
|
|
|
58 |
|
|
|
59 |
// Row columns
|
|
|
60 |
//
|
|
|
61 |
// Specify on a parent element(e.g., .row) to force immediate children into NN
|
|
|
62 |
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
|
|
|
63 |
// style grid.
|
|
|
64 |
@mixin row-cols($count) {
|
|
|
65 |
> * {
|
|
|
66 |
flex: 0 0 divide(100%, $count);
|
|
|
67 |
max-width: divide(100%, $count);
|
|
|
68 |
}
|
|
|
69 |
}
|