Created
March 1, 2015 06:03
-
-
Save Calvein/e85130125c4eeb8c70ba to your computer and use it in GitHub Desktop.
Basic css switches (I just needed a checkbox, you might too).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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