New grids
This commit is contained in:
parent
9f029ec70d
commit
d35602d079
7 changed files with 257 additions and 226 deletions
|
@ -1,29 +1,51 @@
|
|||
.container {
|
||||
padding: 0 ($column-gutter * 2) * 1px;
|
||||
max-width: $container-max-width * 1px;
|
||||
margin: 0 auto;
|
||||
@extend .clearfix;
|
||||
margin: 0 auto;
|
||||
max-width: ($container-max-width - $column-gutter) * 1px;
|
||||
padding: 0 20px;
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include breakpoint(tablet-portrait) { margin-left: -($column-gutter / $container-max-width) * 100%; }
|
||||
@extend .clearfix;
|
||||
margin-left: -($column-gutter / $container-max-width) * 100%;
|
||||
_overflow: hidden;
|
||||
@extend .clearfix;
|
||||
@include breakpoint(mobile) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
@include breakpoint(tablet-portrait) {
|
||||
float: left;
|
||||
margin-left: ($column-gutter / $container-max-width) * 100%;
|
||||
}
|
||||
.column {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-left: ($column-gutter / $container-max-width) * 100%;
|
||||
vertical-align: top;
|
||||
@include breakpoint(mobile) {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through $column-count {
|
||||
.col#{$i} {
|
||||
@include breakpoint(tablet-portrait) {
|
||||
@include col-width($i);
|
||||
}
|
||||
}
|
||||
.column-span-#{$i} {
|
||||
width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) * 1%;
|
||||
*width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) - .02 * 1%;
|
||||
}
|
||||
}
|
||||
|
||||
.row-no-gutters .column {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@for $i from 1 through $column-count {
|
||||
.row-no-gutters .column-span-#{$i} {
|
||||
width: ((100 / $column-count) * $i) * 1%;
|
||||
*width: ((100 / $column-count) * $i) - .02 * 1%;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue