125 lines
2.1 KiB
SCSS
Executable File
125 lines
2.1 KiB
SCSS
Executable File
$columns: 12;
|
|
$container-base-width: 1200px;
|
|
$container-offset: $base-spacing-unit;
|
|
|
|
$mobile: 576px;
|
|
$tablet: 768px;
|
|
$desktop: 992px;
|
|
|
|
$mq: ( $mobile:$columns, $tablet:$columns, $desktop:$columns );
|
|
|
|
.container {
|
|
max-width: $container-base-width;
|
|
padding-left: $container-offset;
|
|
padding-right: $container-offset;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.container-full {
|
|
max-width: 100%;
|
|
padding-left: $container-offset;
|
|
padding-right: $container-offset;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex: 0 1 auto;
|
|
flex-direction: row;
|
|
box-sizing: border-box;
|
|
margin-left: ($base-spacing-unit * -1);
|
|
margin-right: ($base-spacing-unit * -1);
|
|
}
|
|
|
|
.col {
|
|
padding-left: $base-spacing-unit;
|
|
padding-right: $base-spacing-unit;
|
|
}
|
|
|
|
[class^="col-"] {
|
|
flex: auto;
|
|
}
|
|
|
|
/* ========== MOBILE FIRST ========== */
|
|
|
|
// MOBILE
|
|
@for $i from 0 through $columns {
|
|
.col-#{$i} {
|
|
width: percentage( $i / $columns );
|
|
}
|
|
}
|
|
|
|
@for $i from 0 through $columns {
|
|
.push-#{$i} {
|
|
margin-left: percentage( $i / $columns );
|
|
}
|
|
}
|
|
|
|
@for $i from 0 through $columns {
|
|
.pull-#{$i} {
|
|
margin-right: percentage( $i / $columns );
|
|
}
|
|
}
|
|
|
|
|
|
@each $key, $val in $mq {
|
|
|
|
// TABLET
|
|
@media(min-width: $tablet) {
|
|
|
|
@for $i from 0 through $columns {
|
|
.col-t-#{$i} {
|
|
width: percentage( $i / $columns );
|
|
}
|
|
}
|
|
|
|
@for $i from 0 through $columns {
|
|
.push-t-#{$i} {
|
|
margin-left: percentage( $i / $columns );
|
|
}
|
|
}
|
|
|
|
@for $i from 0 through $columns {
|
|
.pull-t-#{$i} {
|
|
margin-right: percentage( $i / $columns );
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// DESKTOP
|
|
@media(min-width: $desktop) {
|
|
|
|
@for $i from 0 through $columns {
|
|
.col-d-#{$i} {
|
|
width: percentage( $i / $columns );
|
|
}
|
|
}
|
|
|
|
@for $i from 0 through $columns {
|
|
.push-d-#{$i} {
|
|
margin-left: percentage( $i / $columns );
|
|
}
|
|
}
|
|
|
|
@for $i from 0 through $columns {
|
|
.pull-d-#{$i} {
|
|
margin-right: percentage( $i / $columns );
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@media(min-width: $desktop) {
|
|
.d-hide {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-show {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|