toggle-btn

style.styl

.toggle-btn
  $time = .2s
  $sz_item = 4px
  $ofs = 10px
  $gut_ver = 4px

  // $sz_hor = 26px
  $sz_hor = 50px
  $sz_ver = $sz_item * 3 + 2 * $ofs + 2 * $gut_ver
  $color = #f00

  width $sz_hor
  height $sz_ver
  position relative

  cursor pointer

  text-hide()

  &:before
  &:after
    content ''
    width $sz_hor
    height $sz_item
    background $color
    position absolute
    left 0
    margin-left 0
    transition margin $time linear

  &:before
    top $gut_ver

  &:after
    // top ($sz_hor - 4 - 2)
    top ($sz_ver - $sz_item - $gut_ver)

  span
    display block
    position static
    width $sz_hor
    height $sz_item
    background $color
    margin-top ($gut_ver + $ofs + $sz_item)
    margin-left 0
    transition margin $time linear

    &:before
    &:after
      content ''
      width $sz_hor
      height $sz_item
      background $color
      position absolute
      transform rotate(0)
      transition transform $time
      left 0
      top 50%
      margin-top (- $sz_item / 2)
      opacity 0


  &.open
    &:before
    &:after
      background-color transparent
      transition all $time

    &:before
      margin-left $ofs

    &:after
      margin-left (3 * $ofs)


    span
      background-color transparent
      margin-left (2 * $ofs)

      &:before
        opacity 1
        transform rotate(45deg)

      &:after
        opacity 1
        transform rotate(-45deg)