// ********************************************* // | | // | STACKICONS-SOCIAL "MULTI-COLOR" | // | OVERIDE CLASSES - SHAPES | // | | // ********************************************* // If you want to be able to override icon shapes // on the fly via CSS classes, then @import this // _partial file into stackicons.scss. // If you're happy with the defaults generated // by _construction-kit-stackicons-social.scss // and _multi-color-stackicons-social.scss then // comment-out the @import of this file in // stackicons.scss to cut the extraneous CSS. /* There are 6 button classes (parent or icon) - .st-shape-square: square button shape also: .st-shape-sq .st-shape-r0 - .st-shape-rounded1: slightly rounded button (Android) also: .st-shape-r1 - .st-shape-rounded2: rounded button also: .st-shape-rounded .st-shape-r2 - .st-shape-rounded3: more rounded button (iOS 7) also: .st-shape-r3 - .st-shape-circle: circle button also: .st-shape-cir .st-shape-rounded4 .st-shape-r4 - .st-shape-icon: no button, icon only also: .st-shape-rounded5 (yes, it's not actually rounded) .st-shape-r5 */ // BUTTON SHAPE OVERRIDE CLASSES... // pretty straightforward, we're just changing the button-shape at c0. // Stackicons-Social-Minimal: // @each $brand in adn, codepen, dribbble, dribbble-alt, email, email2, facebook, facebook-alt, flickr, github, github-alt, gmail, gmail-alt, googleplus, instagram, linkedin, pinboard, pinterest, rss, tumblr, twitter, vimeo, youtube, youtube2, youtube-alt, youtube-alt-sm, menu, menu-alt, menu-alt2, search, triangle-down { // Standard: @each $brand in addthis, adn, amazon, android, apple, behance, blogger, codepen, delicious, deviantart, digg, dribbble, dribbble-alt, dropbox, ebay, email, email2, evernote, facebook, facebook-alt, flattr, flickr, forrst, foursquare, github, github-alt, gittip, gmail, gmail-alt, google, googleplus, imdb, instagram, kickstarter, lastfm, linkedin, microsoft, myspace, pandora, paypal, paypal2, picasa, pinboard, pinterest, rdio, reddit, rss, sharethis, skype, slideshare, soundcloud, spotify, stackoverflow, stumbleupon, tumblr, twitter, vimeo, vine, windows, windows7, wordpress, xing, yahoo, yelp, youtube, youtube2, youtube-alt, youtube-alt-sm, zerply, menu, menu-alt, menu-alt2, more, search, search-alt, triangle-down { // * Stackicons-Social-Complete // adding email-alt, email-alt2, gmail-lg, gmail-lg-alt, // instagram-alt, instagram-alt2, pinterest-alt, podcast, // yahoo-alt, yelp-alt, youtube-alt2, more triangles... // @each $brand in addthis, adn, amazon, android, apple, behance, blogger, codepen, delicious, deviantart, deviantart-alt, digg, dribbble, dribbble-alt, dropbox, ebay, email, email2, email-alt, email-alt2, evernote, facebook, facebook-alt, flattr, flickr, forrst, foursquare, github, github-alt, gittip, gmail, gmail-alt, gmail-lg, gmail-lg-alt, google, googleplus, imdb, instagram, instagram-alt, instagram-alt2, kickstarter, lastfm, linkedin, microsoft, myspace, pandora, paypal, paypal2, picasa, pinboard, pinterest, pinterest-alt, podcast, rdio, reddit, rss, sharethis, skype, slideshare, soundcloud, spotify, stackoverflow, stumbleupon, tumblr, twitter, vimeo, vine, windows, windows7, wordpress, xing, yahoo, yahoo-alt, yelp, yelp-alt, youtube, youtube2, youtube-alt, youtube-alt-sm, youtube-alt2, zerply, cart, menu, menu-alt, menu-alt2, more, search, search-alt, triangle-down, triangle-left, triangle-right, triangle-up { // square .st-shape-square.st-multi-color .st-icon-#{$brand}:before, .st-shape-square.st-multi-color.st-icon-#{$brand}:before, .st-shape-square .st-multi-color.st-icon-#{$brand}:before, .st-shape-sq.st-multi-color .st-icon-#{$brand}:before, .st-shape-sq.st-multi-color.st-icon-#{$brand}:before, .st-shape-sq .st-multi-color.st-icon-#{$brand}:before, .st-shape-r0.st-multi-color .st-icon-#{$brand}:before, .st-shape-r0.st-multi-color.st-icon-#{$brand}:before, .st-shape-r0 .st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-square.st-icon-#{$brand}:before, .st-multi-color .st-shape-sq.st-icon-#{$brand}:before, .st-multi-color .st-shape-r0.st-icon-#{$brand}:before { content: $btn-shape-sq; // * in stackicons-social-complete @if $brand == instagram-alt { content: $instagram-alt-c1-alt0; } // * in stackicons-social-complete @if $brand == yahoo-alt { content: $yahoo-alt-c0-alt; } } // end square // rounded1 (r1) - slightly rounded (Android) .st-shape-rounded1.st-multi-color .st-icon-#{$brand}:before, .st-shape-rounded1.st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded1 .st-multi-color.st-icon-#{$brand}:before, .st-shape-r1.st-multi-color .st-icon-#{$brand}:before, .st-shape-r1.st-multi-color.st-icon-#{$brand}:before, .st-shape-r1 .st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-rounded1.st-icon-#{$brand}:before, .st-multi-color .st-shape-r1.st-icon-#{$brand}:before { content: $btn-shape-r1; // * in stackicons-social-complete @if $brand == instagram-alt { content: $instagram-alt-c1-alt1; } } // end rounded1 (r1) // rounded2 (r2) - rounded .st-shape-rounded.st-multi-color .st-icon-#{$brand}:before, .st-shape-rounded.st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded .st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded2.st-multi-color .st-icon-#{$brand}:before, .st-shape-rounded2.st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded2 .st-multi-color.st-icon-#{$brand}:before, .st-shape-r2.st-multi-color .st-icon-#{$brand}:before, .st-shape-r2.st-multi-color.st-icon-#{$brand}:before, .st-shape-r2 .st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-rounded.st-icon-#{$brand}:before, .st-multi-color .st-shape-rounded2.st-icon-#{$brand}:before, .st-multi-color .st-shape-r2.st-icon-#{$brand}:before { content: $btn-shape-r2; // * in stackicons-social-complete @if $brand == instagram-alt { content: $instagram-alt-c1-alt2; } } // end rounded2 (r2) // rounded3 (r3) - more rounded (iOS 7) .st-shape-rounded3.st-multi-color .st-icon-#{$brand}:before, .st-shape-rounded3.st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded3 .st-multi-color.st-icon-#{$brand}:before, .st-shape-r3.st-multi-color .st-icon-#{$brand}:before, .st-shape-r3.st-multi-color.st-icon-#{$brand}:before, .st-shape-r3 .st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-rounded3.st-icon-#{$brand}:before, .st-multi-color .st-shape-r3.st-icon-#{$brand}:before { content: $btn-shape-r3; // * in stackicons-social-complete @if $brand == instagram-alt { content: $instagram-alt-c1-alt3; } } // end rounded3 (r3) // circle (cir) .st-shape-circle.st-multi-color .st-icon-#{$brand}:before, .st-shape-circle.st-multi-color.st-icon-#{$brand}:before, .st-shape-circle .st-multi-color.st-icon-#{$brand}:before, .st-shape-cir.st-multi-color .st-icon-#{$brand}:before, .st-shape-cir.st-multi-color.st-icon-#{$brand}:before, .st-shape-cir .st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded4.st-multi-color .st-icon-#{$brand}:before, .st-shape-rounded4.st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded4 .st-multi-color.st-icon-#{$brand}:before, .st-shape-r4.st-multi-color .st-icon-#{$brand}:before, .st-shape-r4.st-multi-color.st-icon-#{$brand}:before, .st-shape-r4 .st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-circle.st-icon-#{$brand}:before, .st-multi-color .st-shape-cir.st-icon-#{$brand}:before, .st-multi-color .st-shape-rounded4.st-icon-#{$brand}:before, .st-multi-color .st-shape-r4.st-icon-#{$brand}:before { content: $btn-shape-cir; // * in stackicons-social-complete @if $brand == instagram-alt { content: $instagram-alt-c1-alt4; } } // end circle } // end @each // These multi-color icons vary elements based on shape: // deviantart, deviantart-alt, email-alt, email-alt2, // facebook, foursquare, imdb, instagram-alt, youtube-alt2 // * in stackicons-social-complete // deviantart-alt .st-shape-circle.st-multi-color .st-icon-deviantart-alt span:before, .st-shape-circle.st-multi-color.st-icon-deviantart-alt span:before, .st-shape-circle .st-multi-color.st-icon-deviantart-alt span:before, .st-shape-cir.st-multi-color .st-icon-deviantart-alt span:before, .st-shape-cir.st-multi-color.st-icon-deviantart-alt span:before, .st-shape-cir .st-multi-color.st-icon-deviantart-alt span:before, .st-shape-rounded4.st-multi-color .st-icon-deviantart-alt span:before, .st-shape-rounded4.st-multi-color.st-icon-deviantart-alt span:before, .st-shape-rounded4 .st-multi-color.st-icon-deviantart-alt span:before, .st-shape-r4.st-multi-color .st-icon-deviantart-alt span:before, .st-shape-r4.st-multi-color.st-icon-deviantart-alt span:before, .st-shape-r4 .st-multi-color.st-icon-deviantart-alt span:before, .st-multi-color .st-shape-circle.st-icon-deviantart-alt span:before, .st-multi-color .st-shape-cir.st-icon-deviantart-alt span:before, .st-multi-color .st-shape-rounded4.st-icon-deviantart-alt span:before, .st-multi-color .st-shape-r4.st-icon-deviantart-alt span:before { content: $deviantart-alt-c1-alt2; // cropped for circle } // * in stackicons-social-complete // email-alt2 .st-shape-circle.st-multi-color .st-icon-email-alt2 span:before, .st-shape-circle.st-multi-color.st-icon-email-alt2 span:before, .st-shape-circle .st-multi-color.st-icon-email-alt2 span:before, .st-shape-cir.st-multi-color .st-icon-email-alt2 span:before, .st-shape-cir.st-multi-color.st-icon-email-alt2 span:before, .st-shape-cir .st-multi-color.st-icon-email-alt2 span:before, .st-shape-rounded4.st-multi-color .st-icon-email-alt2 span:before, .st-shape-rounded4.st-multi-color.st-icon-email-alt2 span:before, .st-shape-rounded4 .st-multi-color.st-icon-email-alt2 span:before, .st-shape-r4.st-multi-color .st-icon-email-alt2 span:before, .st-shape-r4.st-multi-color.st-icon-email-alt2 span:before, .st-shape-r4 .st-multi-color.st-icon-email-alt2 span:before, .st-multi-color .st-shape-circle.st-icon-email-alt2 span:before, .st-multi-color .st-shape-cir.st-icon-email-alt2 span:before, .st-multi-color .st-shape-rounded4.st-icon-email-alt2 span:before, .st-multi-color .st-shape-r4.st-icon-email-alt2 span:before { content: $email-alt2-c2-cir; // cropped for circle } // * in stackicons-social-complete // imdb .st-shape-square.st-multi-color .st-icon-imdb span:before, .st-shape-square.st-multi-color.st-icon-imdb span:before, .st-shape-square .st-multi-color.st-icon-imdb span:before, .st-shape-sq.st-multi-color .st-icon-imdb span:before, .st-shape-sq.st-multi-color.st-icon-imdb span:before, .st-shape-sq .st-multi-color.st-icon-imdb span:before, .st-shape-r0.st-multi-color .st-icon-imdb span:before, .st-shape-r0.st-multi-color.st-icon-imdb span:before, .st-shape-r0 .st-multi-color.st-icon-imdb span:before, .st-s0.st-multi-color .st-icon-imdb span:before, .st-s0.st-multi-color.st-icon-imdb span:before, .st-s0 .st-multi-color.st-icon-imdb span:before, .st-multi-color .st-shape-square.st-icon-imdb span:before, .st-multi-color .st-shape-sq.st-icon-imdb span:before, .st-multi-color .st-shape-r0.st-icon-imdb span:before, .st-multi-color .st-s0.st-icon-imdb span:before { content: $imdb-c1-alt0; } .st-shape-rounded1.st-multi-color .st-icon-imdb span:before, .st-shape-rounded1.st-multi-color.st-icon-imdb span:before, .st-shape-rounded1 .st-multi-color.st-icon-imdb span:before, .st-shape-r1.st-multi-color .st-icon-imdb span:before, .st-shape-r1.st-multi-color.st-icon-imdb span:before, .st-shape-r1 .st-multi-color.st-icon-imdb span:before, .st-multi-color .st-shape-rounded1.st-icon-imdb span:before, .st-multi-color .st-shape-r1.st-icon-imdb span:before { content: $imdb-c1-alt1; } .st-shape-rounded.st-multi-color .st-icon-imdb span:before, .st-shape-rounded.st-multi-color.st-icon-imdb span:before, .st-shape-rounded .st-multi-color.st-icon-imdb span:before, .st-shape-rounded2.st-multi-color .st-icon-imdb span:before, .st-shape-rounded2.st-multi-color.st-icon-imdb span:before, .st-shape-rounded2 .st-multi-color.st-icon-imdb span:before, .st-shape-r2.st-multi-color .st-icon-imdb span:before, .st-shape-r2.st-multi-color.st-icon-imdb span:before, .st-shape-r2 .st-multi-color.st-icon-imdb span:before, .st-multi-color .st-shape-rounded.st-icon-imdb span:before, .st-multi-color .st-shape-rounded2.st-icon-imdb span:before, .st-multi-color .st-shape-r2.st-icon-imdb span:before { content: $imdb-c1-alt2; } .st-shape-rounded3.st-multi-color .st-icon-imdb span:before, .st-shape-rounded3.st-multi-color.st-icon-imdb span:before, .st-shape-rounded3 .st-multi-color.st-icon-imdb span:before, .st-shape-r3.st-multi-color .st-icon-imdb span:before, .st-shape-r3.st-multi-color.st-icon-imdb span:before, .st-shape-r3 .st-multi-color.st-icon-imdb span:before, .st-multi-color .st-shape-rounded3.st-icon-imdb span:before, .st-multi-color .st-shape-r3.st-icon-imdb span:before { content: $imdb-c1-alt3; } .st-shape-circle.st-multi-color .st-icon-imdb span:before, .st-shape-circle.st-multi-color.st-icon-imdb span:before, .st-shape-circle .st-multi-color.st-icon-imdb span:before, .st-shape-cir.st-multi-color .st-icon-imdb span:before, .st-shape-cir.st-multi-color.st-icon-imdb span:before, .st-shape-cir .st-multi-color.st-icon-imdb span:before, .st-shape-rounded4.st-multi-color .st-icon-imdb span:before, .st-shape-rounded4.st-multi-color.st-icon-imdb span:before, .st-shape-rounded4 .st-multi-color.st-icon-imdb span:before, .st-shape-r4.st-multi-color .st-icon-imdb span:before, .st-shape-r4.st-multi-color.st-icon-imdb span:before, .st-shape-r4 .st-multi-color.st-icon-imdb span:before, .st-multi-color .st-shape-circle.st-icon-imdb span:before, .st-multi-color .st-shape-cir.st-icon-imdb span:before, .st-multi-color .st-shape-rounded4.st-icon-imdb span:before, .st-multi-color .st-shape-r4.st-icon-imdb span:before { content: $imdb-c1-alt4; } .st-shape-square.st-multi-color .st-icon-imdb span:after, .st-shape-square.st-multi-color.st-icon-imdb span:after, .st-shape-square .st-multi-color.st-icon-imdb span:after, .st-shape-sq.st-multi-color .st-icon-imdb span:after, .st-shape-sq.st-multi-color.st-icon-imdb span:after, .st-shape-sq .st-multi-color.st-icon-imdb span:after, .st-shape-r0.st-multi-color .st-icon-imdb span:after, .st-shape-r0.st-multi-color.st-icon-imdb span:after, .st-shape-r0 .st-multi-color.st-icon-imdb span:after, .st-s0.st-multi-color .st-icon-imdb span:after, .st-s0.st-multi-color.st-icon-imdb span:after, .st-s0 .st-multi-color.st-icon-imdb span:after, .st-multi-color .st-shape-square.st-icon-imdb span:after, .st-multi-color .st-shape-sq.st-icon-imdb span:after, .st-multi-color .st-shape-r0.st-icon-imdb span:after, .st-multi-color .st-s0.st-icon-imdb span:after { content: $imdb-c2-alt0; } .st-shape-rounded1.st-multi-color .st-icon-imdb span:after, .st-shape-rounded1.st-multi-color.st-icon-imdb span:after, .st-shape-rounded1 .st-multi-color.st-icon-imdb span:after, .st-shape-r1.st-multi-color .st-icon-imdb span:after, .st-shape-r1.st-multi-color.st-icon-imdb span:after, .st-shape-r1 .st-multi-color.st-icon-imdb span:after, .st-multi-color .st-shape-rounded1.st-icon-imdb span:after, .st-multi-color .st-shape-r1.st-icon-imdb span:after { content: $imdb-c2-alt1; } .st-shape-rounded.st-multi-color .st-icon-imdb span:after, .st-shape-rounded.st-multi-color.st-icon-imdb span:after, .st-shape-rounded .st-multi-color.st-icon-imdb span:after, .st-shape-rounded2.st-multi-color .st-icon-imdb span:after, .st-shape-rounded2.st-multi-color.st-icon-imdb span:after, .st-shape-rounded2 .st-multi-color.st-icon-imdb span:after, .st-shape-r2.st-multi-color .st-icon-imdb span:after, .st-shape-r2.st-multi-color.st-icon-imdb span:after, .st-shape-r2 .st-multi-color.st-icon-imdb span:after, .st-multi-color .st-shape-rounded.st-icon-imdb span:after, .st-multi-color .st-shape-rounded2.st-icon-imdb span:after, .st-multi-color .st-shape-r2.st-icon-imdb span:after { content: $imdb-c2-alt2; } .st-shape-rounded3.st-multi-color .st-icon-imdb span:after, .st-shape-rounded3.st-multi-color.st-icon-imdb span:after, .st-shape-rounded3 .st-multi-color.st-icon-imdb span:after, .st-shape-r3.st-multi-color .st-icon-imdb span:after, .st-shape-r3.st-multi-color.st-icon-imdb span:after, .st-shape-r3 .st-multi-color.st-icon-imdb span:after, .st-multi-color .st-shape-rounded3.st-icon-imdb span:after, .st-multi-color .st-shape-r3.st-icon-imdb span:after { content: $imdb-c2-alt3; } .st-shape-circle.st-multi-color .st-icon-imdb span:after, .st-shape-circle.st-multi-color.st-icon-imdb span:after, .st-shape-circle .st-multi-color.st-icon-imdb span:after, .st-shape-cir.st-multi-color .st-icon-imdb span:after, .st-shape-cir.st-multi-color.st-icon-imdb span:after, .st-shape-cir .st-multi-color.st-icon-imdb span:after, .st-shape-rounded4.st-multi-color .st-icon-imdb span:after, .st-shape-rounded4.st-multi-color.st-icon-imdb span:after, .st-shape-rounded4 .st-multi-color.st-icon-imdb span:after, .st-shape-r4.st-multi-color .st-icon-imdb span:after, .st-shape-r4.st-multi-color.st-icon-imdb span:after, .st-shape-r4 .st-multi-color.st-icon-imdb span:after, .st-multi-color .st-shape-circle.st-icon-imdb span:after, .st-multi-color .st-shape-cir.st-icon-imdb span:after, .st-multi-color .st-shape-rounded4.st-icon-imdb span:after, .st-multi-color .st-shape-r4.st-icon-imdb span:after { content: $imdb-c2-alt4; } // Minimal: // @each $brand in facebook { // Stamdard: @each $brand in deviantart, facebook, foursquare { // *stackicons-social-complete: // @each $brand in deviantart, deviantart-alt, email-alt, email-alt2, facebook, foursquare, instagram-alt, youtube-alt2 { .st-shape-square.st-multi-color .st-icon-#{$brand}:after, .st-shape-square.st-multi-color.st-icon-#{$brand}:after, .st-shape-sq.st-multi-color .st-icon-#{$brand}:after, .st-shape-sq.st-multi-color.st-icon-#{$brand}:after, .st-shape-r0.st-multi-color .st-icon-#{$brand}:after, .st-shape-r0.st-multi-color.st-icon-#{$brand}:after, .st-s0.st-multi-color .st-icon-#{$brand}:after, .st-s0.st-multi-color.st-icon-#{$brand}:after, .st-shape-square .st-multi-color.st-icon-#{$brand}:after, .st-shape-sq .st-multi-color.st-icon-#{$brand}:after, .st-shape-r0 .st-multi-color.st-icon-#{$brand}:after, .st-s0 .st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-square.st-icon-#{$brand}:after, .st-multi-color .st-shape-sq.st-icon-#{$brand}:after, .st-multi-color .st-shape-r0.st-icon-#{$brand}:after, .st-multi-color .st-s0.st-icon-#{$brand}:after { @if $brand == deviantart { content: $deviantart-c1-alt0; // bordered logo } // * in stackicons-social-complete @else if $brand == deviantart-alt { content: $deviantart-alt-c2-alt0; // border } // * in stackicons-social-complete @if $brand == email-alt { content: $email-alt-sq; } // * in stackicons-social-complete @if $brand == email-alt2 { content: $email-alt2-sq; } @else if $brand == facebook { content: $facebook-c1; // "f" } @else if $brand == foursquare { content: $foursquare-c3-alt0; // white whoosh } // * in stackicons-social-complete @else if $brand == instagram-alt { content: $instagram-alt-c2-alt0 // tan bottom } // * in stackicons-social-complete @else if $brand == youtube-alt2 { content: $youtube-alt2-sq; } } // end sq // rounded1 (r1) - slightly rounded (Android) .st-shape-rounded1.st-multi-color .st-icon-#{$brand}:after, .st-shape-rounded1.st-multi-color.st-icon-#{$brand}:after, .st-shape-r1.st-multi-color .st-icon-#{$brand}:after, .st-shape-r1.st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded1 .st-multi-color.st-icon-#{$brand}:after, .st-shape-r1 .st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-rounded1.st-icon-#{$brand}:after, .st-multi-color .st-shape-r1.st-icon-#{$brand}:after { @if $brand == deviantart { content: $deviantart-c1-alt1; // bordered logo } // * in stackicons-social-complete @else if $brand == deviantart-alt { content: $deviantart-alt-c2-alt1; // border } // * in stackicons-social-complete @if $brand == email-alt { content: $email-alt-r1; } // * in stackicons-social-complete @if $brand == email-alt2 { content: $email-alt2-r1; } @else if $brand == facebook { content: $facebook-c1; // "f" } @else if $brand == foursquare { content: $foursquare-c3-alt1; // white whoosh } // * in stackicons-social-complete @else if $brand == instagram-alt { content: $instagram-alt-c2-alt1 // tan bottom } // * in stackicons-social-complete @else if $brand == youtube-alt2 { content: $youtube-alt2-r1; } } // end rounded1 (r1) // rounded2 (r2) - rounded .st-shape-rounded.st-multi-color .st-icon-#{$brand}:after, .st-shape-rounded.st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded2.st-multi-color .st-icon-#{$brand}:after, .st-shape-rounded2.st-multi-color.st-icon-#{$brand}:after, .st-shape-r2.st-multi-color .st-icon-#{$brand}:after, .st-shape-r2.st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded .st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded2 .st-multi-color.st-icon-#{$brand}:after, .st-shape-r2 .st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-rounded.st-icon-#{$brand}:after, .st-multi-color .st-shape-rounded2.st-icon-#{$brand}:after, .st-multi-color .st-shape-r2.st-icon-#{$brand}:after { @if $brand == deviantart { content: $deviantart-c1-alt2; // bordered logo } // * in stackicons-social-complete @else if $brand == deviantart-alt { content: $deviantart-alt-c2-alt2; // border } // * in stackicons-social-complete @if $brand == email-alt { content: $email-alt-r2; } // * in stackicons-social-complete @if $brand == email-alt2 { content: $email-alt2-r2; } @else if $brand == facebook { content: $facebook-c1; // "f" } @else if $brand == foursquare { content: $foursquare-c3-alt2; // white whoosh } // * in stackicons-social-complete @else if $brand == instagram-alt { content: $instagram-alt-c2-alt2 // tan bottom } // * in stackicons-social-complete @else if $brand == youtube-alt2 { content: $youtube-alt2-r2; } } // end rounded2 (r2) // rounded3 (r3) - more rounded (iOS 7) .st-shape-rounded3.st-multi-color .st-icon-#{$brand}:after, .st-shape-rounded3.st-multi-color.st-icon-#{$brand}:after, .st-shape-r3.st-multi-color .st-icon-#{$brand}:after, .st-shape-r3.st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded3 .st-multi-color.st-icon-#{$brand}:after, .st-shape-r3 .st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-rounded3.st-icon-#{$brand}:after, .st-multi-color .st-shape-r3.st-icon-#{$brand}:after { @if $brand == deviantart { content: $deviantart-c1-alt3; // bordered logo } // * in stackicons-social-complete @else if $brand == deviantart-alt { content: $deviantart-alt-c2-alt3; // border } // * in stackicons-social-complete @if $brand == email-alt { content: $email-alt-r3; } // * in stackicons-social-complete @if $brand == email-alt2 { content: $email-alt2-r3; } @else if $brand == facebook { content: $facebook-c1; // "f" } @else if $brand == foursquare { content: $foursquare-c3-alt3; // white whoosh } // * in stackicons-social-complete @else if $brand == instagram-alt { content: $instagram-alt-c2-alt3 // tan bottom } // * in stackicons-social-complete @else if $brand == youtube-alt2 { content: $youtube-alt2-r3; } } // end rounded3 (r3) // circle (cir) .st-shape-circle.st-multi-color .st-icon-#{$brand}:after, .st-shape-circle.st-multi-color.st-icon-#{$brand}:after, .st-shape-cir.st-multi-color .st-icon-#{$brand}:after, .st-shape-cir.st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded4.st-multi-color .st-icon-#{$brand}:after, .st-shape-rounded4.st-multi-color.st-icon-#{$brand}:after, .st-shape-r4.st-multi-color .st-icon-#{$brand}:after, .st-shape-r4.st-multi-color.st-icon-#{$brand}:after, .st-shape-circle .st-multi-color.st-icon-#{$brand}:after, .st-shape-cir .st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded4 .st-multi-color.st-icon-#{$brand}:after, .st-shape-r4 .st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-circle.st-icon-#{$brand}:after, .st-multi-color .st-shape-cir.st-icon-#{$brand}:after, .st-multi-color .st-shape-rounded4.st-icon-#{$brand}:after, .st-multi-color .st-shape-r4.st-icon-#{$brand}:after { @if $brand == deviantart { content: $deviantart-c1-alt4; // bordered logo } // * in stackicons-social-complete @else if $brand == deviantart-alt { content: $deviantart-alt-c2-alt4; // border } // * in stackicons-social-complete @if $brand == email-alt { content: $email-alt-cir; } // * in stackicons-social-complete @if $brand == email-alt2 { content: $email-alt2-cir; } @else if $brand == facebook { content: $facebook-c1-alt; // "f" cropped for circle } @else if $brand == foursquare { content: $foursquare-c3-alt4; // white whoosh } // * in stackicons-social-complete @else if $brand == instagram-alt { content: $instagram-alt-c2-alt4 // tan bottom } // * in stackicons-social-complete @else if $brand == youtube-alt2 { content: $youtube-alt2-cir; } } // end circle } // end @each // END MULTI-COLOR BUTTON-SHAPE OVERRIDES