@import "multi-color-kit-stackicons-social"; // **** BRAAAAND CLASSES... **** / /* Stackicons-Social Full Brand List addthis, adn, amazon, amazon2, android, apple, behance, blogger, codepen, delicious, deviantart, deviantart-alt, 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, 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 nav elements: menu, menu-alt, menu-alt2, more, triangle-down, search, search-alt * added in stackicons-social-complete: email-alt, email-alt2, gmail-lg, gmail-lg-alt, instagram-alt, instagram-alt2, pinterest-alt, podcast, yahoo-alt, yelp-alt, youtube-alt2, cart, triangle-left, triangle-right, triangle-up */ // We break down the list by number of stacked elements // needed for the "multi-color" version of each brand. // For most it's a solid background with a white icon: // ******************** / // ******************** / // 2 ELEMENTS (c0, c1): // Loop through list of the brands that use 2 elements: // $(brand)-c0 and $(brand)-c1 only -- no extra spans... // Un-comment the appropriate @each statment below... // (you can also create your own subset here and elsewhere) // Stackicons-Social-Minimal (subsets the most widely used icons): // @each $brand in adn, codepen, email2, facebook, facebook-alt, github-alt, googleplus, linkedin, pinboard, pinterest, rss, tumblr, twitter, vimeo, youtube-alt-sm, menu, menu-alt, menu-alt2, search, triangle-down { // Standard: @each $brand in addthis, adn, apple, behance, blogger, codepen, deviantart, digg, dropbox, email2, evernote, facebook, facebook-alt, github-alt, gittip, google, googleplus, kickstarter, lastfm, linkedin, myspace, pandora, pinboard, pinterest, rdio, rss, sharethis, soundcloud, stumbleupon, tumblr, twitter, vimeo, vine, windows, wordpress, yahoo, youtube-alt-sm, zerply, menu, menu-alt, menu-alt2, more, search, triangle-down { // * Stackicons-Social-Complete: // (adds email-alt, yahoo-alt, youtube-alt2, plus some added nav elements...) // @each $brand in addthis, adn, apple, behance, blogger, codepen, deviantart, digg, dropbox, email2, email-alt, evernote, facebook, facebook-alt, github-alt, gittip, google, googleplus, kickstarter, lastfm, linkedin, myspace, pandora, pinboard, pinterest, rdio, rss, sharethis, soundcloud, stumbleupon, tumblr, twitter, vimeo, vine, windows, wordpress, yahoo, yahoo-alt, youtube-alt-sm, zerply, cart, menu, menu-alt, menu-alt2, more, search, triangle-down, triangle-left, triangle-right, triangle-up { // c0 (:before) .st-multi-color .st-icon-#{$brand}:before, .st-multi-color.st-icon-#{$brand}:before { // universally applied effect to bg... @include shadow-effect(bg); // functionally, all buttons have the same default // button shape, set in _unicodes-stackicons-social; // so we could just set it here and save some space: // content: $btn-shape-c0-default; // We're keeping them separate here, in case // we want to use different shapes by brand. @if $brand == addthis { content: $addthis-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-addthis); } @else { color: $btn-color-addthis; } } @else if $brand == adn { content: $adn-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-adn); } @else { color: $btn-color-adn; } } @else if $brand == apple { content: $apple-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == behance { content: $behance-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-behance); } @else { color: $btn-color-behance; } } @else if $brand == blogger { content: $blogger-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-blogger); } @else { color: $btn-color-blogger; } } @else if $brand == codepen { content: $codepen-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-codepen); } @else { color: $btn-color-codepen; } } @else if $brand == deviantart { content: $deviantart-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-deviantart); } @else { color: $btn-color-deviantart; } } @else if $brand == digg { content: $digg-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == dropbox { content: $dropbox-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == email2 { content: $email-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // * in stackicons-social-complete @else if $brand == email-alt { content: $email-alt-c0; // icon part of button shape @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-multi-color-email-dk); } @else { color: $icon-multi-color-email-dk; } } @else if $brand == evernote { content: $evernote-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($evernote-green-alt); } @else { color: $evernote-green-alt; } } @else if $brand == facebook { content: $facebook-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-facebook); } @else { color: $btn-color-facebook; } } @else if $brand == facebook-alt { content: $facebook-alt-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-facebook-alt); } @else { color: $btn-color-facebook-alt; } } @else if $brand == github-alt { content: $github-alt-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-github-alt); } @else { color: $btn-color-github-alt; } } @else if $brand == gittip { content: $gittip-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-gittip); } @else { color: $btn-color-gittip; } } @else if $brand == google { content: $google-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-google); } @else { color: $btn-color-google; } } @else if $brand == googleplus { content: $googleplus-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-googleplus); } @else { color: $btn-color-googleplus; } } @else if $brand == kickstarter { content: $kickstarter-c0; // black bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($kickstarter-black); } @else { color: $kickstarter-black; } } @else if $brand == lastfm { content: $lastfm-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-lastfm); } @else { color: $btn-color-lastfm; } } @else if $brand == linkedin { content: $linkedin-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-linkedin); } @else { color: $btn-color-linkedin; } } @else if $brand == myspace { content: $myspace-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-myspace); } @else { color: $btn-color-myspace; } } @else if $brand == pandora { content: $pandora-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-pandora); } @else { color: $btn-color-pandora; } } @else if $brand == pinboard { content: $pinboard-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-pinboard); } @else { color: $btn-color-pinboard; } } @else if $brand == pinterest { content: $pinterest-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-pinterest); } @else { color: $btn-color-pinterest; } } @else if $brand == rdio { content: $rdio-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-rdio); } @else { color: $btn-color-rdio; } } @else if $brand == rss { content: $rss-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-rss); } @else { color: $btn-color-rss; } } @else if $brand == sharethis { content: $sharethis-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-sharethis); } @else { color: $btn-color-sharethis; } } @else if $brand == soundcloud { content: $soundcloud-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-soundcloud); } @else { color: $btn-color-soundcloud; } } @else if $brand == stumbleupon { content: $stumbleupon-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-stumbleupon); } @else { color: $btn-color-stumbleupon; } } @else if $brand == tumblr { content: $tumblr-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-tumblr); } @else { color: $btn-color-tumblr; } } @else if $brand == twitter { content: $twitter-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-twitter); } @else { color: $btn-color-twitter; } } @else if $brand == vimeo { content: $vimeo-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-vimeo); } @else { color: $btn-color-vimeo; } } @else if $brand == vine { content: $vine-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-vine); } @else { color: $btn-color-vine; } } @else if $brand == windows { content: $windows-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-windows); } @else { color: $btn-color-windows; } } @else if $brand == wordpress { content: $wordpress-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-wordpress); } @else { color: $btn-color-wordpress; } } @else if $brand == yahoo { content: $yahoo-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-yahoo); } @else { color: $btn-color-yahoo; } } // * in stackicons-social-complete @else if $brand == yahoo-alt { @if $btn-shape-c0-default == $btn-shape-sq { content: $yahoo-alt-c0-alt; } @else { content: $yahoo-alt-c0; } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-yahoo); } @else { color: $btn-color-yahoo; } } @else if $brand == youtube-alt-sm { content: $youtube-alt-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-white); } @else { color: $youtube-white; } } @else if $brand == zerply { content: $zerply-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($zerply-grey); } @else { color: $zerply-grey; } } // nav elements: // cart ( * in stackicons-social-complete) @else if $brand == cart { content: $cart-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-cart); } @else { color: $btn-color-cart; } } @else if $brand == menu { content: $menu-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-menu); } @else { color: $btn-color-menu; } } @else if $brand == menu-alt { content: $menu-alt-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-menu); } @else { color: $btn-color-menu; } } @else if $brand == menu-alt2 { content: $menu-alt2-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-menu); } @else { color: $btn-color-menu; } } @else if $brand == more { content: $more-c0; // ellipsis... @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-more); } @else { color: $btn-color-more; } } @else if $brand == search { content: $search-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-search); } @else { color: $btn-color-search; } } @else if $brand == triangle-down { content: $triangle-down-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-triangle); } @else { color: $btn-color-triangle; } } // ( * in stackicons-social-complete) @else if $brand == triangle-left { content: $triangle-left-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-triangle); } @else { color: $btn-color-triangle; } } // ( * in stackicons-social-complete) @else if $brand == triangle-right { content: $triangle-right-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-triangle); } @else { color: $btn-color-triangle; } } // ( * in stackicons-social-complete) @else if $brand == triangle-up { content: $triangle-up-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-triangle); } @else { color: $btn-color-triangle; } } } // end c0 (2 elememts) // do the hover! // c0 (:before - 2 elements) .st-multi-color .st-icon-#{$brand}:hover:before, .st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-icon-#{$brand}:focus:before, .st-multi-color.st-icon-#{$brand}:focus:before { // universally applied effect to bg... @include shadow-effect(bg-hover); // addthis @if $brand == addthis { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-addthis); } @else { color: $btn-color-addthis; } } // end addthis // adn @else if $brand == adn { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-adn); } @else { color: $btn-color-adn; } } // end adn // apple @else if $brand == apple { // light bg @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end apple // behance @else if $brand == behance { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-behance); } @else { color: $btn-color-behance; } } // end behance // blogger @else if $brand == blogger { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-blogger); } @else { color: $btn-color-blogger; } } // end blogger // codepen @else if $brand == codepen { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-codepen); } @else { color: $btn-color-codepen; } } // end codepen // deviantart @else if $brand == deviantart { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-deviantart); } @else { color: $btn-color-deviantart; } } // end deviantart // digg @else if $brand == digg { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end digg // dropbox @else if $brand == dropbox { // light bg @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end dropbox // email2 @else if $brand == email2 { // light bg @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end email2 // * in stackicons-social-complete // email-alt @else if $brand == email-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-multi-color-email-dk); } @else { color: $icon-multi-color-email-dk; } } // end email-alt // evernote @else if $brand == evernote { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($evernote-green-alt); } @else { color: $evernote-green-alt; } } // end evernote // facebook @else if $brand == facebook { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-facebook); } @else { color: $btn-color-facebook; } } // end facebook // facebook-alt @else if $brand == facebook-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-facebook-alt); } @else { color: $btn-color-facebook-alt; } } // end facebook-alt // github-alt @else if $brand == github-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-github-alt); } @else { color: $btn-color-github-alt; } } // end github-alt // gittip @else if $brand == gittip { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-gittip); } @else { color: $btn-color-gittip; } } // end gittip // google @else if $brand == google { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-google); } @else { color: $btn-color-google; } } // end google // googleplus @else if $brand == googleplus { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-googleplus); } @else { color: $btn-color-googleplus; } } // end googleplus // kickstarter @else if $brand == kickstarter { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($black); } @else { color: $kickstarter-black; } } // end kickstarter // lastfm @else if $brand == lastfm { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-lastfm); } @else { color: $btn-color-lastfm; } } // end lastfm // linkedin @else if $brand == linkedin { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-linkedin); } @else { color: $btn-color-linkedin; } } // end linkedin // myspace @else if $brand == myspace { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-myspace); } @else { color: $btn-color-myspace; } } // end myspace // pandora @else if $brand == pandora { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-pandora); } @else { color: $btn-color-pandora; } } // end pandora // pinboard @else if $brand == pinboard { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-pinboard); } @else { color: $btn-color-pinboard; } } // end pinboard // pinterest @else if $brand == pinterest { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-pinterest); } @else { color: $btn-color-pinterest; } } // end pinterest // rdio @else if $brand == rdio { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-rdio); } @else { color: $btn-color-rdio; } } // end rdio // rss @else if $brand == rss { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-rss); } @else { color: $btn-color-rss; } } // end rss // sharethis @else if $brand == sharethis { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-sharethis); } @else { color: $btn-color-sharethis; } } // end sharethis // stumbleupon @else if $brand == stumbleupon { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-stumbleupon); } @else { color: $btn-color-stumbleupon; } } // end stumbleupon // tumblr @else if $brand == tumblr { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-tumblr); } @else { color: $btn-color-tumblr; } } // end tumblr // twitter @else if $brand == twitter { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-twitter); } @else { color: $btn-color-twitter; } } // end twitter // vimeo @else if $brand == vimeo { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-vimeo); } @else { color: $btn-color-vimeo; } } // end vimeo // vine @else if $brand == vine { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-vine); } @else { color: $btn-color-vine; } } // end vine // windows @else if $brand == windows { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-windows); } @else { color: $btn-color-windows; } } // end windows // wordpress @else if $brand == wordpress { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-wordpress); } @else { color: $btn-color-wordpress; } } // end wordpress // yahoo @else if $brand == yahoo { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-yahoo); } @else { color: $btn-color-yahoo; } } // end yahoo // * in stackicons-social-complete // yahoo-alt @else if $brand == yahoo-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-yahoo); } @else { color: $btn-color-yahoo; } } // end yahoo // youtube-alt-sm @else if $brand == youtube-alt-sm { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } // end youtube-alt-sm // * in stackicons-social-complete // youtube-alt2 @else if $brand == youtube-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-youtube-alt2); } @else { color: $btn-color-youtube-alt2; } } // end youtube-alt2 // zerply @else if $brand == zerply { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($zerply-grey); } @else { color: $zerply-grey; } } // end zerply // nav elements: // cart ( * in stackicons-social-complete) @else if $brand == cart { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-cart); } @else { color: $btn-color-cart; } } // end cart // menu @else if $brand == menu or $brand == menu-alt or $brand == menu-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-menu); } @else { color: $btn-color-menu; } } // end menu // more @else if $brand == more { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-more); } @else { color: $btn-color-more; } } // end more // search @else if $brand == search { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-search); } @else { color: $btn-color-search; } } // end search // triangle-down @else if $brand == triangle-down or // * in stackicons-social-complete $brand == triangle-left or $brand == triangle-right or $brand == triangle-up { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-triangle); } @else { color: $btn-color-triangle; } } // end triangle-down } // end c0:hover (2 elements) // c1 (:after - 2 elements) .st-multi-color .st-icon-#{$brand}:after, .st-multi-color.st-icon-#{$brand}:after { // universally applied effect to icon... @include shadow-effect(icon); @if $brand == addthis { content: $addthis-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == adn { content: $adn-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == apple { content: $apple-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-apple); } @else { color: $icon-color-apple; } } @else if $brand == behance { content: $behance-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == blogger { content: $blogger-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == codepen { content: $codepen-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == deviantart { @if $deviantart-c0 == $btn-shape-sq { content: $deviantart-c1-alt0; } @else if $deviantart-c0 == $btn-shape-r2 { content: $deviantart-c1-alt2; } @else if $deviantart-c0 == $btn-shape-r3 { content: $deviantart-c1-alt3; } @else if $deviantart-c0 == $btn-shape-cir { content: $deviantart-c1-alt4; } @else { content: $deviantart-c1-alt; } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($deviantart-green-lt); } @else { color: $deviantart-green-lt; } } // end deviantart @else if $brand == digg { content: $digg-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-digg); } @else { color: $icon-color-digg; } } @else if $brand == dropbox { content: $dropbox-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-dropbox); } @else { color: $icon-color-dropbox; } } @else if $brand == email2 { content: $email-icon; // envelope @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-email); } @else { color: $icon-color-email; } } // * in stackicons-social-complete @else if $brand == email-alt { @if $email-alt-c0 == $btn-shape-sq { content: $email-alt-sq; } @else if $email-alt-c0 == $btn-shape-r2 { content: $email-alt-r2; } @else if $email-alt-c0 == $btn-shape-r3 { content: $email-alt-r3; } @else if $email-alt-c0 == $btn-shape-cir { content: $email-alt-cir; } @else { content: $email-alt-r1; } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($email-grey-lt); } @else { color: $email-grey-lt; } } @else if $brand == evernote { content: $evernote-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($evernote-grey-dk); } @else { color: $evernote-grey-dk; } } @else if $brand == facebook { @if $facebook-c0 == $btn-shape-cir { content: $facebook-icon-cir; } @else { content: $facebook-c1; } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == facebook-alt { content: $facebook-alt-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == gittip { content: $gittip-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == github-alt { content: $github-alt-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == google { content: $google-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == googleplus { content: $googleplus-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == kickstarter { content: $kickstarter-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($kickstarter-green); } @else { color: $kickstarter-green; } } @else if $brand == lastfm { content: $lastfm-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == linkedin { content: $linkedin-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == myspace { content: $myspace-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($myspace-grey-lt); } @else { color: $myspace-grey-lt; } } @else if $brand == pandora { content: $pandora-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == pinboard { content: $pinboard-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == pinterest { @if $pinterest-c0 == $btn-shape-cir { content: $pinterest-c1-cir; // P cropped by circle } @else { content: $pinterest-c1; // P cropped by square bottom } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == rdio { content: $rdio-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == rss { content: $rss-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == sharethis { content: $sharethis-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == soundcloud { content: $soundcloud-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == stumbleupon { content: $stumbleupon-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == tumblr { content: $tumblr-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == twitter { content: $twitter-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == vimeo { content: $vimeo-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == vine { content: $vine-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == windows { content: $windows-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == wordpress { content: $wordpress-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // * yahoo-alt is in stackicons-social-complete @else if $brand == yahoo or $brand == yahoo-alt { content: $yahoo-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == youtube-alt-sm { content: $youtube-alt-icon; // "You Tube" @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-black); } @else { color: $youtube-black; } } @else if $brand == zerply { content: $zerply-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($zerply-green); } @else { color: $zerply-green; } } // nav elements: // ( * in stackicons-social-complete) @else if $brand == cart { content: $cart-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == menu { content: $menu-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == menu-alt { content: $menu-alt-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == menu-alt2 { content: $menu-alt2-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == more { content: $more-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == search { content: $search-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == triangle-down { content: $triangle-down-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // * in stackicons-social-complete @else if $brand == triangle-left { content: $triangle-left-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // * in stackicons-social-complete @else if $brand == triangle-right { content: $triangle-right-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // * in stackicons-social-complete @else if $brand == triangle-up { content: $triangle-up-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } } // end c1 (:after - 2 elements) // do the :hover! // c1 (:hover:after - 2 elements) .st-multi-color .st-icon-#{$brand}:hover:after, .st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-icon-#{$brand}:focus:after, .st-multi-color.st-icon-#{$brand}:focus:after { @include shadow-effect(icon-hover); // most brands have the same white icon... @if $brand == addthis or $brand == adn or $brand == behance or $brand == blogger or $brand == codepen or $brand == facebook or $brand == facebook-alt or $brand == gittip or $brand == github-alt or $brand == google or $brand == googleplus or $brand == lastfm or $brand == linkedin or $brand == pandora or $brand == pinboard or $brand == pinterest or $brand == rdio or $brand == rss or $brand == sharethis or $brand == soundcloud or $brand == stumbleupon or $brand == tumblr or $brand == twitter or $brand == vimeo or $brand == vine or $brand == windows or $brand == wordpress or $brand == yahoo or // * in stackicons-social-complete $brand == yahoo-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == apple { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-apple); } @else { color: $icon-color-apple; } } @else if $brand == deviantart { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($deviantart-green-lt); } @else { color: $deviantart-green-lt; } } // end deviantart @else if $brand == digg { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-digg); } @else { color: $icon-color-digg; } } @else if $brand == dropbox { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-dropbox); } @else { color: $icon-color-dropbox; } } @else if $brand == email2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-email); } @else { color: $icon-color-email; } } // * in stackicons-social-complete @else if $brand == email-alt { // geometric top flap @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($email-grey-lt); } @else { color: $email-grey-lt; } } @else if $brand == evernote { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($evernote-grey-dk); } @else { color: $evernote-grey-dk; } } @else if $brand == kickstarter { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($kickstarter-green); } @else { color: $kickstarter-green; } } @else if $brand == youtube-alt-sm { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-black); } @else { color: $youtube-black; } } @else if $brand == zerply { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($zerply-green); } @else { color: $zerply-green; } } // nav elements: // * in stackicons-social-complete... @else if $brand == cart or $brand == menu or $brand == menu-alt or $brand == menu-alt2 or $brand == more or $brand == search or $brand == triangle-down or // * in stackicons-social-complete... $brand == triangle-left or $brand == triangle-right or $brand == triangle-up { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } } // end c1 (:hover:after - 2 elements) // *********************************/ // **** ICON-ONLY (2 elements) **** / // c0 (:before - icon-only) .st-shape-icon.st-multi-color .st-icon-#{$brand}:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:before { // For the most part, we negate the c0 button background, // and do c1 as icon-only for one-color icons... content: "" !important; // !important needed to override shape class on indivicual icon text-shadow: none; // some exceptions... // simplified 2-element version of email icon @if $brand == email2 { content: $email-c2 !important; // grey envelope bottom @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-email); } @else { color: $icon-color-email; } } // * in stackicons-social-complete @else if $brand == email-alt { content: $email-alt-c0-icon !important; // grey 5x7 rectangle @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-multi-color-email-dk); } @else { color: $icon-multi-color-email-dk; } } @else if $brand == pinterest { content: $btn-shape-cir-inner !important; // red circle @include shadow-effect(icon-only); // (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-pinterest); } @else { color: $btn-color-pinterest; } } // * in stackicons-social-complete @else if $brand == yahoo-alt { content: $yahoo-alt-c0-icon !important; // small scalloped square @include shadow-effect(icon-only); // (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-yahoo); } @else { color: $btn-color-yahoo; } } // simplified 2-element version of youtube-alt @else if $brand == youtube-alt-sm { content: $youtube-alt-c1 !important; // black "You" @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-black); } @else { color: $youtube-black; } } // * in stackicons-social-complete @else if $brand == youtube-alt2 { content: $youtube-alt2-c1 !important; // screen shape @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-red); } @else { color: $youtube-red; } } } // end c0 (:before) // do the :hover! // c0 (:before - icon-only) .st-shape-icon.st-multi-color .st-icon-#{$brand}:hover:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:hover:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:hover:before, .st-shape-icon.st-multi-color .st-icon-#{$brand}:focus:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:focus:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:focus:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:focus:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:hover:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:hover:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:hover:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:focus:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:focus:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:focus:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:focus:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:hover:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:hover:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:hover:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:focus:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:focus:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:focus:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:focus:before { @if $brand == email2 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-email); } @else { color: $icon-color-email; } } @else if $brand == email-alt { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-multi-color-email-dk); } @else { color: $icon-multi-color-email-dk; } } @else if $brand == pinterest { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-pinterest); } @else { color: $btn-color-pinterest; } } // * in stackicons-social-complete @else if $brand == yahoo-alt { @include shadow-effect(icon-only-hover); // optional @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-yahoo); } @else { color: $btn-color-yahoo; } } @else if $brand == youtube-alt-sm { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-black); } @else { color: $youtube-black; } } } // end c0:hover (:hover:before) // c1 (:after) - icon color may be different when not on button .st-shape-icon.st-multi-color .st-icon-#{$brand}:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:after { // universally applied effect to icon... @include shadow-effect(icon-only); // addthis @if $brand == addthis { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-addthis); } @else { color: $icon-color-addthis; } } // end addthis // adn @else if $brand == adn { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-adn); } @else { color: $icon-color-adn; } } // end adn // apple @else if $brand == apple { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-apple); } @else { color: $icon-color-apple; } } // end apple // behance @else if $brand == behance { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-behance); } @else { color: $icon-color-behance; } } // end behance // blogger @else if $brand == blogger { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-blogger); } @else { color: $icon-color-blogger; } } // end blogger // codepen @else if $brand == codepen { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-codepen); } @else { color: $icon-color-codepen; } } // end codepen @else if $brand == deviantart { // icon is different when not on button content: $deviantart-icon !important; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-deviantart); } @else { color: $icon-color-deviantart; } } // end deviantart // dropbox is unchanged from .st-multi-color // digg @else if $brand == digg { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-digg); } @else { color: $icon-color-digg; } } // end digg // dropbox is unchanged from .st-multi-color // simplified 2-element version of email icon @else if $brand == email2 { content: $email-c3; // envelope top flap @if $multi-color-default == brand-color-variant { @include adjust-multi-color(lighten($icon-color-email, 9)); } @else { color: lighten($icon-color-email, 9); } } // * in stackicons-social-complete @else if $brand == email-alt { content: $email-alt-icon; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($email-grey-lt); } @else { color: $email-grey-lt; } } // evernote @else if $brand == evernote { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-evernote); } @else { color: $icon-color-evernote; } } // end evernote // facebook @else if $brand == facebook { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-facebook); } @else { color: $icon-color-facebook; } } // end facebook // facebook-alt @else if $brand == facebook-alt { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-facebook-alt); } @else { color: $icon-color-facebook-alt; } } // end facebook-alt // github-alt @else if $brand == github-alt { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-github-alt); } @else { color: $icon-color-github-alt; } } // end github-alt // gittip @else if $brand == gittip { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-gittip); } @else { color: $icon-color-gittip; } } // end gittip // google @else if $brand == google { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-google); } @else { color: $icon-color-google; } } // end google // googleplus @else if $brand == googleplus { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-googleplus); } @else { color: $icon-color-googleplus; } } // end googleplus // kickstarter @else if $brand == kickstarter { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-kickstarter); } @else { color: $icon-color-kickstarter; } } // end kickstarter // lastfm @else if $brand == lastfm { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-lastfm); } @else { color: $icon-color-lastfm; } } // end lastfm // linkedin @else if $brand == linkedin { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-linkedin); } @else { color: $icon-color-linkedin; } } // end linkedin // myspace @else if $brand == myspace { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-myspace); } @else { color: $icon-color-myspace; } } // end myspace // pandora @else if $brand == pandora { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-pandora); } @else { color: $icon-color-pandora; } } // end pandora // pinboard @else if $brand == pinboard { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-pinboard); } @else { color: $icon-color-pinboard; } } // end pinboard // pinterest @else if $brand == pinterest { content: $pinterest-icon-c1; // white P inside circle @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // end pinterest // rdio @else if $brand == rdio { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-rdio); } @else { color: $icon-color-rdio; } } // end rdio // rss @else if $brand == rss { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-rss); } @else { color: $icon-color-rss; } } // end rss // sharethis @else if $brand == sharethis { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-sharethis); } @else { color: $icon-color-sharethis; } } // end sharethis // soundcloud @else if $brand == soundcloud { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-soundcloud); } @else { color: $icon-color-soundcloud; } } // end soundcloud // stumbleupon @else if $brand == stumbleupon { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-stumbleupon); } @else { color: $icon-color-stumbleupon; } } // end stumbleupon // tumblr @else if $brand == tumblr { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-tumblr); } @else { color: $icon-color-tumblr; } } // end tumblr // twitter @else if $brand == twitter { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-twitter); } @else { color: $icon-color-twitter; } } // end twitter // vimeo @else if $brand == vimeo { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-vimeo); } @else { color: $icon-color-vimeo; } } // end vimeo // vine @else if $brand == vine { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-vine); } @else { color: $icon-color-vine; } } // end vine // windows @else if $brand == windows { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-windows); } @else { color: $icon-color-windows; } } // end windows // wordpress @else if $brand == wordpress { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-wordpress); } @else { color: $icon-color-wordpress; } } // end wordpress @else if $brand == yahoo { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-yahoo); } @else { color: $icon-color-yahoo; } } // end yahoo // * in stackicons-social-complete @else if $brand == yahoo-alt { content: $yahoo-alt-c1-icon; // smaller Y @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // end yahoo // youtube-alt-sm @else if $brand == youtube-alt-sm { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-white); } @else { color: $youtube-white; } } // end youtube-alt-sm // zerply @else if $brand == zerply { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-zerply); } @else { color: $icon-color-zerply; } } // end zerply // nav elements: // cart ( * in stackicons-social-complete) @else if $brand == cart { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-cart); } @else { color: $icon-color-cart; } } // end cart // menu @else if $brand == menu { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-menu); } @else { color: $icon-color-menu; } } // end menu // menu-alt @else if $brand == menu-alt { content: $menu-alt-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-menu); } @else { color: $icon-color-menu; } } // end menu-alt // menu-alt2 @else if $brand == menu-alt2 { content: $menu-alt2-c1; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-menu); } @else { color: $icon-color-menu; } } // end menu-alt2 // more @else if $brand == more { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-more); } @else { color: $icon-color-more; } } // end more // search @else if $brand == search { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-search); } @else { color: $icon-color-search; } } // end search // triangle-down @else if $brand == triangle-down { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-triangle); } @else { color: $icon-color-triangle; } } // end triangle-down // triangle-left, -right, -up @else if $brand == triangle-left or $brand == triangle-right or $brand == triangle-up { @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-triangle); } @else { color: $icon-color-triangle; } } // end triangle-left } // end .st-shape-icon c1 (:after) // do the hover! // .st-shape-icon c1:hover (2 elements down to 1) .st-shape-icon.st-multi-color .st-icon-#{$brand}:hover:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:hover:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:hover:after, .st-shape-icon.st-multi-color .st-icon-#{$brand}:focus:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:focus:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:focus:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:focus:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:hover:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:hover:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:hover:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:focus:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:focus:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:focus:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:focus:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:hover:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:hover:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:hover:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:focus:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:focus:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:focus:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:focus:after { // universally applied effect to icon... @include shadow-effect(icon-only-hover); // addthis @if $brand == addthis { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-addthis); } @else { color: $icon-color-addthis; } } // end addthis // adn @else if $brand == adn { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-adn); } @else { color: $icon-color-adn; } } // end adn // apple @else if $brand == apple { // light bg @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-apple); } @else { color: $icon-color-apple; } } // end apple // behance @else if $brand == behance { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-behance); } @else { color: $icon-color-behance; } } // end behance // blogger @else if $brand == blogger { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-blogger); } @else { color: $icon-color-blogger; } } // end blogger // codepen @else if $brand == codepen { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-codepen); } @else { color: $icon-color-codepen; } } // end codepen @else if $brand == deviantart { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-deviantart); } @else { color: $icon-color-deviantart; } } // end deviantart // dropbox is unchanged from .st-multi-color // digg @else if $brand == digg { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-digg); } @else { color: $icon-color-digg; } } // end digg // dropbox is unchanged from .st-multi-color // simplified 2-element version of email icon @else if $brand == email2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(lighten($icon-color-email, 9)); } @else { color: lighten($icon-color-email, 9); } } // * in stackicons-social-complete @else if $brand == email-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($email-grey-lt); } @else { color: $email-grey-lt; } } // evernote @else if $brand == evernote { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-evernote); } @else { color: $icon-color-evernote; } } // facebook @else if $brand == facebook { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-facebook); } @else { color: $icon-color-facebook; } } // end facebook // facebook-alt @else if $brand == facebook-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-facebook-alt); } @else { color: $icon-color-facebook-alt; } } // end facebook-alt // github-alt @else if $brand == github-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-github-alt); } @else { color: $icon-color-github-alt; } } // end github-alt // gittip @else if $brand == gittip { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-gittip); } @else { color: $icon-color-gittip; } } // end gittip // google @else if $brand == google { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-google); } @else { color: $icon-color-google; } } // end google // googleplus @else if $brand == googleplus { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-googleplus); } @else { color: $icon-color-googleplus; } } // end googleplus // kickstarter @else if $brand == kickstarter { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-kickstarter); } @else { color: $icon-color-kickstarter; } } // end kickstarter // lastfm @else if $brand == lastfm { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-lastfm); } @else { color: $icon-color-lastfm; } } // end lastfm // linkedin @else if $brand == linkedin { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-linkedin); } @else { color: $icon-color-linkedin; } } // end linkedin // myspace @else if $brand == myspace { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-myspace); } @else { color: $icon-color-myspace; } } // end myspace // pandora @else if $brand == pandora { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-pandora); } @else { color: $icon-color-pandora; } } // end pandora // pinboard @else if $brand == pinboard { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-pinboard); } @else { color: $icon-color-pinboard; } } // end pinboard // rdio @else if $brand == rdio { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-rdio); } @else { color: $icon-color-rdio; } } // end rdio // rss @else if $brand == rss { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-rss); } @else { color: $icon-color-rss; } } // end rss // sharethis @else if $brand == sharethis { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-sharethis); } @else { color: $icon-color-sharethis; } } // end sharethis // soundcloud @else if $brand == soundcloud { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-soundcloud); } @else { color: $icon-color-soundcloud; } } // end soundcloud // stumbleupon @else if $brand == stumbleupon { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-stumbleupon); } @else { color: $icon-color-stumbleupon; } } // end stumbleupon // tumblr @else if $brand == tumblr { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-tumblr); } @else { color: $icon-color-tumblr; } } // end tumblr // twitter @else if $brand == twitter { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-twitter); } @else { color: $icon-color-twitter; } } // end twitter // vimeo @else if $brand == vimeo { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-vimeo); } @else { color: $icon-color-vimeo; } } // end vimeo // vine @else if $brand == vine { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-vine); } @else { color: $icon-color-vine; } } // end vine // windows @else if $brand == windows { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-windows); } @else { color: $icon-color-windows; } } // end windows // wordpress @else if $brand == wordpress { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-wordpress); } @else { color: $icon-color-wordpress; } } // end wordpress // yahoo @else if $brand == yahoo { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-yahoo); } @else { color: $icon-color-yahoo; } } // end yahoo // * in stackicons-social-complete // yahoo-alt @else if $brand == yahoo-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // end yahoo // youtube-alt-sm @else if $brand == youtube-alt-sm { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } // end youtube-alt-sm // zerply @else if $brand == zerply { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-zerply); } @else { color: $icon-color-zerply; } } // end zerply // nav elements: // cart ( * in stackicons-social-complete) @else if $brand == cart { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-cart); } @else { color: $icon-color-cart; } } // end cart // menu @else if $brand == menu or $brand == menu-alt or $brand == menu-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-menu); } @else { color: $icon-color-menu; } } // end menu // more @else if $brand == more { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-more); } @else { color: $icon-color-more; } } // end more // search @else if $brand == search { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-search); } @else { color: $icon-color-search; } } // end search // triangle-down @else if $brand == triangle-down { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-triangle); } @else { color: $icon-color-triangle; } } // end triangle-down // triangle-left, -right, -up ( * in stackicons-social-complete) @else if $brand == triangle-left or $brand == triangle-right or $brand == triangle-up { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-triangle); } @else { color: $icon-color-triangle; } } // end triangle-left } // end .st-shape-icon c1:hover (:after:hover) } // end @each 2 ELEMENTS // ************************ / // ************************ / // ************************ / // 3 ELEMENTS (c0, c1, c2): // Loop through list of the brands that use 3 elements: // $(brand)-c0, $(brand)-c1, $(brand)-c2 -- this means // adding an extra in the markup -- // except for .st-shape-icon versions, which can do without. // uncomment the appropriate @each statement below... // Stackicons-Social-Minimal: // @each $brand in flickr { // Standard: @each $brand in amazon, android, flattr, flickr, forrst, paypal, paypal2, skype, spotify, xing, yelp { // *Stackicons-Social-Complete // adds deviantart-alt, email-alt2, pinterest-alt, youtube-alt2 // @each $brand in amazon, android, deviantart-alt, email-alt2, flattr, flickr, forrst, paypal, paypal2, pinterest-alt, skype, spotify, xing, yelp, yelp-alt, youtube-alt2 { // c0 (:before - 1 of 3 elements) .st-multi-color .st-icon-#{$brand}:before, .st-multi-color.st-icon-#{$brand}:before { // universally applied effect to bg... @include shadow-effect(bg); @if $brand == amazon { content: $amazon-c0; // almost white bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($amazon-white); } @else { color: $amazon-white; // #f5f5f5 } } @else if $brand == android { content: $android-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == deviantart-alt { content: $deviantart-alt-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-deviantart); } @else { color: $btn-color-deviantart; } } // * in stackicons-social-complete @else if $brand == email-alt2 { content: $email-alt2-c0; // icon takes up whole button @if $multi-color-default == brand-color-variant { @include adjust-multi-color($email-grey-mix); } @else { color: $email-grey-mix; } } @else if $brand == flattr { content: $flattr-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == flickr { content: $flickr-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == forrst { content: $forrst-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($forrst-green-dk); } @else { color: $forrst-green-dk; } } @else if $brand == paypal { content: $paypal-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == paypal2 { content: $paypal-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($paypal-blue-alt); } @else { color: $paypal-blue-alt; } } // * in stackicons-social-complete @else if $brand == pinterest-alt { content: $pinterest-alt-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($bg-color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == spotify { content: $spotify-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($spotify-grey); } @else { color: $spotify-grey; } } @else if $brand == skype { content: $skype-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == xing { content: $xing-c0; // light bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == yelp { content: $yelp-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-yelp); } @else { color: $btn-color-yelp; } } // * in stackicons-social-complete @else if $brand == yelp-alt { content: $yelp-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($yelp-grey); } @else { color: $yelp-grey; } } // youtube-alt2 uses whole button as "screen" bg for play triangle @else if $brand == youtube-alt2 { content: $youtube-alt2-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-white); } @else { color: $youtube-white; } } } // end c0 (:before - 1 of 3 elements) // c0 - do the hover! (1 of 3 elements) .st-multi-color .st-icon-#{$brand}:hover:before, .st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-icon-#{$brand}:focus:before, .st-multi-color.st-icon-#{$brand}:focus:before { // universally applied effect to bg... @include shadow-effect(bg-hover); // these share the same generic light bg... @if $brand == android or $brand == flattr or $brand == flickr or $brand == paypal or // * in stackicons-social-complete $brand == pinterest-alt or $brand == skype or $brand == xing { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } @else if $brand == amazon { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($amazon-white); } @else { color: $amazon-white; // #f5f5f5 } } @else if $brand == deviantart-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-deviantart); } @else { color: $btn-color-deviantart; } } // * in stackicons-social-complete @else if $brand == email-alt2 { // icon takes up whole button @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($email-grey-mix); } @else { color: $email-grey-mix; } } @else if $brand == forrst { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($forrst-green-dk); } @else { color: $forrst-green-dk; } } @else if $brand == paypal2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($paypal-blue-alt); } @else { color: $paypal-blue-alt; } } @else if $brand == spotify { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($spotify-grey); } @else { color: $spotify-grey; } } @else if $brand == yelp { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-yelp); } @else { color: $btn-color-yelp; } } // * in stackicons-social-complete @else if $brand == yelp-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($yelp-grey); } @else { color: $yelp-grey; } } // youtube-alt2 uses whole button as "screen" bg for play triangle @else if $brand == youtube-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } } // end c0:hover (1 of 3 elements) // c1 (span:before - 2 of 3 elements) .st-multi-color .st-icon-#{$brand} > span:before, .st-multi-color.st-icon-#{$brand} > span:before { // no universal shadow-effect, applied individually... @if $brand == amazon { content: $amazon-c1; // black "a" @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($amazon-black); } @else { color: $amazon-black; } } @else if $brand == android { content: $android-c2; // white eyes (optional) // eyes stay white regardless of brand-color-variant color: white; } @else if $brand == deviantart-alt { @if $deviantart-alt-c0 == $btn-shape-cir { content: $deviantart-alt-c1-alt2; // cropped to circle } @else { content: $deviantart-alt-c1-alt; } @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($deviantart-green-lt); } @else { color: $deviantart-green-lt; } } // * in stackicons-social-complete @else if $brand == email-alt2 { @if $email-alt2-c0 == $btn-shape-cir { content: $email-alt2-c2-cir; // envelope flap shadow (optional) } @else { content: $email-alt2-c2; // envelope flap shadow (optional) } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-multi-color-email-dk); } @else { color: $icon-multi-color-email-dk; } } @else if $brand == flattr { content: $flattr-c1; // orange arrow l @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($flattr-orange); } @else { color: $flattr-orange; } } @else if $brand == flickr { content: $flickr-c1; // blue dot l @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($flickr-blue); } @else { color: $flickr-blue; } } @else if $brand == forrst { content: $forrst-c1-alt; // brown triangle @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($forrst-brown); } @else { color: $forrst-brown; } } @else if $brand == paypal { content: $paypal-c1; // blue P @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($paypal-blue-dk); } @else { color: $paypal-blue-dk; } } @else if $brand == paypal2 { content: $paypal-c1; // white P @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($paypal-white); } @else { color: $paypal-white; } } // * in stackicons-social-complete @else if $brand == pinterest-alt { content: $btn-shape-cir-inner; // white circle // @include shadow-effect(icon); // optional @if $multi-color-default == brand-color-variant { @include adjust-multi-color($white); } @else { color: $white; } } @else if $brand == skype { content: $skype-c1; // blue cloud @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-skype); } @else { color: $icon-color-skype; } } @else if $brand == spotify { content: $spotify-c1; // black circle @include shadow-effect(icon); // optional @if $multi-color-default == brand-color-variant { @include adjust-multi-color($spotify-black); } @else { color: $spotify-black; } } @else if $brand == xing { content: $xing-c1; // dark green x @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($xing-green); } @else { color: $xing-green; } } @else if $brand == yelp { content: $yelp-c1; // red inset @include shadow-effect(icon); // (text-shadow 0 -1px for bevel) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($yelp-red); } @else { color: $yelp-red; } } @else if $brand == yelp-alt { content: $yelp-c1; // white inset @include shadow-effect(icon); // (text-shadow 0 -1px for bevel) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == youtube-alt2 { content: $youtube-alt2-c3; // inset shadow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-grey); @include adjust-multi-color($youtube-grey-rgba); } @else { color: $youtube-grey; color: $youtube-grey-rgba; } } } // end c1 (span:before - 2 of 3 elements) // c1 - do the :hover! (:hover:after - 2 of 3 elements) .st-multi-color .st-icon-#{$brand}:hover span:before, .st-multi-color.st-icon-#{$brand}:hover span:before, .st-multi-color .st-icon-#{$brand}:focus span:before, .st-multi-color.st-icon-#{$brand}:focus span:before { @if $brand == amazon { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($amazon-black); } @else { color: $amazon-black; } } @else if $brand == android { // eyes stay white regardless of brand-color-hover color: white; } @else if $brand == deviantart-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($deviantart-green-lt); } @else { color: $deviantart-green-lt; } } @else if $brand == email-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($email-grey-dk); } @else { color: $email-grey-dk; } } @else if $brand == flattr { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($flattr-orange); } @else { color: $flattr-orange; } } @else if $brand == flickr { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($flickr-blue); } @else { color: $flickr-blue; } } @else if $brand == forrst { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($forrst-brown); } @else { color: $forrst-brown; } } @else if $brand == paypal { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($paypal-blue-dk); } @else { color: $paypal-blue-dk; } } @else if $brand == paypal2 { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($paypal-white); } @else { color: $paypal-white; } } // * in stackicons-social-complete @else if $brand == pinterest-alt { // @include shadow-effect(icon-hover); // optional @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($white); } @else { color: $white; } } @else if $brand == skype { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-skype); } @else { color: $icon-color-skype; } } @else if $brand == spotify { @include shadow-effect(icon-hover); // optional @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($spotify-black); } @else { color: $spotify-black; } } @else if $brand == xing { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($xing-green); } @else { color: $xing-green; } } @else if $brand == yelp { @include shadow-effect(icon-hover); // (text-shadow 0 -1px for bevel) @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($yelp-red); } @else { color: $yelp-red; } } @else if $brand == yelp-alt { @include shadow-effect(icon-hover); // (text-shadow 0 -1px for bevel) @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($white); } @else { color: $white; } } @else if $brand == youtube-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-grey); @include adjust-multi-color-hover($youtube-grey-rgba); } @else { color: $youtube-grey; color: $youtube-grey-rgba; } } } // end c1:hover (:hover:after - 2 of 3 elements) // c2 (span:after - 3 of 3 elements) .st-multi-color .st-icon-#{$brand}:after, .st-multi-color.st-icon-#{$brand}:after { // no universal effect -- per icon... @if $brand == amazon { content: $amazon-c2; @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($amazon-orange); } @else { color: $amazon-orange; } } @else if $brand == android { content: $android-c1; @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-android); } @else { color: $icon-color-android; } } @else if $brand == deviantart-alt { // borders - no shadow-effect @if $deviantart-alt-c0 == $btn-shape-sq { content: $deviantart-alt-c2-alt0; // sq border } @else if $deviantart-alt-c0 == $btn-shape-r2 { content: $deviantart-alt-c2-alt2; // r2 border } @else if $deviantart-alt-c0 == $btn-shape-r3 { content: $deviantart-alt-c2-alt3; // r3 border } @else if $deviantart-alt-c0 == $btn-shape-cir { content: $deviantart-alt-c2-alt4; // circle border } @else { content: $deviantart-alt-c2-alt1; // r1 border } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($deviantart-green-lt); } @else { color: $deviantart-green-lt; } } @else if $brand == email-alt2 { // need to match shape @if email-alt2-c0 == $btn-shape-sq { content: $email-alt2-sq; } @else if email-alt2-c0 == $btn-shape-r2 { content: $email-alt2-r2; } @else if email-alt2-c0 == $btn-shape-r3 { content: $email-alt2-r3; } @else if email-alt2-c0 == $btn-shape-cir { content: $email-alt2-cir; } @else { content: $email-alt2-r1; // email surface minus shadows } @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($email-grey-lt); } @else { color: $email-grey-lt; } } @else if $brand == flattr { content: $flattr-c2; // green arrow r @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($flattr-green); } @else { color: $flattr-green; } } @else if $brand == flickr { content: $flickr-c2; // pink dot r @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @if $multi-color-lighten-by > 0 { @include adjust-multi-color(lighten($flickr-pink, 15%)); // tweak lighter } @else { @include adjust-multi-color($flickr-pink); } } @else { color: $flickr-pink; } } @else if $brand == forrst { content: $forrst-icon; // lt green tree shape @if $multi-color-default == brand-color-variant { @include adjust-multi-color($forrst-green-lt); } @else { color: $forrst-green-lt; } } @else if $brand == paypal { content: $paypal-c2; // shadow on P @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($paypal-blue); } @else { color: $paypal-blue; } } @else if $brand == paypal2 { content: $paypal-c2; // shadow on P @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($paypal-blue-lt); } @else { color: $paypal-blue-lt; } } // * in stackicons-social-complete @else if $brand == pinterest-alt { content: $pinterest-alt-icon; // red icon over white @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-pinterest); } @else { color: $icon-color-pinterest; } } @else if $brand == skype { content: $skype-c2; // white S @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == spotify { content: $spotify-icon; // green icon @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-spotify); } @else { color: $icon-color-spotify; } } @else if $brand == xing { content: $xing-c2; // light green x @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($xing-green-lt); } @else { color: $xing-green-lt; } } @else if $brand == yelp { content: $yelp-c2; // white asterisk outline // @include shadow-effect(icon); // (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // * in stackicons-social-complete @else if $brand == yelp-alt { content: $yelp-alt-c2; // red asterisk @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-yelp-alt); } @else { color: $icon-color-yelp-alt; } } // * in stackicons-social-complete @else if $brand == youtube-alt2 { // need to match shape @if youtube-alt2-c0 == $btn-shape-sq { content: $youtube-alt2-sq; } @else if youtube-alt2-c0 == $btn-shape-r2 { content: $youtube-alt2-r2; } @else if youtube-alt2-c0 == $btn-shape-r3 { content: $youtube-alt2-r3; } @else if youtube-alt2-c0 == $btn-shape-cir { content: $youtube-alt2-cir; } @else { content: $youtube-alt2-r1; } @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-youtube-alt2); } @else { color: $btn-color-youtube-alt2; } } } // end c2 (span:after - 3 of 3 elements) // c2 - do the :hover! (:hover span:after - 3 of 3 elements) .st-multi-color .st-icon-#{$brand}:hover:after, .st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-icon-#{$brand}:focus:after, .st-multi-color.st-icon-#{$brand}:focus:after { @if $brand == amazon { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($amazon-orange); } @else { color: $amazon-orange; } } @else if $brand == android { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-android); } @else { color: $icon-color-android; } } @else if $brand == deviantart-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($deviantart-green-lt); } @else { color: $deviantart-green-lt; } } @else if $brand == email-alt2 { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($email-grey-lt); } @else { color: $email-grey-lt; } } @else if $brand == flattr { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($flattr-green); } @else { color: $flattr-green; } } @else if $brand == flickr { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @if $multi-color-lighten-by > 0 { @include adjust-multi-color-hover(lighten($flickr-pink, 15%)); // tweak lighter } @else { @include adjust-multi-color-hover($flickr-pink); } } @else { color: $flickr-pink; } } @else if $brand == forrst { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($forrst-green-lt); } @else { color: $forrst-green-lt; } } @else if $brand == paypal { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($paypal-blue); } @else { color: $paypal-blue; } } @else if $brand == paypal2 { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($paypal-blue-lt); } @else { color: $paypal-blue-lt; } } // * in stackicons-social-complete @else if $brand == pinterest-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-pinterest); } @else { color: $icon-color-pinterest; } } @else if $brand == spotify { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-spotify); } @else { color: $icon-color-spotify; } } @else if $brand == xing { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($xing-green-lt); } @else { color: $xing-green-lt; } } @else if $brand == yelp { // @include shadow-effect(icon-hover); // (optional) @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // * in stackicons-social-complete @else if $brand == yelp-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-yelp-alt); } @else { color: $icon-color-yelp-alt; } } // * in stackicons-social-complete @else if $brand == youtube-alt2 { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-youtube-alt2); } @else { color: $btn-color-youtube-alt2; } } } // end c2:hover (3 of 3 elements) // ********************************************** / // **** ICON-ONLY - 3 ELEMENTS to 2 (c1, c2) **** / // These logos need only 2 colors if there's no btn bg (.st-shape-icon): // $(brand)-c1 and $(brand)-c2 only -- so no extra span needed. // c0 - we're remapping c1 in place of c0, so no need to negate. // .st-shape-icon c1 (in place of c0) (:before) .st-shape-icon.st-multi-color .st-icon-#{$brand}:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:before { // universally applied effect to icon... @include shadow-effect(icon-only); @if $brand == amazon { content: $amazon-c1 !important; // overrules icon-shape bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($amazon-black); } @else { color: $amazon-black; } } @else if $brand == android { content: $android-c1 !important; // overrules icon-shape bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($android-green); } @else { color: $android-green; } } // * in stackicons-social-complete @else if $brand == deviantart-alt { content: $deviantart-alt-c1 !important; // overrules icon-shape bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-deviantart); } @else { color: $icon-color-deviantart; } } // * in stackicons-social-complete @else if $brand == email-alt2 { content: $email-alt2-c0-icon !important; // overrules icon-shape bg @if $multi-color-default == brand-color-variant { @include adjust-multi-color($email-grey-mix); } @else { color: $email-grey-mix; } } @else if $brand == flattr { content: $flattr-c1 !important; // orange arrow l @if $multi-color-default == brand-color-variant { @include adjust-multi-color($flattr-orange); } @else { color: $flattr-orange; } } @else if $brand == flickr { content: $flickr-c1 !important; // blue dot l @if $multi-color-default == brand-color-variant { @include adjust-multi-color($flickr-blue); } @else { color: $flickr-blue; } } @else if $brand == forrst { content: $forrst-c1-alt !important; // brown triangle @if $multi-color-default == brand-color-variant { @include adjust-multi-color($forrst-brown); } @else { color: $forrst-brown; } } // same icon-only version @else if $brand == paypal or $brand == paypal2 { content: $paypal-c1 !important; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($paypal-blue-dk); } @else { color: $paypal-blue-dk; } } @else if $brand == pinterest-alt { content: $btn-shape-cir-inner !important; // red circle @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-pinterest); } @else { color: $btn-color-pinterest; } } @else if $brand == skype { content: $skype-c1 !important; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-skype); } @else { color: $icon-color-skype; } } @else if $brand == spotify { content: $spotify-c1 !important; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-spotify); } @else { color: $btn-color-spotify; } } @else if $brand == xing { content: $xing-c1 !important; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($xing-green); } @else { color: $xing-green; } } @else if $brand == yelp { content: $yelp-c1 !important; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // * in stackicons-social-complete @else if $brand == yelp-alt { // no white outline, asterisk only content: "" !important; } @else if $brand == youtube-alt2 { content: $youtube-alt2-c1 !important; // bigger screen shape @include shadow-effect(icon-only); @if $multi-color-hover-default == brand-color-variant { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } } // end c1 (:before - 1 of 2 elements) // .st-shape-icon c1 - do the :hover! .st-shape-icon.st-multi-color .st-icon-#{$brand}:hover:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:hover:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:hover:before, .st-shape-icon.st-multi-color .st-icon-#{$brand}:focus:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:focus:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:focus:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:focus:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:hover:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:hover:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:hover:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:focus:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:focus:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:focus:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:focus:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:hover:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:hover:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:hover:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:focus:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:focus:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:focus:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:focus:before { // universally applied effect to icon... @include shadow-effect(icon-only-hover); @if $brand == amazon { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($amazon-black); } @else { color: $amazon-black; } } @else if $brand == android { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($android-green); } @else { color: $android-green; } } // * in stackicons-social-complete @else if $brand == deviantart-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-deviantart); } @else { color: $icon-color-deviantart; } } // * in stackicons-social-complete @else if $brand == email-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($email-grey); } @else { color: $email-grey; } } @else if $brand == flattr { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($flattr-orange); } @else { color: $flattr-orange; } } @else if $brand == flickr { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($flickr-blue); } @else { color: $flickr-blue; } } @else if $brand == forrst { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($forrst-brown); } @else { color: $forrst-brown; } } // same icon-only-hover version @else if $brand == paypal or $brand == paypal2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($paypal-blue-dk); } @else { color: $paypal-blue-dk; } } @else if $brand == pinterest-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-pinterest); } @else { color: $btn-color-pinterest; } } @else if $brand == skype { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-skype); } @else { color: $icon-color-skype; } } @else if $brand == spotify { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-spotify); } @else { color: $btn-color-spotify; } } @else if $brand == xing { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($xing-green); } @else { color: $xing-green; } } @else if $brand == yelp { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // * yelp-alt c0 is "" @else if $brand == youtube-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } } // end .st-shape-icon c1:hover (1 of 2 elements) // make sure the span isn't showing up for .icon-only .st-shape-icon.st-multi-color .st-icon-#{$brand} > span:before, .st-shape-icon .st-multi-color.st-icon-#{$brand} > span:before, .st-shape-icon.st-multi-color.st-icon-#{$brand} > span:before, .st-shape-icon.st-multi-color .st-icon-#{$brand} > span:after, .st-shape-icon .st-multi-color.st-icon-#{$brand} > span:after, .st-shape-icon.st-multi-color.st-icon-#{$brand} > span:after, .st-multi-color .st-shape-icon.st-icon-#{$brand} > span:before, .st-multi-color .st-shape-icon.st-icon-#{$brand} > span:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand} > span:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand} > span:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand} > span:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand} > span:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand} > span:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand} > span:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand} > span:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand} > span:after, .st-shape-r5.st-multi-color .st-icon-#{$brand} > span:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand} > span:before, .st-shape-r5.st-multi-color.st-icon-#{$brand} > span:before, .st-shape-r5.st-multi-color .st-icon-#{$brand} > span:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand} > span:after, .st-shape-r5.st-multi-color.st-icon-#{$brand} > span:after, .st-multi-color .st-shape-r5.st-icon-#{$brand} > span:before, .st-multi-color .st-shape-r5.st-icon-#{$brand} > span:after { content: ""; } // with these exceptions... .st-shape-icon.st-multi-color .st-icon-#{$brand} > span:before, .st-shape-icon .st-multi-color.st-icon-#{$brand} > span:before, .st-shape-icon.st-multi-color.st-icon-#{$brand} > span:before, .st-multi-color .st-shape-icon.st-icon-#{$brand} > span:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand} > span:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand} > span:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand} > span:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand} > span:before, .st-shape-r5.st-multi-color .st-icon-#{$brand} > span:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand} > span:before, .st-shape-r5.st-multi-color.st-icon-#{$brand} > span:before, .st-multi-color .st-shape-r5.st-icon-#{$brand} > span:before { // * in stackicons-social-complete @if $brand == email-alt2 { content: $email-alt2-c2-icon; // inset shadow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-multi-color-email-dk); } @else { color: $icon-multi-color-email-dk; } } // * in stackicons-social-complete @else if $brand == youtube-alt2 { content: $youtube-alt2-c3; // inset shadow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-grey); @include adjust-multi-color($youtube-grey-rgba); } @else { color: $youtube-grey; color: $youtube-grey-rgba; } } } .st-shape-icon.st-multi-color .st-icon-#{$brand}:hover span:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:hover span:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:hover span:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:hover span:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:hover span:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:hover span:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:hover span:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:hover span:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:hover span:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:hover span:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:hover span:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:hover span:before, .st-shape-icon.st-multi-color .st-icon-#{$brand}:focus span:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:focus span:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:focus span:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:focus span:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:focus span:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:focus span:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:focus span:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:focus span:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:focus span:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:focus span:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:focus span:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:focus span:before { // * in stackicons-social-complete @if $brand == email-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-multi-color-email-dk); } @else { color: $icon-multi-color-email-dk; } } // * in stackicons-social-complete @else if $brand == youtube-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-grey); @include adjust-multi-color-hover($youtube-grey-rgba); } @else { color: $youtube-grey; color: $youtube-grey-rgba; } } } // .st-shape-icon c2 (:after - 2 of 2 elements) .st-shape-icon.st-multi-color .st-icon-#{$brand}:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:after { // no universal effect, added on a per icon basis... // negate any default effects: text-shadow: none; @if $brand == amazon { content: $amazon-c2; // orange smile @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($amazon-orange); } @else { color: $amazon-orange; } } @if $brand == android { content: $android-c2; // white eyes @include glow; color: white; } // * in stackicons-social-complete @else if $brand == deviantart-alt { content: ""; // lose border text-shadow: none; } @else if $brand == email-alt2 { content: $email-alt2-c1-icon; // 5x7 envelope flaps @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($email-grey-lt); } @else { color: $email-grey-lt; } } @else if $brand == flattr { content: $flattr-c2; // green arrow r @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($flattr-green); } @else { color: $flattr-green; } } @else if $brand == flickr { content: $flickr-c2; // pink dot r @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @if $multi-color-lighten-by > 0 { @include adjust-multi-color(lighten($flickr-pink, 15%)); // tweak lighter } @else { @include adjust-multi-color($flickr-pink); } } @else { color: $flickr-pink; } } @else if $brand == forrst { content: $forrst-icon; // light green tree shape @if $multi-color-default == brand-color-variant { @include adjust-multi-color($forrst-green-lt); } @else { color: $forrst-green-lt; } } @else if $brand == paypal or $brand == paypal2 { content: $paypal-c2; // P shadow @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($paypal-blue); } @else { color: $paypal-blue; } } @else if $brand == pinterest-alt { content: $pinterest-alt-c2; // white P cropped by circle @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == spotify { content: $spotify-c2; // black waves @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($spotify-black); } @else { color: $spotify-black; } } @else if $brand == xing { content: $xing-c2; // black waves @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($xing-green-lt); } @else { color: $xing-green-lt; } } // * yelp-alt in stackicons-social-complete @else if $brand == yelp or $brand == yelp-alt { content: $yelp-icon; // red asterisk @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-yelp); } @else { color: $icon-color-yelp; } } // * in stackicons-social-complete @else if $brand == youtube-alt2 { content: $youtube-alt2-icon; // bigger icon @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-youtube-alt2); } @else { color: $icon-color-youtube-alt2; } } } // end .st-shape-icon c2 (:after - 2 of 2 elements) // .st-shape-icon c2 - do the :hover! (:after - 2 of 2 elements) .st-shape-icon.st-multi-color .st-icon-#{$brand}:hover:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:hover:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:hover:after, .st-shape-icon.st-multi-color .st-icon-#{$brand}:focus:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:focus:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:focus:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:focus:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:hover:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:hover:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:hover:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:focus:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:focus:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:focus:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:focus:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:hover:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:hover:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:hover:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:focus:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:focus:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:focus:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:focus:after { // no universal effect, added on a per icon basis... @if $brand == amazon { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($amazon-orange); } @else { color: $amazon-orange; } } @if $brand == android { @include glow; color: white; } // * deviantart-alt2 content: "" @else if $brand == email-alt2 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($email-grey-lt); } @else { color: $email-grey-lt; } } @else if $brand == flattr { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($flattr-green); } @else { color: $flattr-green; } } @else if $brand == flickr { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @if $multi-color-lighten-by > 0 { @include adjust-multi-color-hover(lighten($flickr-pink, 15%)); // tweak lighter } @else { @include adjust-multi-color-hover($flickr-pink); } } @else { color: $flickr-pink; } } @else if $brand == forrst { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($forrst-green-lt); } @else { color: $forrst-green-lt; } } @else if $brand == paypal or $brand == paypal2 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($paypal-blue); } @else { color: $paypal-blue; } } @else if $brand == pinterest-alt { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == spotify { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($spotify-black); } @else { color: $spotify-black; } } @else if $brand == xing { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($xing-green-lt); } @else { color: $xing-green-lt; } } // * yelp-alt in stackicons-social-complete @else if $brand == yelp or $brand == yelp-alt { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-yelp); } @else { color: $icon-color-yelp; } } // * in stackicons-social-complete @else if $brand == youtube-alt2 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-youtube-alt2); } @else { color: $icon-color-youtube-alt2; } } } // end .st-shape-icon c2:hover (hover:after - 2 of 2 elements) } // end @each 3 ELEMENTS // **************************** / // **************************** / // **************************** / // **************************** / // 4 ELEMENTS (c0, c1, c2, c3): // Loop through list of the brands that use 4 elements: // $(brand)-c0, $(brand)-c1, $(brand)-c2, $(brand)-c3 -- // means adding an extra in the markup... // Certain icons, e.g. github, limit the number of elements // here to have a version that works with only 1 extra span. // BRAND LIST // Un-comment the appropriate @each statment below... // (you can also create your own subset here and elsewhere) // Stackicons-Social-Minimal (subsets the most widely used icons): // @each $brand in dribbble, dribbble-alt, email, github, gmail, gmail-alt, instagram, youtube, youtube2, youtube-alt, search-alt { // Standard: @each $brand in delicious, dribbble, dribbble-alt, ebay, email, foursquare, github, gmail, gmail-alt, imdb, instagram, microsoft, picasa, reddit, slideshare, stackoverflow, windows7, youtube, youtube2, youtube-alt, search-alt { // * Stackicons-Social-Complete: // adds gmail-lg, gmail-lg-alt, instagram-alt, instagram-alt-2, podcast // @each $brand in delicious, dribbble, dribbble-alt, ebay, email, foursquare, github, gmail, gmail-alt, gmail-lg, gmail-lg-alt, imdb, instagram, instagram-alt, instagram-alt2, microsoft, picasa, podcast, reddit, slideshare, stackoverflow, windows7, youtube, youtube2, youtube-alt, search-alt { // c0 (:before - 1 of 4 elements) .st-multi-color .st-icon-#{$brand}:before, .st-multi-color.st-icon-#{$brand}:before { // universally applied effect to bg... @include shadow-effect(bg); @if $brand == delicious { content: $delicious-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($delicious-grey); } @else { color: $delicious-grey; } } // end delicious @else if $brand == dribbble or $brand == dribbble-alt { content: $dribbble-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end dribbble @else if $brand == ebay { content: $ebay-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end ebay @else if $brand == email { content: $email-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-email); } @else { color: $btn-color-email; } } @else if $brand == foursquare { content: $foursquare-c0; // r1 // $foursquare-c0-alt=sq, -alt2=r2, -alt3=r3, alt4=cir @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-foursquare); } @else { color: $btn-color-foursquare; // light blue } } // end foursquare @else if $brand == github { content: $github-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end github @else if $brand == gmail or $brand == gmail-alt { content: $gmail-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end gmail // * in stackicons-social-complete @else if $brand == gmail-lg { content: $gmail-lg-c0; @include shadow-effect(icon); // (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-beige); } @else { color: $gmail-beige; } } // end gmail-lg // * in stackicons-social-complete @else if $brand == gmail-lg-alt { content: $gmail-lg-c0; @include shadow-effect(icon); // (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-grey); } @else { color: $gmail-grey; } } // end gmail-lg @else if $brand == imdb { content: $imdb-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($imdb-yellow); } @else { color: $imdb-yellow; } } // end imdb @else if $brand == instagram { content: $instagram-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end instagram // * in stackicons-social-complete @else if $brand == instagram-alt { @include shadow-effect(icon); @if $btn-shape-c0-default == $btn-shape-sq { content: $instagram-alt-c1-alt0; } @else if $btn-shape-c0-default == $btn-shape-r1 { content: $instagram-alt-c1-alt1; } @else if $btn-shape-c0-default == $btn-shape-r3 { content: $instagram-alt-c1-alt3; } @else if $btn-shape-c0-default == $btn-shape-cir { content: $instagram-alt-c1-alt4; } @else { content: $instagram-alt-c1-alt2; } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-brown); } @else { color: $instagram-brown; } } // end instagram-alt // * in stackicons-social-complete @else if $brand == instagram-alt2 { content: $instagram-alt2-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end instagram-alt2 @else if $brand == microsoft { content: $microsoft-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end microsoft @else if $brand == picasa { content: $picasa-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($picasa-grey); } @else { color: $picasa-grey; } } // end picasa @else if $brand == podcast { content: $podcast-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end podcast @else if $brand == reddit { content: $reddit-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($btn-color-reddit); } @else { color: $btn-color-reddit; } } // end reddit @else if $brand == slideshare { content: $slideshare-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end slideshare @else if $brand == stackoverflow { content: $stackoverflow-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end stackoverflow @else if $brand == windows7 { content: $windows7-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end windows7 @else if $brand == youtube { content: $youtube-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-red); } @else { color: $youtube-red; } } // end youtube // youtube2 has colors inverted, white bg, red screen, white, play btn @else if $brand == youtube2 { content: $youtube-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-white); } @else { color: $youtube-white; } } // end youtube2 @else if $brand == youtube-alt { content: $youtube-alt-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end youtube-alt // nav elements: @else if $brand == search-alt { content: $search-c0; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end search-alt } // end c0 (:before - 1 of 4 elements) // c0 - do the hover! (:hover:before - 1 of 4 elements) .st-multi-color .st-icon-#{$brand}:hover:before, .st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-icon-#{$brand}:focus:before, .st-multi-color.st-icon-#{$brand}:focus:before { // universally applied effect to bg... @include shadow-effect(bg-hover); // same default light bg... // dribbble @if $brand == dribbble or $brand == dribbble-alt or $brand == ebay or $brand == github or $brand == gmail or $brand == gmail-alt or $brand == instagram or // * in stackicons-social-complete $brand == instagram-alt2 or $brand == microsoft or $brand == podcast or $brand == slideshare or $brand == stackoverflow or $brand == windows7 or $brand == youtube-alt or $brand == search-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-bg-default); } @else { color: $color-multi-color-bg-default; } } // end dribbble // * in stackicons-social-complete // delicious @else if $brand == delicious { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($delicious-grey); } @else { color: $delicious-grey; } } // end delicious // email @else if $brand == email { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-email); } @else { color: $btn-color-email; } } // end email // foursquare @else if $brand == foursquare { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-foursquare); } @else { color: $btn-color-foursquare; // light blue } } // end foursquare // * in stackicons-social-complete // gmail-lg @else if $brand == gmail-lg { @include shadow-effect(icon-hover); // (optional) @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-beige); } @else { color: $gmail-beige; } } // end gmail-lg // * in stackicons-social-complete // gmail-lg-alt @else if $brand == gmail-lg-alt { @include shadow-effect(icon-hover); // (optional) @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-grey); } @else { color: $gmail-grey; } } // end gmail-lg-alt // imdb @else if $brand == imdb { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($imdb-yellow); } @else { color: $imdb-yellow; } } // end imdb // * in stackicons-social-complete // instagram-alt @else if $brand == instagram-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-brown); } @else { color: $instagram-brown; } } // end instagram @else if $brand == picasa { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($picasa-grey); } @else { color: $picasa-grey; } } // end reddit @else if $brand == reddit { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($btn-color-reddit); } @else { color: $btn-color-reddit; } } // end reddit // youtube @else if $brand == youtube { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-red); } @else { color: $youtube-red; } } // end youtube // youtube2 @else if $brand == youtube2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } // end youtube2 } // end c0:hover (1 of 4 elements) // c1 (span:before - 2 of 4 elements) .st-multi-color .st-icon-#{$brand} > span:before, .st-multi-color.st-icon-#{$brand} > span:before { // no universally applied effect... // need to parse for each icon // delicious @if $brand == delicious { content: $delicious-c1-alt; // white square minus bottom r // @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($white); } @else { color: $white; } } // dribbble @else if $brand == dribbble or $brand == dribbble-alt { content: $dribbble-c1; // pink circle @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($dribbble-pink); } @else { color: $dribbble-pink; } } // ebay @else if $brand == ebay { content: $ebay-c1-alt; // red "e a" @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($ebay-red); } @else { color: $ebay-red; } } // email @else if $brand == email { content: $email-c1; // grey envelope bg @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-multi-color-email-dk); } @else { color: $icon-multi-color-email-dk; } } // foursquare @else if $brand == foursquare { content: $foursquare-c1; // dark blue diamond @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($foursquare-blue-dk); } @else { color: $foursquare-blue-dk; } } // github @else if $brand == github { content: $github-c1; // black octocat @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($github-black); } @else { color: $github-black; } } // gmail @else if $brand == gmail { content: $gmail-c1; // beige envelope @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-beige); } @else { color: $gmail-beige; } } // gmail-alt @else if $brand == gmail-alt { content: $gmail-alt-c1; // grey envelope @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-grey); } @else { color: $gmail-grey; } } // * in stackicons-social-complete // gmail-lg @else if $brand == gmail-lg { content: $gmail-lg-c1; // red "M" @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-red); } @else { color: $gmail-red; } } // * in stackicons-social-complete // gmail-lg-alt @else if $brand == gmail-lg-alt { content: $gmail-lg-alt-c1; // red "M" @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-alt-red); } @else { color: $gmail-alt-red; } } // imdb @else if $brand == imdb { @if $imdb-c0 == $btn-shape-sq { content: $imdb-c1-alt0; } @else if $imdb-c0 == $btn-shape-r2 { content: $imdb-c1-alt2; } @else if $imdb-c0 == $btn-shape-r3 { content: $imdb-c1-alt3; } @else if $imdb-c0 == $btn-shape-cir { content: $imdb-c1-alt4; } @else { content: $imdb-c1-alt1; } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($imdb-yellow-lt); @include adjust-multi-color($imdb-yellow-lt-rgba); } @else { color: $imdb-yellow-lt; color: $imdb-yellow-lt-rgba; } } // instagram @else if $brand == instagram { content: $instagram-c1; // beige camera shape @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-beige); } @else { color: $instagram-beige; } } // * in stackicons-social-complete // instagram-alt2 @else if $brand == instagram-alt2 { content: $instagram-alt2-c1; // tan bg @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-tan); } @else { color: $instagram-tan; } } // microsoft @else if $brand == microsoft { content: $microsoft-c1; // red + yellow @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($microsoft-red); } @else { color: $microsoft-red; } } // picasa @else if $brand == picasa { content: $picasa-c1; // red + purple // @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($picasa-red); } @else { color: $picasa-red; } } // podcast @else if $brand == podcast { content: $podcast-c1; // dark grey person @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($podcast-grey); } @else { color: $podcast-grey; } } // reddit @else if $brand == reddit { content: $reddit-c1; // white silhouette @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // slideshare @else if $brand == slideshare { content: $slideshare-c1; // grey screen border @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($slideshare-grey); } @else { color: $slideshare-grey; } } // stackoverflow @else if $brand == stackoverflow { content: $stackoverflow-c1; // grey tray // @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($stackoverflow-grey); } @else { color: $slideshare-grey; } } // windows7 @else if $brand == windows7 { content: $windows7-c1; // red + yellow @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($windows7-red); } @else { color: $windows7-red; } } // youtube @else if $brand == youtube { content: $youtube-c1; // screen shape for shadow @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-red); // play button color } @else { color: $youtube-red; } } // youtube2 @else if $brand == youtube2 { content: $youtube-c1; // screen shape for shadow @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-white); // play button color } @else { color: $youtube-white; } } // youtube-alt @else if $brand == youtube-alt { content: $youtube-alt-c1; // black "You" // depending on effect, might want to disable @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-black); } @else { color: $youtube-black; } } // nav elements: // search-alt @else if $brand == search-alt { content: $search-c1; // magnifying glass @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($search-grey); } @else { color: $search-grey; } } } // end c1 (span:before - 2 of 4 elements) // c1 - do the hover! (:hover span:before - 2 of 4 elements) .st-multi-color .st-icon-#{$brand}:hover span:before, .st-multi-color.st-icon-#{$brand}:hover span:before, .st-multi-color .st-icon-#{$brand}:focus span:before, .st-multi-color.st-icon-#{$brand}:focus span:before { // delicious @if $brand == delicious { // @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($white); } @else { color: $white; } } // dribbble, dribbble-alt @else if $brand == dribbble or $brand == dribbble-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($dribbble-pink); } @else { color: $dribbble-pink; } } // ebay @else if $brand == ebay { // "e a" @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($ebay-red); } @else { color: $ebay-red; } } // email @else if $brand == email { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-multi-color-email-dk); } @else { color: $icon-multi-color-email-dk; } } // foursquare @else if $brand == foursquare { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($foursquare-blue-dk); } @else { color: $foursquare-blue-dk; } } // github @else if $brand == github { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($github-black); } @else { color: $github-black; } } // gmail @else if $brand == gmail { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-beige); } @else { color: $gmail-beige; } } // gmail-alt @else if $brand == gmail-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-grey); } @else { color: $gmail-grey; } } // * in stackicons-social-complete // gmail-lg @else if $brand == gmail-lg { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-red); } @else { color: $gmail-red; } } // * in stackicons-social-complete // gmail-lg-alt @else if $brand == gmail-lg-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-red-alt); } @else { color: $gmail-red-alt; } } // imdb @else if $brand == imdb { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($imdb-yellow-lt); @include adjust-multi-color-hover($imdb-yellow-lt-rgba); } @else { color: $imdb-yellow-lt; color: $imdb-yellow-lt-rgba; } } // instagram @else if $brand == instagram { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-beige); } @else { color: $instagram-beige; } } // * in stackicons-social-complete // instagram-alt2 @else if $brand == instagram-alt2 { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-tan); } @else { color: $instagram-tan; } } // microsoft @else if $brand == microsoft { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($microsoft-red); } @else { color: $microsoft-red; } } // picasa @else if $brand == picasa { // @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($picasa-red); } @else { color: $picasa-red; } } // podcast @else if $brand == podcast { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($podcast-grey); } @else { color: $podcast-grey; } } // reddit @else if $brand == reddit { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } // slideshare @else if $brand == slideshare { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($slideshare-grey); } @else { color: $slideshare-grey; } } // stackoverflow @else if $brand == stackoverflow { // @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($stackoverflow-grey); } @else { color: $stackoverflow-grey; } } // windows7 @else if $brand == windows7 { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($windows7-red); } @else { color: $windows7-red; } } // youtube @else if $brand == youtube { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-red); } @else { color: $youtube-red; } } // youtube2 @else if $brand == youtube2 { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } // youtube-alt @else if $brand == youtube-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-black); } @else { color: $youtube-black; } } // nav elements: // search-alt @else if $brand == search-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($search-grey); } @else { color: $search-grey; } } } // end c1:hover (:hover span:before - 2 of 4 elements) // c2 (span:after - 3 of 4 elements) .st-multi-color .st-icon-#{$brand} > span:after, .st-multi-color.st-icon-#{$brand} > span:after { // no universally applied effect... // dribbble @if $brand == delicious { content: $delicious-c2; // blue upper right @if $multi-color-default == brand-color-variant { @include adjust-multi-color($delicious-blue); } @else { color: $delicious-blue; } } // dribbble, dribbble-alt @else if $brand == dribbble or $brand == dribbble-alt { content: $dribbble-c2; // light pink highlight @if $multi-color-default == brand-color-variant { @include adjust-multi-color($dribbble-pink-lt); } @else { color: $dribbble-pink-lt; } } // ebay @else if $brand == ebay { content: $ebay-c2-alt; // blue "b y" @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($ebay-blue); } @else { color: $ebay-blue; } } // email @else if $brand == email { content: $email-c2; // lighter envelope color @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-multi-color-email); } @else { color: $icon-multi-color-email; } } // foursquare @else if $brand == foursquare { content: $foursquare-c2; // green ball @if $multi-color-default == brand-color-variant { @include adjust-multi-color($foursquare-green); } @else { color: $foursquare-green; } } // github @else if $brand == github { content: $github-c2; // lt orange face (use c2-alt on dk bg) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($github-orange-lt); } @else { color: $github-orange-lt; } } // gmail @else if $brand == gmail { content: $gmail-c2; // red "M" @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-red); } @else { color: $gmail-red; } } // gmail-alt @else if $brand == gmail-alt { content: $gmail-alt-c2; // red "M" @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-alt-red); } @else { color: $gmail-alt-red; } } // * in stackicons-social-complete // gmail-lg @else if $brand == gmail-lg { content: $gmail-lg-c2; // shadow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-beige-dk-rgba); } @else { color: $gmail-beige-dk-rgba; } } // * in stackicons-social-complete // gmail-lg-alt @else if $brand == gmail-lg-alt { content: $gmail-lg-alt-c2; // shadow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-grey-dk-rgba); } @else { color: $gmail-grey-dk-rgba; } } // imdb @else if $brand == imdb { @if $imdb-c0 == $btn-shape-sq { content: $imdb-c2-alt0; } @else if $imdb-c0 == $btn-shape-r2 { content: $imdb-c2-alt2; } @else if $imdb-c0 == $btn-shape-r3 { content: $imdb-c2-alt3; } @else if $imdb-c0 == $btn-shape-cir { content: $imdb-c2-alt4; } @else { content: $imdb-c2-alt1; } @if $multi-color-default == brand-color-variant { @include adjust-multi-color($imdb-yellow-lt); @include adjust-multi-color($imdb-yellow-lt-rgba); } @else { color: $imdb-yellow-lt; color: $imdb-yellow-lt-rgba; } } // instagram @else if $brand == instagram { content: $instagram-c2; // tan camera outline @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-tan); } @else { color: $instagram-tan; } } // * in stackicons-social-complete // instagram-alt @else if $brand == instagram-alt { content: $instagram-alt-c3; // lens @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-black); @include adjust-multi-color($instagram-black-rgba); } @else { color: $instagram-black; color: $instagram-black-rgba; } } // * in stackicons-social-complete // instagram-alt2 @else if $brand == instagram-alt2 { content: $instagram-alt2-c4; // lens @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-black); @include adjust-multi-color($instagram-black-rgba); } @else { color: $instagram-black; color: $instagram-black-rgba; } } // microsoft @else if $brand == microsoft { content: $microsoft-c2; // blue + green @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($microsoft-blue-mix); } @else { color: $microsoft-blue-mix; } } // picasa @else if $brand == picasa { content: $picasa-c2; // yellow + green // @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($picasa-yellow-mix); } @else { color: $picasa-yellow-mix; } } // podcast @else if $brand == podcast { content: $podcast-c3; // inner wave @if $multi-color-default == brand-color-variant { @include adjust-multi-color($podcast-purple-dk); @include adjust-multi-color($podcast-purple-dk-rgba); } @else { color: $podcast-purple-dk; color: $podcast-purple-dk-rgba; } } // reddit @else if $brand == reddit { content: $reddit-c3; // red eyes @if $multi-color-default == brand-color-variant { @include adjust-multi-color($reddit-red); } @else { color: $reddit-red; } } // slideshare @else if $brand == slideshare { content: $slideshare-c2; // blue person r @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($slideshare-blue); } @else { color: $slideshare-blue; } } // stackoverflow @else if $brand == stackoverflow { content: $stackoverflow-c2; // orange // @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($stackoverflow-orange-mix); } @else { color: $stackoverflow-orange-mix; } } // windows7 @else if $brand == windows7 { content: $windows7-c2; // blue + green @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($windows7-blue-mix); } @else { color: $windows7-blue-mix; } } // youtube @else if $brand == youtube { content: $youtube-c3; // inset shadow of play button (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-grey); @include adjust-multi-color($youtube-grey-rgba); } @else { color: $youtube-grey; color: $youtube-grey-rgba; } } // youtube2 @else if $brand == youtube2 { content: $youtube-c3; // inset shadow of play button (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-red-dk); @include adjust-multi-color($youtube-red-dk-rgba); } @else { color: $youtube-red-dk; color: $youtube-red-dk-rgba; } } // youtube-alt @else if $brand == youtube-alt { content: $youtube-alt-c2; // Red Tube shape // depending on effect, might want to disable @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-red-alt); } @else { color: $youtube-red-alt; } } // nav elements: // search-alt @else if $brand == search-alt { content: $search-c2; // light blue glass @if $multi-color-default == brand-color-variant { @include adjust-multi-color($search-blue-lt); @include adjust-multi-color($search-blue-lt-rgba); } @else { color: $search-blue-lt; color: $search-blue-lt-rgba; } } } // end c2 (span:after - 3 of 4 elements) // c2 - do the hover! (:hover span:after - 3 of 4 elements) .st-multi-color .st-icon-#{$brand}:hover span:after, .st-multi-color.st-icon-#{$brand}:hover span:after, .st-multi-color .st-icon-#{$brand}:focus span:after, .st-multi-color.st-icon-#{$brand}:focus span:after { // delicious @if $brand == delicious { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($delicious-blue); } @else { color: $delicious-blue; } } // dribbble, dribbble-alt @else if $brand == dribbble or $brand == dribbble-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($dribbble-pink-lt); } @else { color: $dribbble-pink-lt; } } // ebay @else if $brand == ebay { // "b y" @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($ebay-blue); } @else { color: $ebay-blue; } } // email @else if $brand == email { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-multi-color-email); } @else { color: $icon-multi-color-email; } } // foursquare @else if $brand == foursquare { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($foursquare-green); } @else { color: $foursquare-green; } } // github @else if $brand == github { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($github-orange-lt); } @else { color: $github-orange-lt; } } // gmail @else if $brand == gmail { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-red); } @else { color: $gmail-red; } } // gmail-alt @else if $brand == gmail-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-alt-red); } @else { color: $gmail-alt-red; } } // imdb @else if $brand == imdbimd { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($imdb-yellow-lt); @include adjust-multi-color-hover($imdb-yellow-lt-rgba); } @else { color: $imdb-yellow-lt; color: $imdb-yellow-lt-rgba; } } // instagram @else if $brand == instagram { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-tan); } @else { color: $instagram-tan; } } // * in stackicons-social-complete // instagram-alt, instagram-alt2 @else if $brand == instagram-alt or $brand == instagram-alt2 { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($white); @include adjust-multi-color-hover(transparentize($instagram-black-rgba, .5)); } @else { color: $white; color: transparentize($instagram-black-rgba, .5); } } // microsoft @else if $brand == microsoft { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($microsoft-blue-mix); } @else { color: $microsoft-blue-mix; } } // picasa @else if $brand == picasa { // @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($picasa-yellow-mix); } @else { color: $picasa-yellow-mix; } } // reddit @else if $brand == reddit { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($reddit-red); } @else { color: $reddit-red; } } // slideshare @else if $brand == slideshare { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($slideshare-blue); } @else { color: $slideshare-blue; } } // stackoverflow @else if $brand == stackoverflow { // @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($stackoverflow-orange-mix); } @else { color: $stackoverflow-orange-mix; } } // windows7 @else if $brand == windows7 { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($windows7-blue-mix); } @else { color: $windows7-blue-mix; } } // youtube @else if $brand == youtube { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-grey); @include adjust-multi-color-hover($youtube-grey-rgba); } @else { color: $youtube-grey; color: $youtube-grey-rgba; } } // youtube2 @else if $brand == youtube2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } // youtube-alt @else if $brand == youtube-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-red-alt); } @else { color: $youtube-red-alt; } } // nav elements: // search-alt @else if $brand == search-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($search-blue-lt); @include adjust-multi-color-hover($search-blue-lt-rgba); } @else { color: $search-blue-lt; color: $search-blue-lt-rgba; } } } // end c2:hover (:hover:after - 3 of 4 elements) // c3 (:after - 4 of 4 elements) .st-multi-color .st-icon-#{$brand}:after, .st-multi-color.st-icon-#{$brand}:after { // no universally applied effect... // delicious @if $brand == delicious { content: $delicious-c4; // black lower left @if $multi-color-default == brand-color-variant { @include adjust-multi-color($delicious-black); } @else { color: $delicious-black; } } // end delicious // dribbble, dribbble-alt @else if $brand == dribbble or $brand == dribbble-alt { content: $dribbble-c3; // darker pink outline @if $multi-color-default == brand-color-variant { @include adjust-multi-color($dribbble-pink-dk); } @else { color: $dribbble-pink-dk; } } // end dribbble // ebay @else if $brand == ebay { // no shadow effect content: $ebay-c3-alt; // yellow "ay" @if $multi-color-default == brand-color-variant { @include adjust-multi-color($ebay-yellow-mix); } @else { color: $ebay-yellow-mix; // rgba } } // end ebay // email @else if $brand == email { content: $email-c3; // lighter top flap @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-multi-color-email-lt); } @else { color: $icon-multi-color-email-lt; } } // end email // foursquare @else if $brand == foursquare { @if $foursquare-c0 == $btn-shape-sq { content: $foursquare-c3-alt0; // white swoosh, sq } @else if $foursquare-c0 == $btn-shape-r2 { content: $foursquare-c3-alt2; // white swoosh, r2 } @else if $foursquare-c0 == $btn-shape-r3 { content: $foursquare-c3-alt3; // white swoosh, r3 } @else if $foursquare-c0 == $btn-shape-cir { content: $foursquare-c3-alt4; // white swoosh, cir } @else { content: $foursquare-c3; // white swoosh, r1 } // $foursquare-c3-alt0=sq, -alt2=r2, -alt3=r3, alt4=cir @if $multi-color-default == brand-color-variant { @include adjust-multi-color(white); @include adjust-multi-color($foursquare-white-rgba); } @else { color: white; color: $foursquare-white-rgba; } } // end foursquare // github @else if $brand == github { content: $github-c3; // dark red eyes @if $multi-color-default == brand-color-variant { @include adjust-multi-color($github-red-dk); } @else { color: $github-red-dk; } } // end github // gmail @else if $brand == gmail { // if you need to support no-rgba, change to $gmail-c3-alt content: $gmail-c3; // shadow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-beige-dk); @include adjust-multi-color($gmail-beige-dk-rgba); } @else { color: $gmail-beige-dk; color: $gmail-beige-dk-rgba; } } // end gmail // gmail-alt @else if $brand == gmail-alt { // if you need to support no-rgba, change to $gmail-alt-c3-alt content: $gmail-alt-c3; // shadow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-grey-dk); @include adjust-multi-color($gmail-grey-dk-rgba); } @else { color: $gmail-grey-dk; color: $gmail-grey-dk-rgba; } } // end gmail-alt // * in stackicons-social-complete // gmail-lg @else if $brand == gmail-lg { // if you need to support no-rgba, change to $gmail-lg-c3-alt content: $gmail-lg-c3; // lighter flap @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-beige-lt); @include adjust-multi-color($gmail-beige-lt-rgba); } @else { color: $gmail-beige-lt; color: $gmail-beige-lt-rgba; } } // end gmail-lg // * in stackicons-social-complete // gmail-lg-alt @else if $brand == gmail-lg-alt { // if you need to support no-rgba, change to $gmail-lg-c3-alt content: $gmail-lg-alt-c3; // lighter flap @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-grey-lt); @include adjust-multi-color($gmail-grey-lt-rgba); } @else { color: $gmail-grey-lt; color: $gmail-grey-lt-rgba; } } // end gmail-lg // imdb @else if $brand == imdb { content: $imdb-c3; // logo @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color(black); } @else { color: black; } } // end instagram // instagram @else if $brand == instagram { content: $instagram-c3; // brown top @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-brown); } @else { color: $instagram-brown; } } // end instagram // * in stackicons-social-complete // instagram-alt @else if $brand == instagram-alt { @if $btn-shape-c0-default == $btn-shape-sq { content: $instagram-alt-c2-alt0; } @else if $btn-shape-c0-default == $btn-shape-r1 { content: $instagram-alt-c2-alt1; } @else if $btn-shape-c0-default == $btn-shape-r3 { content: $instagram-alt-c2-alt3; } @else if $btn-shape-c0-default == $btn-shape-cir { content: $instagram-alt-c2-alt4; } @else { content: $instagram-alt-c2-alt2; } @include shadow-effect(icon); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-tan); } @else { color: $instagram-tan; } } // * in stackicons-social-complete // instagram-alt2 @else if $brand == instagram-alt2 { content: $instagram-alt2-c2; // brown top + outline @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-brown); } @else { color: $instagram-brown; } } // end instagram-alt2 // microsoft @else if $brand == microsoft { content: $microsoft-c3; // yellow (+green) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($microsoft-yellow-mix); } @else { color: $microsoft-yellow-mix; } } // end microsoft // picasa @else if $brand == picasa { content: $picasa-c3; // blue + green + purple @if $multi-color-default == brand-color-variant { @include adjust-multi-color($picasa-blue-mix); } @else { color: $picasa-blue-mix; } } // end picasa // podcast @else if $brand == podcast { content: $podcast-c2; // both waves @if $multi-color-default == brand-color-variant { @include adjust-multi-color($podcast-purple); @include adjust-multi-color($podcast-purple-rgba); } @else { color: $podcast-purple; color: $podcast-purple-rgba; } } // end podcast // reddit @else if $brand == reddit { content: $reddit-c2; // black outline @if $multi-color-default == brand-color-variant { @include adjust-multi-color($reddit-black); } @else { color: $reddit-black; } } // end reddit // slideshare @else if $brand == slideshare { content: $slideshare-c3; // orange person @if $multi-color-default == brand-color-variant { @include adjust-multi-color($slideshare-orange); } @else { color: $slideshare-orange; } } // end slideshare // stackoverflow @else if $brand == stackoverflow { content: $stackoverflow-c3; // grey-mix @if $multi-color-default == brand-color-variant { @include adjust-multi-color($stackoverflow-grey-mix); } @else { color: $stackoverflow-grey-mix; } } // end slideshare // windows7 @else if $brand == windows7 { content: $windows7-c3; // yellow (+green) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($windows7-yellow-mix); } @else { color: $windows7-yellow-mix; } } // end windows7 // youtube @else if $brand == youtube { content: $youtube-icon; // screen shape with button cut out @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-white); } @else { color: $youtube-white; } } // end youtube // youtube2 @else if $brand == youtube2 { content: $youtube-icon; // screen shape with button cut out @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-red); } @else { color: $youtube-red; } } // end youtube2 // youtube-alt @else if $brand == youtube-alt { content: $youtube-alt-c3; // white "Tube" // @include dropshadow; // optional @if $multi-color-default == brand-color-variant { @include adjust-multi-color(white); } @else { color: white; } } // end youtube-alt // nav elements: // search-alt @else if $brand == search-alt { content: $search-c3; // highlight @if $multi-color-default == brand-color-variant { @include adjust-multi-color(white); @include adjust-multi-color(rgba(white, 0.7)); } @else { color: white; color: rgba(white, 0.7); } } // end search-alt } // end c3 (:before - 4 of 4 elements) // c3 - do the hover! (:hover:after - 4 of 4 elements) .st-multi-color .st-icon-#{$brand}:hover:after, .st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-icon-#{$brand}:focus:after, .st-multi-color.st-icon-#{$brand}:focus:after { // delicious @if $brand == delicious { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($delicious-black); } @else { color: $delicious-black; } } // end delicious // dribbble, dribbble-alt @else if $brand == dribbble or $brand == dribbble-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($dribbble-pink-dk); } @else { color: $dribbble-pink-dk; } } // end dribbble // ebay @else if $brand == ebay { // no shadow-effect on hover @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($ebay-yellow-mix); } @else { color: $ebay-yellow-mix; } } // end ebay // email @if $brand == email { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-multi-color-email-lt); } @else { color: $icon-multi-color-email-lt; } } // end email // foursquare @else if $brand == foursquare { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(white); @include adjust-multi-color-hover($foursquare-white-rgba); } @else { color: white; color: $foursquare-white-rgba; } } // end foursquare // github @else if $brand == github { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($github-red-dk); } @else { color: $github-red-dk; } } // end github // gmail @else if $brand == gmail { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-beige-dk); @include adjust-multi-color-hover($gmail-beige-dk-rgba); } @else { color: $gmail-beige-dk; color: $gmail-beige-dk-rgba; } } // end gmail // gmail-alt @else if $brand == gmail-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-grey-dk); @include adjust-multi-color-hover($gmail-grey-dk-rgba); } @else { color: $gmail-grey-dk; color: $gmail-grey-dk-rgba; } } // end gmail // * in stackicons-social-complete // gmail-lg @else if $brand == gmail-lg { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-beige-lt); @include adjust-multi-color-hover($gmail-beige-lt-rgba); } @else { color: $gmail-beige-lt; color: $gmail-beige-lt-rgba; } } // end gmail // * in stackicons-social-complete // gmail-lg-alt @else if $brand == gmail-lg-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-grey-lt); @include adjust-multi-color-hover($gmail-grey-lt-rgba); } @else { color: $gmail-grey-lt; color: $gmail-grey-lt-rgba; } } // end gmail // imdb @else if $brand == imdb { @include shadow-effect(icon-hover); @include glow; @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(black); } @else { color: black; } } // end instagram // instagram @else if $brand == instagram { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-brown); } @else { color: $instagram-brown; } } // end instagram // * in stackicons-social-complete // instagram-alt @else if $brand == instagram-alt { @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-tan); } @else { color: $instagram-tan; } } // end instagram-alt // * in stackicons-social-complete // instagram-alt2 @else if $brand == instagram-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-brown); } @else { color: $instagram-brown; } } // end instagram-alt2 // microsoft @else if $brand == microsoft { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($microsoft-yellow-mix); } @else { color: $microsoft-yellow-mix; } } // end microsoft // picasa @else if $brand == picasa { // @include shadow-effect(icon-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($picasa-blue-mix); } @else { color: $picasa-blue-mix; } } // end picasa // podcast @else if $brand == podcast { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($podcast-purple); @include adjust-multi-color-hover($podcast-purple-rgba); } @else { color: $podcast-purple; color: $podcast-purple-rgba; } } // end podcast // reddit @else if $brand == reddit { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($reddit-black); } @else { color: $reddit-black; } } // end reddit // slideshare @else if $brand == slideshare { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($slideshare-orange); } @else { color: $slideshare-orange; } } // end slideshare // stackoverflow @else if $brand == stackoverflow { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($stackoverflow-grey-mix); } @else { color: $stackoverflow-grey-mix; } } // end stackoverflow // windows7 @else if $brand == windows7 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($windows7-yellow-mix); } @else { color: $windows7-yellow-mix; } } // end windows7 @else if $brand == youtube { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } // end youtube @else if $brand == youtube2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-red); } @else { color: $youtube-red; } } // end youtube @else if $brand == youtube-alt { // @include dropshadow; // optional @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(white); } @else { color: white; } } // end youtube-alt // nav elements: @else if $brand == search-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(white); @include adjust-multi-color-hover(rgba(white, 0.7)); } @else { color: white; color: rgba(white, 0.7); } } // end search-alt } // end c3:hover (:before:hover - 4 of 4 elements) // ****************************************** / // *** ICON-ONLY - 4 ELEMENTS to 3 (or 4) *** / // These logos need 3 or 4 colors with no btn bg (.st-shape-icon): // $(brand)-c1 through $(brand)-c4 -- so an extra needed. // c1 - we're remapping c1 in place of c0... // .st-shape-icon c1 (in place of c0) (:before) .st-shape-icon.st-multi-color .st-icon-#{$brand}:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:before { // no universally applied effect... // negate any default effects: text-shadow: none; @if $brand == delicious { content: $delicious-c1 !important; // white bg square @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($white); } @else { color: $white; } } @else if $brand == dribbble or $brand == dribbble-alt { content: $dribbble-c1 !important; // pink circle @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($dribbble-pink); } @else { color: $dribbble-pink; } } @else if $brand == ebay { content: $ebay-c1 !important; // red "e" @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($ebay-red); } @else { color: $ebay-red; } } @else if $brand == email { content: $email-c1 !important; // grey envelope shape @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($email-grey-mix); } @else { color: $email-grey-mix; } } @else if $brand == foursquare { content: $foursquare-icon !important; // change btn bg to icon @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($foursquare-blue); } @else { color: $foursquare-blue; } } @else if $brand == github { content: $github-c1-alt !important; // black octocat @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($github-black); } @else { color: $github-black; } } @else if $brand == gmail { content: $gmail-c1 !important; // beige envelope @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-beige); } @else { color: $gmail-beige; } } @else if $brand == gmail-alt { content: $gmail-alt-c1 !important; // grey envelope @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-grey); } @else { color: $gmail-grey; } } // * gmail-lg and gmail-lg-alt in stackicons-social-complete // are icon-only by default @else if $brand == instagram { content: $instagram-c1 !important; // beige camera shape @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-beige); } @else { color: $instagram-beige; } } // * in stackicons-social-complete @else if $brand == instagram-alt { content: $instagram-alt-c1-icon !important; // brown camera top @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-brown); } @else { color: $instagram-brown; } } // * in stackicons-social-complete @else if $brand == instagram-alt2 { content: $instagram-alt2-c1 !important; // beige camera bg @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-beige); } @else { color: $instagram-beige; } } @else if $brand == imdb { content: $imdb-icon-alt !important; // ticket shape @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($imdb-yellow); } @else { color: $imdb-yellow; } } @else if $brand == microsoft { content: $microsoft-c1-icon !important; // red @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($microsoft-red); } @else { color: $microsoft-red; } } @else if $brand == picasa { content: $picasa-c1 !important; // red @if $multi-color-default == brand-color-variant { @include adjust-multi-color($picasa-red); } @else { color: $picasa-red; } } @else if $brand == podcast { content: $podcast-c1 !important; // grey person @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($podcast-grey); } @else { color: $podcast-grey; } } @else if $brand == reddit { content: $reddit-c1 !important; // white silhouette @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == slideshare { content: $slideshare-c1 !important; // grey icon w screen border @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($slideshare-grey); } @else { color: $slideshare-grey; } } @else if $brand == stackoverflow { content: $stackoverflow-c1 !important; // grey tray // @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($stackoverflow-grey); } @else { color: $stackoverflow-grey; } } @else if $brand == windows7 { content: $windows7-c1-icon !important; // red @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($windows7-red); } @else { color: $windows7-red; } } @else if $brand == youtube or $brand == youtube2 { content: $youtube-c1 !important; // screen shape @include shadow-effect(icon-only); @if $multi-color-hover-default == brand-color-variant { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } @else if $brand == youtube-alt { content: $youtube-alt-c1 !important; // black "You" // depending on effect, might want to disable @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-black); } @else { color: $youtube-black; } } // nav elements: @else if $brand == search-alt { content: $search-c1 !important; // magnifying glass @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($search-grey); } @else { color: $search-grey; } } } // end c1 (:before - 1 of 4 elements) // .st-shape-icon c1 - do the hover! (:hover:before - 1 of 4 elements) .st-shape-icon.st-multi-color .st-icon-#{$brand}:hover:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:hover:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:hover:before, .st-shape-icon.st-multi-color .st-icon-#{$brand}:focus:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:focus:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:focus:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:focus:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:hover:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:hover:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:hover:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:focus:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:focus:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:focus:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:focus:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:hover:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:hover:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:hover:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:hover:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:focus:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:focus:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:focus:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:focus:before { // no universal shadow-effect on hover... @if $brand == delicious { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($white); } @else { color: $white; } } @else if $brand == dribbble or $brand == dribbble-alt { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($dribbble-pink); } @else { color: $dribbble-pink; } } @else if $brand == ebay { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($ebay-red); } @else { color: $ebay-red; } } @else if $brand == email { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($email-grey-mix); } @else { color: $email-grey-mix; } } @else if $brand == foursquare { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($foursquare-blue); } @else { color: $foursquare-blue; } } @else if $brand == github { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($github-black); } @else { color: $github-black; } } @else if $brand == gmail { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-beige); } @else { color: $gmail-beige; } } @else if $brand == gmail-alt { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-grey); } @else { color: $gmail-grey; } } @else if $brand == imdb { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($imdb-yellow); } @else { color: $imdb-yellow; } } @else if $brand == instagram { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-beige); } @else { color: $instagram-beige; } } // * in stackicons-social-complete @else if $brand == instagram-alt { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-brown); } @else { color: $instagram-brown; } } // * in stackicons-social-complete @else if $brand == instagram-alt2 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-beige); } @else { color: $instagram-beige; } } @else if $brand == microsoft { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($microsoft-red); } @else { color: $microsoft-red; } } @else if $brand == picasa { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($picasa-red); } @else { color: $picasa-red; } } @else if $brand == podcast { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($podcast-grey); } @else { color: $podcast-grey; } } @else if $brand == reddit { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($color-multi-color-icon-default); } @else { color: $color-multi-color-icon-default; } } @else if $brand == slideshare { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($slideshare-grey); } @else { color: $slideshare-grey; } } @else if $brand == stackoverflow { // @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($stackoverflow-grey); } @else { color: $stackoverflow-grey; } } @else if $brand == windows7 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($windows7-red); } @else { color: $windows7-red; } } @else if $brand == youtube or $brand == youtube2 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-white); } @else { color: $youtube-white; } } @else if $brand == youtube-alt { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-black); } @else { color: $youtube-black; } } // nav elements: @else if $brand == search-alt { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($search-grey); } @else { color: $search-grey; } } } // end .st-shape-icon c1:hover (:hover span:before - 2 of 4 elements) // .st-shape-icon c2 (span:before - 2 of 3 or 4 elements) .st-shape-icon.st-multi-color .st-icon-#{$brand} > span:before, .st-shape-icon .st-multi-color.st-icon-#{$brand} > span:before, .st-shape-icon.st-multi-color.st-icon-#{$brand} > span:before, .st-multi-color .st-shape-icon.st-icon-#{$brand} > span:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand} > span:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand} > span:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand} > span:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand} > span:before, .st-shape-r5.st-multi-color .st-icon-#{$brand} > span:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand} > span:before, .st-shape-r5.st-multi-color.st-icon-#{$brand} > span:before, .st-multi-color .st-shape-r5.st-icon-#{$brand} > span:before { // negate any default effects: text-shadow: none; @if $brand == delicious { content: $delicious-c2; // blue upper right @if $multi-color-default == brand-color-variant { @include adjust-multi-color($delicious-blue); } @else { color: $delicious-blue; } } @else if $brand == dribbble or $brand == dribbble-alt { content: $dribbble-c2; // light pink highlight @if $multi-color-default == brand-color-variant { @include adjust-multi-color($dribbble-pink-lt); } @else { color: $dribbble-pink-lt; } } @else if $brand == ebay { content: $ebay-c2; // blue "b" @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($ebay-blue); } @else { color: $ebay-blue; } } @else if $brand == email { content: $email-c2; // envelope flaps @if $multi-color-default == brand-color-variant { @include adjust-multi-color(lighten($email-grey-mix, 6)); } @else { color: lighten($email-grey-mix, 6); } } @else if $brand == foursquare { content: $foursquare-c1; // blue diamond // @include shadow-effect(icon-only); // shadow effect here, and c0? @if $multi-color-default == brand-color-variant { @include adjust-multi-color($icon-color-foursquare); } @else { color: $icon-color-foursquare; color: rgba($foursquare-blue-dk, 0.50); } } @else if $brand == github { content: $github-c2; // lt orange face @if $multi-color-default == brand-color-variant { @include adjust-multi-color($github-orange-lt); } @else { color: $github-orange-lt; } } @else if $brand == gmail { content: $gmail-c2; // red "M" @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-red); } @else { color: $gmail-red; } } @else if $brand == gmail-alt { content: $gmail-alt-c2; // red "M" @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-alt-red); } @else { color: $gmail-alt-red; } } //imdb @else if $brand == imdb { content: ""; } @else if $brand == instagram { content: $instagram-c2; // tan camera outline @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-tan); } @else { color: $instagram-tan; } } // * in stackicons-social-complete @else if $brand == instagram-alt2 { content: $instagram-alt2-c2; // tan camera outline @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-tan); } @else { color: $instagram-tan; } } @else if $brand == microsoft { content: $microsoft-c2-icon; // green @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($microsoft-green); } @else { color: $microsoft-green; } } @else if $brand == picasa { content: $picasa-c2; // yellow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($picasa-yellow-mix); } @else { color: $picasa-yellow-mix; } } // podcast @else if $brand == podcast { content: $podcast-c3; // inner wave @if $multi-color-default == brand-color-variant { @include adjust-multi-color($podcast-purple-dk); @include adjust-multi-color($podcast-purple-dk-rgba); } @else { color: $podcast-purple-dk; color: $podcast-purple-dk-rgba; } } // reddit @else if $brand == reddit { content: $reddit-c3; // red eyes @if $multi-color-default == brand-color-variant { @include adjust-multi-color($reddit-red); } @else { color: $reddit-red; } } // slideshare @else if $brand == slideshare { content: $slideshare-c1-alt2; // white screen (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($slideshare-white-rgba); } @else { color: $slideshare-white-rgba; } } // stackoverflow @else if $brand == stackoverflow { content: $stackoverflow-c2-alt; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($stackoverflow-orange-mix); } @else { color: $stackoverflow-orange-mix; } } @else if $brand == windows7 { content: $windows7-c2-icon; // green @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($windows7-green); } @else { color: $windows7-green; } } @else if $brand == youtube or $brand == youtube2 { content: ""; } @else if $brand == youtube-alt { content: $youtube-alt-c2; // Red Tube shape // depending on effect, might want to disable @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-red-alt); } @else { color: $youtube-red-alt; } } // nav elements: @else if $brand == search-alt { content: $search-c2; // lt blue glass @if $multi-color-default == brand-color-variant { @include adjust-multi-color($search-blue-lt); @include adjust-multi-color($search-blue-lt-rgba); } @else { color: $search-blue-lt; color: $search-blue-lt-rgba; } } } // end .st-shape-icon c2 (2 of 3 or 4 elements) // .st-shape-icon c2 - do the :hover! (:hover span:before - 2 of 3 or 4 elements) .st-shape-icon.st-multi-color .st-icon-#{$brand}:hover span:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:hover span:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:hover span:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:hover span:before, .st-shape-icon.st-multi-color .st-icon-#{$brand}:focus span:before, .st-shape-icon .st-multi-color.st-icon-#{$brand}:focus span:before, .st-shape-icon.st-multi-color.st-icon-#{$brand}:focus span:before, .st-multi-color .st-shape-icon.st-icon-#{$brand}:focus span:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:hover span:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:hover span:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:hover span:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:hover span:before, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:focus span:before, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:focus span:before, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:focus span:before, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:focus span:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:hover span:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:hover span:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:hover span:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:hover span:before, .st-shape-r5.st-multi-color .st-icon-#{$brand}:focus span:before, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:focus span:before, .st-shape-r5.st-multi-color.st-icon-#{$brand}:focus span:before, .st-multi-color .st-shape-r5.st-icon-#{$brand}:focus span:before { @if $brand == delicious { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($delicious-blue); } @else { color: $delicious-blue; } } @else if $brand == dribbble or $brand == dribbble-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($dribbble-pink-lt); } @else { color: $dribbble-pink-lt; } } @else if $brand == ebay { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($ebay-blue); } @else { color: $ebay-blue; } } @else if $brand == email { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(lighten($email-grey-mix, 12)); } @else { color: lighten($email-grey-mix, 12); } } @else if $brand == foursquare { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($icon-color-foursquare); } @else { color: $icon-color-foursquare; color: rgba($foursquare-blue-dk, 0.50); } } @else if $brand == github { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($github-orange-lt); } @else { color: $github-orange-lt; } } @else if $brand == gmail { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-red); } @else { color: $gmail-red; } } @else if $brand == gmail-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-alt-red); } @else { color: $gmail-alt-red; } } // * instagram-alt2 in stackicons-social-complete @else if $brand == instagram or $brand == instagram-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-tan); } @else { color: $instagram-tan; } } @else if $brand == microsoft { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($microsoft-green); } @else { color: $microsoft-green; } } @else if $brand == picasa { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($picasa-yellow-mix); } @else { color: $picasa-yellow-mix; } } // podcast @else if $brand == podcast { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($podcast-purple-dk); @include adjust-multi-color-hover($podcast-purple-dk-rgba); } @else { color: $podcast-purple-dk; color: $podcast-purple-dk-rgba; } } // reddit @else if $brand == reddit { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($reddit-red); } @else { color: $reddit-red; } } // slideshare - no change on hover // stackoverflow @else if $brand == stackoverflow { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($stackoverflow-orange-mix); } @else { color: $stackoverflow-orange-mix; } } @else if $brand == windows7 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($windows7-green); } @else { color: $windows7-green; } } @else if $brand == youtube-alt { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-red-alt); } @else { color: $youtube-red-alt; } } // nav elements: @else if $brand == search-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($search-blue-lt); @include adjust-multi-color-hover($search-blue-lt-rgba); } @else { color: $search-blue-lt; color: $search-blue-lt-rgba; } } } // end .st-shape-icon c2:hover (3 of 3 or 4 elements) // .st-shape-icon c3 (span:after - 3 of 3 or 4 elements) .st-shape-icon.st-multi-color .st-icon-#{$brand} > span:after, .st-shape-icon .st-multi-color.st-icon-#{$brand} > span:after, .st-shape-icon.st-multi-color.st-icon-#{$brand} > span:after, .st-multi-color .st-shape-icon.st-icon-#{$brand} > span:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand} > span:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand} > span:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand} > span:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand} > span:after, .st-shape-r5.st-multi-color .st-icon-#{$brand} > span:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand} > span:after, .st-shape-r5.st-multi-color.st-icon-#{$brand} > span:after, .st-multi-color .st-shape-r5.st-icon-#{$brand} > span:after { // negate any default effects: text-shadow: none; @if $brand == delicious { content: $delicious-c3; // grey bottom r @if $multi-color-default == brand-color-variant { @include adjust-multi-color($delicious-grey); } @else { color: $delicious-grey; } } @else if $brand == dribbble-alt { content: $dribbble-c4; // grey shadow (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($dribbble-grey); @include adjust-multi-color($dribbble-grey-rgba); } @else { color: $dribbble-grey; color: $dribbble-grey-rgba; } } @else if $brand == ebay { content: $ebay-c3; // yellow "a" @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($ebay-yellow); } @else { color: $ebay-yellow; } } // end ebay @else if $brand == email { content: $email-c3; // top flap @if $multi-color-default == brand-color-variant { @include adjust-multi-color(lighten($email-grey-mix, 8)); } @else { color: lighten($email-grey-mix, 8); } } // end email @else if $brand == foursquare { content: $foursquare-c2; // ball @if $multi-color-default == brand-color-variant { @include adjust-multi-color($foursquare-green); } @else { color: $foursquare-green; } } // end foursquare @else if $brand == github { content: $github-c3; // dark red eyes @if $multi-color-default == brand-color-variant { @include adjust-multi-color($github-red-dk); } @else { color: $github-red-dk; } } // end github @else if $brand == gmail { // if you need to support no-rgba, change to $gmail-c3-alt content: $gmail-c3; // shadow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-beige-dk); @include adjust-multi-color($gmail-beige-dk-rgba); } @else { color: $gmail-beige-dk; color: $gmail-beige-dk-rgba; } } // end gmail @else if $brand == gmail-alt { // if you need to support no-rgba, change to $gmail-alt-c3-alt content: $gmail-alt-c3; // shadow @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-grey-dk); @include adjust-multi-color($gmail-grey-dk-rgba); } @else { color: $gmail-grey-dk; color: $gmail-grey-dk-rgba; } } // end gmail-alt //imdb @else if $brand == imdb { content: ""; } @else if $brand == instagram { content: $instagram-c4; // lens (optional) // content: $instagram-c4-alt; // lens & flash (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-black); @include adjust-multi-color($instagram-black-rgba); } @else { color: $instagram-black; color: $instagram-black-rgba; } } // end instagram // * in stackicons-social-complete @else if $brand == instagram-alt { content: $instagram-alt-c3-icon; // camera lens @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-black); @include adjust-multi-color($instagram-black-rgba); } @else { color: $instagram-black; color: $instagram-black-rgba; } } // * instagram-alt2 unchanged in icon-only @else if $brand == microsoft { content: $microsoft-c3-icon; // yellow @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($microsoft-yellow); } @else { color: $microsoft-yellow; } } @else if $brand == picasa { content: $picasa-c3; // blue @if $multi-color-default == brand-color-variant { @include adjust-multi-color($picasa-blue-mix); } @else { color: $picasa-blue-mix; } } // podcast - content: "" // reddit - content: "" @else if $brand == slideshare { content: $slideshare-c2; // blue person @if $multi-color-default == brand-color-variant { @include adjust-multi-color($slideshare-blue); } @else { color: $slideshare-blue; } } // end slideshare @else if $brand == stackoverflow { content: $stackoverflow-c3; @if $multi-color-default == brand-color-variant { @include adjust-multi-color($stackoverflow-grey-mix); } @else { color: $stackoverflow-grey-mix; } } // end stackoverflow @else if $brand == windows7 { content: $windows7-c3-icon; // yellow @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($windows7-yellow); } @else { color: $windows7-yellow; } } @else if $brand == youtube or $brand == youtube2 { content: $youtube-c3; // inset shadow (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($youtube-grey); @include adjust-multi-color($youtube-grey-rgba); } @else { color: $youtube-grey; color: $youtube-grey-rgba; } } // end youtube @else if $brand == youtube-alt { content: $youtube-alt-c3; // white "Tube" // @include dropshadow; // optional @if $multi-color-default == brand-color-variant { @include adjust-multi-color(white); } @else { color: white; } } // end youtube-alt // nav elements: @else if $brand == search-alt { content: $search-c3; // reflection highlight @if $multi-color-default == brand-color-variant { @include adjust-multi-color(white); @include adjust-multi-color(rgba(white, 0.7)); } @else { color: white; color: rgba(white, 0.7); } } // end search-alt } // end .st-shape-icon c3 (3 of 3 or 4 elements) // .st-shape-icon c3 - do the :hover! (:hover span:after - 3 of 4 elements) .st-shape-icon.st-multi-color .st-icon-#{$brand}:hover span:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:hover span:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:hover span:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:hover span:after, .st-shape-icon.st-multi-color .st-icon-#{$brand}:focus span:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:focus span:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:focus span:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:focus span:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:hover span:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:hover span:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:hover span:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:hover span:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:focus span:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:focus span:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:focus span:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:focus span:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:hover span:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:hover span:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:hover span:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:hover span:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:focus span:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:focus span:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:focus span:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:focus span:after { @if $brand == delicious { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($delicious-grey); } @else { color: $delicious-grey; } } @else if $brand == dribbble-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($dribbble-grey); @include adjust-multi-color-hover($dribbble-grey-rgba); } @else { color: $dribbble-grey; color: $dribbble-grey-rgba; } } @else if $brand == ebay { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($ebay-yellow); } @else { color: $ebay-yellow; } } // end ebay @else if $brand == email { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(lighten($email-grey-mix, 10)); } @else { color: lighten($email-grey-mix, 10); } } // end email @else if $brand == foursquare { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($foursquare-green); } @else { color: $foursquare-green; } } // end foursquare @else if $brand == github { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($github-red-dk); } @else { color: $github-red-dk; } } // end github @else if $brand == gmail { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-beige-dk); @include adjust-multi-color-hover($gmail-beige-dk-rgba); } @else { color: $gmail-beige-dk; color: $gmail-beige-dk-rgba; } } // end gmail @else if $brand == gmail-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-grey-dk); @include adjust-multi-color-hover($gmail-grey-dk-rgba); } @else { color: $gmail-grey-dk; color: $gmail-grey-dk-rgba; } } // end gmail-alt // * instagram-alt, -alt2 in stackicons-social-complete @else if $brand == instagram or $brand == instagram-alt or $brand == instagram-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($white); @include adjust-multi-color-hover(transparentize($instagram-black-rgba, .5)); } @else { color: $white; color: transparentize($instagram-black-rgba, .5); } } // end instagram @else if $brand == microsoft { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($microsoft-yellow); } @else { color: $microsoft-yellow; } } // end microsoft @else if $brand == picasa { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($picasa-blue-mix); } @else { color: $picasa-blue-mix; } } // end microsoft // podcast - content: "" // reddit - content: "" @else if $brand == slideshare { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($slideshare-blue); } @else { color: $slideshare-blue; } } // end slideshare @else if $brand == stackoverflow { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($stackoverflow-grey-mix); } @else { color: $stackoverflow-grey-mix; } } // end stackoverflow @else if $brand == windows7 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($windows7-yellow); } @else { color: $windows7-yellow; } } // end microsoft @else if $brand == youtube or $brand == youtube2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-grey); @include adjust-multi-color-hover($youtube-grey-rgba); } @else { color: $youtube-grey; color: $youtube-grey-rgba; } } // end youtube @else if $brand == youtube-alt { // @include dropshadow; // optional @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(white); } @else { color: white; } } // end youtube-alt // nav elements: @else if $brand == search-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(white); @include adjust-multi-color-hover(rgba(white, 0.7)); } @else { color: white; color: rgba(white, 0.7); } } // end search-alt } // end c3:hover (3 of 3 or 4 elements) // .st-shape-icon c4 (:after - 4 of 4 elements) .st-shape-icon.st-multi-color .st-icon-#{$brand}:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:after { // negate any default effects: text-shadow: none; @if $brand == delicious { content: $delicious-c4; // black lower left @if $multi-color-default == brand-color-variant { @include adjust-multi-color($delicious-black); } @else { color: $delicious-black; } } // end $delicious @else if $brand == dribbble or $brand == dribbble-alt { content: $dribbble-c3; // darker pink outline @if $multi-color-default == brand-color-variant { @include adjust-multi-color($dribbble-pink-dk); } @else { color: $dribbble-pink-dk; } } // end dribbble @else if $brand == ebay { content: $ebay-c4; // green "y" @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($ebay-green); } @else { color: $ebay-green; } } // end ebay @else if $brand == foursquare { content: $foursquare-c3-alt3; // white swoosh, r3 // $foursquare-c3-alt=sq, -alt2=r2, -alt3=r3, alt4=cir @if $multi-color-default == brand-color-variant { @include adjust-multi-color(white); @include adjust-multi-color($foursquare-white-rgba); } @else { color: white; color: $foursquare-white-rgba; } } // end foursquare @else if $brand == github { content: $github-c4; // water @if $multi-color-default == brand-color-variant { @include adjust-multi-color($github-blue-lt); @include adjust-multi-color($github-blue-lt-rgba); } @else { color: $github-blue-lt; color: $github-blue-lt-rgba; } } // end github @else if $brand == gmail { content: $gmail-c4; // lighter top flap (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-beige-lt); @include adjust-multi-color($gmail-beige-lt-rgba); } @else { color: $gmail-beige-lt; color: $gmail-beige-lt-rgba; } } // end gmail @else if $brand == gmail-alt { content: $gmail-alt-c4; // lighter top flap (optional) @if $multi-color-default == brand-color-variant { @include adjust-multi-color($gmail-grey-lt); @include adjust-multi-color($gmail-grey-lt-rgba); } @else { color: $gmail-grey-lt; color: $gmail-grey-lt-rgba; } } // end gmail @else if $brand == instagram { content: $instagram-c3; // brown top @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-brown); } @else { color: $instagram-brown; } } // end instagram // * in stackicons-social-complete @else if $brand == instagram-alt { content: $instagram-alt-c2-icon; // tan bottom @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-tan); } @else { color: $instagram-tan; } } // end instagram-alt // * in stackicons-social-complete @else if $brand == instagram-alt2 { content: $instagram-alt2-c3; // brown top @if $multi-color-default == brand-color-variant { @include adjust-multi-color($instagram-brown); } @else { color: $instagram-brown; } } // end instagram-alt @else if $brand == microsoft { content: $microsoft-c4-icon; // blue @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($microsoft-blue); } @else { color: $microsoft-blue; } } // end microsoft @else if $brand == picasa { content: $picasa-c4; // grey spokes @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($picasa-grey); } @else { color: $picasa-grey; } } // end picasa // podcast, reddit, slideshare unchanged in icon-only @else if $brand == stackoverflow { content: $stackoverflow-c4; // orange-red top // @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($stackoverflow-orange-dk); } @else { color: $stackoverflow-orange-dk; } } // end stackoverflow // podcast, reddit, slideshare unchanged in icon-only @else if $brand == windows7 { content: $windows7-c4-icon; // blue @include shadow-effect(icon-only); @if $multi-color-default == brand-color-variant { @include adjust-multi-color($windows7-blue); } @else { color: $windows7-blue; } } // end windows7 @else if $brand == youtube or $brand == youtube2 { content: $youtube-icon; // play button cut out of screen @if $multi-color-default == brand-color-variant { @include adjust-multi-color-hover($youtube-red); } @else { color: $youtube-red; } } // end youtube // youtube-alt has only 3 elements - this is optional } // end .st-shape-icon c4 (:after - 4 of 4 elements) // .st-shape-icon c4 - do the :hover! (:hover:after - 4 of 4 elements) .st-shape-icon.st-multi-color .st-icon-#{$brand}:hover:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:hover:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:hover:after, .st-shape-icon.st-multi-color .st-icon-#{$brand}:focus:after, .st-shape-icon .st-multi-color.st-icon-#{$brand}:focus:after, .st-shape-icon.st-multi-color.st-icon-#{$brand}:focus:after, .st-multi-color .st-shape-icon.st-icon-#{$brand}:focus:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:hover:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:hover:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:hover:after, .st-shape-rounded5.st-multi-color .st-icon-#{$brand}:focus:after, .st-shape-rounded5 .st-multi-color.st-icon-#{$brand}:focus:after, .st-shape-rounded5.st-multi-color.st-icon-#{$brand}:focus:after, .st-multi-color .st-shape-rounded5.st-icon-#{$brand}:focus:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:hover:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:hover:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:hover:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:hover:after, .st-shape-r5.st-multi-color .st-icon-#{$brand}:focus:after, .st-shape-r5 .st-multi-color.st-icon-#{$brand}:focus:after, .st-shape-r5.st-multi-color.st-icon-#{$brand}:focus:after, .st-multi-color .st-shape-r5.st-icon-#{$brand}:focus:after { @if $brand == delicious { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($delicious-black); } @else { color: $delicious-black; } } // end delicious @if $brand == dribbble or $brand == dribbble-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($dribbble-pink-dk); } @else { color: $dribbble-pink-dk; } } // end dribbble @else if $brand == ebay { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($ebay-green); } @else { color: $ebay-green; } } @else if $brand == foursquare { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover(white); @include adjust-multi-color-hover($foursquare-white-rgba); } @else { color: white; color: $foursquare-white-rgba; } } // end foursquare @else if $brand == github { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($github-blue-lt); @include adjust-multi-color-hover($github-blue-lt-rgba); } @else { color: $github-blue-lt; color: $github-blue-lt-rgba; } } // end github @else if $brand == gmail { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-beige-lt); @include adjust-multi-color-hover($gmail-beige-lt-rgba); } @else { color: $gmail-beige-lt; color: $gmail-beige-lt-rgba; } } // end gmail @else if $brand == gmail-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($gmail-grey-lt); @include adjust-multi-color-hover($gmail-grey-lt-rgba); } @else { color: $gmail-grey-lt; color: $gmail-grey-lt-rgba; } } // end gmail @else if $brand == instagram { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-brown); } @else { color: $instagram-brown; } } // end instagram // * in stackicons-social-complete @else if $brand == instagram-alt { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-tan); } @else { color: $instagram-tan; } } // end instagram-alt // * in stackicons-social-complete @else if $brand == instagram-alt2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($instagram-brown); } @else { color: $instagram-brown; } } // end instagram-alt @else if $brand == microsoft { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($microsoft-blue); } @else { color: $microsoft-blue; } } // end microsoft @else if $brand == picasa { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($picasa-grey); } @else { color: $picasa-grey; } } // end picasa // podcast, reddit, slideshare unchanged in icon-only @else if $brand == stackoverflow { // @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($stackoverflow-orange-dk); } @else { color: $stackoverflow-orange-dk; } } // end stackoverflow @else if $brand == windows7 { @include shadow-effect(icon-only-hover); @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($windows7-blue); } @else { color: $windows7-blue; } } // end windows7 @else if $brand == youtube or $brand == youtube2 { @if $multi-color-hover-default == brand-color-hover { @include adjust-multi-color-hover($youtube-red); } @else { color: $youtube-red; } } // end youtube // youtube-alt has only 3 elements } // end .st-shape-icon c4:hover (:hover:after - 4 of 4 elements) } // end @each 4 ELEMENTS