Generated by SassMeister.com.
.initiative-category__arts {
background: #0099CE;
}
.initiative-category__arts a.button,
.initiative-category__arts a.button:visited {
border-color: #0099CE;
color: #0099CE;
}
.initiative-category__arts .hero__header a,
.initiative-category__arts .hero__header a:visited {
border-color: #0099CE;
}
.initiative-category__community {
background: #C1167A;
}
.initiative-category__community a.button,
.initiative-category__community a.button:visited {
border-color: #C1167A;
color: #C1167A;
}
.initiative-category__community .hero__header a,
.initiative-category__community .hero__header a:visited {
border-color: #C1167A;
}
.initiative-category__education {
background: #EB8F2D;
}
.initiative-category__education a.button,
.initiative-category__education a.button:visited {
border-color: #EB8F2D;
color: #EB8F2D;
}
.initiative-category__education .hero__header a,
.initiative-category__education .hero__header a:visited {
border-color: #EB8F2D;
}
.initiative-category__humanitarian {
background: #39B54A;
}
.initiative-category__humanitarian a.button,
.initiative-category__humanitarian a.button:visited {
border-color: #39B54A;
color: #39B54A;
}
.initiative-category__humanitarian .hero__header a,
.initiative-category__humanitarian .hero__header a:visited {
border-color: #39B54A;
}
.initiative-category__nonprofit {
background: #1B1464;
}
.initiative-category__nonprofit a.button,
.initiative-category__nonprofit a.button:visited {
border-color: #1B1464;
color: #1B1464;
}
.initiative-category__nonprofit .hero__header a,
.initiative-category__nonprofit .hero__header a:visited {
border-color: #1B1464;
}
.initiative-category__partnerships {
background: #6D13B0;
}
.initiative-category__partnerships a.button,
.initiative-category__partnerships a.button:visited {
border-color: #6D13B0;
color: #6D13B0;
}
.initiative-category__partnerships .hero__header a,
.initiative-category__partnerships .hero__header a:visited {
border-color: #6D13B0;
}
h1 {
background: #0099CE;
}
h2 {
background: #e7e5e3;
}
// ----
// libsass (v3.2.5)
// ----
// color() mixin:
/////////////////////////////////////////////////////
// Gets the specified color from the color palette //
// //
// Usage: //
// background: color('blue'); // #0099CE //
/////////////////////////////////////////////////////
@function color($color, $tone: 'core') {
@if type-of($tone) == 'number' {
@if $tone % 10 == $tone {
$tone: $tone * 10;
}
}
@return map-get(map-get($palettes, $color), $tone);
}
// get-colors() mixin:
@function get-colors($color: null) {
// Return a list of colors available if nothing is passed in.
@if $color == null {
@return map-keys($palettes);
}
// Return the full color map if 'all' is passed in.
@else if $color == 'all' {
@return $palettes;
}
// Return just the color map if a specific color is passed in.
@else {
@return map-get($palettes, $color);
}
}
// get-initiatives() mixin:
@function get-initiatives($color: null) {
// Return a list of initiatives available if nothing is passed in.
@if $color == null {
@return map-keys($initiatives);
}
// Return the full color map if 'all' is passed in.
@else if $color == 'all' {
@return $initiatives;
}
// Return just the color map if a specific color is passed in.
@else {
@return map-get($initiatives, $color);
}
}
/////////////////////////////////////////////////////
// Palette Map
$palettes: (
'blue': (
core: #0099CE
),
'green': (
core: #39B54A
),
'orange': (
core: #EB8F2D
),
'pink': (
core: #C1167A
),
'purple': (
core: #6D13B0
),
'navy': (
core: #1B1464
),
'brown': (
core: #70614F
),
'gray': (
core: #6D6D6D
),
'lt-gray': (
core: #A8A8A9
),
'dk-brown': (
core: #2b2b2b
),
'beige': (
core: #e7e5e3
),
'black': (
core: #000000
),
'white': (
core: #ffffff
)
);
// Initiatives Map
$initiatives: (
'arts': (
core: color('blue')
),
'community': (
core: color('pink')
),
'education': (
core: color('orange')
),
'humanitarian': (
core: color('green')
),
'nonprofit': (
core: color('navy')
),
'partnerships': (
core: color('purple')
)
);
/////////////////////////////////////////////////////
// Variables
$color-keys: get-colors();
$full-color-map: get-colors('all');
$full-initiatives: get-initiatives('all');
/////////////////////////////////////////////////////
// Generate a class for each initiative.
@each $palette-name, $palette in $full-initiatives {
@each $tone, $color in $palette {
.initiative-category__#{$palette-name} {
background: $color;
// Button.
a.button,
a.button:visited {
border-color: $color;
color: $color;
}
// Hero header.
.hero__header {
a,
a:visited {
border-color: $color;
}
}
}
}
}
/////////////////////////////////////////////////////
h1 {
background: color('blue');
}
h2 {
background: color('beige');
}