Vechtsport Online Components for Magento 2

Password Strength 

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


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


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


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


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


<div class="password-strength {{ class }}">
    <div
        class="{{ strengthIndicatorClass }}"
        data-role="password-strength-meter"
    >
        <div class="password-strength__handle">
            {{ text }}
            <span
                class="password-strength__indicator"
                data-role="password-strength-meter-label"
                aria-live="polite"
            >
                {{ noPassword }}
            </span>
        </div>
    </divclas>
</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__margin                           : $spacer--medium 0 0 !default;
$password-strength__font-size                        : $font-size-small !default;
$password-strength__color                            : $gray !default;

$password-strength__indicator-width                  : 128px !default;
$password-strength__indicator-margin                 : 0 0 0 $spacer !default;
$password-strength__indicator-padding                : 4px 0 !default;
$password-strength__indicator-border-radius          : 32px !default;
$password-strength__indicator-font-size              : $font-size-base !default;

$password-strength__indicator-background--none       : $gray-lighter !default;
$password-strength__indicator-color--none            : $gray-darker !default;
$password-strength__indicator-background--weak       : $red !default;
$password-strength__indicator-color--weak            : $white !default;
$password-strength__indicator-background--medium     : $gray !default;
$password-strength__indicator-color--medium          : $white !default;
$password-strength__indicator-background--strong     : $blue !default;
$password-strength__indicator-color--strong          : $white !default;
$password-strength__indicator-background--very-strong: $green !default;
$password-strength__indicator-color--very-strong     : $gray-darker !default;

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

    &__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-radius: $password-strength__indicator-border-radius;
        background-color: transparent;
        font-size: $password-strength__indicator-font-size;
        text-align: center;
        overflow: hidden;

        &:before {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            z-index: -1;
            height: 100%;
            width: 100%;
        }

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

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

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

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

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

There are no notes for this item.