<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>
<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>
{
  "text": "Password Strength:",
  "strengthIndicatorClass": "password-strong",
  "noPassword": "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.