aleph1.co.uk Git - yaffs-website/blob - web/core/themes/classy/css/components/user.css

   1 /**
   2  * @file
   3  * Theme styling for user module.
   4  */
   5
   6 /* Visual styling for the Password strength indicator */
   7 .password-strength__meter {
   8   margin-top: 0.5em;
   9   background-color: #ebeae4;
  10 }
  11 .password-strength__indicator {
  12   background-color: #77b259;
  13   -webkit-transition: width 0.5s ease-out;
  14   transition: width 0.5s ease-out;
  15 }
  16 .password-strength__indicator.is-weak {
  17   background-color: #e62600;
  18 }
  19 .password-strength__indicator.is-fair {
  20   background-color: #e09600;
  21 }
  22 .password-strength__indicator.is-good {
  23   background-color: #0074bd;
  24 }
  25 .password-strength__indicator.is-strong {
  26   background-color: #77b259;
  27 }
  28
  29 .password-confirm,
  30 .password-field,
  31 .password-strength,
  32 .password-confirm-match {
  33   width: 55%;
  34 }
  35
  36 .password-suggestions {
  37   padding: 0.2em 0.5em;
  38   margin: 0.7em 0;
  39   max-width: 34.7em;
  40   border: 1px solid #b4b4b4;
  41 }
  42 .password-suggestions ul {
  43   margin-bottom: 0;
  44 }
  45
  46 .confirm-parent,
  47 .password-parent {
  48   clear: left; /* LTR */
  49   margin: 0;
  50   max-width: 33em;
  51   overflow: hidden;
  52 }
  53 [dir="rtl"] .confirm-parent,
  54 [dir="rtl"] .password-parent {
  55   clear: right;
  56 }
  57
  58 /* Styling for the status indicator of the passwords match test.  */
  59 .password-confirm .ok {
  60   color: #325e1c;
  61   font-weight: bold;
  62 }
  63 .password-confirm .error {
  64   color: #a51b00;
  65   font-weight: bold;
  66 }