Kistenkoning components for Magento 2

Shipping Address 

<li id="shipping" class="checkout-shipping-address shipping-address">
    <h2 class="step-title heading shipping-address__label" id="step-title-shipping" translate="'Shipping Address'" data-role="title">
        Shipping Address
    </h2>
    <form class="
            form
            form-login
            shipping-address__form-login
        " aria-labelledby="step-title-shipping">
        <fieldset id="customer-email-fieldset" class="fieldset">
            <div class="field input required">
                <label class="label input__label" for="customer-email">
                    <span>
                        Email Address
                    </span>
                </label>

                <div class="control _with-tooltip">
                    <input class="
                            input-text
                            input__field
                            valid
                        " type="email" name="username" id="customer-email">
                    <span class="note" style="display: none;">
                        <span>

                        </span>
                    </span>

                    <div class="field-tooltip toggle">
                        <span class="action-help" tabindex="0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
                            <svg class="icon " role="img">
                                <use xlink:href="/images/icons-sprite.svg#question-mark"></use>
                            </svg>

                        </span>
                    </div>
                </div>
            </div>

            <!--Hidden fields -->
            <fieldset class="fieldset hidden-fields" style="display: block;">
                <div class="field input">
                    <label class="label input__label" for="customer-password">
                        <span>
                            Password
                        </span>
                    </label>
                    <div class="control">
                        <input class="input-text input__field" type="password" name="password" id="customer-password" autocomplete="off">
                        <span class="note customer-note">
                            You already have an account with us. Sign in or continue as guest.
                        </span>
                    </div>
                </div>
                <div class="login-buttons shipping-address__login-buttons">
                    <button class="button action login primary shipping-address__btn-login" type="button" aria-label="button">
                        Login
                    </button>

                    <a class="button action remind shipping-address__btn-remind">
                        Forgot Your Password?
                    </a>

                </div>
            </fieldset>
        </fieldset>
    </form>
</li>
 
<li
    id="shipping"
    class="checkout-shipping-address shipping-address"
>
    <h2
        class="step-title heading shipping-address__label"
        id="step-title-shipping"
        translate="'Shipping Address'"
        data-role="title"
    >
        {{ title }}
    </h2>
    <form
        class="
            form
            form-login
            shipping-address__form-login
        "
        aria-labelledby="step-title-shipping"
    >
        <fieldset
            id="customer-email-fieldset"
            class="fieldset"
        >
            <div class="field input required">
                <label
                    class="label input__label"
                    for="customer-email"
                >
                    <span>
                        {{ labels.mail }}
                    </span>
                </label>

                <div class="control _with-tooltip">
                    <input
                        class="
                            input-text
                            input__field
                            valid
                        "
                        type="email"
                        name="username"
                        id="customer-email"
                    >
                    <span class="note" style="display: none;">
                        <span>
                            {{ notes.account }}
                        </span>
                    </span>

                    <div class="field-tooltip toggle">
                        <span
                            class="action-help"
                            tabindex="0"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                            role="button"
                        >
                            {{ render '@icon' questionIcon }}
                        </span>
                    </div>
                </div>
            </div>

            <!--Hidden fields -->
            <fieldset
                class="fieldset hidden-fields"
                style="display: block;"
            >
                <div class="field input">
                    <label
                        class="label input__label"
                        for="customer-password"
                    >
                        <span>
                            {{ labels.password }}
                        </span>
                    </label>
                    <div class="control">
                        <input
                            class="input-text input__field"
                            type="password"
                            name="password"
                            id="customer-password"
                            autocomplete="off"
                        >
                        <span class="note customer-note">
                            {{ notes.customer }}
                        </span>
                    </div>
                </div>
                <div class="login-buttons shipping-address__login-buttons">
                    {{ render '@button' loginBtn }}
                    {{ render '@button' forgotBtn }}
                </div>
            </fieldset>
        </fieldset>
    </form>
</li>
 
{
  "title": "Shipping Address",
  "labels": {
    "mail": "Email Address",
    "password": "Password"
  },
  "notes": {
    "customer": "You already have an account with us. Sign in or continue as guest.",
    "accounts": "You can create an account after checkout."
  },
  "loginBtn": {
    "tag": "button",
    "class": "action login primary shipping-address__btn-login",
    "attributes": "type=\"button\" aria-label=\"button\"",
    "text": "Login"
  },
  "forgotBtn": {
    "tag": "a",
    "class": "action remind shipping-address__btn-remind",
    "text": "Forgot Your Password?"
  },
  "questionIcon": {
    "id": "question-mark"
  }
}
  • Content: 
    $shipping-address__padding                         : 0 0 $spacer--extra-large !default;
$shipping-address__form-login-border-bottom        : $border-base !default;
$shipping-address__form-login-padding              : 0 0 $spacer--extra-large !default;
$shipping-address__form-shipping-padding           : $spacer--extra-large 0 0 !default;
$shipping-address__btn-login-width                 : calc(55% - #{$spacer}) !default;
$shipping-address__btn-login-margin                : 0 0 $spacer 0 !default;
$shipping-address__btn-login-margin\@medium        : 0 $spacer 0 0 !default;
$shipping-address__btn-remind-width                : 45% !default;

.shipping-address {
    padding: $shipping-address__padding;

    &__label {
        @include visually-hidden();
    }

    &__form-login {
        border-bottom: $shipping-address__form-login-border-bottom;
        padding: $shipping-address__form-login-padding;
    }

    &__form-shipping {
        padding: $shipping-address__form-shipping-padding;
    }

    &__login-buttons {
        display: flex;
        flex-flow: column nowrap;
        @include mq($screen-m) {
            flex-direction: row;
        }
    }

    &__btn-login {
        margin: $shipping-address__btn-login-margin;
        @include mq($screen-m) {
            flex-basis: $shipping-address__btn-login-width;
            max-width: $shipping-address__btn-login-width;
            margin: $shipping-address__btn-login-margin\@medium;
        }
    }

    &__btn-remind {
        &.action.remind {
            padding: 0 $spacer;
            @include mq($screen-m) {
                max-width: $shipping-address__btn-remind-width;
                flex-basis: $shipping-address__btn-remind-width;
            }
        }
    }
}

.actions-toolbar {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    margin-left: 0;

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

    .primary {
        display: flex;
        flex-flow: column nowrap;
        width: 100%;

        @include mq($screen-m) {
            justify-content: space-between;
            flex-direction: row;
        }

        .button {
            width: 100%;
            justify-content: center;
            @include mq($screen-m) {
                max-width: 48%;
            }
        }
    }
}
  • URL: /components/raw/shipping-address/_shipping-address.scss
  • Filesystem Path: build/components/Organisms/checkout/shipping-address/_shipping-address.scss
  • Size: 2.3 KB

There are no notes for this item.