Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // 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);
Add Comment
Please, Sign In to add comment