app/components/password_strength_component.scss
@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);
}