Refactored SASS, mobile first
This commit is contained in:
parent
d4644e59d1
commit
f656e942da
17 changed files with 378 additions and 442 deletions
42
_/scss/objects/_forms.scss
Executable file
42
_/scss/objects/_forms.scss
Executable 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
36
_/scss/objects/_nav.scss
Executable 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;
|
||||
}
|
29
_/scss/objects/_scaffolding.scss
Executable file
29
_/scss/objects/_scaffolding.scss
Executable 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
21
_/scss/objects/_tables.scss
Executable 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;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue