You are here

password.css in Open Social 8.3

#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;
  -webkit-transition: width 0.5s ease-out;
  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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .form-group--password {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
            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 {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            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. -webkit-transition: width 0.5s ease-out;
  21. transition: width 0.5s ease-out;
  22. }
  23. .password-confirm-match {
  24. visibility: hidden;
  25. }
  26. .password-suggestions {
  27. color: #777777;
  28. padding: 0 1em;
  29. font-size: 14px;
  30. }
  31. .password-suggestions ul {
  32. margin: 1em 0;
  33. padding-left: 30px;
  34. }
  35. .password-suggestions ul li {
  36. list-style: square outside;
  37. line-height: 1.5;
  38. }
  39. .password-confirm .ok,
  40. .password-confirm .error {
  41. font-weight: 500;
  42. }
  43. @media (min-width: 600px) {
  44. .section-password {
  45. display: -webkit-box;
  46. display: -ms-flexbox;
  47. display: flex;
  48. -ms-flex-wrap: wrap;
  49. flex-wrap: wrap;
  50. }
  51. .form-group--password {
  52. -webkit-box-flex: 0;
  53. -ms-flex: 0 0 58.33333%;
  54. flex: 0 0 58.33333%;
  55. max-width: 58.33333%;
  56. }
  57. #edit-pass .password-strength,
  58. #edit-pass div.password-confirm {
  59. position: absolute;
  60. left: 100%;
  61. bottom: 5px;
  62. width: 250px;
  63. padding-bottom: 0.5rem;
  64. padding-left: 1rem;
  65. }
  66. .password-suggestions {
  67. -webkit-box-flex: 100%;
  68. -ms-flex: 100%;
  69. flex: 100%;
  70. }
  71. }