You are here

password.css in Open Social 8.9

#edit-pass .password-strength,
#edit-pass div.password-confirm {
  margin-top: 1em;
  color: #8d8d8d;
  font-size: 80%;
  padding-bottom: 1rem;
  position: relative;
  max-width: 23rem;
}

.password-strength__meter {
  height: 3px;
  width: 100%;
  position: absolute;
  margin-top: 2em;
  background-color: #adadad;
}

.password-strength__indicator {
  height: 100%;
  width: 0;
  transition: width 0.5s ease-out;
}

.password-confirm-match {
  visibility: hidden;
}

.password-suggestions {
  color: #777777;
  padding: 0 1em;
  font-size: 14px;
}

.password-suggestions ul {
  margin: 1em 0;
  padding-left: 30px;
}

.password-suggestions ul li {
  list-style: square outside;
  line-height: 1.5;
}

.password-confirm .ok,
.password-confirm .error {
  font-weight: 500;
}

@media (min-width: 600px) {
  .section-password {
    display: flex;
    flex-wrap: wrap;
  }
  .form-group--password {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  #edit-pass .password-strength,
  #edit-pass div.password-confirm {
    position: absolute;
    left: 100%;
    bottom: 5px;
    width: 250px;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
  }
  .password-suggestions {
    flex: 100%;
  }
}

File

themes/socialbase/assets/css/password.css
View source
  1. #edit-pass .password-strength,
  2. #edit-pass div.password-confirm {
  3. margin-top: 1em;
  4. color: #8d8d8d;
  5. font-size: 80%;
  6. padding-bottom: 1rem;
  7. position: relative;
  8. max-width: 23rem;
  9. }
  10. .password-strength__meter {
  11. height: 3px;
  12. width: 100%;
  13. position: absolute;
  14. margin-top: 2em;
  15. background-color: #adadad;
  16. }
  17. .password-strength__indicator {
  18. height: 100%;
  19. width: 0;
  20. transition: width 0.5s ease-out;
  21. }
  22. .password-confirm-match {
  23. visibility: hidden;
  24. }
  25. .password-suggestions {
  26. color: #777777;
  27. padding: 0 1em;
  28. font-size: 14px;
  29. }
  30. .password-suggestions ul {
  31. margin: 1em 0;
  32. padding-left: 30px;
  33. }
  34. .password-suggestions ul li {
  35. list-style: square outside;
  36. line-height: 1.5;
  37. }
  38. .password-confirm .ok,
  39. .password-confirm .error {
  40. font-weight: 500;
  41. }
  42. @media (min-width: 600px) {
  43. .section-password {
  44. display: flex;
  45. flex-wrap: wrap;
  46. }
  47. .form-group--password {
  48. flex: 0 0 58.33333%;
  49. max-width: 58.33333%;
  50. }
  51. #edit-pass .password-strength,
  52. #edit-pass div.password-confirm {
  53. position: absolute;
  54. left: 100%;
  55. bottom: 5px;
  56. width: 250px;
  57. padding-bottom: 0.5rem;
  58. padding-left: 1rem;
  59. }
  60. .password-suggestions {
  61. flex: 100%;
  62. }
  63. }