@mixin col-flex() {
-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;
}
@mixin col-num($i) {
$percent: (100% / $col-total) * $i; flex: 0 0 #{$percent}; max-width: #{$percent};
}
@mixin col-basic() {
position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px;
}
@mixin col-auto() {
flex: 0 0 auto; width: auto; max-width: none;
}
%col-basic {
@include col-basic;
}
%col-auto {
@include col-auto;
}
.row {
@extend %row;
}
.col {
@extend %col-basic; @include col-flex;
}
.col-auto {
@extend %col-basic; @extend %col-auto;
}
@for $i from 1 through length($breakpoints) {
$size: nth($screen-sizes, $i); .col-#{$size} { @extend %col-basic; } @for $j from 1 through $col-total { .col-#{$j}, .col-#{$size}-#{$j} { @extend %col-basic; } }
}
@for $i from 1 through $col-total {
.col-#{$i} { @include col-num($i); }
}
@for $i from 1 through length($breakpoints) {
$breakpoint: nth($breakpoints, $i); $size: nth($screen-sizes, $i); @media (min-width: $breakpoint) { %col-auto-#{$size} { @include col-auto; } .col-#{$size} { @include col-flex; } @for $j from 1 through $col-total { .col-#{$size}-#{$j} { @include col-num($j); } } .col-#{$size}-auto { @extend %col-auto-#{$size}; } }
}