//************************************** // Animations
@mixin transition
-webkit-transition: 1.0s -moz-transition: 1.0s -o-transition: 1.0s transition: 1.0s
// check out github.com/at-import/animation-studio // for more mixins
@mixin alerted()
&:before content: '' position: absolute top: 6px right: 6px height: 8px width: 8px +border-radius(10px) background-color: gold &:after content: '' position: absolute top: 0 right: 0 height: 20px width: 20px +border-radius(20px) background-color: transparent border: solid gold border-width: 2px // animates +box-sizing(border-box) +animation($name: alertMe)
@keyframes alertMe
// -vendor prefixes omitted for brevity, but should be used in production from border-width: 3px border-color: gold to border-width: 0 border-color: rgba(gold, .1)