Skip to content

Instantly share code, notes, and snippets.

@SimplGy SimplGy/rockerButton.sass
Last active Dec 17, 2015

Embed
What would you like to do?
SASS styles for an image free rocker switch button for yes/no or similar 2 option choices. It's tricky in part because it's the `.active` state that has little styling, but the inactive state has transforms and other wonkiness. Output looks like this: http://i.imgur.com/twwQM3e.png
// Result: http://i.imgur.com/twwQM3e.png
@import '../bower_components/bourbon/app/assets/stylesheets/_bourbon.scss'
$colorBackbground: whitesmoke
$colorForeground: #333
$colorGood: springgreen
$radiusSmall: 4px
$spaceTiny: 3px
$spaceLil: 10px
.btn-rocker2
background: $colorBackground - 40
padding: 1px
border-radius: $radiusSmall
.btn
color: transparentize($colorForeground, .3)
box-shadow: none
border: none
border-top: 1px solid white
padding: $spaceTiny $spaceLil
.btn.active
color: $colorForeground
margin: 0
z-index: 3
// Left Side
.btn:first-child
border-right: none
@include linear-gradient( -50deg, $colorBackground - 10, $colorBackground )
@include transform-origin(right center)
@include transform-style(preserve-3d)
@include transform( perspective(300px) rotateY(30deg) scaleX(.97) )
box-shadow: inset 1px 0 0 0 white, -1px 0 0 0 $colorBackground - 30, -4px 0 0 -1px $colorBackground - 20, 0 1px 0 0 $colorBackground - 40, 0 -1px 0 0 $colorBackground - 20
padding-left: $spaceLil + $spaceTiny
.btn.active:first-child
background-image: none
background: $colorBackground
@include transform(none)
border-left: 1px solid white
box-shadow: none
box-shadow: inset -5px 0 1px 8px $colorBackground, inset 5px 0 1px $colorGood
// Right Side
.btn:last-child
border-left: none
@include linear-gradient( 50deg, $colorBackground - 10, $colorBackground )
@include transform-origin(left center)
@include transform-style(preserve-3d)
@include transform( perspective(300px) rotateY(-30deg) scaleX(.97) )
box-shadow: inset -1px 0 0 0 white, 1px 0 0 0 $colorBackground - 30, 4px 0 0 -1px $colorBackground - 20, 0 1px 0 0 $colorBackground - 40, 0 -1px 0 0 $colorBackground - 20
padding-right: $spaceLil + $spaceTiny
.btn.active:last-child
background-image: none
background: $colorBackground
@include transform(none)
border-right: 1px solid white
box-shadow: none
box-shadow: inset 5px 0 1px 8px $colorBackground, inset -5px 0 1px $colorGood
.btn:last-child:hover
border-left: none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.