586 lines
14 KiB
SCSS
586 lines
14 KiB
SCSS
/*
|
|
* Skeleton V1.2
|
|
* Copyright 2011, Dave Gamache
|
|
* www.getskeleton.com
|
|
* Free to use under the MIT license.
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
* 6/20/2012
|
|
*/
|
|
|
|
/* Table of Content
|
|
==================================================
|
|
#Reset & Basics
|
|
#Basic Styles
|
|
#Site Styles
|
|
#Typography
|
|
#Links
|
|
#Lists
|
|
#Images
|
|
#Buttons
|
|
#Forms
|
|
#Misc */
|
|
|
|
/* #Reset & Basics (Inspired by E. Meyers)
|
|
================================================== */
|
|
|
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
|
display: block;
|
|
}
|
|
|
|
body {
|
|
line-height: 1;
|
|
}
|
|
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
|
|
blockquote, q {
|
|
quotes: none;
|
|
}
|
|
|
|
blockquote {
|
|
&:before, &:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
q {
|
|
&:before, &:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
/* #Basic Styles
|
|
================================================== */
|
|
|
|
body {
|
|
background: #fff;
|
|
font: 14px / 21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
color: #444;
|
|
-webkit-font-smoothing: antialiased;
|
|
/* Fix for webkit rendering */
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
/* #Typography
|
|
================================================== */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #181818;
|
|
font-family: "Georgia", "Times New Roman", serif;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
|
|
font-weight: inherit;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 46px;
|
|
line-height: 50px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 35px;
|
|
line-height: 40px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 28px;
|
|
line-height: 34px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 21px;
|
|
line-height: 30px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 17px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 14px;
|
|
line-height: 21px;
|
|
}
|
|
|
|
.subheader {
|
|
color: #777;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 20px 0;
|
|
img {
|
|
margin: 0;
|
|
}
|
|
&.lead {
|
|
font-size: 21px;
|
|
line-height: 27px;
|
|
color: #777;
|
|
}
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
/* Blockquotes */
|
|
|
|
blockquote {
|
|
font-size: 17px;
|
|
line-height: 24px;
|
|
color: #777;
|
|
font-style: italic;
|
|
p {
|
|
font-size: 17px;
|
|
line-height: 24px;
|
|
color: #777;
|
|
font-style: italic;
|
|
}
|
|
margin: 0 0 20px;
|
|
padding: 9px 20px 0 19px;
|
|
border-left: 1px solid #ddd;
|
|
cite {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #555;
|
|
&:before {
|
|
content: "\2014 \0020";
|
|
}
|
|
a {
|
|
color: #555;
|
|
&:visited {
|
|
color: #555;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border: solid #ddd;
|
|
border-width: 1px 0 0;
|
|
clear: both;
|
|
margin: 10px 0 30px;
|
|
height: 0;
|
|
}
|
|
|
|
/* #Links
|
|
================================================== */
|
|
|
|
a {
|
|
color: #333;
|
|
text-decoration: underline;
|
|
outline: 0;
|
|
&:visited {
|
|
color: #333;
|
|
text-decoration: underline;
|
|
outline: 0;
|
|
}
|
|
&:hover, &:focus {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
p a {
|
|
line-height: inherit;
|
|
&:visited {
|
|
line-height: inherit;
|
|
}
|
|
}
|
|
|
|
/* #Lists
|
|
================================================== */
|
|
|
|
ul, ol {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none outside;
|
|
}
|
|
|
|
ol {
|
|
list-style: decimal;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
ul {
|
|
&.square, &.circle, &.disc {
|
|
margin-left: 30px;
|
|
}
|
|
&.square {
|
|
list-style: square outside;
|
|
}
|
|
&.circle {
|
|
list-style: circle outside;
|
|
}
|
|
&.disc {
|
|
list-style: disc outside;
|
|
}
|
|
ul, ol {
|
|
margin: 4px 0 5px 30px;
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
ol, ul {
|
|
margin: 4px 0 5px 30px;
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
ul li, ol li {
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
ol li, ul li {
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
|
|
li {
|
|
line-height: 18px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
ul.large li, li p {
|
|
line-height: 21px;
|
|
}
|
|
|
|
/* #Images
|
|
================================================== */
|
|
|
|
img.scale-with-grid {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* #Buttons
|
|
================================================== */
|
|
|
|
.button, button {
|
|
background: #eee;
|
|
/* Old browsers */
|
|
background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* FF3.6+ */
|
|
background: #eeeeee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
|
|
/* Chrome,Safari4+ */
|
|
background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* Chrome10+,Safari5.1+ */
|
|
background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* Opera11.10+ */
|
|
background: #eeeeee -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* IE10+ */
|
|
background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* W3C */
|
|
border: 1px solid #aaa;
|
|
border-top: 1px solid #ccc;
|
|
border-left: 1px solid #ccc;
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
color: #444;
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px rgba(255, 255, 255, 0.75);
|
|
cursor: pointer;
|
|
margin-bottom: 20px;
|
|
line-height: normal;
|
|
padding: 8px 10px;
|
|
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
input {
|
|
&[type="submit"], &[type="reset"], &[type="button"] {
|
|
background: #eee;
|
|
/* Old browsers */
|
|
background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* FF3.6+ */
|
|
background: #eeeeee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
|
|
/* Chrome,Safari4+ */
|
|
background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* Chrome10+,Safari5.1+ */
|
|
background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* Opera11.10+ */
|
|
background: #eeeeee -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* IE10+ */
|
|
background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
|
|
/* W3C */
|
|
border: 1px solid #aaa;
|
|
border-top: 1px solid #ccc;
|
|
border-left: 1px solid #ccc;
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
color: #444;
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px rgba(255, 255, 255, 0.75);
|
|
cursor: pointer;
|
|
margin-bottom: 20px;
|
|
line-height: normal;
|
|
padding: 8px 10px;
|
|
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
}
|
|
|
|
.button:hover, button:hover {
|
|
color: #222;
|
|
background: #ddd;
|
|
/* Old browsers */
|
|
background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* FF3.6+ */
|
|
background: #dddddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
|
|
/* Chrome,Safari4+ */
|
|
background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* Chrome10+,Safari5.1+ */
|
|
background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* Opera11.10+ */
|
|
background: #dddddd -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* IE10+ */
|
|
background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* W3C */
|
|
border: 1px solid #888;
|
|
border-top: 1px solid #aaa;
|
|
border-left: 1px solid #aaa;
|
|
}
|
|
|
|
input {
|
|
&[type="submit"]:hover, &[type="reset"]:hover, &[type="button"]:hover {
|
|
color: #222;
|
|
background: #ddd;
|
|
/* Old browsers */
|
|
background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* FF3.6+ */
|
|
background: #dddddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
|
|
/* Chrome,Safari4+ */
|
|
background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* Chrome10+,Safari5.1+ */
|
|
background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* Opera11.10+ */
|
|
background: #dddddd -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* IE10+ */
|
|
background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
/* W3C */
|
|
border: 1px solid #888;
|
|
border-top: 1px solid #aaa;
|
|
border-left: 1px solid #aaa;
|
|
}
|
|
}
|
|
|
|
.button:active, button:active {
|
|
border: 1px solid #666;
|
|
background: #ccc;
|
|
/* Old browsers */
|
|
background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* FF3.6+ */
|
|
background: #cccccc -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4)));
|
|
/* Chrome,Safari4+ */
|
|
background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* Chrome10+,Safari5.1+ */
|
|
background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* Opera11.10+ */
|
|
background: #cccccc -ms-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* IE10+ */
|
|
background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* W3C */
|
|
}
|
|
|
|
input {
|
|
&[type="submit"]:active, &[type="reset"]:active, &[type="button"]:active {
|
|
border: 1px solid #666;
|
|
background: #ccc;
|
|
/* Old browsers */
|
|
background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* FF3.6+ */
|
|
background: #cccccc -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4)));
|
|
/* Chrome,Safari4+ */
|
|
background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* Chrome10+,Safari5.1+ */
|
|
background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* Opera11.10+ */
|
|
background: #cccccc -ms-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* IE10+ */
|
|
background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
|
|
/* W3C */
|
|
}
|
|
}
|
|
|
|
.button.full-width, button.full-width {
|
|
width: 100%;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
text-align: center;
|
|
}
|
|
|
|
input {
|
|
&[type="submit"].full-width, &[type="reset"].full-width, &[type="button"].full-width {
|
|
width: 100%;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* Fix for odd Mozilla border & padding issues */
|
|
|
|
button::-moz-focus-inner, input::-moz-focus-inner {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* #Forms
|
|
================================================== */
|
|
|
|
form, fieldset {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
input {
|
|
&[type="text"], &[type="password"], &[type="email"] {
|
|
border: 1px solid #ccc;
|
|
padding: 6px 4px;
|
|
outline: none;
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
border-radius: 2px;
|
|
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
color: #777;
|
|
margin: 0;
|
|
width: 210px;
|
|
max-width: 100%;
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
border: 1px solid #ccc;
|
|
padding: 6px 4px;
|
|
outline: none;
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
border-radius: 2px;
|
|
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
color: #777;
|
|
margin: 0;
|
|
width: 210px;
|
|
max-width: 100%;
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
background: #fff;
|
|
}
|
|
|
|
select {
|
|
border: 1px solid #ccc;
|
|
padding: 6px 4px;
|
|
outline: none;
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
border-radius: 2px;
|
|
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
color: #777;
|
|
margin: 0;
|
|
width: 210px;
|
|
max-width: 100%;
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
background: #fff;
|
|
padding: 0;
|
|
}
|
|
|
|
input {
|
|
&[type="text"]:focus, &[type="password"]:focus, &[type="email"]:focus {
|
|
border: 1px solid #aaa;
|
|
color: #444;
|
|
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
|
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
&:focus {
|
|
border: 1px solid #aaa;
|
|
color: #444;
|
|
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
|
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
min-height: 60px;
|
|
}
|
|
|
|
label, legend {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
}
|
|
|
|
select {
|
|
width: 220px;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
display: inline;
|
|
}
|
|
|
|
label span, legend span {
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
color: #444;
|
|
}
|
|
|
|
/* #Misc
|
|
================================================== */
|
|
|
|
.remove-bottom {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.half-bottom {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.add-bottom {
|
|
margin-bottom: 20px !important;
|
|
} |