//
// Generate semantic grid columns with these mixins.
-@mixin make-container() {
+@mixin make-container($gutter: $grid-gutter-width) {
width: 100%;
- padding-right: ($grid-gutter-width / 2);
- padding-left: ($grid-gutter-width / 2);
+ padding-right: ($gutter / 2);
+ padding-left: ($gutter / 2);
margin-right: auto;
margin-left: auto;
}
}
}
-@mixin make-row() {
+@mixin make-row($gutter: $grid-gutter-width) {
display: flex;
flex-wrap: wrap;
- margin-right: ($grid-gutter-width / -2);
- margin-left: ($grid-gutter-width / -2);
+ margin-right: ($gutter / -2);
+ margin-left: ($gutter / -2);
}
-@mixin make-col-ready() {
+@mixin make-col-ready($gutter: $grid-gutter-width) {
position: relative;
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
- padding-right: ($grid-gutter-width / 2);
- padding-left: ($grid-gutter-width / 2);
+ padding-right: ($gutter / 2);
+ padding-left: ($gutter / 2);
}
@mixin make-col($size, $columns: $grid-columns) {