Skip to content

Instantly share code, notes, and snippets.

@Oldenborg
Last active November 22, 2017 10:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Oldenborg/70b0f041e99b235d16c9cbec0815e399 to your computer and use it in GitHub Desktop.
Save Oldenborg/70b0f041e99b235d16c9cbec0815e399 to your computer and use it in GitHub Desktop.
sass / css component to make a simple diode
$block: diode
$diameter: 0.5rem
+component
width: $diameter
height: $diameter
background: $idle
display: inline-block
border: 2px solid white
margin-right: $margin_xs
+circle()
+if(idle)
background: $idle
+if(danger)
background: $danger
+if(success)
background: $success
+if(warning)
background: $warning
+if(info)
background: $info
+if(flash)
+vendor('animation', 'diode-flash-danger .8s infinite')
@-webkit-keyframes diode-flash-danger
0%, 50%
background: $idle
51%, 100%
background: $danger
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment