Contents

.label-switch
  ///////////////////////////////////////////////////////////////////////////////////
  $base-accent-color: #477DCA !default
  $base-background-color: white !default
  //////////////////////////////////////////////////////////////////////////////////
  $switch-width: 52px
  $switch-padding: 2px
  $switch-height: 32px
  $switch-radius: $switch-height
  $knob-size: $switch-height - $switch-padding * 2
  $knob-radius: $switch-height - $switch-padding * 2
  $knob-width: $knob-size
  $switch-background: $base-background-color
  $switch-border-background: darken($base-background-color, 9%)
  $switch-shadow: 0 2px 5px transparentize(black, 0.6)
  border-radius: $switch-radius
  cursor: pointer
  display: inline-block
  height: $switch-height
  position: relative
  width: $switch-width
  input[type="checkbox"]
    display: none
    + .checkbox
      +transition(all 0.3s ease)
      background: $switch-border-background
      border-radius: $switch-radius
      border: none
      cursor: pointer
      height: $switch-height
      margin: 0
      padding: 0
      position: relative
      width: $switch-width
      z-index: 0
      &:before
        +position(absolute, 2px 0 0 2px)
        +transform(scale(1))
        +transition(all 0.3s ease)
        background: $switch-background
        border-radius: $switch-radius
        content: ""
        height: $knob-radius
        width: $switch-width - $switch-padding * 2
        z-index: 1
      &:after
        +position(absolute, 2px 0 0 2px)
        +transition(all 0.3s ease)
        +size($knob-size)
        background: $switch-background
        border-radius: $knob-radius
        box-shadow: $switch-shadow
        content: ""
        z-index: 2
    &:checked
      + .checkbox
        background: $base-accent-color
        &:before
          +transform(scale(0))
        &:after
          left: $switch-width - $knob-width - $switch-padding

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
breezeblocks-0.0.2	source/stylesheets/breezeblocks/_switch.sass
breezeblocks-0.0.1	source/stylesheets/breezeblocks/_switch.sass