cruc components for Magento 2

Password Strength 

<!-- Default -->
<div class="password-strength ">
    <div class="password-strength__handle password-none">
        Password Strength:
        <span class="password-strength__indicator" aria-live="polite">
            No Password
        </span>
    </div>
</div>


<!-- Week -->
<div class="password-strength ">
    <div class="password-strength__handle password-weak">
        Password Strength:
        <span class="password-strength__indicator" aria-live="polite">
            Weak
        </span>
    </div>
</div>


<!-- Medium -->
<div class="password-strength ">
    <div class="password-strength__handle password-medium">
        Password Strength:
        <span class="password-strength__indicator" aria-live="polite">
            Medium
        </span>
    </div>
</div>


<!-- Strong -->
<div class="password-strength ">
    <div class="password-strength__handle password-strong">
        Password Strength:
        <span class="password-strength__indicator" aria-live="polite">
            Strong
        </span>
    </div>
</div>


<!-- Very Strong -->
<div class="password-strength ">
    <div class="password-strength__handle password-very-strong">
        Password Strength:
        <span class="password-strength__indicator" aria-live="polite">
            Very Strong
        </span>
    </div>
</div>


<div class="password-strength {{ class }}">
    <div class="password-strength__handle {{ strengthIndicatorClass }}">
        {{ text }}
        <span
            class="password-strength__indicator"
            aria-live="polite"
        >
            {{ noPassword }}
        </span>
    </div>
</div>
 
/* Default */
{
  "text": "Password Strength:",
  "strengthIndicatorClass": "password-none",
  "noPassword": "No Password"
}


/* Week */
{
  "text": "Password Strength:",
  "strengthIndicatorClass": "password-weak",
  "noPassword": "Weak"
}


/* Medium */
{
  "text": "Password Strength:",
  "strengthIndicatorClass": "password-medium",
  "noPassword": "Medium"
}


/* Strong */
{
  "text": "Password Strength:",
  "strengthIndicatorClass": "password-strong",
  "noPassword": "Strong"
}


/* Very Strong */
{
  "text": "Password Strength:",
  "strengthIndicatorClass": "password-very-strong",
  "noPassword": "Very Strong"
}
  • Content: 
    $password-strength__font-size                        : $font-size-base !default;
$password-strength__color                            : $color-secondary !default;
$password-strength__font-weight                      : $font-weight-normal !default;

$password-strength__indicator-width                  : 128px !default;
$password-strength__indicator-margin                 : 0 0 0 $spacer !default;
$password-strength__indicator-padding                : 3px 0 !default;
$password-strength__indicator-border                 : 1px solid $gray-light !default;
$password-strength__indicator-border-radius          : 32px !default;
$password-strength__indicator-color                  : $color-primary !default;
$password-strength__indicator-text-align             : center !default;
$password-strength__transition                       : $transition-base !default;

$password-strength__indicator-background--none       : $gray-light !default;
$password-strength__indicator-color--none            : $color-primary !default;
$password-strength__indicator-width--none            : 100% !default;
$password-strength__indicator-background--weak       : $red !default;
$password-strength__indicator-color--weak            : $white !default;
$password-strength__indicator-width--weak            : 100% !default;
$password-strength__indicator-background--medium     : $color-secondary !default;
$password-strength__indicator-color--medium          : $white !default;
$password-strength__indicator-width--medium          : 100% !default;
$password-strength__indicator-background--strong     : $color-info !default;
$password-strength__indicator-color--strong          : $white !default;
$password-strength__indicator-width--strong          : 100% !default;
$password-strength__indicator-background--very-strong: $color-success !default;
$password-strength__indicator-color--very-strong     : $color-primary !default;
$password-strength__indicator-width--very-strong     : 100% !default;
  • URL: /components/raw/password-strength/_password-strength-variables.scss
  • Filesystem Path: build/components/Molecules/password-strength/_password-strength-variables.scss
  • Size: 2 KB
  • Content: 
    @import 'password-strength-variables';

.password-strength {
    color: $password-strength__color;
    font-size: $password-strength__font-size;
    font-weight: $password-strength__font-weight;

    &__handle {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    &__indicator {
        position: relative;
        display: inline-block;
        min-width: $password-strength__indicator-width;
        margin: $password-strength__indicator-margin;
        padding: $password-strength__indicator-padding;
        border: $password-strength__indicator-border;
        border-radius: $password-strength__indicator-border-radius;
        background-color: transparent;
        color: $password-strength__indicator-color;
        text-align: $password-strength__indicator-text-align;
        overflow: hidden;

        &:before {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            z-index: -1;
            height: 100%;
            border-top-left-radius: $password-strength__indicator-border-radius;
            border-bottom-left-radius: $password-strength__indicator-border-radius;
            transition: $password-strength__transition;

        }
        .password-none & {
            color: $password-strength__indicator-color--none;
            &:before {
                width: $password-strength__indicator-width--none;
                background-color: $password-strength__indicator-background--none;
            }
        }

        .password-weak & {
            color: $password-strength__indicator-color--weak;
            &:before {
                width: $password-strength__indicator-width--weak;
                background-color: $password-strength__indicator-background--weak;
            }
        }

        .password-medium & {
            color: $password-strength__indicator-color--medium;
            &:before {
                width: $password-strength__indicator-width--medium;
                background-color: $password-strength__indicator-background--medium;
            }
        }

        .password-strong & {
            color: $password-strength__indicator-color--strong;
            &:before {
                width: $password-strength__indicator-width--strong;
                background-color: $password-strength__indicator-background--strong;
            }
        }

        .password-very-strong & {
            color: $password-strength__indicator-color--very-strong;
            &:before {
                width: $password-strength__indicator-width--very-strong;
                background-color: $password-strength__indicator-background--very-strong;
            }
        }
    }
}
  • URL: /components/raw/password-strength/_password-strength.scss
  • Filesystem Path: build/components/Molecules/password-strength/_password-strength.scss
  • Size: 2.7 KB

There are no notes for this item.