Skip to content

Instantly share code, notes, and snippets.

@peiche
Created June 16, 2014 15:35
Show Gist options
  • Save peiche/14845040e95571ffb108 to your computer and use it in GitHub Desktop.
Save peiche/14845040e95571ffb108 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
$facebook-color: #3b5998;
$twitter-color: #00acee;
$google-plus-color: #dd4b39;
@mixin box-shadow($val) {
-webkit-box-shadow: $val;
-moz-box-shadow: $val;
-o-box-shadow: $val;
box-shadow: $val;
}
.postprofile {
@each $social-network, $color in (facebook, $facebook-color), (twitter, $twitter-color), (google-plus, $google-plus-color) {
.#{$social-network} {
@include box-shadow(inset 0 0 0 20px $color);
&:hover {
color: $color;
@include box-shadow(inset 0 0 0 2px $color);
}
}
}
}
.postprofile .facebook {
-webkit-box-shadow: inset 0 0 0 20px #3b5998;
-moz-box-shadow: inset 0 0 0 20px #3b5998;
-o-box-shadow: inset 0 0 0 20px #3b5998;
box-shadow: inset 0 0 0 20px #3b5998;
}
.postprofile .facebook:hover {
color: #3b5998;
-webkit-box-shadow: inset 0 0 0 2px #3b5998;
-moz-box-shadow: inset 0 0 0 2px #3b5998;
-o-box-shadow: inset 0 0 0 2px #3b5998;
box-shadow: inset 0 0 0 2px #3b5998;
}
.postprofile .twitter {
-webkit-box-shadow: inset 0 0 0 20px #00acee;
-moz-box-shadow: inset 0 0 0 20px #00acee;
-o-box-shadow: inset 0 0 0 20px #00acee;
box-shadow: inset 0 0 0 20px #00acee;
}
.postprofile .twitter:hover {
color: #00acee;
-webkit-box-shadow: inset 0 0 0 2px #00acee;
-moz-box-shadow: inset 0 0 0 2px #00acee;
-o-box-shadow: inset 0 0 0 2px #00acee;
box-shadow: inset 0 0 0 2px #00acee;
}
.postprofile .google-plus {
-webkit-box-shadow: inset 0 0 0 20px #dd4b39;
-moz-box-shadow: inset 0 0 0 20px #dd4b39;
-o-box-shadow: inset 0 0 0 20px #dd4b39;
box-shadow: inset 0 0 0 20px #dd4b39;
}
.postprofile .google-plus:hover {
color: #dd4b39;
-webkit-box-shadow: inset 0 0 0 2px #dd4b39;
-moz-box-shadow: inset 0 0 0 2px #dd4b39;
-o-box-shadow: inset 0 0 0 2px #dd4b39;
box-shadow: inset 0 0 0 2px #dd4b39;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment