%button.triggr
- (1..3).each do |i|
%span.icon-bar*,*:before,*:after
@include box-sizing(border-box)
*:focus
outline: 0 none
.triggr
position: fixed
top: 25px
left: 25px
display: inline-block
height: 45px
margin: 5px 15px
padding: 10px
border: 1px solid #ddd
background-color: transparent
.icon-bar
position: relative
display: block
width: 35px
height: 5px
margin-top: 4px
margin-bottom: 4px
&:first-child,
&:last-child
margin: 0
.icon-bar:before
@include transition(all .5s ease)
content: " "
display: block
width: 100%
height: 100%
background-color: #000
.triggr.active .icon-bar
position: absolute
top: 45%
&:before
@include transition(all .5s ease)
.triggr .icon-bar:nth-of-type(1):before
@include transform(rotate(-180deg))
.triggr.active .icon-bar:nth-of-type(1):before
@include transform(rotate(48deg))
.triggr .icon-bar:nth-of-type(2):before
@include transition(opacity 1s ease)
margin: 0
opacity: 1
.triggr.active .icon-bar:nth-of-type(2):before
opacity: 0
.triggr .icon-bar:nth-of-type(3):before
@include transform(rotate(180deg))
.triggr.active .icon-bar:nth-of-type(3):before
@include transform(rotate(-48deg))