Refactored SASS, mobile first

This commit is contained in:
Mike Francis 2013-01-17 21:26:23 +00:00
parent d4644e59d1
commit f656e942da
17 changed files with 378 additions and 442 deletions

42
_/scss/objects/_forms.scss Executable file
View file

@ -0,0 +1,42 @@
input, select, textarea, button {
display: inline-block;
font-family: $base-font-stack;
font-size: 1em;
line-height: $base-margin-bottom + px;
padding: 2.5px 5px;
color: $base-colour;
background: $input-background;
border: $input-border;
@include border-radius(3px);
margin-right: 5px;
margin-bottom: -1px;
width: 208px;
}
.control-group {
margin-bottom: $base-margin-bottom + px;
}
.control-label {
float: left;
width: 140px;
}
.controls {
margin-left: 160px;
@extend .clearfix;
}
.btn {
cursor: pointer;
display: inline-block;
background: $btn-background;
color: $btn-color;
line-height: $base-margin-bottom + px;
border: $btn-border;
@include border-radius(3px);
@include gradient(#fff, #eee);
&:hover {
@include gradient(#eee, #fff);
}
}

36
_/scss/objects/_nav.scss Executable file
View file

@ -0,0 +1,36 @@
.nav {
list-style: none;
margin-left: 0;
}
.nav > li, .nav > li > a {
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;
}

View file

@ -0,0 +1,29 @@
.container {
padding: 0 ($column-gutter * 2) * 1px;
max-width: $container-max-width * 1px;
margin: 0 auto;
@extend .clearfix;
}
.row {
@include breakpoint(tablet-portrait) { margin-left: -($column-gutter / $container-max-width) * 100%; }
@extend .clearfix;
}
.col {
display: block;
float: none;
width: auto;
@include breakpoint(tablet-portrait) {
float: left;
margin-left: ($column-gutter / $container-max-width) * 100%;
}
}
@for $i from 1 through $column-count {
.col#{$i} {
@include breakpoint(tablet-portrait) {
@include col-width($i);
}
}
}

21
_/scss/objects/_tables.scss Executable file
View file

@ -0,0 +1,21 @@
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
text-align: left;
vertical-align: top;
border-top: 1px solid $table-border-colour;
padding: ($base-margin-bottom / 2) * 1px 10px;
}
.table th {
font-weight: bold;
border-top: 0;
}
.table thead th {
vertical-align: bottom;
}