<span class="icon _virtual-marketing _before " style=""></span>
<span class="icon {{modifier}} {{#if after}}_after{{else}}_before{{/if}} {{#if circle}}_circle{{/if}}" style="{{style}}"></span>
{
  "modifier": "_virtual-marketing",
  "style": null,
  "circle": null,
  "after": null
}
  • Content:
    @import "brand/assets/fonts/icons/ss_ficons_mkt"; // This SCSS file is built by `gulp iconfont`
    .icons {
        &,
        svg {
            position: absolute;
            width: 0;
            height: 0;
        }
    }
    .icon {
        &._circle._before::before,
        &._circle._after::after {
            @include circle-background($background: transparent, $color: theme-color(main), $font-size: 1.75*$font-size-base, $border-color: theme-color(main));
        }
        &._circle._smaller._before::before,
        &._circle._smaller._after::after {
            @include circle-size(.75*$font-size-base);
        }
        &._circle._small._before::before,
        &._circle._small._after::after {
            @include circle-size(1.25*$font-size-base);
        }
        &._circle._large._before::before,
        &._circle._large._after::after {
            @include circle-size(2.25*$font-size-base);
        }
        &._circle._font-large._before::before,
        &._circle._font-large._after::after {
            // ¯\_(ツ)_/¯
            @include circle-size(2.25*$font-size-base, 2px, 3.5*$font-size-base);
        }
        &._circle._white._before::before,
        &._circle._white._after::after {
            @include circle-color($background: transparent, $color: theme-color(text, inverse), $border-color: get-color(neutral, 0));
        }
        &._circle._solid._white._before::before,
        &._circle._solid._white._after::after {
            @include circle-color($background: get-color(neutral, 0), $color: theme-color(main, dark), $border-color: get-color(neutral, 0));
        }
        &._circle._twocolor._before,
        &._circle._twocolor._after {
            &::before,
            &::after {
                @include circle-color($background: transparent, $color: theme-color(text, inverse), $border-color: theme-color(main, light));
            }
            &.is-active::before,
            &.is-active::after {
                @include circle-color(transparent, theme-color(main, darkest), theme-color(main));
            }
        }
        &._circle._gray._before::before,
        &._circle._gray._after::after {
            @include circle-color($background: get-color(neutral, 200), $color: theme-color(text, inverse));
        }
        &._circle._gray._inverse._before::before,
        &._circle._gray._inverse._after::after {
            @include circle-color($background: transparent, $color: get-color(neutral, 400), $border-color: get-color(neutral, 400));
        }
        &._circle._green._before::before,
        &._circle._green._after::after {
            @include circle-color($background: theme-color(main), $color: theme-color(text, inverse));
        }
        &._circle._teal._before::before,
        &._circle._teal._after::after {
            @include circle-color($background: get-color(teal, 600), $color: theme-color(text));
        }
        &._circle._blue._before::before,
        &._circle._blue._after::after {
            @include circle-color($background: get-color(aqua, 700), $color: theme-color(text, inverse));
        }
        &._circle._blue._light._before::before,
        &._circle._blue._light._after::after {
            @include circle-color($background: to get-color(aqua, 600), $color: theme-color(text, inverse));
        }
        &._circle._inverse._before,
        &._circle._inverse._after {
            &::before,
            &::after {
                @include circle-color($background: transparent, $color: get-color(neutral, 400), $border-color: get-color(neutral, 400));
            }
            &.is-active::before,
            &.is-active::after {
                @include circle-color($background: theme-color(main), $color: theme-color(text, inverse), $border-color: theme-color(main));
            }
        }
        &._circle._twitterblue._before::before,
        &._circle._twitterblue._after::after,
        &._circle._twitter._blue._before::before,
        &._circle._twitter._blue._after::after {
            @include circle-color($background: get-network-color(twitter), $color: theme-color(text, inverse));
        }
        &._circle._facebook._blue._before::before,
        &._circle._facebook._blue._after::after {
            @include circle-color($background: get-network-color(facebook), $color: theme-color(text, inverse));
        }
        &._circle._linkedin._blue._before::before,
        &._circle._linkedin._blue._after::after {
            @include circle-color($background: get-network-color(linkedin), $color: theme-color(text, inverse));
        }
        &._circle._instagram._blue._before::before,
        &._circle._instagram._blue._after::after {
            @include circle-color($background: get-network-color(instagram), $color: theme-color(text, inverse));
        }
        &._circle._youtube._red._before::before,
        &._circle._youtube._red._after::after {
            @include circle-color($background: get-network-color(youtube), $color: theme-color(text, inverse));
        }
        &._circle._googleplus._red._before::before,
        &._circle._googleplus._red._after::after {
            @include circle-color($background: get-network-color(googleplus), $color: theme-color(text, inverse));
        }
        &._social._before::before,
        &._social._after::after {
            @include circle-color($background: get-color(neutral, 300));
        }
    }
    
  • URL: /components/raw/icon/Icon.scss
  • Filesystem Path: components/atoms/Icon/Icon.scss
  • Size: 5 KB

There are no notes for this item.