Created
October 26, 2012 05:18
-
-
Save freshyill/3956975 to your computer and use it in GitHub Desktop.
A CodePen by Chris Coleman. iOS Style toggle mixin - There's a lot of these things out there and I don't like any of them. I see so many people trying to prove how they can do this with just one element or something like that. Well that's just great. You'
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="css/toggle.css" | |
| </head> | |
| <body style="padding: 50px;"> | |
| <h1>iOS-style toggle mixin</h1> | |
| <p></p> | |
| <p> This uses the default values | |
| <label for="default"> | |
| <input type="checkbox" id="default" checked /> | |
| <span class="switch" /> | |
| </label> | |
| </p> | |
| <p> This one is given custom sizes and text. | |
| <label for="blerg"> | |
| <input type="checkbox" id="blerg" checked /> | |
| <span class="switch" /> | |
| </label> | |
| </p> | |
| </body> | |
| </html> |
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
| @import "compass"; | |
| @mixin toggle ($control-width: 52, $switch-width: 20, $text-active: 'On', $text-inactive: 'Off') { | |
| @include box-shadow(0 2px 2px rgba(0,0,0,.1) inset, 0 0 1px rgba(0,0,0,.1) inset, 0 #{ $switch-width / 2 }px 0 rgba(0,0,0,.05) inset); | |
| box-sizing: border-box; | |
| font-size: #{$switch-width /2}px; | |
| font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | |
| height: #{$switch-width + 2}px; | |
| width: #{$control-width}px; | |
| display: inline-block; | |
| position: relative; | |
| overflow: hidden; | |
| background: transparent; | |
| border: 1px solid #ccc; | |
| border-radius: #{$switch-width / 2}px; | |
| margin: 0 1em; | |
| input { | |
| height: #{$switch-width}px; | |
| width: #{$control-width}px; | |
| display: block; | |
| margin: 0; | |
| padding: 0; | |
| position: absolute; | |
| z-index: 1; | |
| opacity: 0; | |
| &:checked~.switch {left: #{$control-width - $switch-width - 2 }px;} | |
| } | |
| .switch { | |
| @include transition(.3s all ease); | |
| @include box-shadow(0 0 2px rgba(0,0,0,.1), 0 0 1px 1px rgba(255,255,255,.7) inset, 0 0 1px 0 rgba(0,0,0,.5)); | |
| background: #e7e7e7; | |
| text-transform: uppercase; | |
| display: block; | |
| height: #{$switch-width}px; | |
| width: #{$switch-width}px; | |
| left: -1px; | |
| position: absolute; | |
| pointer-events: none; | |
| border-radius: 50%; | |
| &:before, | |
| &:after { | |
| width: #{$control-width - $switch-width}px; | |
| height: #{$switch-width}px; | |
| position: absolute; | |
| z-index: -1; | |
| text-shadow: 0 -1px 0 rgba(0,0,0,.3); | |
| white-space: nowrap; | |
| line-height: 2; | |
| } | |
| &:before { | |
| color: #fff; | |
| background: #5297ff; | |
| text-align: right; | |
| padding-right: #{$switch-width * .75}px; | |
| content: "#{$text-active}"; | |
| right: #{$switch-width / 2}px; | |
| } | |
| &:after { | |
| color: #666; | |
| background: #f5f2f2; | |
| content: "#{$text-inactive}"; | |
| padding-left: #{$switch-width * .75}px; | |
| left: #{$switch-width / 2 }px; | |
| } | |
| } | |
| } | |
| [for=default] { @include toggle; } | |
| [for=blerg] { @include toggle(244, 52, "Switch On", "Switch Off"); } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment