Hamburger

<button class="kx-btn kx-hamburger kx-hamburger--spin kx-header__nav-toggle kx-js-header__menu-toggle">
    <span class="kx-hamburger__inner">
        <span class="kx-hamburger__icon"></span>
    </span>
    <span class="kx-hamburger__txt kx-is-vishidden">Menu Button</span>
</button>
<button class="kx-btn kx-hamburger kx-hamburger--spin{% for class in classes %} {{ class }}{% endfor %}">
    <span class="kx-hamburger__inner">
        <span class="kx-hamburger__icon"></span>
    </span>
    {% if text -%}
    <span class="kx-hamburger__txt kx-is-vishidden">{{ text }}</span>
    {%- endif %}
</button>
{
  "text": null,
  "hideText": null,
  "classes": null
}
  • Content:
    // ==========================================================================
    // Component: hamburger
    // ==========================================================================
    
    // Settings
    // ==========================================================================
    $hamburger-padding-x:                  rem-calc(20) !default;
    $hamburger-padding-y:                  rem-calc(18) !default;
    $hamburger-layer-width:                rem-calc(16) !default;
    $hamburger-layer-height:               rem-calc(2) !default;
    $hamburger-layer-spacing:              rem-calc(3) !default;
    $hamburger-layer-border-radius:        rem-calc(0) !default;
    $hamburger-height:                     rem-calc(20) !default;
    
    
    // Elements (children)
    // ==========================================================================
    
    .kx-hamburger__inner {
        width: $hamburger-layer-width;
        height: $hamburger-height;
        display: inline-block;
        position: relative;
    
        + .kx-hamburger__txt {
            @include ml(mini);
        }
    }
    
    .kx-hamburger__icon {
        display: block;
        top: 50%;
        margin-top: $hamburger-layer-height / -2;
    
        &,
        &::before,
        &::after {
            width: 100%;
            height: $hamburger-layer-height;
            background-color: currentColor;
            border-radius: $hamburger-layer-border-radius;
            position: absolute;
            transition-property: transform;
            transition-duration: $duration-default;
            transition-timing-function: ease;
        }
    
        &::before,
        &::after {
            content: '';
            display: block;
        }
    
        &::before {
            top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
        }
    
        &::after {
            bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
        }
    }
    
    // Block (parent)
    // ==========================================================================
    
    .kx-hamburger {
        @include flex;
        padding: $hamburger-padding-y $hamburger-padding-x;
        cursor: pointer;
        outline: none;
        font: inherit;
        color: inherit;
        text-transform: none;
        background-color: transparent;
        border: 0;
        margin: 0;
        overflow: visible;
    }
    
    // Modifiers
    // ==========================================================================
    
    .kx-hamburger--spin {
        .kx-hamburger__icon {
            transition-duration: 0.22s;
            transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    
            &::before {
                transition: top 0.1s 0.25s ease-in,
                opacity 0.1s ease-in;
            }
    
            &::after {
                transition: bottom 0.1s 0.25s ease-in,
                transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
            }
        }
    
        &.kx-is-active {
            .kx-hamburger__icon {
                transform: rotate(225deg);
                transition-delay: 0.12s;
                transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    
                &::before {
                    top: 0;
                    opacity: 0;
                    transition: top 0.1s ease-out,
                    opacity 0.1s 0.12s ease-out;
                }
    
                &::after {
                    bottom: 0;
                    transform: rotate(-90deg);
                    transition: bottom 0.1s ease-out,
                    transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
                }
            }
        }
    }
    
  • URL: /components/raw/hamburger/_hamburger.scss
  • Filesystem Path: src\components\01-hamburger\_hamburger.scss
  • Size: 3.4 KB

There are no notes for this item.