Kistenkoning components for Magento 2

Contact Bar 

<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.