Sandwich

Sandwich

.sandwich
	.sandwich__line.sandwich__line--top
	.sandwich__line.sandwich__line--middle
	.sandwich__line.sandwich__line--bottom
	
.sandwich {
  cursor: pointer;
  display: none;
  height: 20px;
  position: relative;
  width: 32px;
  @media screen and (max-width: $tablet-wide) { display: block; }
  &--active {
    .sandwich__line {
      &--top {
        top: 10px;
        transform: rotate(45deg);
      }
      &--middle { opacity: 0; }
      &--bottom {
        top: 10px;
        transform: rotate(-45deg);
      }
    }
  }
  &__line {
    background-color: $white;
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    transition: all linear .4s;
    width: 100%;
    &--top { top: 0; }
    &--middle { top: 9px; }
    &--bottom { top: 18px; }
  }
}

var sandwich = function () {
        $(document).on('click', '.sandwich', function () {
            $(this).toggleClass('sandwich--active');

        });
    };

.sandwich
cursor pointer
display none
height 20px
position relative
width 32px
@media screen and (max-width 600px)
display flex
order 1
&--active
.sandwich__line
&--top
top 10px
transform rotate(45deg)
&--middle
opacity 0
&--bottom
top 10px
transform rotate(-45deg)
&__line
background-color #179cde
display block
height 3px
left 0
position absolute
transition all linear .4s
width 100%
&--top
top 0
&--middle
top 9px
&--bottom
top 18px