cruc components for Magento 2

Account Form: Default 

<div class="account-form">
    <p class="account-form__info">
        If you have an account, sign in with your email address.
    </p>
    <form class="account-form__form">
        <fieldset class="
                fieldset
                account-form__fieldset
                
            ">
            <legend class="account-form__legend--hidden">
                Sign in
            </legend>
            <div class="input margin-bottom-sm">
                <label class="
            label
            input__label
            
        " for="email">
        Email *
    </label>
                <input class="input__field " id="email" name="email" type="email" placeholder="" aria-required="true" autocomplete="email" required>
            </div>

            <div class="input margin-bottom-m">
                <label class="
            label
            input__label
            
        " for="password">
        Password *
    </label>
                <input class="input__field " id="password" name="password" type="password" placeholder="" aria-required="true" autocomplete="off" required>
            </div>

        </fieldset>
        <div class="account-form__actions">
            <button class="button account-form__button">
    Sign in
</button>

            <a class="link account-form__forgot-password" href="" title="Forgot Your Password">
    Forgot Your Password
</a>

        </div>
        <div class="account-form__validation-tips">
            * Required Fields
        </div>
    </form>
</div>
 
<div class="account-form">
    <p class="account-form__info">
        {{{ signInInfo }}}
    </p>
    <form class="account-form__form">
        <fieldset
            class="
                fieldset
                account-form__fieldset
                {{ signInSection.fieldset.class }}
            "
            {{{ signInSection.fieldset.attributes }}}
        >
            <legend
                class="{{ signInSection.legend.class }}"
                {{{ signInSection.legend.attributes }}}
            >
                {{ signInSection.legend.text }}
            </legend>
            {{ render '@input' email }}
            {{ render '@input' password }}
        </fieldset>
        <div class="account-form__actions">
            {{ render '@button' loginButton }}
            {{ render '@link' forgotPassword }}
        </div>
        <div class="account-form__validation-tips">
            {{{ validationTips }}}
        </div>
    </form>
</div>
 
{
  "signInInfo": "If you have an account, sign in with your email address.",
  "signInSection": {
    "fieldset": {
      "attributes": "",
      "class": ""
    },
    "legend": {
      "class": "account-form__legend--hidden",
      "text": "Sign in"
    }
  },
  "email": {
    "attributes": "",
    "class": "margin-bottom-sm",
    "label": {
      "attributes": "",
      "text": "Email *",
      "hidden": false
    },
    "field": {
      "attributes": "aria-required=\"true\" autocomplete=\"email\" required",
      "class": "",
      "id": "email",
      "name": "email",
      "placeholder": "",
      "type": "email"
    }
  },
  "passwordWrapClass": "margin-bottom-sm",
  "password": {
    "attributes": "",
    "class": "margin-bottom-m",
    "label": {
      "attributes": "",
      "text": "Password *",
      "hidden": false
    },
    "field": {
      "attributes": "aria-required=\"true\" autocomplete=\"off\" required",
      "class": "",
      "id": "password",
      "name": "password",
      "placeholder": "",
      "type": "password"
    }
  },
  "loginButton": {
    "class": "account-form__button",
    "tag": "button",
    "text": "Sign in"
  },
  "forgotPassword": {
    "text": "Forgot Your Password",
    "class": "account-form__forgot-password"
  },
  "validationTips": "* Required Fields"
}
  • Content: 
    $account-form__padding                              : $spacer 0 0 !default;
$account-form__actions-margin                       : $spacer--medium 0 !default;
$account-form__actions-width                        : 100% !default;
$account-form__actions-width\@medium                : auto !default;

$account-form__button-min-width                     : 208px !default;

$account-form__form-margin                          : 0 !default;

$account-form__fieldset-max-width\@medium           : 432px !default;
$account-form__fieldset-width                       : 100% !default;
$account-form__fieldset-margin                      : 0 0 $spacer--semi-large !default;

$account-form__legend-font-family                   : $font-family-base !default;
$account-form__legend-font-size                     : $font-size-large !default;
$account-form__legend-font-weight                   : $font-weight-bold !default;
$account-form__legend-margin                        : 0 !default;
$account-form__legend-padding                       : 0 0 $spacer--medium 0 !default;
$account-form__legend-width                         : 100% !default;
$account-form__legend-text-transform                : none !default;

$account-form__forgot-password-margin               : $spacer--medium 0 0 0 !default;
$account-form__forgot-password-color                : $gray-darker !default;
$account-form__forgot-password-font-weight          : $font-weight-bold !default;
$account-form__forgot-password-text-decoration      : none !default;
$account-form__forgot-password-text-decoration-hover: underline !default;
$account-form__forgot-password-line-height          : 48px !default;

$account-form__info-width                           : 656px !default;
$account-form__info-margin                          : $spacer--extra-large auto !default;
$account-form__info-font-size                       : $font-size-medium !default;

$account-form__validation-tips-margin               : 0 0 $spacer--semi-medium !default;
$account-form__validation-tips-font-size            : $font-size-medium !default;
  • URL: /components/raw/account-form/_account-form-variables.scss
  • Filesystem Path: build/components/Organisms/account-form/_account-form-variables.scss
  • Size: 2.1 KB
  • Content: 
    @import 'account-form-variables';

//sass-lint: disable no-ids
.account-form {
    padding: $account-form__padding;

    &__info {
        max-width: $account-form__info-width;
        margin: $account-form__info-margin;
        font-size: $account-form__info-font-size;
        text-align: center;
    }

    &__form {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: $account-form__form-margin;
    }

    &__fieldset {
        width: $account-form__fieldset-width;
        margin: $account-form__fieldset-margin;

        @include mq($screen-m) {
            max-width: $account-form__fieldset-max-width\@medium;
        }
    }

    &__legend {
        margin: $account-form__legend-margin;
        padding: $account-form__legend-padding;
        width: $account-form__legend-width;
        font-family: $account-form__legend-font-family;
        font-size: $account-form__legend-font-size;
        font-weight: $account-form__legend-font-weight;
        text-transform: $account-form__legend-text-transform;
        text-align: center;

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

    &__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: $account-form__actions-width;
        margin: $account-form__actions-margin;

        @include mq($screen-m) {
            width: $account-form__actions-width\@medium;
        }
    }

    &__button {
        width: 100%;
        min-width: $account-form__button-min-width;
    }

    &__forgot-password,
    &__link {
        margin: $account-form__forgot-password-margin;
        color: $account-form__forgot-password-color;
        font-weight: $account-form__forgot-password-font-weight;
        text-decoration: $account-form__forgot-password-text-decoration;
        line-height: $account-form__forgot-password-line-height;

        &.focus-visible,
        &:hover {
            text-decoration: $account-form__forgot-password-text-decoration-hover;
        }
    }

    &__validation-tips {
        margin: $account-form__validation-tips-margin;
        font-size: $account-form__validation-tips-font-size;
    }

    .input {
        &.customer-name-prefix {
            .form__fieldset {
                display: flex;
                justify-content: space-between;
                border: 0;
                padding: 0;

                label.input__label[for="firstname"] {
                    display: none;

                    & ~ .form__fieldset .input__label[for="firstname"] {
                        display: block;
                    }
                }
            }
        }
        &.required.customer-name-prefix {
            margin: 0;
        }
    }
}
.customer-account-create {
    .form-create-account {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: $account-form__form-margin;
        @include mq($screen-l) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: stretch;
            margin: auto;
            max-width: 900px;
        }
        .account-form__fieldset {
            display: flex;
            flex-wrap: wrap;
            & ~ fieldset.fieldset.account-form__fieldset {
                display: block;
            }
            .field.checkbox,
            .field.choice,
            .field.taxvat,
            .field.company,
            .field.date.field-dob,
            .input--datepicker,
            .input--password,
            .account-form__input {
                width: 100%;
            }
            input#firstname {
                margin-right: 12px;
            }
            input#lastname {
                margin-left: 12px;
            }
        }
    }
    .checkbox {
        display: flex;
        align-items: center;
    }
}
//sass-lint: enable no-ids
  • URL: /components/raw/account-form/_account-form.scss
  • Filesystem Path: build/components/Organisms/account-form/_account-form.scss
  • Size: 4 KB

There are no notes for this item.