icon-burger.scss

// -----------------------------------------------------------------
// Mixin icon
// -----------------------------------------------------------------

//
// ハンバーガーボタンをクリックすると×印のボタンに変化します。スクリプトで .is-クラスを付与してください。
//
// マークアップ例
// <button class="icon-burger">
//     <span>navigation</span>
// </button>
//
// Sassの指定
// .icon-burger {
//     @include icon-burger(#000, 20px, 2px);
//     > span {
//     @include sr-only;
//     }
// }
//
@mixin icon-burger($color: #333, $height: 22px, $border-width: 3px, $bottom: ($height / 3)) {
    position: relative;
    width: 30px;
    height: $height;
    cursor: pointer;
    transition-timing-function: ease;
    transition-duration: (.2s / 2);
    border: 0;
    border-top: $border-width solid $color;
    border-bottom: $border-width solid $color;
    outline: 0;
    background-color: transparent;
    &:before,
    &:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: $bottom;
        transition-timing-function: ease;
        transition-duration: .2s;
        border-bottom: $border-width solid $color;
    }
    &[class*="is-"] {
        transform: rotate(90deg);
        border-color: transparent;
        &:before {
            transform: rotate(45deg);
        }
        &:after {
            transform: rotate(-45deg);
        }
    }
}

// ==========================================================================
// Mixin screen reader
// ==========================================================================

//　ブラウザには非表示でスクリーンリーダーにだけ読み上げをさせる
@mixin sr-only {
    overflow: hidden;
    clip: rect(0,0,0,0);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}