@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 <span></span> 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 <span></span> 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 <span></span> 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