Skip to content

Instantly share code, notes, and snippets.

@allanwhite
Created September 21, 2016 19:40
Show Gist options
  • Save allanwhite/d243e53fed7d2411638b11e2e77507cd to your computer and use it in GitHub Desktop.
Save allanwhite/d243e53fed7d2411638b11e2e77507cd to your computer and use it in GitHub Desktop.
A SASS variable & Mixin boilerplate for codepen work.
$c_brand: #2098CA;
$c_brand-alt: #1055ff; // stratum blue
// key gray scale colors used with microcopy
$c_primary: #111;
$c_secondary: #848484;
$c_lightest_gray: #ddd;
$c_light_gray: #aaa;
$c_mid_gray: #777;
$c_dark_gray: #444;
// monochromatic blue scale - #2098CA based
$c_light1: #F0F5F7; // lightest
$c_light2: #E1F1F7;
$c_light3: #D1E2E9;
$c_light4: #C5D7DF;
$c_mid1: #95B8C6;
$c_dark1: #186787;
$c_dark2: #05425D; // darkest
// monochromatic blue scale - #1055FF based
$c_b_light1: #EFF2F4;
$c_b_light3: #D4E0E8;
$c_b_mid1: #64737D;
$c_b_dark1: #313C45;
$c_b_dark2: #141C22;
// BaaS purples
$c_light_purple: #E1E4F7;
// HL7 oranges
$c_orange: #F88A34;
$c_light_orange: #FFF1E6;
$c_dark_orange: #E46909;
$c_fhir: #F81903;
$c_fhir_dark: #7D120A;
// Blog Purple
$c_mid_purple: #7E27CA;
// Reds
$c_red: #E13333; // validation
$c_red_accent: #C8132A;
// Action green
$c_green: #94cb57;
// Innovation Series Yellow
$c_yellow: #FAF300;
$c_mid_yellow: #EFD300;
$c_dark_yellow: #99951D;
$c_b_yellow: #E8F198;
// New Innovation series - yellow-green
$c_yellow_green: hsl(68, 100%, 75%);
// Redpoint
$c_redpoint: #D93939;
$c_redpoint_light: #F4B5B5;
$c_redpoint_dark: #7D120A;
// Why Colors
$c_why-db: #0B1B40;
$c_why-light-text: #F6FCFF;
$c_why-compliment: #FFCE8D;
$c_border: #BAC8D8;
$c_compliance: #242F36; // compliance will be rewarded
$c_stratum: #426788;
.color-white {
background-color: white;
}
.color-primary {
background-color: $c_brand-alt;
&-light {
background-color: $c_b_light1;
}
}
@mixin border-radius($radius){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@mixin easing($s){
-moz-transition: all $s ease;
-webkit-transition: all $s ease;
-o-transition: all $s ease;
transition: all $s ease
}
@mixin box-shadow($shadow1, $shadow2:false, $shadow3:false){
$shadow: $shadow1;
@if $shadow2 != false
{ $shadow: $shadow1, $shadow2; }
@if $shadow3 != false
{ $shadow: $shadow1, $shadow2, $shadow3; }
-moz-box-shadow: $shadow;
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment