Skip to content

Instantly share code, notes, and snippets.

@procload
Created November 14, 2014 19:39
Show Gist options
  • Select an option

  • Save procload/c156bbaefc060f026736 to your computer and use it in GitHub Desktop.

Select an option

Save procload/c156bbaefc060f026736 to your computer and use it in GitHub Desktop.
//
//
// Large sharing module for Food52
//
//
.content-sharing {
margin-bottom: 32px;
@extend %group;
// Elements
///////////////////////////////////////////////////////////////////////////////
&__btn {
margin-bottom: 8px;
border-radius: 15px;
line-height: 32px;
padding: 0 15px;
font-size: 15px;
span {
display: none;
@include respond-to(480px) { display: inline; }
@include respond-to(740px) { display: none; }
@include respond-to(860px, true) { display: inline; }
}
@include respond-to(370px) { margin-bottom: 0; }
i {
position: relative;
top: 2px;
margin-right: 4px;
} //i
+ a {
@include respond-to(370px) { margin-left: 16px; }
@include respond-to(620px) { margin-left: 0; }
@include respond-to(730px) { margin-left: 16px; }
} //a
} //content-sharing__btn
// Modifiers
///////////////////////////////////////////////////////////////////////////////
&--facebook {
background-color: lighten($color-facebook,15%);
&:hover { background-color: $color-facebook; }
} //facebook
&--twitter {
background-color: lighten($color-twitter,15%);
float: right;
@include respond-to(480px) { float: none; }
@include respond-to(740px) { float: right; }
@include respond-to(860px) { float: none; }
&:hover { background-color: $color-twitter; }
} //twitter
} //label
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment