eternalistic
2/12/2016 - 6:44 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: #EB8F2D;
}
// ----
// libsass (v3.2.5)
// ----

// color() mixin:
/////////////////////////////////////////////////////
// Gets the specified color from the color palette //
//                                                 //
// Usage:                                          //
//  background: color('blue');     // #0099CE      //
/////////////////////////////////////////////////////
@function color($color) {
  @return map-get($palettes, $color);
}

// 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':     #0099CE,
  'green':    #39B54A,
  'orange':   #EB8F2D,
  'pink':     #C1167A,
  'purple':   #6D13B0,
  'navy':     #1B1464,
  'brown':    #70614F,
  'gray':     #6D6D6D,
  'lt-gray':  #A8A8A9,
  'dk-brown': #2b2b2b,
  'beige':    #e7e5e3,
  'black':    #000000,
  'white':    #ffffff
);

// Initiatives Map
$initiatives: (
  'arts':         color('blue'),
  'community':    color('pink'),
  'education':    color('orange'),
  'humanitarian': color('green'),
  'nonprofit':    color('navy'),
  'partnerships': 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 $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('orange');
}