daily pastebin goal
7%
SHARE
TWEET

Untitled

a guest May 17th, 2018 107 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Colors
  2. $black: #000000;
  3. $grey: #f4f4f4;
  4. $pale-grey: #6c94a3;
  5. $white: #ffffff;
  6. $navy: #004057;
  7. $blue: #00aac0;
  8. $pale-blue: #eff7f9;
  9. $purple: #5d1f84;
  10. $pink: #e461bc;
  11. $pale-pink: #e461bc;
  12. $orange: #fb9d55;
  13.  
  14. // Colors
  15. $colors: (
  16.   navy: ($navy),
  17.   blue: ($blue),
  18.   orange: ($orange),
  19.   pink: ($pink),
  20.   purple: ($purple),
  21. ) !default;
  22.  
  23. $icons_list: (
  24.   'menu',
  25.   'search',
  26.   'language',
  27.   'finance',
  28.   'presse',
  29.   'job',
  30.   'house',
  31.   'social-facebook',
  32.   'social-twitter',
  33.   'social-gplus',
  34.   'social-linkedin',
  35.   'social-youtube',  
  36. ) !default;
  37.  
  38. // Mixin to generate icons classes with colorized SVG background images.
  39. @mixin icons($list) {
  40.   @each $icon in $list {
  41.     .icon--#{$icon}:before,
  42.     .icon--after.icon--#{$icon}:after {
  43.       -webkit-mask-image: url('../../images/icons/icon_#{$icon}.svg');
  44.       -webkit-mask-size: 90% 90%;
  45.       -webkit-mask-position: center;
  46.       -webkit-mask-repeat: no-repeat;
  47.       mask-image: url('../../images/icons/icon_#{$icon}.svg');
  48.       mask-size: 90%;
  49.       mask-position: center;
  50.       mask-repeat: no-repeat;      
  51.     }
  52.     // Colors
  53.     @each $key, $color in $colors {
  54.       .icon--#{$icon}-#{$key}:before {
  55.         @extend .icon--#{$icon};
  56.         background-color: #{$color};
  57.       }
  58.     }
  59.   }
  60. }
  61.  
  62. // Generate CSS.
  63. @include icons($icons_list);
RAW Paste Data
Top