Skip to content

Instantly share code, notes, and snippets.

@Calvein
Created March 1, 2015 06:03
Show Gist options
  • Save Calvein/e85130125c4eeb8c70ba to your computer and use it in GitHub Desktop.
Save Calvein/e85130125c4eeb8c70ba to your computer and use it in GitHub Desktop.
Basic css switches (I just needed a checkbox, you might too).
switchHeight = 15px
switchPadding = 2px
switchWidth = 25px
.switch
position absolute
height switchHeight
width switchWidth
top 4px
right 5px
border-top-left-radius 25% 50%
border-top-right-radius 25% 50%
border-bottom-right-radius 25% 50%
border-bottom-left-radius 25% 50%
background red
&:before
content ''
position absolute
height switchHeight - switchPadding * 2
width @height
top switchPadding
left switchPadding
border-radius 50%
background yellow
transition .2s
&.off
&:before
left switchWidth - switchHeight + switchPadding
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment