<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": "#"
}
]
}
}
$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;
@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;
}
}
}
No notes defined.