New grids

This commit is contained in:
Mike Francis 2013-07-01 22:42:22 +01:00
parent 9f029ec70d
commit d35602d079
7 changed files with 257 additions and 226 deletions

View file

@ -3,34 +3,11 @@
margin-left: 0;
}
.nav > li, .nav > li > a {
.nav > li {
display: inline-block;
*display: inline;
}
.nav-list {
border: solid 1px #ddd;
@include border-radius();
@include box-shadow();
}
.nav-list > li, .nav-list > li > a {
display: block;
}
.nav-list > li {
border-bottom: solid 1px #ddd;
}
.nav-list > li:last-child {
border-bottom: none;
}
.nav-list > li > a {
padding: 10px;
@include transition();
}
.nav-list > li > a:hover {
background-color: #fafafa;
.nav > li > a {
display: block;
}

View file

@ -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%;
}
}