icon.scss

// @desc - キャレット（<）を生成します。
// @prop - `$size`は長さ、`$weight`は太さを定義します。
@mixin caret($color: #333, $width: 14px, $weight: 2px, $deg: 35deg) {
  display: inline-block;
  position: relative;
  width: $width;
  height: 1em;
  margin-left: 1em;
  border: none;
  vertical-align: middle;
  background-color: transparent;
  outline: none;
  transition: all, ease-in, 0.3s;
  &[class*="is-"] {
    transform: rotate(90deg);
  }
  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 0;
    right: $weight;
    bottom: 0;
    width: ($width + $weight);
    height: $weight;
    margin: auto 0;
    transform-origin: right;
    box-shadow: inset 0 0 0 $weight $color;
  }
  &:before {
    transform: rotate($deg);
    @if $weight > 2px {
      top: (($weight / 3) * 2);
    }
  }
  &:after {
    transform: rotate(-$deg);
    @if $weight > 2px {
      bottom: (($weight / 3) * 2);
    }
  }
}

// @desc - アニメーションするハンバーガーボタンを生成します。
// @prop - `$width`は横幅、`$height`は高さ、`$weight`は太さを定義します。バランスが崩れた場合は`$bottom`で微調整してください。
// @example html - Usage
// <button class="burger">
//   <span class="sr-only">ナビゲーションを表示する</span>
// </button>
//
// @example scss - Usage
// .burger {
//   @include burger;
// }
// .sr-only {
//   @include sr-only;
// }
@mixin burger($color: #333, $width: 30px, $height: 22px, $weight: 3px, $bottom: ($height / 3)) {
  position: relative;
  width: $width;
  height: $height;
  border: 0;
  border-top: $weight solid $color;
  border-bottom: $weight solid $color;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  transition: all, ease-out, 0.3s;
  &:before,
  &:after {
    content: "";
    position: absolute;
    top: ($height / 2);
    right: 0;
    bottom: $bottom;
    left: 0;
    border-bottom: $weight solid $color;
  }
  &[class*="is-"] {
    border-color: transparent;
    transform: rotate(90deg);
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
}

// @desc - クローズボタン（x）を生成します。
// @prop - `$weight`は太さを定義します。
// @example html - Usage
// <button class="close">
//   <span class="sr-only">画面を閉じる</span>
// </button>
//
// @example scss - Usage
// .close {
//   @include close;
// }
// .sr-only {
//   @include sr-only;
// }
@mixin close($color: #333, $width: 30px, $height: 22px, $weight: 3px) {
  position: relative;
  display: block;
  width: $width;
  height: $height;
  border: 0;
  vertical-align: middle;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-bottom: $weight solid $color;
  }
  
  &:before {
    transform: rotate(45deg);
  }
  
  &:after {
    transform: rotate(-45deg);
  }
}