<div class="contact-bar ">
    <div class="contact-bar__container 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@kappersmagazijn.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": "",
  "containerClass": "container",
  "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@kappersmagazijn.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": "#"
      }
    ]
  }
}
  • Content:
    $contact-bar__height                             : 25px !default;
    $contact-bar__margin                             : 0 !default;
    $contact-bar__padding                            : 0 !default;
    $contact-bar__background                         : $theme-second !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-second !default;
    
    $contact-bar__link-before-bg                     : $gray !default;
    $contact-bar__link-min-height                    : 25px !default;
    $contact-bar__link-text-transform                : uppercase !default;
    $contact-bar__link-color                         : $color-primary !default;
    $contact-bar__link-color--hover                  : $white !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        : $orange-dark !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         : uppercase !default;
    
    $contact-bar__icon-margin                        : 0 $spacer 0 0 !default;
    $contact-bar__icon-fill                          : $color-primary !default;
    $contact-bar__icon-fill-hover                    : $white !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;
    
    $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;
    
  • URL: /components/raw/contact-bar/_contact-bar-variables.scss
  • Filesystem Path: build/components/Organisms/contact-bar/_contact-bar-variables.scss
  • Size: 4.3 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;
                }
            }
        }
    
        &__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;
                    }
                }
            }
        }
    
        &__text {
            transition: $contact-bar__transition;
        }
    
        &__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;
            }
        }
    }
    
  • URL: /components/raw/contact-bar/_contact-bar.scss
  • Filesystem Path: build/components/Organisms/contact-bar/_contact-bar.scss
  • Size: 5.4 KB

There are no notes for this item.