18F/identity-idp

View on GitHub
app/components/password_strength_component.scss

Summary

Maintainability
Test Coverage
@use 'uswds-core' as *;

.password-strength__meter {
  display: flex;
  margin-top: units(1);
  margin-bottom: units(0.5);
}

.password-strength__meter-bar {
  flex-basis: 25%;
  background-color: color('base-lighter');
  border-radius: 2px;
  height: units(1);

  & + & {
    margin-left: units(1);
  }

  lg-password-strength[score='1'] &:nth-child(-n + 1) {
    background-color: color('error');
  }

  lg-password-strength[score='2'] &:nth-child(-n + 2) {
    background-color: color('warning');
  }

  lg-password-strength[score='3'] &:nth-child(-n + 3) {
    background-color: color('success-light');
  }

  lg-password-strength[score='4'] &:nth-child(-n + 4) {
    background-color: color('success');
  }
}

.password-strength__strength {
  @include u-text(bold);
}

.password-strength__feedback {
  @include u-text(italic);
}