.content.l-flexV--c
  input(id="switch",type="checkbox").b-switchBtn
  label(for="switch").b-switchLabel
  label(for="switch").l-mt10 click
View Compiled
body
  background-color #000
  color #fff
.content
  position fixed
  top 0
  left 0
  width 100%
  height 100%
.l-flexV--c
  display flex
  flex-flow column nowrap
  align-items center
  justify-content center
  
button,
input
  border none
  outline none
  box-shadow none
  background none
  color currentColor
  padding 0
  cursor pointer
.b-switchLabel
  position relative
  // background-color #1abc9c
  display inline-block
  width 60px
  height 25px
  // transition background-color .5s
  input
    display none
  &:before,
  &:after
    content ' '
    display block
    position absolute
  &:before
    width 100%
    height 4px
    background-color #fff
    left 0
    top 50%
    border-radius 5px
    transform translateY(-50%)
  &:after
    background-image url('http://upload-images.jianshu.io/upload_images/2005796-fcc62a13bd69f679.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240')
    background-size cover
    height 25px
    width 25px
    left 23%
    top 51%
    border-radius 25px
    transform-origin center center
    transform translate(-50%, -50%)
    background-clip border-box
    background-position 50% 50%
    border-style solid
    border-color transparent
    border-width 0 3px 0 0
    transition left .5s cubic-bezier(0.4, -0.95, 0.4, 1.8), border-width .1s linear .2s
.b-switchBtn
  display none
  &:checked~.b-switchLabel
    // background-color #ec51ae
    &:after
      left 78%
      border-width 0 0 0 3px

.l-mt10
  margin-top 10px
  
View Compiled
Rerun