Created
August 22, 2013 12:34
-
-
Save benjamincharity/6306593 to your computer and use it in GitHub Desktop.
A slick CSS3 toggle to replace a checkbox.
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>Demo</title> | |
| <link rel="stylesheet" href="css/screen.css"> | |
| </head> | |
| <body> | |
| <div class="demo"> | |
| <div class="toggle"> | |
| <span class="toggle__handle"></span> | |
| </div> | |
| </div> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| $(document).ready(function() { | |
| $('.toggle').on('click', function() { | |
| $(this).toggleClass( 'is_off' ) | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| @import "compass"; | |
| @import "reset"; | |
| /////////////////////////////// | |
| // | |
| // Setup | |
| // | |
| /////////////////////////////// | |
| $green : #90C396; | |
| $red : #D28282; | |
| $gray : #979797; | |
| $white : #F0F0F0; | |
| $bg-gray : #D8D8D8; | |
| @mixin customTransition($property: all, $timing: 300ms) { | |
| -webkit-transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985); | |
| -moz-transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985); | |
| -ms-transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985); | |
| -o-transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985); | |
| transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985); | |
| } | |
| html { | |
| background-color: #ccc; | |
| } | |
| .demo { | |
| background-color: $bg-gray; | |
| border: 1px solid darken($bg-gray, 10%); | |
| height: 200px; | |
| margin: 20% auto; | |
| width: 400px; | |
| } | |
| /////////////////////////////// | |
| // | |
| // Toggle | |
| // | |
| /////////////////////////////// | |
| %toggle-pseudo { | |
| background-color: $green; | |
| content: ""; | |
| display: block; | |
| height: 23px; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 6px; | |
| @include customTransition(); | |
| @include transform-origin(center, center); | |
| } | |
| .toggle { | |
| border: 1px solid $gray; | |
| border-radius: 40px; | |
| cursor: pointer; | |
| height: 40px; | |
| margin: 20% auto; | |
| position: relative; | |
| width: 86px; | |
| &.is_off { | |
| .toggle__handle { | |
| left: 2.9em; | |
| @include rotate(94deg); | |
| &::before { | |
| background-color: $red; | |
| height: 23px; | |
| // this is margin-top in this rotation | |
| margin-left: -3px; | |
| // this is margin-right in this rotation | |
| margin-top: -12px; | |
| //opacity: 0.7; | |
| } | |
| &::after { | |
| background-color: $red; | |
| // this is margin-top in this rotation | |
| margin-left: -3px; | |
| // this is margin-right in this rotation | |
| margin-top: -12px; | |
| //opacity: 0.7; | |
| } | |
| } | |
| } | |
| } | |
| .toggle__handle { | |
| background-color: $white; | |
| border: 1px solid $gray; | |
| border-radius: 100%; | |
| display: block; | |
| position: absolute; | |
| left: 1px; | |
| top: 1px; | |
| height: 36px; | |
| @include customTransition(); | |
| width: 36px; | |
| &::before { | |
| @extend %toggle-pseudo; | |
| @include transform(rotate(-50deg)); | |
| height: 12px; | |
| margin-left: -10.3px; | |
| margin-top: -2px; | |
| } | |
| &::after { | |
| @extend %toggle-pseudo; | |
| @include transform(rotate(40deg)); | |
| margin-left: 0; | |
| margin-top: -10px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment