Created
April 7, 2014 18:31
-
-
Save menor/10027503 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.4) | |
// Compass (v1.0.0.alpha.18) | |
// Bitters (v0.9.2) | |
// Bourbon (v3.2.0.beta.1.a) | |
// Neat (v1.5.0) | |
// ---- | |
@import "bourbon/bourbon"; | |
@import "bourbon/bourbon"; | |
@import "neat/neat"; | |
@import "bitters/bitters"; | |
// Typography | |
/////////////////////////////////////////////////////////////////////////////// | |
$sans-serif: 'OpenSans', $helvetica; | |
$serif: $georgia; | |
$base-font-family: $sans-serif; | |
$header-font-family: $base-font-family; | |
$header-font-weight: 100; | |
// Sizes | |
/////////////////////////////////////////////////////////////////////////////// | |
$base-font-size: 1em; | |
$base-line-height: $base-font-size * 1.5; | |
$base-border-radius: em(3); | |
// Colors | |
/////////////////////////////////////////////////////////////////////////////// | |
// Orange palette | |
$dictatorship: #FC580C; | |
$solid-orange: #FFA927; | |
$meditation: #FDCA49; | |
$light-blue: #69D2E7; | |
$lighter-blue: #A7DBD8; | |
$dark-blue: shade($light-blue, 50); | |
$dark-gray: #555; | |
$medium-gray: #999; | |
$light-gray: #DDD; | |
$light-red: #FBE3E4; | |
$light-yellow: #FFF6BF; | |
$light-green: #E6EFC2; | |
$facebook-blue: #3B5998; | |
// Body Color | |
$base-body-color: $dark-gray; | |
// Font Colors | |
$base-font-color: $dark-gray; | |
$base-accent-color: $dictatorship; | |
// Text Link Colors | |
$base-link-color: $base-accent-color; | |
$hover-link-color: darken($base-accent-color, 30); | |
// Border color | |
$base-border-color: $meditation; | |
// Flash Colors | |
$error-color: $light-red; | |
$notice-color: $light-yellow; | |
$success-color: $light-green; | |
// Neat Overrides | |
/////////////////////////////////////////////////////////////////////////////// | |
$column: 90px; | |
$gutter: 30px; | |
$grid-columns: 12; | |
$max-width: em(960); | |
// Neat Breakpoints | |
/////////////////////////////////////////////////////////////////////////////// | |
$medium-screen: em(640); | |
$large-screen: em(860); | |
$medium-screen-up: new-breakpoint(min-width $medium-screen 4); | |
$large-screen-up: new-breakpoint(min-width $large-screen 8); | |
.bank_account_missing_notice { | |
@include media($medium-screen) { | |
@include span-columns(6); | |
@include shift(3); | |
} | |
@include span-columns(10); | |
@include shift(1); | |
@include flash($solid-orange); | |
margin-top: $base-line-height/2; | |
margin-bottom: $base-line-height/4; | |
color: #FFF; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
button, | |
input[type="submit"] { | |
border: 1px solid #2459a6; | |
border-radius: 3px; | |
box-shadow: inset 0 1px 0 0 #89a8d5; | |
color: white; | |
display: inline-block; | |
font-size: inherit; | |
font-weight: bold; | |
background-color: #477dca; | |
background-image: -webkit-linear-gradient(#477dca, #2760b2); | |
background-image: linear-gradient(#477dca, #2760b2); | |
padding: 7px 18px; | |
text-decoration: none; | |
text-shadow: 0 1px 0 #1b4f9a; | |
background-clip: padding-box; | |
font-size: 1em; | |
} | |
button:hover:not(:disabled), | |
input[type="submit"]:hover:not(:disabled) { | |
box-shadow: inset 0 1px 0 0 #628cc8; | |
cursor: pointer; | |
background-color: #3c71bb; | |
background-image: -webkit-linear-gradient(#3c71bb, #255aa5); | |
background-image: linear-gradient(#3c71bb, #255aa5); | |
} | |
button:active:not(:disabled), | |
input[type="submit"]:active:not(:disabled) { | |
border: 1px solid #2459a6; | |
box-shadow: inset 0 0 8px 4px #235397, inset 0 0 8px 4px #235397, 0 1px 1px 0 #eeeeee; | |
} | |
button:disabled, | |
input[type="submit"]:disabled { | |
opacity: 0.5; | |
cursor: not-allowed; | |
} | |
body { | |
color: #333333; | |
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; | |
font-size: 1em; | |
-webkit-font-smoothing: antialiased; | |
line-height: 1.5em; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; | |
line-height: 1.25em; | |
margin: 0; | |
text-rendering: optimizeLegibility; | |
} | |
h1 { | |
font-size: 2.25em; | |
} | |
h2 { | |
font-size: 2em; | |
} | |
h3 { | |
font-size: 1.75em; | |
} | |
h4 { | |
font-size: 1.5em; | |
} | |
h5 { | |
font-size: 1.25em; | |
} | |
h6 { | |
font-size: 1em; | |
} | |
p { | |
margin: 0 0 0.75em; | |
} | |
a { | |
color: #477dca; | |
text-decoration: none; | |
-webkit-transition: color 0.1s linear; | |
-moz-transition: color 0.1s linear; | |
transition: color 0.1s linear; | |
} | |
a:hover { | |
color: #2c5999; | |
} | |
a:active, a:focus { | |
color: #2c5999; | |
outline: none; | |
} | |
hr { | |
border-bottom: 1px solid #dddddd; | |
border-left: none; | |
border-right: none; | |
border-top: none; | |
margin: 1.5em 0; | |
} | |
img { | |
margin: 0; | |
max-width: 100%; | |
} | |
abbr, acronym { | |
border-bottom: 1px dotted #dddddd; | |
cursor: help; | |
} | |
address { | |
display: block; | |
margin: 0 0 0.75em; | |
} | |
hgroup { | |
margin-bottom: 0.75em; | |
} | |
del { | |
color: #595959; | |
} | |
blockquote { | |
border-left: 2px solid #dddddd; | |
color: #595959; | |
margin: 1.5em 0; | |
padding-left: 0.75em; | |
} | |
cite { | |
color: #737373; | |
font-style: italic; | |
} | |
cite:before { | |
content: '\2014 \00A0'; | |
} | |
fieldset { | |
background: #f7f7f7; | |
border: 1px solid #dddddd; | |
margin: 0 0 0.75em 0; | |
padding: 1.5em; | |
} | |
input, | |
label, | |
select { | |
display: block; | |
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; | |
font-size: 1em; | |
} | |
label { | |
font-weight: bold; | |
margin-bottom: 0.375em; | |
} | |
label.required:after { | |
content: "*"; | |
} | |
label abbr { | |
display: none; | |
} | |
textarea, | |
input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"] { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
-webkit-transition: border-color; | |
-moz-transition: border-color; | |
transition: border-color; | |
background-color: white; | |
border-radius: 0.1875em; | |
border: 1px solid #dddddd; | |
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); | |
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; | |
font-size: 1em; | |
margin-bottom: 0.75em; | |
padding: 0.5em 0.5em; | |
resize: vertical; | |
width: 100%; | |
} | |
textarea:hover, | |
input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover { | |
border-color: #c4c4c4; | |
} | |
textarea:focus, | |
input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus { | |
border-color: #477dca; | |
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7); | |
outline: none; | |
} | |
input[type="search"] { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
-ms-appearance: none; | |
-o-appearance: none; | |
appearance: none; | |
} | |
input[type="checkbox"], input[type="radio"] { | |
display: inline; | |
margin-right: 0.375em; | |
} | |
input[type="file"] { | |
width: 100%; | |
} | |
select { | |
width: auto; | |
margin-bottom: 1.5em; | |
} | |
button, | |
input[type="submit"] { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
-ms-appearance: none; | |
-o-appearance: none; | |
appearance: none; | |
cursor: pointer; | |
user-select: none; | |
vertical-align: middle; | |
white-space: nowrap; | |
} | |
table { | |
border-collapse: collapse; | |
margin: 0.75em 0; | |
table-layout: fixed; | |
width: 100%; | |
} | |
th { | |
border-bottom: 1px solid #b7b7b7; | |
font-weight: bold; | |
padding: 0.75em 0; | |
text-align: left; | |
} | |
td { | |
border-bottom: 1px solid #dddddd; | |
padding: 0.75em 0; | |
} | |
tr, td, th { | |
vertical-align: middle; | |
} | |
ul, ol { | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
dl { | |
line-height: 1.5em; | |
margin-bottom: 0.75em; | |
} | |
dl dt { | |
font-weight: bold; | |
margin-top: 0.75em; | |
} | |
dl dd { | |
margin: 0; | |
} | |
.error, #flash_failure { | |
background: #fbe3e4; | |
color: #96151b; | |
font-weight: bold; | |
margin-bottom: 0.75em; | |
padding: 0.75em; | |
} | |
.error a, #flash_failure a { | |
color: #6a0f13; | |
} | |
.error a:hover, #flash_failure a:hover { | |
color: #110203; | |
} | |
.notice, #flash_notice { | |
background: #fff6bf; | |
color: #8c7800; | |
font-weight: bold; | |
margin-bottom: 0.75em; | |
padding: 0.75em; | |
} | |
.notice a, #flash_notice a { | |
color: #594c00; | |
} | |
.notice a:hover, #flash_notice a:hover { | |
color: black; | |
} | |
.success, #flash_success { | |
background: #e6efc2; | |
color: #56651a; | |
font-weight: bold; | |
margin-bottom: 0.75em; | |
padding: 0.75em; | |
} | |
.success a, #flash_success a { | |
color: #333c10; | |
} | |
.success a:hover, #flash_success a:hover { | |
color: black; | |
} | |
.bank_account_missing_notice { | |
float: left; | |
display: block; | |
margin-right: 2.35765%; | |
width: 82.94039%; | |
margin-left: 8.5298%; | |
background: #ffa927; | |
color: black; | |
font-weight: bold; | |
margin-bottom: 0.75em; | |
padding: 0.75em; | |
margin-top: 0.75em; | |
margin-bottom: 0.375em; | |
color: #FFF; | |
} | |
@media screen and (min-width: 40em) { | |
.bank_account_missing_notice { | |
float: left; | |
display: block; | |
margin-right: 2.35765%; | |
width: 48.82117%; | |
margin-left: 25.58941%; | |
} | |
.bank_account_missing_notice:last-child { | |
margin-right: 0; | |
} | |
} | |
.bank_account_missing_notice:last-child { | |
margin-right: 0; | |
} | |
.bank_account_missing_notice a { | |
color: black; | |
} | |
.bank_account_missing_notice a:hover { | |
color: black; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment