Chris@0: /**
Chris@0:  * @file
Chris@0:  * Theme styling for user module.
Chris@0:  */
Chris@0: 
Chris@0: /* Visual styling for the Password strength indicator */
Chris@0: .password-strength__meter {
Chris@0:   margin-top: 0.5em;
Chris@0:   background-color: #ebeae4;
Chris@0: }
Chris@0: .password-strength__indicator {
Chris@0:   -webkit-transition: width 0.5s ease-out;
Chris@0:   transition: width 0.5s ease-out;
Chris@18:   background-color: #77b259;
Chris@0: }
Chris@0: .password-strength__indicator.is-weak {
Chris@0:   background-color: #e62600;
Chris@0: }
Chris@0: .password-strength__indicator.is-fair {
Chris@0:   background-color: #e09600;
Chris@0: }
Chris@0: .password-strength__indicator.is-good {
Chris@0:   background-color: #0074bd;
Chris@0: }
Chris@0: .password-strength__indicator.is-strong {
Chris@0:   background-color: #77b259;
Chris@0: }
Chris@0: 
Chris@0: .password-confirm,
Chris@0: .password-field,
Chris@0: .password-strength,
Chris@0: .password-confirm-match {
Chris@0:   width: 55%;
Chris@0: }
Chris@0: 
Chris@0: .password-suggestions {
Chris@18:   max-width: 34.7em;
Chris@18:   margin: 0.7em 0;
Chris@0:   padding: 0.2em 0.5em;
Chris@0:   border: 1px solid #b4b4b4;
Chris@0: }
Chris@0: .password-suggestions ul {
Chris@0:   margin-bottom: 0;
Chris@0: }
Chris@0: 
Chris@0: .confirm-parent,
Chris@0: .password-parent {
Chris@0:   clear: left; /* LTR */
Chris@18:   overflow: hidden;
Chris@18:   max-width: 33em;
Chris@0:   margin: 0;
Chris@0: }
Chris@0: [dir="rtl"] .confirm-parent,
Chris@0: [dir="rtl"] .password-parent {
Chris@0:   clear: right;
Chris@0: }
Chris@0: 
Chris@0: /* Styling for the status indicator of the passwords match test.  */
Chris@0: .password-confirm .ok {
Chris@0:   color: #325e1c;
Chris@0:   font-weight: bold;
Chris@0: }
Chris@0: .password-confirm .error {
Chris@0:   color: #a51b00;
Chris@0:   font-weight: bold;
Chris@0: }