/**
* Grid */
// Container .container {
margin: 0 auto; max-width: 1280px; width: 90%;
} @include media-query($medium-screen) {
.container { width: 85%; }
} @include media-query($large-screen) {
.container { width: 70%; }
} .container .row {
margin-left: (-1 * $gutter-width / 2); margin-right: (-1 * $gutter-width / 2);
}
// Section .section {
padding-top: 1rem; padding-bottom: 1rem; &.no-pad { padding: 0; } &.no-pad-bot { padding-bottom: 0; } &.no-pad-top { padding-top: 0; }
}
// Row and colum .row {
margin-left: auto; margin-right: auto; // Clear floating children &:after { content: ""; display: table; clear: both; } .col { float: left; display:block; vertical-align:top; width:100%; $i: 1; @while $i <= $num-cols { $perc: unquote((100 / ($num-cols / $i)) + "%"); &.s#{$i} { width: $perc; margin-left: 0; } $i: $i + 1; } $i: 1; @while $i <= $num-cols { $perc: unquote((100 / ($num-cols / $i)) + "%"); &.offset-s#{$i} { margin-left: $perc; } $i: $i + 1; } @include media-query($small-screen) { $i: 1; @while $i <= $num-cols { $perc: unquote((100 / ($num-cols / $i)) + "%"); &.m#{$i} { width: $perc; margin-left: 0; } $i: $i + 1; } $i: 1; @while $i <= $num-cols { $perc: unquote((100 / ($num-cols / $i)) + "%"); &.offset-m#{$i} { margin-left: $perc; } $i: $i + 1; } } @include media-query($medium-screen) { $i: 1; @while $i <= $num-cols { $perc: unquote((100 / ($num-cols / $i)) + "%"); &.l#{$i} { width: $perc; margin-left: 0; } $i: $i + 1; } $i: 1; @while $i <= $num-cols { $perc: unquote((100 / ($num-cols / $i)) + "%"); &.offset-l#{$i} { margin-left: $perc; } $i: $i + 1; } } }
}