datat.fi/_sass/basically-basic/_navicons.scss

/* ==========================================================================
   Navicons
   ========================================================================== */

.navicon-button {
  display: inline-block;
  position: relative;
  padding: 1.8125rem 1rem;
  background-color: $navicon-nav-bg-close;
  transition: $navicon-duration/2;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  @include breakpoint($medium) {
    margin-right: 2rem;
  }

  @include breakpoint($large) {
    margin-right: 5vw;
  }

  &.open {
    background-color: $navicon-nav-bg-open;
  }

  .navicon:before, .navicon:after {
    transition: $navicon-duration/2;
  }

  &:hover {
    transition: $navicon-duration;

    .navicon:before, .navicon:after {
      transition: $navicon-duration/2;
    }

    .navicon:before { top: (2.5 * $navicon-height); }
    .navicon:after { top: (-2.5 * $navicon-height); }
  }
}

.navicon {
  position: relative;
  width: $navicon-width;
  height: $navicon-height;
  background: $navicon-content-bg;
  transition: $navicon-duration;
  border-radius: $navicon-width;

  &:before, &:after {
    display: block;
    content: "";
    height: $navicon-height;
    width: $navicon-width;
    background: $navicon-content-bg;
    position: absolute;
    z-index: -1;
    transition: $navicon-duration $navicon-duration/2;
    border-radius: $navicon-width;
  }

  &:before { top: (2 * $navicon-height); }
  &:after { top: (-2 * $navicon-height); }
}

.open:not(.steps) .navicon:before,
.open:not(.steps) .navicon:after {
  top: 0 !important;
}

.open .navicon:before,
.open .navicon:after {
  transition: $navicon-duration;
}

/* Minus */
.open {
  -ms-transform: scale($navicon-toggled-size);
      transform: scale($navicon-toggled-size);
}

/* Arrows */
.open.larr .navicon,
.open.rarr .navicon,
.open.uarr .navicon {

  &:before, &:after {
    width: (0.6 * $navicon-width);
  }

  &:before {
    -ms-transform: rotate(35deg);
        transform: rotate(35deg);
    -ms-transform-origin: left top;
        transform-origin: left top;
  }

  &:after {
    -ms-transform: rotate(-35deg);
        transform: rotate(-35deg);
    -ms-transform-origin: left bottom;
        transform-origin: left bottom;
  }
}
.open.uarr {
  -ms-transform: scale($navicon-toggled-size) rotate(90deg);
      transform: scale($navicon-toggled-size) rotate(90deg);
}

/* Arrows */
.open.rarr .navicon {

  &:before {
    transform: translate3d(1em, 0, 0) rotate(-35deg);
    -ms-transform-origin: right top;
        transform-origin: right top;
  }

  &:after {
    transform: translate3d(1em, 0, 0) rotate(35deg);
    -ms-transform-origin: right bottom;
        transform-origin: right bottom;
  }
}

/* × and + */
.open.plus,
.open.x {
  .navicon {
    background: transparent;

    &:before {
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
    }

    &:after {
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
    }
  }
}

.open.plus {
  -ms-transform: scale($navicon-toggled-size) rotate(45deg);
      transform: scale($navicon-toggled-size) rotate(45deg);
}