snurky components for Magento 2

Contact Bar: Footer 

<div class="contact-bar__footer container">
    <div class="row">

        <div class="col-sm-3 flex--row">
            <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                    <use xlink:href="/images/icons-sprite.svg#phone"></use>
                </svg>
            </div>
            <div class="contact-bar__footer--content flex--column">
                <span class="contact-bar__footer--title">Bel gratis 0348 - 437811</span>
                <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
            </div>
        </div>
        <div class="col-sm-3 flex--row">
            <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                    <use xlink:href="/images/icons-sprite.svg#envelope"></use>
                </svg>
            </div>
            <div class="contact-bar__footer--content flex--column">
                <span class="contact-bar__footer--title">Stuur een mail</span>
                <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
            </div>
        </div>
        <div class="col-sm-3 flex--row">
            <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                    <use xlink:href="/images/icons-sprite.svg#facebook-logo"></use>
                </svg>
            </div>
            <div class="contact-bar__footer--content flex--column">
                <span class="contact-bar__footer--title">Via Facebook</span>
                <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
            </div>
        </div>
        <div class="col-sm-3 flex--row">
            <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                    <use xlink:href="/images/icons-sprite.svg#chat"></use>
                </svg>
            </div>
            <div class="contact-bar__footer--content flex--column">
                <span class="contact-bar__footer--title">Via de Chat</span>
                <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
            </div>
        </div>

    </div>
</div>
 
<div class="contact-bar__footer {{ containerClass }}">
    <div class="row">

        {{#each menu.items }}
            <div class="col-sm-3 flex--row">
                <div class="contact-bar__footer--icon">{{ render '@icon' icon }}</div>
                <div class="contact-bar__footer--content flex--column">
                    <span class="contact-bar__footer--title">{{ title }}</span>
                    <span class="contact-bar__footer--description">{{ description }}</span>
                </div>
            </div>
        {{/each}}

    </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@snurky.nl"
  },
  "linkClass": "",
  "menu": {
    "items": [
      {
        "icon": {
          "class": "",
          "id": "phone",
          "display": true
        },
        "title": "Bel gratis 0348 - 437811",
        "description": "Op werkdagen van 9:00 - 17:00 uur"
      },
      {
        "icon": {
          "class": "",
          "id": "envelope",
          "display": true
        },
        "title": "Stuur een mail",
        "description": "Antwoord binnen 24 uur"
      },
      {
        "icon": {
          "class": "",
          "id": "facebook-logo",
          "display": true
        },
        "title": "Via Facebook",
        "description": "Antwoord binnen 24 uur"
      },
      {
        "icon": {
          "class": "",
          "id": "chat",
          "display": true
        },
        "title": "Via de Chat",
        "description": "Op werkdagen van 9:00 - 17:00 uur"
      }
    ]
  }
}
  • Content: 
    $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                : 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        : $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         : 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                         : $black !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.