Skip to content

Instantly share code, notes, and snippets.

@jhonnymoreira
Created March 4, 2016 23:05
Show Gist options
  • Save jhonnymoreira/75cd7f5c968897a19ad7 to your computer and use it in GitHub Desktop.
Save jhonnymoreira/75cd7f5c968897a19ad7 to your computer and use it in GitHub Desktop.
@mixin heart($size: 10px,
$color: red,
$animation: true,
$animation-duration: 0.5s) {
& {
position: relative;
display: inline-block;
width: $size;
height: $size;
background-color: $color;
@if $animation {
animation: pulse $animation-duration infinite alternate ease-in;
}
}
&:before,
&:after {
content: '';
position: absolute;
width: $size;
height: $size;
background-color: $color;
border-radius: 50%;
}
&:before {
top: 0;
left: 50%;
}
&:after {
top: 50%;
left: 0;
}
@keyframes pulse {
from {
transform: rotate(-135deg) scale(1);
}
to {
transform: rotate(-135deg) scale(1.2);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment