<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"
}
}
$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%;
}
}
}
}
There are no notes for this item.