<div class="contact-bar contact-bar--vertical">
    <div class="contact-bar__wrapper">
        <div class="contact-bar__container ">
            <ul class="list contact-bar__list">
                <li class="list-item contact-bar__item">
                    <a href="#" class="
                                contact-bar__link
                                
                            ">
                        <span class="
                                    button__text
                                    contact-bar__text
                                ">
                            Account
                        </span>
                    </a>
                </li>
                <li class="list-item contact-bar__item">
                    <a href="#" class="
                                contact-bar__link
                                
                            ">
                        <span class="
                                    button__text
                                    contact-bar__text
                                ">
                            Blog
                        </span>
                    </a>
                </li>
                <li class="list-item contact-bar__item">
                    <a href="#" class="
                                contact-bar__link
                                
                            ">
                        <span class="
                                    button__text
                                    contact-bar__text
                                ">
                            Contact
                        </span>
                    </a>
                </li>
            </ul>
            <ul class="list contact-bar__list contact-bar__list--icons">
                <li class="list-item contact-bar__item">
                    <a href="tel:8002669590" class="
                            contact-bar__link
                            
                        ">
                        <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                            <svg class="icon " role="img">
                                <title>Phone</title>
                                <use href="/images/icons-sprite.svg#phone"></use>
                            </svg>

                        </span>
                        <span class="
                                button__text
                                contact-bar__text
                            ">
                            Call us for free 800 - 266 - 9590
                        </span>
                    </a>
                </li>
                <li class="contact-bar__item">
                    <a href="mailto:test@test.com" class="
                            contact-bar__link
                            
                        ">
                        <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                            <svg class="icon " role="img">
                                <title>Email</title>
                                <use href="/images/icons-sprite.svg#envelope"></use>
                            </svg>

                        </span>
                        <span class="
                                button__text
                                contact-bar__text
                            ">
                            Email Us
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div
    class="contact-bar {{ class }}"
    {{{ attributes }}}
>
    <div class="contact-bar__wrapper">
        <div class="contact-bar__container {{ containerClass }}">
            <ul class="list contact-bar__list">
                {{#each menu.items }}
                    <li class="list-item contact-bar__item">
                        <a
                            href="{{ link }}"
                            class="
                                contact-bar__link
                                {{ ../linkClass }}
                            "
                        >
                            <span
                                class="
                                    button__text
                                    contact-bar__text
                                "
                            >
                                {{ text }}
                            </span>
                        </a>
                    </li>
                {{/each}}
            </ul>
            <ul class="list contact-bar__list contact-bar__list--icons">
                {{#if phone.text }}
                <li class="list-item contact-bar__item">
                    <a
                        href="tel:{{ phone.number }}"
                        class="
                            contact-bar__link
                            {{ linkClass }}
                        "
                    >
                        <span
                            class="
                                icon
                                contact-bar__icon
                            "
                            aria-label="{{ phone.icon.iconTitle }}"
                        >
                            {{ render '@icon' phone.icon }}
                        </span>
                        <span
                            class="
                                button__text
                                contact-bar__text
                            "
                        >
                            {{ phone.text }}
                        </span>
                    </a>
                </li>
                {{/if}}
                {{#if email }}
                <li class="contact-bar__item">
                    <a
                        href="mailto:{{ email.address }}"
                        class="
                            contact-bar__link
                            {{ linkClass }}
                        "
                    >
                        <span
                            class="
                                icon
                                contact-bar__icon
                            "
                            aria-label="{{ email.icon.iconTitle }}"
                        >
                            {{ render '@icon' email.icon }}
                        </span>
                        <span
                            class="
                                button__text
                                contact-bar__text
                            "
                        >
                            {{ email.text }}
                        </span>
                    </a>
                </li>
                {{/if}}
            </ul>
        </div>
    </div>
</div>
{
  "class": "contact-bar--vertical",
  "containerClass": "",
  "attributes": "",
  "phone": {
    "icon": {
      "class": "",
      "id": "phone",
      "title": "Phone"
    },
    "text": "Call us for free 800 - 266 - 9590",
    "number": "8002669590"
  },
  "email": {
    "icon": {
      "class": "",
      "id": "envelope",
      "title": "Email"
    },
    "text": "Email Us",
    "address": "test@test.com"
  },
  "linkClass": "",
  "menu": {
    "items": [
      {
        "text": "Account",
        "link": "#"
      },
      {
        "text": "Blog",
        "link": "#"
      },
      {
        "text": "Contact",
        "link": "#"
      }
    ]
  }
}
  • Content:
    $contact-bar__height                             : 40px !default;
    $contact-bar__margin                             : 0 !default;
    $contact-bar__padding                            : 0 !default;
    $contact-bar__background                         : $gray-light !default;
    $contact-bar__display-from                       : $screen-l !default;
    
    $contact-bar__container-width                    : calc(100% - #{$spacer--medium}) !default;
    $contact-bar__container-direction                : row-reverse !default;
    $contact-bar__container-justify                  : space-between !default;
    $contact-bar__container-threshold                : calc(#{$max-content-width} + 2 * #{$spacer}) !default;
    
    $contact-bar__item-padding                       : 0 !default;
    $contact-bar__item-margin                        : 0 $spacer--small !default;
    
    $contact-bar__link-padding                       : $spacer !default;
    $contact-bar__link-font-size                     : $font-size-small !default;
    $contact-bar__link-font-weight                   : $font-weight-normal !default;
    $contact-bar__link-line-height                   : $font-line-height !default;
    $contact-bar__link-bg                            : $gray-light !default;
    
    $contact-bar__link-before-bg                     : $gray !default;
    $contact-bar__link-min-height                    : 40px !default;
    $contact-bar__link-text-transform                : uppercase !default;
    $contact-bar__link-color                         : $color-primary !default;
    $contact-bar__link-color--hover                  : $color-primary !default;
    $contact-bar__link-text-decoration               : none !default;
    $contact-bar__link-align-items                   : center !default;
    
    $contact-bar__link-hover-text-decoration         : none !default;
    $contact-bar__link-hover-background              : transparent !default;
    $contact-bar__link-hover-background-hover        : $gray !default;
    
    $contact-bar__link-font-size--icons              : $font-size-small !default;
    $contact-bar__link-font-weight--icons            : $font-weight-normal !default;
    $contact-bar__link-text-transform--icons         : uppercase !default;
    
    $contact-bar__icon-margin                        : 0 $spacer 0 0 !default;
    $contact-bar__icon-fill                          : $color-primary !default;
    $contact-bar__icon-fill-hover                    : $color-primary !default;
    
    // vertical
    $contact-bar__container-width--vertical          : 100% !default;
    $contact-bar__bg--vertical                       : $white !default;
    
    $contact-bar__list-align-items--vertical         : left !default;
    $contact-bar__list-icons-align-items--vertical   : left !default;
    $contact-bar__list-icons-border--vertical        : $border-base !default;
    $contact-bar__list-icons-border-width--vertical  : 1px 0 0 0 !default;
    $contact-bar__list-icons-margin--vertical        : $spacer--semi-large 0 !default;
    $contact-bar__list-icons-link-font-size--vertical: $font-size-small !default;
    
    $contact-bar__item-margin--vertical              : 0 !default;
    
    $contact-bar__icon-fill--vertical                : $color-primary !default;
    
    $contact-bar__link-before-display--vertical      : none !default;
    $contact-bar__link-bg--vertical                  : transparent !default;
    $contact-bar__link-color--vertical               : $color-primary !default;
    $contact-bar__link-color-hover--vertical         : $color-primary !default;
    $contact-bar__link-font-size--vertical           : $font-size-base !default;
    $contact-bar__link-padding--vertical             : $spacer--medium 0 !default;
    $contact-bar__link-text-transform--vertical      : capitalize !default;
    
    $contact-bar__transition                         : $transition-base !default;
    
  • URL: /components/raw/contact-bar/_contact-bar-variables.scss
  • Filesystem Path: build/components/Organisms/contact-bar/_contact-bar-variables.scss
  • Size: 3.7 KB
  • Content:
    @import 'contact-bar-variables';
    
    .contact-bar {
        display: none;
        min-height: $contact-bar__height;
        margin: $contact-bar__margin;
        background: $contact-bar__background;
        padding: $contact-bar__padding;
    
        @include mq($contact-bar__display-from) {
            display: flex;
        }
    
        &--vertical {
            display: block;
            background: $contact-bar__bg--vertical;
    
            .contact-bar {
                &__container {
                    flex-direction: column;
                    min-width: initial;
                    width: $contact-bar__container-width--vertical;
                }
    
                &__list {
                    align-items: $contact-bar__list-align-items--vertical;
                    flex-flow: column nowrap;
    
                    &--icons {
                        align-items: $contact-bar__list-icons-align-items--vertical;
                        border: $contact-bar__list-icons-border--vertical;
                        border-width: $contact-bar__list-icons-border-width--vertical;
                        margin: $contact-bar__list-icons-margin--vertical;
    
                        .contact-bar__link {
                            font-size: $contact-bar__list-icons-link-font-size--vertical;
                        }
                    }
                }
    
                &__item {
                    margin: $contact-bar__item-margin--vertical;
                }
    
                &__link {
                    color: $contact-bar__link-color--vertical;
                    font-size: $contact-bar__link-font-size--vertical;
                    color: $contact-bar__link-color--vertical;
                    padding: $contact-bar__link-padding--vertical;
                    background: $contact-bar__link-bg--vertical;
                    text-transform: $contact-bar__link-text-transform--vertical;
    
                    &:before {
                        display: $contact-bar__link-before-display--vertical;
                    }
    
                    &:hover {
                        color: $contact-bar__link-color-hover--vertical;
                    }
                }
    
                &__icon {
                    .icon {
                        fill: $contact-bar__icon-fill--vertical;
                    }
                }
    
                &__icon {
                    fill: $contact-bar__icon-fill--vertical;
                }
            }
        }
    
        &__wrapper {
            width: 100%;
        }
    
        &__container {
            display: flex;
            justify-content: $contact-bar__container-justify;
            flex-direction: $contact-bar__container-direction;
    
            @include mq($contact-bar__container-threshold) {
                width: $contact-bar__container-width;
            }
        }
    
        &__list {
            display: flex;
    
            &--icons {
                .contact-bar__link {
                    font-size: $contact-bar__link-font-size--icons;
                    font-weight: $contact-bar__link-font-weight--icons;
                    text-transform: $contact-bar__link-text-transform--icons;
                }
            }
        }
    
        &__item {
            display: flex;
            margin: $contact-bar__item-margin;
            padding: $contact-bar__item-padding;
    
            &:first-child {
                margin-left: 0;
            }
    
            &:last-child {
                margin-right: 0;
            }
        }
    
        &__link {
            display: flex;
            align-items: $contact-bar__link-align-items;
            padding: $contact-bar__link-padding;
            line-height: $contact-bar__link-line-height;
            font-size: $contact-bar__link-font-size;
            font-weight: $contact-bar__link-font-weight;
            color: $contact-bar__link-color;
            background-color: $contact-bar__link-bg;
            text-decoration: $contact-bar__link-text-decoration;
            text-transform: $contact-bar__link-text-transform;
            min-height: $contact-bar__link-min-height;
    
            &:before {
                background-color: $contact-bar__link-before-bg;
            }
    
            &.focus-visible {
                @include focus-inline();
            }
    
            &:hover {
                text-decoration: $contact-bar__link-hover-text-decoration;
                color: $contact-bar__link-color--hover;
                background: $contact-bar__link-hover-background-hover;
    
                .contact-bar__text {
                    color: $contact-bar__link-color--hover;
                }
    
                .contact-bar__icon {
                    .icon {
                        fill: $contact-bar__icon-fill-hover;
                    }
                }
            }
        }
    
        &__text {
            transition: $contact-bar__transition;
        }
    
        &__icon {
            margin: $contact-bar__icon-margin;
    
            .icon {
                fill: $contact-bar__icon-fill;
            }
        }
    }
    
  • URL: /components/raw/contact-bar/_contact-bar.scss
  • Filesystem Path: build/components/Organisms/contact-bar/_contact-bar.scss
  • Size: 4.6 KB
  • Handle: @contact-bar--vertical
  • Preview:
  • Filesystem Path: build/components/Organisms/contact-bar/contact-bar.hbs
  • References (1): @icon

No notes defined.