index.styl

@import 'nib'

input.uiswitch:focus
  outline none

.toggle input[type="checkbox"]
  position absolute
  margin-left -61px

.toggle label
  padding-left 61px
  height 36px
  line-height 36px
  vertical-align middle

/* CSS UI Switch from: https://github.com/fnky/css3-uiswitch */

.uiswitch
  box-sizing border-box
  appearance none
  height 31px
  width 51px
  position relative
  border-radius 16px
  cursor pointer
  outline 0
  z-index 0
  margin 0
  padding 0
  border none
  background-color #e5e5e5
  transition-duration 400ms
  transition-timing-function ease-in-out

  &::before
    box-sizing border-box
    height 27px
    width 47px
    content ''
    position absolute
    left 2px
    top 2px
    background-color white
    border-radius 16px
    z-index 1
    transition-duration 300ms
    transform scale(1)
    background-color white


  &::after
    box-sizing border-box
    height 27px
    width 27px
    content ' '
    position absolute
    border-radius 27px
    background white
    z-index 2
    top 2px
    left 2px
    box-shadow 0px 0px 1px 0px rgba(#000, 0.25), 0px 4px 11px 0px rgba(#000, 0.08), -1px 3px 3px 0px rgba(#000, 0.14)
    transition transform 300ms, width 280ms
    transform translate3d(0, 0, 0)
    transition-timing-function cubic-bezier(0.42, 0.8, 0.58, 1.2)
  &:checked
    background-color #4cd964
    background-image linear-gradient(bottom, #4cd964, #4dd865)

  &:checked::after
    transform translate3d(16px, 0, 0)
    right 18px
    left inherit

  &:active::after
    width 35px

  &:checked::before, &:active::before
    transform: scale(0)
  &:disabled
    opacity 0.5
    cursor default
    transition none

    &:active::before,
    &:active::after,
    &:checked:active::before,
    &:checked::before
      width 27px
      transition none
    &:active::before
      height 27px
      width 41px
      transform translate3d(6px, 0, 0)
    &:checked:active::before
      height 27px
      width 27px
      transform scale(0)

  .uiswitch::after
    background: white;
  .uiswitch:checked
    background-color #4cd964
    background-image linear-gradient(-180deg,#4cd964 0%, #4dd865 100%)