414 lines
13 KiB
SCSS
414 lines
13 KiB
SCSS
|
|
/*-----------------------------------------------------------------------------------
|
|
|
|
Shortcodes: social-icons.scss
|
|
|
|
-----------------------------------------------------------------------------------*/
|
|
|
|
/* ----------------------------------------------------------------
|
|
Social Icons
|
|
-----------------------------------------------------------------*/
|
|
|
|
|
|
.social-icon {
|
|
margin: 0 5px 5px 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 20px;
|
|
line-height: 38px !important;
|
|
color: #555;
|
|
text-shadow: none;
|
|
border: 1px solid #AAA;
|
|
@include border-radius(3px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* Social Icons - Rounded
|
|
-----------------------------------------------------------------*/
|
|
|
|
.si-rounded { @include border-radius(50%); }
|
|
|
|
/* Social Icons - Borderless
|
|
-----------------------------------------------------------------*/
|
|
|
|
.si-borderless { border-color: transparent !important; }
|
|
|
|
/* Social Icons - Dark
|
|
-----------------------------------------------------------------*/
|
|
|
|
.si-dark {
|
|
background-color: #444;
|
|
color: #FFF !important;
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Social Icons - Light
|
|
-----------------------------------------------------------------*/
|
|
|
|
.si-light {
|
|
background-color: rgba(0,0,0,0.05);
|
|
color: #666 !important;
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Social Icons - Colored
|
|
-----------------------------------------------------------------*/
|
|
|
|
.si-colored {
|
|
border-color: transparent !important;
|
|
i {
|
|
color: #FFF;
|
|
}
|
|
}
|
|
|
|
/* Social Icons - Large
|
|
-----------------------------------------------------------------*/
|
|
|
|
.social-icon {
|
|
&.si-large {
|
|
margin: 0 10px 10px 0;
|
|
width: 56px;
|
|
height: 56px;
|
|
font-size: 30px;
|
|
line-height: 54px !important;
|
|
}
|
|
}
|
|
|
|
/* Social Icons - Small
|
|
-----------------------------------------------------------------*/
|
|
|
|
.social-icon {
|
|
&.si-small {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 14px;
|
|
line-height: 30px !important;
|
|
}
|
|
i {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
body:not(.device-touch) {
|
|
.social-icon {
|
|
i {
|
|
@include transition(all .3s ease);
|
|
}
|
|
}
|
|
}
|
|
|
|
.social-icon {
|
|
i {
|
|
&:last-child {
|
|
color: #FFF !important;
|
|
}
|
|
}
|
|
&:hover {
|
|
color: #555;
|
|
border-color: transparent;
|
|
i {
|
|
&:first-child {
|
|
margin-top: -38px;
|
|
}
|
|
}
|
|
}
|
|
&.si-large {
|
|
&:hover {
|
|
i {
|
|
&:first-child {
|
|
margin-top: -54px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.si-small {
|
|
&:hover {
|
|
i {
|
|
&:first-child {
|
|
margin-top: -30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.si-colored {
|
|
&.social-icon {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Social Icons - Sticky
|
|
-----------------------------------------------------------------*/
|
|
|
|
.si-sticky {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 5px;
|
|
width: 36px;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Social Icons - Sticky Right
|
|
-----------------------------------------------------------------*/
|
|
|
|
.si-sticky {
|
|
&.si-sticky-right {
|
|
left: auto;
|
|
right: 8px;
|
|
}
|
|
}
|
|
|
|
/* Social Icons - Share
|
|
-----------------------------------------------------------------*/
|
|
|
|
.si-share {
|
|
position: relative;
|
|
padding-left: 5px;
|
|
border-top: 1px solid #EEE;
|
|
border-bottom: 1px solid #EEE;
|
|
span {
|
|
line-height: 36px;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
}
|
|
div {
|
|
float: right;
|
|
}
|
|
.social-icon {
|
|
margin: -1px 0;
|
|
@include border-radius(0);
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
.si-facebook:hover,
|
|
.si-colored.si-facebook { background-color: $facebook !important; }
|
|
.si-delicious:hover,
|
|
.si-colored.si-delicious { background-color: $delicious !important; }
|
|
.si-paypal:hover,
|
|
.si-colored.si-paypal { background-color: $paypal !important; }
|
|
.si-flattr:hover,
|
|
.si-colored.si-flattr { background-color: $flattr !important; }
|
|
.si-android:hover,
|
|
.si-colored.si-android { background-color: $android !important; }
|
|
.si-smashmag:hover,
|
|
.si-colored.si-smashmag { background-color: $smashmag !important; }
|
|
.si-gplus:hover,
|
|
.si-colored.si-gplus { background-color: $gplus !important; }
|
|
.si-wikipedia:hover,
|
|
.si-colored.si-wikipedia { background-color: $wikipedia !important; }
|
|
.si-stumbleupon:hover,
|
|
.si-colored.si-stumbleupon { background-color: $stumbleupon !important; }
|
|
.si-foursquare:hover,
|
|
.si-colored.si-foursquare { background-color: $foursquare !important; }
|
|
.si-call:hover,
|
|
.si-colored.si-call { background-color: $call !important; }
|
|
.si-ninetyninedesigns:hover,
|
|
.si-colored.si-ninetyninedesigns { background-color: $ninetyninedesigns !important; }
|
|
.si-forrst:hover,
|
|
.si-colored.si-forrst { background-color: $forrst !important; }
|
|
.si-digg:hover,
|
|
.si-colored.si-digg { background-color: $digg !important; }
|
|
.si-spotify:hover,
|
|
.si-colored.si-spotify { background-color: $spotify !important; }
|
|
.si-reddit:hover,
|
|
.si-colored.si-reddit { background-color: $reddit !important; }
|
|
.si-blogger:hover,
|
|
.si-colored.si-blogger { background-color: $blogger !important; }
|
|
.si-cc:hover,
|
|
.si-colored.si-cc { background-color: $cc !important; }
|
|
.si-dribbble:hover,
|
|
.si-colored.si-dribbble { background-color: $dribbble !important; }
|
|
.si-evernote:hover,
|
|
.si-colored.si-evernote { background-color: $evernote !important; }
|
|
.si-flickr:hover,
|
|
.si-colored.si-flickr { background-color: $flickr !important; }
|
|
.si-google:hover,
|
|
.si-colored.si-google { background-color: $google !important; }
|
|
.si-instapaper:hover,
|
|
.si-colored.si-instapaper { background-color: $instapaper !important; }
|
|
.si-klout:hover,
|
|
.si-colored.si-klout { background-color: $klout !important; }
|
|
.si-linkedin:hover,
|
|
.si-colored.si-linkedin { background-color: $linkedin !important; }
|
|
.si-vk:hover,
|
|
.si-colored.si-vk { background-color: $vk !important; }
|
|
.si-rss:hover,
|
|
.si-colored.si-rss { background-color: $rss !important; }
|
|
.si-skype:hover,
|
|
.si-colored.si-skype { background-color: $skype !important; }
|
|
.si-twitter:hover,
|
|
.si-colored.si-twitter { background-color: $twitter !important; }
|
|
.si-youtube:hover,
|
|
.si-colored.si-youtube { background-color: $youtube !important; }
|
|
.si-vimeo:hover,
|
|
.si-colored.si-vimeo { background-color: $vimeo !important; }
|
|
.si-aim:hover,
|
|
.si-colored.si-aim { background-color: $aim !important; }
|
|
.si-yahoo:hover,
|
|
.si-colored.si-yahoo { background-color: $yahoo !important; }
|
|
.si-email3:hover,
|
|
.si-colored.si-email3 { background-color: $email3 !important; }
|
|
.si-macstore:hover,
|
|
.si-colored.si-macstore { background-color: $macstore !important; }
|
|
.si-myspace:hover,
|
|
.si-colored.si-myspace { background-color: $myspace !important; }
|
|
.si-podcast:hover,
|
|
.si-colored.si-podcast { background-color: $podcast !important; }
|
|
.si-cloudapp:hover,
|
|
.si-colored.si-cloudapp { background-color: $cloudapp !important; }
|
|
.si-dropbox:hover,
|
|
.si-colored.si-dropbox { background-color: $dropbox !important; }
|
|
.si-ebay:hover,
|
|
.si-colored.si-ebay { background-color: $ebay !important; }
|
|
.si-github:hover,
|
|
.si-colored.si-github { background-color: $github !important; }
|
|
.si-googleplay:hover,
|
|
.si-colored.si-googleplay { background-color: $googleplay !important; }
|
|
.si-itunes:hover,
|
|
.si-colored.si-itunes { background-color: $itunes !important; }
|
|
.si-plurk:hover,
|
|
.si-colored.si-plurk { background-color: $plurk !important; }
|
|
.si-pinboard:hover,
|
|
.si-colored.si-pinboard { background-color: $pinboard !important; }
|
|
.si-soundcloud:hover,
|
|
.si-colored.si-soundcloud { background-color: $soundcloud !important; }
|
|
.si-tumblr:hover,
|
|
.si-colored.si-tumblr { background-color: $tumblr !important; }
|
|
.si-wordpress:hover,
|
|
.si-colored.si-wordpress { background-color: $wordpress !important; }
|
|
.si-yelp:hover,
|
|
.si-colored.si-yelp { background-color: $yelp !important; }
|
|
.si-intensedebate:hover,
|
|
.si-colored.si-intensedebate { background-color: $intensedebate !important; }
|
|
.si-eventbrite:hover,
|
|
.si-colored.si-eventbrite { background-color: $eventbrite !important; }
|
|
.si-scribd:hover,
|
|
.si-colored.si-scribd { background-color: $scribd !important; }
|
|
.si-stripe:hover,
|
|
.si-colored.si-stripe { background-color: $stripe !important; }
|
|
.si-print:hover,
|
|
.si-colored.si-print { background-color: $print !important; }
|
|
.si-dwolla:hover,
|
|
.si-colored.si-dwolla { background-color: $dwolla !important; }
|
|
.si-statusnet:hover,
|
|
.si-colored.si-statusnet { background-color: $statusnet !important; }
|
|
.si-acrobat:hover,
|
|
.si-colored.si-acrobat { background-color: $acrobat !important; }
|
|
.si-drupal:hover,
|
|
.si-colored.si-drupal { background-color: $drupal !important; }
|
|
.si-buffer:hover,
|
|
.si-colored.si-buffer { background-color: $buffer !important; }
|
|
.si-pocket:hover,
|
|
.si-colored.si-pocket { background-color: $pocket !important; }
|
|
.si-bitbucket:hover,
|
|
.si-colored.si-bitbucket { background-color: $bitbucket !important; }
|
|
.si-stackoverflow:hover,
|
|
.si-colored.si-stackoverflow { background-color: $stackoverflow !important; }
|
|
.si-hackernews:hover,
|
|
.si-colored.si-hackernews { background-color: $hackernews !important; }
|
|
.si-xing:hover,
|
|
.si-colored.si-xing { background-color: $xing !important; }
|
|
.si-instagram:hover,
|
|
.si-colored.si-instagram { background-color: $instagram !important; }
|
|
.si-quora:hover,
|
|
.si-colored.si-quora { background-color: $quora !important; }
|
|
.si-openid:hover,
|
|
.si-colored.si-openid { background-color: $openid !important; }
|
|
.si-steam:hover,
|
|
.si-colored.si-steam { background-color: $steam !important; }
|
|
.si-amazon:hover,
|
|
.si-colored.si-amazon { background-color: $amazon !important; }
|
|
.si-disqus:hover,
|
|
.si-colored.si-disqus { background-color: $disqus !important; }
|
|
.si-plancast:hover,
|
|
.si-colored.si-plancast { background-color: $plancast !important; }
|
|
.si-appstore:hover,
|
|
.si-colored.si-appstore { background-color: $appstore !important; }
|
|
.si-pinterest:hover,
|
|
.si-colored.si-pinterest { background-color: $pinterest !important; }
|
|
.si-fivehundredpx:hover,
|
|
.si-colored.si-fivehundredpx { background-color: $fivehundredpx !important; }
|
|
|
|
|
|
/* Social Icons Text Color
|
|
-----------------------------------------------------------------*/
|
|
|
|
.si-text-color.si-facebook i { color: $facebook; }
|
|
.si-text-color.si-delicious i { color: $delicious; }
|
|
.si-text-color.si-paypal i { color: $paypal; }
|
|
.si-text-color.si-flattr i { color: $flattr; }
|
|
.si-text-color.si-android i { color: $android; }
|
|
.si-text-color.si-smashmag i { color: $smashmag; }
|
|
.si-text-color.si-gplus i { color: $gplus; }
|
|
.si-text-color.si-wikipedia i { color: $wikipedia; }
|
|
.si-text-color.si-stumbleupon i { color: $stumbleupon; }
|
|
.si-text-color.si-foursquare i { color: $foursquare; }
|
|
.si-text-color.si-call i { color: $call; }
|
|
.si-text-color.si-ninetyninedesigns i { color: $ninetyninedesigns; }
|
|
.si-text-color.si-forrst i { color: $forrst; }
|
|
.si-text-color.si-digg i { color: $digg; }
|
|
.si-text-color.si-spotify i { color: $spotify; }
|
|
.si-text-color.si-reddit i { color: $reddit; }
|
|
.si-text-color.si-blogger i { color: $blogger; }
|
|
.si-text-color.si-cc i { color: $cc; }
|
|
.si-text-color.si-dribbble i { color: $dribbble; }
|
|
.si-text-color.si-evernote i { color: $evernote; }
|
|
.si-text-color.si-flickr i { color: $flickr; }
|
|
.si-text-color.si-google i { color: $google; }
|
|
.si-text-color.si-instapaper i { color: $instapaper; }
|
|
.si-text-color.si-klout i { color: $klout; }
|
|
.si-text-color.si-linkedin i { color: $linkedin; }
|
|
.si-text-color.si-vk i { color: $vk; }
|
|
.si-text-color.si-rss i { color: $rss; }
|
|
.si-text-color.si-skype i { color: $skype; }
|
|
.si-text-color.si-twitter i { color: $twitter; }
|
|
.si-text-color.si-youtube i { color: $youtube; }
|
|
.si-text-color.si-vimeo i { color: $vimeo; }
|
|
.si-text-color.si-aim i { color: $aim; }
|
|
.si-text-color.si-yahoo i { color: $yahoo; }
|
|
.si-text-color.si-email3 i { color: $email3; }
|
|
.si-text-color.si-macstore i { color: $macstore; }
|
|
.si-text-color.si-myspace i { color: $myspace; }
|
|
.si-text-color.si-podcast i { color: $podcast; }
|
|
.si-text-color.si-cloudapp i { color: $cloudapp; }
|
|
.si-text-color.si-dropbox i { color: $dropbox; }
|
|
.si-text-color.si-ebay i { color: $ebay; }
|
|
.si-text-color.si-github i { color: $github; }
|
|
.si-text-color.si-googleplay i { color: $googleplay; }
|
|
.si-text-color.si-itunes i { color: $itunes; }
|
|
.si-text-color.si-plurk i { color: $plurk; }
|
|
.si-text-color.si-pinboard i { color: $pinboard; }
|
|
.si-text-color.si-soundcloud i { color: $soundcloud; }
|
|
.si-text-color.si-tumblr i { color: $tumblr; }
|
|
.si-text-color.si-wordpress i { color: $wordpress; }
|
|
.si-text-color.si-yelp i { color: $yelp; }
|
|
.si-text-color.si-intensedebate i { color: $intensedebate; }
|
|
.si-text-color.si-eventbrite i { color: $eventbrite; }
|
|
.si-text-color.si-scribd i { color: $scribd; }
|
|
.si-text-color.si-stripe i { color: $stripe; }
|
|
.si-text-color.si-print i { color: $print; }
|
|
.si-text-color.si-dwolla i { color: $dwolla; }
|
|
.si-text-color.si-statusnet i { color: $statusnet; }
|
|
.si-text-color.si-acrobat i { color: $acrobat; }
|
|
.si-text-color.si-drupal i { color: $drupal; }
|
|
.si-text-color.si-buffer i { color: $buffer; }
|
|
.si-text-color.si-pocket i { color: $pocket; }
|
|
.si-text-color.si-bitbucket i { color: $bitbucket; }
|
|
.si-text-color.si-stackoverflow i { color: $stackoverflow; }
|
|
.si-text-color.si-hackernews i { color: $hackernews; }
|
|
.si-text-color.si-xing i { color: $xing; }
|
|
.si-text-color.si-instagram i { color: $instagram; }
|
|
.si-text-color.si-quora i { color: $quora; }
|
|
.si-text-color.si-openid i { color: $openid; }
|
|
.si-text-color.si-steam i { color: $steam; }
|
|
.si-text-color.si-amazon i { color: $amazon; }
|
|
.si-text-color.si-disqus i { color: $disqus; }
|
|
.si-text-color.si-plancast i { color: $plancast; }
|
|
.si-text-color.si-appstore i { color: $appstore; }
|
|
.si-text-color.si-pinterest i { color: $pinterest; }
|
|
.si-text-color.si-fivehundredpx i { color: $fivehundredpx; }
|
|
|
|
.si-text-color:hover { color: $si_text_color; } |