<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>
<div class="password-strength {{ class }}">
    <div class="password-strength__handle {{ strengthIndicatorClass }}">
        {{ text }}
        <span
            class="password-strength__indicator"
            aria-live="polite"
        >
            {{ noPassword }}
        </span>
    </div>
</div>
{
  "text": "Password Strength:",
  "strengthIndicatorClass": "password-weak",
  "noPassword": "Weak"
}
  • 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.