<div class="contact-bar contact-bar--vertical">
<div class="contact-bar__container ">
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span
class="
icon
contact-bar__icon
"
aria-label=""
>
<svg
class="icon "
role="img"
>
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<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="
icon
contact-bar__icon
"
aria-label=""
>
<svg
class="icon "
role="img"
>
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span
class="
button__text
contact-bar__text
"
>
Klantenservice
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span
class="
icon
contact-bar__icon
"
aria-label=""
>
<svg
class="icon "
role="img"
>
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span
class="
button__text
contact-bar__text
"
>
Groothandel
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:+31858772604" class="
contact-bar__link
">
<span
class="
icon
contact-bar__icon
"
aria-label=""
>
<svg
class="icon "
role="img"
>
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span
class="
button__text
contact-bar__text
"
>
T: 085 - 877 26 04
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:info@cruc.nl" class="
contact-bar__link
">
<span
class="
icon
contact-bar__icon
"
aria-label=""
>
<svg
class="icon "
role="img"
>
<title>Email</title>
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span
class="
button__text
contact-bar__text
"
>
E-mail
</span>
</a>
</li>
</ul>
</div>
</div>
<div
class="contact-bar {{ class }}"
{{{ attributes }}}
>
<div class="contact-bar__container {{ containerClass }}">
<ul class="list contact-bar__list contact-bar__list--icons">
{{#each menu.items }}
<li class="list-item contact-bar__item">
<a
href="{{ link }}"
class="
contact-bar__link
{{ ../linkClass }}
"
>
<span
class="
icon
contact-bar__icon
"
aria-label="{{ icon.iconTitle }}"
>
{{ render '@icon' icon }}
</span>
<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>
{
"class": "contact-bar--vertical",
"containerClass": "",
"attributes": "",
"phone": {
"icon": {
"class": "",
"id": "phone",
"title": "Phone"
},
"text": "T: 085 - 877 26 04",
"number": "+31858772604"
},
"email": {
"icon": {
"class": "",
"id": "envelope",
"title": "Email"
},
"text": "E-mail",
"address": "info@cruc.nl"
},
"linkClass": "",
"menu": {
"items": [
{
"icon": {
"class": "",
"display": false
},
"text": "Account",
"link": "#"
},
{
"icon": {
"class": "",
"display": false
},
"text": "Klantenservice",
"link": "#"
},
{
"icon": {
"class": "",
"display": false
},
"text": "Groothandel",
"link": "#"
}
]
}
}
$contact-bar__height : 25px !default;
$contact-bar__margin : 0 !default;
$contact-bar__padding : 0 !default;
$contact-bar__background : $theme-primary !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__item-padding : 0 !default;
$contact-bar__item-margin : 0 !default;
$contact-bar__link-padding : $spacer--extra-small $spacer--large !default;
$contact-bar__link-font-size : $font-size-base !default;
$contact-bar__link-font-weight : $font-weight-normal !default;
$contact-bar__link-line-height : $font-line-height !default;
$contact-bar__link-bg : $theme-primary !default;
$contact-bar__link-before-bg : $gray !default;
$contact-bar__link-min-height : 25px !default;
$contact-bar__link-text-transform : none !default;
$contact-bar__link-color : $white !default;
$contact-bar__link-color--hover : $black !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 : $theme-second !default;
$contact-bar__link-font-size--icons : $font-size-base !default;
$contact-bar__link-font-weight--icons : $font-weight-normal !default;
$contact-bar__link-text-transform--icons : none !default;
$contact-bar__icon-margin : 0 $spacer 0 0 !default;
$contact-bar__icon-fill : $white !default;
$contact-bar__icon-fill-hover : $black !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 : $white !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 : normal !default;
$contact-bar__transition : $transition-base !default;
$contact-bar__footer--bg : $theme-dark !default;
$contact-bar__footer--m-t : $spacer--m !default;
$contact-bar__footer--p : $spacer--l !default;
$contact-bar__footer--display-from : $screen-m !default;
$contact-bar__footer--color : $white !default;
$contact-bar__footer--icon--m-r : $spacer--m !default;
$contact-bar__footer--icon--size : $spacer--large !default;
$contact-bar__footer--icon--color : $white !default;
$contact-bar__footer--title--f-z : $font-size-medium !default;
$contact-bar__footer--description--f-z : $font-size-small !default;
@import 'contact-bar-variables';
.contact-bar {
display: none;
min-height: $contact-bar__height;
margin: $contact-bar__margin;
background-color: $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;
}
}
}
&__container {
display: flex;
width: $contact-bar__container-width;
justify-content: $contact-bar__container-justify;
flex-direction: $contact-bar__container-direction;
}
&__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;
}
}
}
}
&__icon {
margin: $contact-bar__icon-margin;
.icon {
fill: $contact-bar__icon-fill;
}
}
&__footer {
display: none;
margin-top: $contact-bar__footer--m-t;
background: $contact-bar__footer--bg;
padding: $contact-bar__footer--p;
@include mq($contact-bar__footer--display-from) {
display: block;
}
&--content {
color: $contact-bar__footer--color;
}
&--icon {
margin-right: $contact-bar__footer--icon--m-r;
align-self: center;
width: $contact-bar__footer--icon--size;
height: $contact-bar__footer--icon--size;
fill: #fff;
svg {
fill: $contact-bar__footer--icon--color;
height: $contact-bar__footer--icon--size;
width: $contact-bar__footer--icon--size;
}
}
&--title {
font-size: $contact-bar__footer--title--f-z;
}
&--description {
font-size: $contact-bar__footer--description--f-z;
}
}
}
There are no notes for this item.