eternalistic
2/12/2016 - 6:25 PM

Generated by SassMeister.com.

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');
}