Alpaca 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                : uppercase !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';

.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;
    }
}
  • URL: /components/raw/account-form/_account-form.scss
  • Filesystem Path: build/components/Organisms/account-form/_account-form.scss
  • Size: 2.2 KB

No notes defined.