Source

/aya.waifu.ist/public/stylesheets/components/hamburger.sass

Modified ago

%hamburger-transition
    transition: all .4s ease

.hamburger
    margin-bottom: 6px
    margin-top: 6px
    position: relative
    transform: rotate(0deg)

    &, &:before, &:after
        background-color: $white
        border-radius: 5px
        display: inline-block
        height: 5px
        width: 50px

    &:before, &:after
        @extend %hamburger-transition
        content: ''
        left: 0
        position: absolute
        right: initial
        transform-origin: center

    &:before
        top: -10px

    &:after
        bottom: -10px

.hamburger_hidden
    pointer-events: none
    visibility: hidden
.hamburger_close
    transform: rotate(360deg)

.hamburger_open, .hamburger_close
    @extend %hamburger-transition


.hamburger_open
    transform: rotate(180deg)

    &:before, &:after
        width: 25px

    &:before
        transform: rotate(-45deg) translate(5px, 32px)

    &:after
        transform: rotate(45deg) translate(5px, -32px)