|
|
|
/**
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
@import
|
|
|
|
'grid/mixins',
|
|
|
|
'grid/helpers';
|
|
|
|
|
|
|
|
.container,
|
|
|
|
.container-full {
|
|
|
|
@include box-sizing(border-box);
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
margin-right: auto;
|
|
|
|
margin-left: auto;
|
|
|
|
padding-right: ($grid__spacing * 2);
|
|
|
|
padding-left: ($grid__spacing * 2);
|
|
|
|
|
|
|
|
.grid {
|
|
|
|
margin-right: -$grid__spacing;
|
|
|
|
margin-left: -$grid__spacing;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.container {
|
|
|
|
@media (min-width: $grid__xs) {
|
|
|
|
max-width: $grid__xs;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__sm) {
|
|
|
|
max-width: $grid__sm;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__md) {
|
|
|
|
max-width: $grid__md;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__lg) {
|
|
|
|
max-width: $grid__lg;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__xlg) {
|
|
|
|
max-width: $grid__xlg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.grid {
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
@include box-sizing(border-box);
|
|
|
|
@include display-flex();
|
|
|
|
@include flex-wrap();
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
margin: 0 auto;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
&::after,
|
|
|
|
&::before {
|
|
|
|
@include box-sizing(border-box);
|
|
|
|
}
|
|
|
|
|
|
|
|
// handle when lists are used as a grid
|
|
|
|
list-style-type: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.col-item {
|
|
|
|
@include box-sizing(border-box);
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
vertical-align: top;
|
|
|
|
padding: $grid__spacing;
|
|
|
|
|
|
|
|
&::after,
|
|
|
|
&::before {
|
|
|
|
@include box-sizing(border-box);
|
|
|
|
}
|
|
|
|
|
|
|
|
// handle grids nested in columns
|
|
|
|
.grid {
|
|
|
|
@include flex(1, 1, auto);
|
|
|
|
margin: -$grid__spacing;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@for $i from 1 through $grid__columns {
|
|
|
|
.col-#{$i} {
|
|
|
|
@extend .col-item;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* grid generation
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
@include grid-make(col-);
|
|
|
|
|
|
|
|
@media (min-width: $grid__xs) {
|
|
|
|
@include grid-make(col-xs-);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__sm) {
|
|
|
|
@include grid-make(col-sm-);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__md) {
|
|
|
|
@include grid-make(col-md-);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__lg) {
|
|
|
|
@include grid-make(col-lg-);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__xlg) {
|
|
|
|
@include grid-make(col-xlg-);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* col-auto
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
.col-auto {
|
|
|
|
@extend .col-item;
|
|
|
|
@include grid-setup-auto-cols();
|
|
|
|
}
|
|
|
|
|
|
|
|
.col-xs-auto, .col-sm-auto, .col-lg-auto, .col-xlg-auto {
|
|
|
|
@extend .col-item;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__xs) {
|
|
|
|
.col-xs-auto {
|
|
|
|
@include grid-setup-auto-cols();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__sm) {
|
|
|
|
.col-sm-auto {
|
|
|
|
@include grid-setup-auto-cols();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__md) {
|
|
|
|
.col-md-auto {
|
|
|
|
@include grid-setup-auto-cols();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__lg) {
|
|
|
|
.col-lg-auto {
|
|
|
|
@include grid-setup-auto-cols();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__xlg) {
|
|
|
|
.col-xlg-auto {
|
|
|
|
@include grid-setup-auto-cols();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* order helpers generation
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
@include grid-make-order-helpers();
|
|
|
|
|
|
|
|
@media (min-width: $grid__xs) {
|
|
|
|
@include grid-loop-order-helpers($grid__columns, '-xs');
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__sm) {
|
|
|
|
@include grid-loop-order-helpers($grid__columns, '-sm');
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__md) {
|
|
|
|
@include grid-loop-order-helpers($grid__columns, '-md');
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__lg) {
|
|
|
|
@include grid-loop-order-helpers($grid__columns, '-lg');
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__xlg) {
|
|
|
|
@include grid-loop-order-helpers($grid__columns, '-xlg');
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* offset helpers generation
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
@include grid-make-offset-helpers();
|
|
|
|
|
|
|
|
@media (min-width: $grid__xs) {
|
|
|
|
@include grid-loop-offset-helpers($grid__columns - 1, '-xs');
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__sm) {
|
|
|
|
@include grid-loop-offset-helpers($grid__columns - 1, '-sm');
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__md) {
|
|
|
|
@include grid-loop-offset-helpers($grid__columns - 1, '-md');
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__lg) {
|
|
|
|
@include grid-loop-offset-helpers($grid__columns - 1, '-lg');
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $grid__xlg) {
|
|
|
|
@include grid-loop-offset-helpers($grid__columns - 1, '-xlg');
|
|
|
|
}
|