snurky components for Magento 2

Newsletter: Footer 

<div class="newsletter__footer ">

    <div class="newsletter__content">
        <div class="newsletter__footer--heading ">
            <h2 class="newsletter__footer--title">
                Wil je 10% korting op je volgende bestelling?
            </h2>
            <p class="newsletter__footer--subtitle">
                Meld je nu aan voor de nieuwsbrief van snurky en ontvang 10% korting op je volgende aankoop.
            </p>
        </div>
        <form class="newsletter__form newsletter__footer--form">
            <div class="newsletter__footer--fields">
                <div class="control">
                    <label for="newsletter">
                        <span class="label">Abonneer u op onze nieuwsbrief</span>
                        <div class="input newsletter__input">
                            <label class="
            label
            input__label
                label--hidden
            newsletter__label
        " for="newsletterEmail">
                                Email for newsletter subscription
                            </label>
                            <input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
                        </div>

                    </label>
                    <div class="newsletter__footer--agreements">
                        <div class="checkbox newsletter__footer--checkbox">
                            <input type="checkbox" id="newsletter" name="" class="checkbox__field ">
                            <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                                <use xlink:href="/images/icons-sprite.svg#checked"></use>
                            </svg>
                            <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                                <use xlink:href="/images/icons-sprite.svg#unchecked"></use>
                            </svg>
                            <label for="newsletter" class="checkbox__label ">
                                <span class="checkbox__text">
                                    <a href="#" title="Privacy Policy">Privacy Policy</a>
                                </span>
                            </label>
                        </div>

                    </div>
                </div>
            </div>
            <div class="newsletter__footer--button">
                <button class="button button--secondary newsletter__button">
                    Sign Up
                </button>

            </div>
        </form>
    </div>

</div>
 
<div class="newsletter__footer {{ class }}">

        <div class="newsletter__content">
            <div class="newsletter__footer--heading {{ heading.class }}">
                <h2 class="newsletter__footer--title">
                        {{ heading.title }}
                </h2>
                <p class="newsletter__footer--subtitle">
                    {{ heading.subtitle }}
                </p>
            </div>
            <form class="newsletter__form newsletter__footer--form">
                <div class="newsletter__footer--fields">
                    <div class="control">
                        <label for="newsletter">
                            <span class="label">{{ label }}</span>
                            {{ render '@input' input }}
                        </label>
                        <div class="newsletter__footer--agreements">
                            {{ render '@checkbox' checkbox }}
                        </div>
                    </div>
                </div>
                <div class="newsletter__footer--button">
                    {{ render '@button' button }}
                </div>
            </form>
        </div>

</div>
 
{
  "heading": {
    "title": "Wil je 10% korting op je volgende bestelling?",
    "subtitle": "Meld je nu aan voor de nieuwsbrief van snurky en ontvang 10% korting op je volgende aankoop."
  },
  "input": {
    "class": "newsletter__input",
    "field": {
      "placeholder": "Enter your email",
      "id": "newsletterEmail",
      "name": "newsletterEamil",
      "class": "newsletter__field"
    },
    "label": {
      "class": "newsletter__label",
      "hidden": true,
      "text": "Email for newsletter subscription"
    }
  },
  "button": {
    "tag": "button",
    "text": "Sign Up",
    "class": "button--secondary newsletter__button"
  },
  "checkbox": {
    "class": "newsletter__footer--checkbox",
    "id": "newsletter",
    "label": {
      "text": "<a href=\"#\" title=\"Privacy Policy\">Privacy Policy</a>"
    }
  },
  "label": "Abonneer u op onze nieuwsbrief",
  "imageNewsletter": {
    "dataSrc": "/images/catalog-grid-item/bedlegerig-pakket.jpeg"
  }
}
  • Content: 
    $newsletter__margin                           : 0 !default;
$newsletter__padding                          : $spacer--large 0 !default;

$newsletter__heading-font-size                : $font-size-base !default;
$newsletter__heading-font-weight              : $font-weight-bold !default;
$newsletter__heading-line-height              : 1.2 !default;
$newsletter__heading-padding                  : $spacer 0 !default;
$newsletter__heading-margin\@medium           : 0 $spacer--large 0 0 !default;
$newsletter__heading-margin\@extra-large      : 0 $spacer--extra-large * 2 0 0 !default;
$newsletter__heading-padding\@extra-large     : 0 !default;

$newsletter__title-margin                     : 0 0 $spacer--medium !default;
$newsletter__title-font-family                : $font-family-base !default;
$newsletter__title-font-size                  : $font-size-large !default;
$newsletter__title-font-weight                : $font-weight-bold !default;
$newsletter__title-line-height                : 48px !default;
$newsletter__title-color                      : $color-primary !default;

$newsletter__subtitle-font-family             : $font-family-base !default;
$newsletter__subtitle-color                   : $color-primary !default;

$newsletter__controls-width                   : 96px !default;
$newsletter__controls-height                  : 48px !default;
$newsletter__controls-margin                  : 0 0 $spacer !default;
$newsletter__controls-margin\@medium          : 0 0 $spacer--medium !default;

$newsletter__button-padding                   : 0 $spacer--medium !default;
$newsletter__button-min-width                 : 96px !default;

$newsletter__checkbox-label-padding           : $checkbox__label-padding !default;
$newsletter__checkbox-label-color             : $color-primary !default;
$newsletter__checkbox-label-link-color        : $color-primary !default;
$newsletter__checkbox-label-link-color--hover : $color-focus !default;
$newsletter__checkbox-label-font-family       : $font-family-base !default;
$newsletter__checkbox-label-font-size         : $font-size-small !default;
$newsletter__checkbox-label-line-height       : 1.33 !default;

$newsletter__checkbox-before-background       : $color-primary !default;

$newsletter__checkbox-icon-fill               : $white !default;

$newsletter__checkbox-text-color              : $gray-dark !default;

$newsletter__agreements-margin                : 0 0 0 $spacer !default;
$newsletter__agreements-max-width             : 450px !default;

$newsletter__footer--background               : $theme-second !default;
$newsletter__footer--color                    : $white !default;
$newsletter__content--padding                 : 3rem 0 !default;
$newsletter__content--padding\@medium         : 4rem !default;
$newsletter__content--column-gap              : $spacer !default;
$newsletter__content--column-gap\@medium      : $spacer--3 !default;
$newsletter__footer--label--padding           : 0 0 0 $spacer--large !default;
$newsletter__footer__field--border-radius     : $border-radius 0 0 $border-radius !default;
  • URL: /components/raw/newsletter/_newsletter-variables.scss
  • Filesystem Path: build/components/Organisms/newsletter/_newsletter-variables.scss
  • Size: 3.1 KB
  • Content: 
    @import 'newsletter-variables';

.newsletter {
    display: flex;
    flex-direction: column;
    margin: $newsletter__margin;
    padding: $newsletter__padding;

    @include mq($screen-l) {
        flex-direction: row;
    }

    &__heading {
        display: flex;
        flex-flow: column nowrap;

        @include mq($screen-l) {
            margin: $newsletter__heading-margin\@medium;
        }

        @include mq($screen-xl) {
            margin: $newsletter__heading-margin\@extra-large;
        }
    }

    &__title {
        margin: $newsletter__title-margin;
        font-family: $newsletter__title-font-family;
        font-size: $newsletter__title-font-size;
        font-weight: $newsletter__title-font-weight;
        line-height: $newsletter__title-line-height;
        color: $newsletter__title-color;
    }

    &__subtitle {
        color: $newsletter__subtitle-color;
        font-family: $newsletter__subtitle-font-family;
    }

    &__controls {
        display: flex;
        margin: $newsletter__controls-margin;

        @include mq($screen-l) {
            margin: $newsletter__controls-margin\@medium;
        }

        @include mq($screen-xl) {
            max-width: 460px;
        }
    }

    &__button {
        min-width: $newsletter__button-min-width;
        padding: $newsletter__button-padding;
        align-self: flex-start;
        border-radius: 0 5px 5px 0;
    }

    &__input {
        flex-grow: 1;
        margin: 0;
        input {
            border-radius: 5px 0 0 5px;
        }
    }

    &__field {
        border-right: none;
    }

    &__agreements {
        max-width: $newsletter__agreements-max-width;
        margin: $newsletter__agreements-margin;
    }

    &__form {
        flex-grow: 1;
        div.required .checkbox__label > span:first-of-type:after {
            content: ' *';
            color: $black;
        }
        svg.checkbox__icon.checkbox__icon--unchecked {
            border: 0;
            border-radius: 6px;
            background: #fff;
        }
    }

    .checkbox {
        &__label {
            padding: $newsletter__checkbox-label-padding;
            color: $newsletter__checkbox-label-color;
            font-family: $newsletter__checkbox-label-font-family;
            font-size: $newsletter__checkbox-label-font-size;
            line-height: $newsletter__checkbox-label-line-height;

            &:after {
                background-color: $newsletter__checkbox-before-background;
            }

            a {
                color: $newsletter__checkbox-label-link-color;
                font-family: $newsletter__checkbox-label-font-family;
                line-height: $newsletter__checkbox-label-line-height;

                &:hover,
                &.focus-visible {
                    color: $newsletter__checkbox-label-link-color--hover;
                }
            }
        }

        &__icon {
            fill: $newsletter__checkbox-icon-fill;
        }

        &__text {
            color: $newsletter__checkbox-text-color;
        }
    }

    .gdpr {
        margin: $newsletter__agreements-margin;
    }
    &__footer {
        background: $newsletter__footer--background;
        &--title,
        &--subtitle,
        &--checkbox a,
        .label {
            color: $newsletter__footer--color;
        }
        label.checkbox__label {
            @include mq($screen-m) {
                padding: $newsletter__footer--label--padding;
            }
        }
        &--form {
            display: flex;
            flex-direction: column;
            @include mq($screen-m) {
                flex-direction: row;
            }
        }
        &--fields {
            width: 100%;
            @include mq($screen-m) {
                width: 70%;
                .newsletter__field {
                    border-radius: $newsletter__footer__field--border-radius;
                }
            }
        }
        &--button {
            align-self: center;
            width: 100%;
            @include mq($screen-m) {
                width: 30%;
            }
            .newsletter__button {
                width: 100%;
            }
        }
    }
    &__content {
        display: flex;
        column-gap: $newsletter__content--column-gap;
        padding: $newsletter__content--padding;
        @include mq($screen-xl) {
            padding: $newsletter__content--padding\@medium;
            column-gap: $newsletter__content--column-gap\@medium;
        }
    }
    &__image {
        display: none;
        @include mq($screen-l) {
            display: block;
        }
    }
}
  • URL: /components/raw/newsletter/_newsletter.scss
  • Filesystem Path: build/components/Organisms/newsletter/_newsletter.scss
  • Size: 4.6 KB

There are no notes for this item.