transburger-icon.scss

// ---------------------------------
// vars
// ---------------------------------
$em-base: 14;

// ---------------------------------
// mixins
// ---------------------------------
@mixin elem($block, $elem) {
  #{$block}__#{$elem} {
    @content;
  }
}

@mixin mod($block, $modifier) {
  #{$block}--#{$modifier} {
    @content;
  }
}

@function em($pxval, $base: $em-base) {
  @if not unitless($pxval) {
    $pxval: strip-units($pxval);
  }
  @if not unitless($base) {
    $base: strip-units($base);
  }
  @return ($pxval / $base) * 1em;
}

@mixin makeCSSVars($map, $cssVarName) {
  @each $prop, $value in $map {
    #{$prop}: var(#{$cssVarName}-#{$prop}, #{$value});
  }
}

:host { display: inline-block; }
:host([hidden]) { display: none; }

// ---------------------------------
// <button> tag style normalization
// ---------------------------------
$buttonProperties: (
  border: 0,
  margin: 0,
  padding: 0,
  overflow: visible,
  vertical-align: middle,
  font-family: inherit,
  font-size: var(--transburger-icon-height, 14px),
  color: inherit,
  cursor: initial,
  outline: initial,
  border-radius: initial,
  box-shadow: none,
  background: #ccc
);

button {
  @include makeCSSVars($buttonProperties, '--transburger-icon-button');

  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
}

// ---------------------------------
// icon and text positioning
// ---------------------------------
.t-icon-wrapper {
  display: flex;
  align-items: center;
}

:host([icon-position="right"]) button {
  .t-icon-content { order: -1; }
}

// ---------------------------------
// hamburger icon
// ---------------------------------
.t-icon {
  $block: &;
  font-size: var(--transburger-icon-height, inherit);
  width:  var(--transburger-icon-width, em(20));
  height: 1em;
  margin: var(--transburger-icon-margin, em(12));
  color: currentColor;
  position: relative;

  &__middle,
  &::after,
  &::before {
    width: 100%;
    height: var(--transburger-icon-lines-height, 2px);
    background: currentColor;
    border-radius: var(--transburger-icon-line-radius, 2px);
    position: absolute;
    margin: auto;
  }

  &::after,
  &::before {
    content: "";
    display: block;
    @apply  --transburger-icon-top-bottom-lines;
  }

  &::before { top: 0; }
  &::after { bottom: 0; }

  &__middle {
    top: 0;
    bottom: 0;
  }

  // ---------------------------------
  // menu to arrow-<left|right>
  // ---------------------------------
  &--arrow-left,
  &--arrow-right {
    &::before,
    &::after {
      transition: transform .2s cubic-bezier(.51, .2, .31, .85);
    }
  }

  // ---------------------------------
  // menu to arrow-left
  // ---------------------------------
  &--arrow-left {
    &.is-active {
      &::before {
        transform: translate3d(em(-5), calc(1em / 7), 0) rotate(-40deg) scaleX(.7);
      }

      &::after {
        transform: translate3d(em(-5), calc(-1em / 7), 0) rotate(40deg) scaleX(.7);
      }
    }
  }

  // ---------------------------------
  // menu to arrow-right
  // ---------------------------------
  &--arrow-right {
    &.is-active {
      &::before {
        transform: translate3d(em(5), calc(1em / 7), 0) rotate(40deg) scaleX(.7);
      }

      &::after {
        transform: translate3d(em(5), calc(-1em / 7), 0) rotate(-40deg) scaleX(.7);
      }
    }
  }

  // ---------------------------------
  // menu to close
  // ---------------------------------
  &--close {
    &::before,
    &::after {
      transform: rotate(0);
    }

    &::before {
      bottom: calc(100% - .14286em);
      transition: transform .2s ease, bottom .2s .24s ease;
    }

    &::after {
      top: calc(100% - .14286em);
      transition: transform .2s ease, top .2s .24s ease;
    }

    @include elem($block, 'middle') {
      transition: opacity .2s;
    }

    &.is-active {
      @include elem($block, 'middle') {
        opacity: 0;
      }

      &::before {
        bottom: 0;
        transform: rotate(45deg);
        transition: bottom .2s ease, transform .2s .24s ease;
        @apply --transburger-icon-close-top-bottom-lines-active;
      }

      &::after {
        top: 0;
        transform: rotate(-45deg);
        transition: top .2s ease, transform .2s .24s ease;
        @apply --transburger-icon-close-top-bottom-lines-active;
      }
    }
  }
}