Sha256: 7e996b45c97f0eb940d9243e5d35c86576629a62a1e700cdbfd3c935a2e4bdd1
Contents?: true
Size: 1.49 KB
Versions: 4
Compression:
Stored size: 1.49 KB
Contents
// Sets up a element and its child elements with the flexbox properties needed
// to have the given number of columns with an optional gutter value.
@mixin has-columns($columns, $gutter: 0) {
@include align-content(stretch);
@include align-items(stretch);
@include display(flex);
@include flex-direction(row);
@include flex-wrap(wrap);
@include justify-content(space-around);
> * {
@include flex(1 1 auto);
@if $gutter == 0 {
// If there is no gutter, we don't need to do anything other
// than split up the columns evenly.
width: 100% / $columns;
} @else if unit($gutter) == "px" or unit($gutter) == "em" {
// If there is a fixed gutter size, we need to trick the columns into
// being close to the right width and stretching to fill in the rest.
width: 85% / $columns;
} @else if unit($gutter) == "%" {
// If the gutter size is a percentage of the width, we can use the percentage
// to calculate the width of the columns as a percentage as well.
width: (100% - ($gutter * ($columns - 1))) / $columns;
}
@if $gutter > 0 {
margin-right: $gutter;
// Remove the right margin for the last column in a row
&:last-child {
margin-right: 0;
}
}
}
// Stack columns when the mobile breakpoint is set
@media (max-width: $mobile-breakpoint) {
> * {
margin-bottom: $gutter;
margin-right: 0;
width: 100%;
&:last-child {
margin-bottom: 0;
}
}
}
}
Version data entries
4 entries across 4 versions & 1 rubygems