<header class="header header--checkout">
    <div class="container">
        <div class="header__wrapper">
            <a class="logo header__logo" href="#" aria-label="Homepage">
                <img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
            </a>

            <div class="header__buttons">
                <a class="
                                header-button
                                button
                                button--icon
                                button--icon-light
                                
                            " href="#" aria-label="cartLink">
                    <svg class="icon header-button__icon" role="img">
                        <title>cart link</title>
                        <use href="/images/icons-sprite.svg#shopping-cart"></use>
                    </svg>

                </a>

            </div>

        </div>
    </div>
</header>
{{#if skipNav }}
    {{ render '@skip-nav' }}
{{/if}}

{{#if marketingBar }}
    {{ render '@marketing-bar' }}
{{/if}}

{{#if contactBar }}
    {{ render '@contact-bar' }}
{{/if}}

<header class="header {{ class }}" {{{ attributes }}}>
    <div class="container">
        <div class="header__wrapper">
            {{#if logo}}
                {{ render '@logo' logo merge="true" }}
            {{/if}}

            {{#if sideMenu}}
                {{ render '@side-menu' }}
            {{/if}}

            {{#if briefInfo}}
                <div class="header__brief-info">
                    {{ render '@brief-info--link' briefInfo merge="true"}}
                </div>
            {{/if}}

            {{#if (or buttons minicart) }}
                <div class="header__buttons">
                    {{#each buttons as |item| }}
                        <a
                            class="
                                header-button
                                button
                                button--icon
                                button--icon-light
                                {{ item.class }}
                            "
                            href="#"
                            aria-label="{{ item.ariaLabel }}"
                        >
                            {{ render '@icon' item.icon }}
                        </a>
                    {{/each}}

                    {{#if minicart}}
                        <div class="header__minicart">
                            <button
                                type="button"
                                class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    modal-trigger
                                "
                                aria-label="{{ minicartTrigger.ariaLabel }}"
                                data-modal-trigger="modal-minicart"
                            >
                                {{ render '@icon' minicartTrigger.icon }}
                                <span class="header-button__counter">
                                    <span class="header-button__counter-dot"></span>
                                </span>
                            </button>
                        </div>

                        {{ render '@modal--secondary' minicartModal merge=true }}
                    {{/if}}
                </div>
            {{/if}}

            {{#if search }}
                <div class="header__search-wrapper">
                    <form class="search-form">
                        <div class="search-form__wrapper">
                            {{ render '@input' searchInput }}
                            {{ render '@button--icon' searchButton }}
                        </div>
                        {{#if quicksearch }}
                            {{ render '@quicksearch' }}
                        {{/if}}
                    </form>
                </div>
            {{/if}}
        </div>
    </div>
</header>

{{#if megaMenu }}
    {{ render '@mega-menu' }}
{{/if}}
{
  "contactBar": false,
  "sideMenu": false,
  "search": false,
  "quicksearch": false,
  "megaMenu": false,
  "skipNav": false,
  "marketingBar": false,
  "minicart": false,
  "buttons": [
    {
      "ariaLabel": "cartLink",
      "icon": {
        "id": "shopping-cart",
        "title": "cart link",
        "class": "header-button__icon"
      }
    }
  ],
  "logo": {
    "class": "header__logo"
  },
  "searchInput": {
    "class": "search-form__input-wrapper margin-0",
    "label": {
      "text": "Search products",
      "hidden": true
    },
    "field": {
      "class": "search-form__input",
      "id": "search",
      "name": "search",
      "type": "search",
      "placeholder": "Search entire store here..."
    }
  },
  "searchButton": {
    "tag": "button",
    "text": "",
    "class": "button--icon search-form__button",
    "icon": {
      "id": "search",
      "title": "Search",
      "class": "button__icon",
      "hidden": true
    },
    "attributes": "type=\"button\" aria-label=\"Search\""
  },
  "minicartTrigger": {
    "icon": {
      "id": "shopping-cart",
      "title": "Shopping cart",
      "class": "header-button__icon",
      "hidden": true
    },
    "link": "/cart",
    "ariaLabel": "Shopping cart dropdown trigger"
  },
  "minicartModal": {
    "trigger": false,
    "modal": {
      "id": "modal-minicart",
      "attributes": "aria-labelledby=\"minicart-title\" aria-describedby=\"minicart-products\""
    },
    "modalComponent": {
      "content": "minicart-content",
      "contentContext": ""
    },
    "modalContent": {
      "class": "modal__content--block"
    },
    "script": true,
    "modalTop": false,
    "modalMiddle": false,
    "modalBottom": false
  },
  "briefInfo": false,
  "class": "header--checkout"
}
  • Content:
    @import '../../Molecules/button/button-variables';
    
    .header-button {
        &__counter {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: $header-button__counter-top;
            right: $header-button__counter-right;
            width: $header-button__counter-size;
            height: $header-button__counter-size;
            border: $header-button__counter-border;
            border-radius: $header-button__counter-size;
            line-height: $header-button__counter-size;
            font-size: $header-button__counter-font-size;
            color: $header-button__counter-color;
            background-color: $header-button__counter-background;
            z-index: $header-button__counter-z-index;
    
            &--hidden {
                display: none;
            }
    
            &-dot {
                width: $header-button__counter-dot-size;
                height: $header-button__counter-dot-size;
                border-radius: $header-button__counter-dot-size;
                margin: auto;
                background-color: $header-button__counter-dot-bg-color;
            }
        }
    
        &__summary-count {
            @include visually-hidden();
        }
    
        &.button--icon-fill {
            &:before {
                background-color: $button__before-background--icon-light;
            }
        }
    }
    
  • URL: /components/raw/header/_button.scss
  • Filesystem Path: build/components/Organisms/header/_button.scss
  • Size: 1.3 KB
  • Content:
    $header__border                               : $border-base !default;
    $header__border-width                         : 0 0 $border-width-base 0 !default;
    $header__border\@large                        : 0 !default;
    $header__border-width\@large                  : 0 !default;
    $header__background                           : none !default;
    $header__background--email                    : $white !default;
    
    $header__wrapper-padding                      : 0 0 $spacer !default;
    $header__wrapper-padding\@medium              : $spacer--medium 0 !default;
    $header__wrapper-padding\@large               : $spacer--medium 0 !default;
    
    $header__logo-padding                         : $spacer--small 0 $spacer--small $spacer !default;
    $header__logo-padding\@medium                 : 0 !default;
    $header__logo-order\@medium                   : 2 !default;
    
    $header__buttons-width                        : calc(100% - #{$logo__max-width}) !default;
    $header__buttons-width\@medium                : calc(2 * 48px + 1 * #{$spacer}) !default;
    $header__buttons-order\@medium                : 3 !default;
    $header__buttons-width\@extra-large           : calc(2 * 48px + 1 * #{$spacer--medium}) !default;
    
    $header__search-wrapper-z-index               : $z-index-high + 1 !default;
    $header__search-wrapper-padding               : 0 0 0 $spacer !default;
    $header__search-wrapper-padding\@medium       : 0 24px !default;
    $header__search-wrapper-padding\@large        : 0 $spacer--medium !default;
    $header__search-wrapper-padding\@extra-large  : 0 $spacer--large !default;
    $header__search-wrapper-flex-grow             : 1 !default;
    $header__search-wrapper-flex-basis            : 50% !default;
    $header__search-wrapper-order                 : 3 !default;
    $header__search-wrapper-order\@medium         : 2 !default;
    $header__search-wrapper-max-width\@large      : 350px !default;
    $header__search-wrapper-max-width\@extra-large: 600px !default;
    
    $header__minicart-border\@medium              : $border-base !default;
    $header__minicart-border-width\@medium        : 0 0 0 1px !default;
    $header__minicart-padding-left                : 0 !default;
    $header__minicart-padding-left\@medium        : $spacer !default;
    $header__minicart-modal-z-index               : 101 !default;
    
    $header__button-wishlist-margin-right         : 0 !default;
    $header__button-wishlist-margin-right\@medium : $spacer !default;
    
    $header__brief-info-display                   : none !default;
    $header__brief-info-display\@large            : flex !default;
    $header__brief-info-min-width                 : 220px !default;
    $header__brief-info-order                     : 3 !default;
    $header__brief-info-subtitle-font-size        : $font-size-small !default;
    
    $header__side-menu-order                      : 1 !default;
    
    // Buttons
    $header-button__counter-top                   : 10px !default;
    $header-button__counter-right                 : 10px !default;
    $header-button__counter-font-size             : $font-size-small !default;
    $header-button__counter-background            : $white !default;
    $header-button__counter-color                 : $white !default;
    $header-button__counter-size                  : 10px !default;
    $header-button__counter-border                : none !default;
    $header-button__counter-z-index               : $z-index-low !default;
    
    $header-button__counter-dot-size              : $spacer !default;
    $header-button__counter-dot-bg-color          : $color-error !default;
    
    // Search
    $search-form__position                        : static !default;
    $search-form__position\@medium                : static !default;
    $search-form__width                           : 100% !default;
    $search-form__alignment                       : flex-end !default;
    $search-form__margin                          : 0 !default;
    
    $search-form__button-margin                   : 0 !default;
    $search-form__button-top                      : 1px !default;
    $search-form__button-right                    : 0 !default;
    $search-form__button-border                   : $border-base !default;
    $search-form__button-border-width             : 0 1px !default;
    $search-form__button-border--focus            : $color-focus-inline !default;
    $search-form__button-height                   : 46px !default;
    $search-form__button-background--disabled     : none !default;
    $search-form__button-icon-fill--disabled      : $color-primary !default;
    $search-form__button-transition               : none !default;
    
    $search-form__input-border                    : $border-base !default;
    $search-form__input-wrapper-margin            : 0 !default;
    
    // Checkout variant
    $header__wrapper-padding--checkout            : 0 !default;
    $header__wrapper-padding--checkout\@medium    : $spacer--medium 0 !default;
    
    
  • URL: /components/raw/header/_header-variables.scss
  • Filesystem Path: build/components/Organisms/header/_header-variables.scss
  • Size: 4.7 KB
  • Content:
    @import 'header-variables';
    @import 'button';
    @import 'search-form';
    
    .header {
        position: relative;
        border: $header__border;
        border-width: $header__border-width;
        background: $header__background;
    
        @include mq($screen-l) {
            border: none;
        }
    
        &--checkout {
            position: static;
    
            .header__wrapper {
                padding: $header__wrapper-padding--checkout;
    
                @include mq($screen-m) {
                    padding: $header__wrapper-padding--checkout\@medium;
                }
            }
    
            .header__minicart {
                border: none;
            }
    
            @include mq($screen-l) {
                border: $header__border;
                border-width: $header__border-width;
            }
        }
    
        &--email {
            background-color: $header__background--email;
        }
    
        &__wrapper {
            position: relative;
            justify-content: space-between;
            display: flex;
            flex-flow: row wrap;
            padding: $header__wrapper-padding;
    
            @include mq($screen-m) {
                flex-wrap: nowrap;
                padding: $header__wrapper-padding\@medium;
            }
    
            @include mq($screen-l) {
                border: $header__border\@large;
                border-width: $header__border-width\@large;
                padding: $header__wrapper-padding\@large;
            }
        }
    
        &__logo {
            padding: $header__logo-padding;
    
            @include mq($screen-m) {
                order: $header__logo-order\@medium;
                padding: $header__logo-padding\@medium;
            }
        }
    
        &__search-wrapper {
            display: flex;
            flex-flow: column nowrap;
            flex-grow: $header__search-wrapper-flex-grow;
            flex-basis: $header__search-wrapper-flex-basis;
            order: $header__search-wrapper-order;
            justify-content: center;
            padding: $header__search-wrapper-padding;
            z-index: $header__search-wrapper-z-index;
    
            @include mq($screen-m) {
                order: $header__search-wrapper-order\@medium;
                flex-direction: column;
                justify-content: center;
                padding: $header__search-wrapper-padding\@medium;
            }
    
            @include mq($screen-l) {
                padding: $header__search-wrapper-padding\@large;
                max-width: $header__search-wrapper-max-width\@large;
            }
    
            @include mq($screen-xl) {
                padding: $header__search-wrapper-padding\@extra-large;
                max-width: $header__search-wrapper-max-width\@extra-large;
            }
        }
    
        &__minicart {
            position: relative;
            padding-left: $header__minicart-padding-left;
    
            @include mq($screen-m) {
                border: $header__minicart-border\@medium;
                border-width: $header__minicart-border-width\@medium;
                padding-left: $header__minicart-padding-left\@medium;
            }
        }
    
        &__minicart-modal {
            z-index: $header__minicart-modal-z-index; // to cover paypal button iframe
        }
    
        .button--icon-fill {
            margin-right: $header__button-wishlist-margin-right;
    
            @include mq($screen-m) {
                margin-right: $header__button-wishlist-margin-right\@medium;
            }
        }
    
        &__buttons {
            display: flex;
            flex: 1 $header__buttons-width;
            max-width: $header__buttons-width;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-end;
    
            @include mq($screen-m) {
                order: $header__buttons-order\@medium;
                flex-wrap: nowrap;
                flex: 1 $header__buttons-width\@medium;
                max-width: $header__buttons-width\@medium;
            }
    
            @include mq($screen-xl) {
                flex: 1 $header__buttons-width\@extra-large;
                max-width: $header__buttons-width\@extra-large;
            }
        }
    
        &__brief-info {
            display: $header__brief-info-display;
            align-items: center;
            order: $header__brief-info-order;
            min-width: $header__brief-info-min-width;
    
            @include mq($screen-l) {
                display: $header__brief-info-display\@large;
            }
    
            .brief-info__subtitle {
                font-size: $header__brief-info-subtitle-font-size;
            }
        }
    
        .side-menu {
            order: $header__side-menu-order;
        }
    }
    
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: build/components/Organisms/header/_header.scss
  • Size: 4.2 KB
  • Content:
    .search-form {
        width: $search-form__width;
        align-self: $search-form__alignment;
        line-height: $font-line-height;
        margin: $search-form__margin;
        position: $search-form__position;
    
        @include mq($screen-m) {
            position: $search-form__position\@medium;
        }
    
        &__wrapper {
            position: relative;
        }
    
        &__input-wrapper {
            position: relative;
            margin: $search-form__input-wrapper-margin;
        }
    
        &__input {
            width: 100%;
            border: $search-form__input-border;
            -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
    
            &.focus-visible {
                & + .search-form__button {
                    border-color: $search-form__button-border--focus;
                }
            }
        }
    
        &__button {
            position: absolute;
            top: $search-form__button-top;
            right: $search-form__button-right;
            height: $search-form__button-height;
            min-height: $search-form__button-height;
            margin: $search-form__button-margin;
            border: $search-form__button-border;
            border-width: $search-form__button-border-width;
            transition: $search-form__button-transition;
    
            &:disabled,
            &[disabled] {
                background: $search-form__button-background--disabled;
    
                &:hover {
                    background: $search-form__button-background--disabled;
                }
    
                .icon {
                    fill: $search-form__button-icon-fill--disabled;
                }
            }
    
        }
    }
    
  • URL: /components/raw/header/_search-form.scss
  • Filesystem Path: build/components/Organisms/header/_search-form.scss
  • Size: 1.5 KB

No notes defined.