mixin.icons_colors.scss

// Colors
$black: #000000;
$grey: #f4f4f4;
$pale-grey: #6c94a3;
$white: #ffffff;
$navy: #004057;
$blue: #00aac0;
$pale-blue: #eff7f9;
$purple: #5d1f84;
$pink: #e461bc;
$pale-pink: #e461bc;
$orange: #fb9d55;

// Colors
$colors: (
  navy: ($navy),
  blue: ($blue),
  orange: ($orange),
  pink: ($pink),
  purple: ($purple),
) !default;

$icons_list: (
  'menu',
  'search',
  'language',
  'finance',
  'presse',
  'job',
  'house',
  'social-facebook',
  'social-twitter',
  'social-gplus',
  'social-linkedin',
  'social-youtube',  
) !default;

// Mixin to generate icons classes with colorized SVG background images.
@mixin icons($list) {
  @each $icon in $list {
    .icon--#{$icon}:before,
    .icon--after.icon--#{$icon}:after {
      -webkit-mask-image: url('../../images/icons/icon_#{$icon}.svg');
      -webkit-mask-size: 90% 90%;
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-image: url('../../images/icons/icon_#{$icon}.svg');
      mask-size: 90%;
      mask-position: center;
      mask-repeat: no-repeat;      
    }
    // Colors
    @each $key, $color in $colors {
      .icon--#{$icon}-#{$key}:before {
        @extend .icon--#{$icon};
        background-color: #{$color};
      }
    }
  }
}

// Generate CSS.
@include icons($icons_list);