Skip to content

Instantly share code, notes, and snippets.

@javaswinger
Forked from anonymous/iOS 7 Toggle.markdown
Created June 1, 2015 19:19
Show Gist options
  • Save javaswinger/70563c61332b76033e88 to your computer and use it in GitHub Desktop.
Save javaswinger/70563c61332b76033e88 to your computer and use it in GitHub Desktop.
<hr>
<input type="checkbox" checked>
<hr>
<input type="checkbox">
<hr>
<input type="checkbox" checked>
<hr>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "compass/css3";
html {
padding: 100px;
text-align: center;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin: 8px;
}
$white: #fff;
$green: #53d76a;
$grey: #d3d3d3;
input[type="checkbox"] {
appearance: none;
background-color: darken($white, 2%);
border: 1px solid $grey;
border-radius: 26px;
box-shadow: inset 0 0 0 1px $grey;
cursor: pointer;
height: 28px;
position: relative;
transition: border .25s .15s,
box-shadow .25s .3s,
padding .25s;
width: 44px;
vertical-align: top;
&:after {
background-color: $white;
border: 1px solid $grey;
border-radius: 24px;
box-shadow: inset 0 -3px 3px hsla(0,0%,0%,.025),
0 1px 4px hsla(0,0%,0%,.15),
0 4px 4px hsla(0,0%,0%,.1);
content: '';
display: block;
height: 24px;
left: 0;
position: absolute;
right: 16px;
top: 0;
transition: border .25s .15s,
left .25s .1s,
right .15s .175s;
}
&:checked {
border-color: $green;
box-shadow: inset 0 0 0 13px $green;
padding-left: 18px;
transition: border .25s,
box-shadow .25s,
padding .25s .15s;
&:after {
border-color: $green;
left: 16px;
right: 0;
transition: border .25s,
left .15s .25s,
right .25s .175s;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment