125 lines
2.6 KiB
SCSS
125 lines
2.6 KiB
SCSS
.container {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
& .alpha { margin-left: 0; }
|
|
& .omega { margin-right: 0; }
|
|
}
|
|
|
|
.column, .columns {
|
|
float: left;
|
|
margin-left: $gutter/2;
|
|
margin-right: $gutter/2;
|
|
}
|
|
|
|
.row { margin-bottom: $gutter; }
|
|
|
|
@include grid($desktop-container-width, $column-count, $gutter);
|
|
|
|
//-----------------------------------------------------------------------
|
|
// #Tablet
|
|
@media only screen and (max-width: 959px) {
|
|
@include grid($tablet-container-width, $column-count, $gutter);
|
|
|
|
.container {
|
|
width: $tablet-container-width;
|
|
& .alpha { margin-right: 10px; }
|
|
& .omega { margin-left: 10px; }
|
|
}
|
|
|
|
.alpha, .omega {
|
|
margin-right: 0;
|
|
margin-left: 0; }
|
|
}
|
|
//--------------------------------------------------------------------
|
|
// #Mobile
|
|
@media only screen and (max-width: 767px) {
|
|
.container {
|
|
width: $mobile-container-width;
|
|
& .one,
|
|
& .two,
|
|
& .three,
|
|
& .four,
|
|
& .five,
|
|
& .six,
|
|
& .seven,
|
|
& .eight,
|
|
& .nine,
|
|
& .ten,
|
|
& .eleven,
|
|
& .twelve,
|
|
& .thirteen,
|
|
& .fourteen,
|
|
& .fifteen,
|
|
& .sixteen,
|
|
& .one-third,
|
|
& .two-thirds,
|
|
& .one-half,
|
|
& .one-quarter,
|
|
& .three-quarters
|
|
{ width: $mobile-column-width; }
|
|
|
|
|
|
/*
|
|
.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; }
|
|
.one-half { width: ($grid-container-width/2) - $grid-gutter; }
|
|
.one-quarter { width: ($grid-container-width/4) - $grid-gutter; }
|
|
.three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;}
|
|
*/
|
|
.column, .columns {
|
|
margin: 0;
|
|
}
|
|
|
|
.offset-by-one,
|
|
.offset-by-two,
|
|
.offset-by-three,
|
|
.offset-by-four,
|
|
.offset-by-five,
|
|
.offset-by-six,
|
|
.offset-by-seven,
|
|
.offset-by-eight,
|
|
.offset-by-nine,
|
|
.offset-by-ten,
|
|
.offset-by-eleven,
|
|
.offset-by-twelve,
|
|
.offset-by-thirteen,
|
|
.offset-by-fourteen,
|
|
.offset-by-fifteen { padding-left: 0; }
|
|
}
|
|
}
|
|
|
|
/* #Clearing
|
|
================================================== */
|
|
|
|
/* Self Clearing Goodness */
|
|
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
|
|
|
|
/* Use clearfix class on parent to clear nested columns,
|
|
or wrap each row of columns in a <div class="row"> */
|
|
.clearfix:before,
|
|
.clearfix:after,
|
|
.row:before,
|
|
.row:after {
|
|
content: '\0020';
|
|
display: block;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0; }
|
|
.row:after,
|
|
.clearfix:after {
|
|
clear: both; }
|
|
.row,
|
|
.clearfix {
|
|
zoom: 1; }
|
|
|
|
/* You can also use a <br class="clear" /> to clear columns */
|
|
.clear {
|
|
clear: both;
|
|
display: block;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0;
|
|
}
|