form--password-confirm.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/form--password-confirm.pcss.css
  2. 10 core/themes/claro/css/components/form--password-confirm.pcss.css
  3. 11.x core/themes/claro/css/components/form--password-confirm.pcss.css

Visual styles for the Password widgets.

File

core/themes/claro/css/components/form--password-confirm.pcss.css

View source
  1. /**
  2. * @file
  3. * Visual styles for the Password widgets.
  4. */
  5. @import "../base/variables.pcss.css";
  6. :root {
  7. /* Weak */
  8. --password-strength-bar--weak-bg-color: var(--color-maximumred);
  9. --password-strength-bar--weak-border-color: var(--color-maximumred);
  10. /* Fair */
  11. --password-strength-bar--fair-bg-color: var(--color-sunglow);
  12. --password-strength-bar--fair-border-color: #977405;
  13. /* Good */
  14. --password-strength-bar--good-bg-color: var(--color-lightninggreen);
  15. --password-strength-bar--good-border-color: var(--color-lightninggreen);
  16. /* Strong */
  17. --password-strength-bar--strong-bg-color: var(--color-lightninggreen);
  18. --password-strength-bar--strong-border-color: var(--color-lightninggreen);
  19. }
  20. /**
  21. * Password confirm widget styles.
  22. */
  23. .password-confirm {
  24. max-width: 25rem;
  25. }
  26. .password-confirm__password {
  27. margin-bottom: 0;
  28. }
  29. .password-confirm__confirm {
  30. margin-bottom: 0;
  31. }
  32. .js .password-confirm__confirm {
  33. max-height: 10rem;
  34. transition: max-height var(--speed-transition) ease-in-out, margin var(--speed-transition) ease-in-out;
  35. }
  36. @media screen and (prefers-reduced-motion: reduce) {
  37. .js .password-confirm__confirm {
  38. transition: none;
  39. }
  40. }
  41. /* Password confirm widget states. */
  42. .js .is-initial:not(.form-item--error) .form-item__description {
  43. margin-top: 0;
  44. }
  45. .js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
  46. display: none;
  47. max-height: 0;
  48. margin-top: 0;
  49. }
  50. /**
  51. * Password strength
  52. *
  53. * Description and strength indicator for the main input.
  54. */
  55. .password-strength {
  56. margin-top: var(--progress-bar-spacing-size);
  57. margin-bottom: var(--progress-bar-spacing-size);
  58. }
  59. .password-strength__track {
  60. height: var(--progress-bar-small-size);
  61. margin-top: var(--progress-bar-spacing-size);
  62. margin-bottom: var(--progress-bar-spacing-size);
  63. border: var(--progress-bar-border-size) solid var(--progress-track-border-color);
  64. border-radius: var(--progress-bar-small-size-radius);
  65. background-color: var(--progress-track-bg-color);
  66. }
  67. .password-strength__track::after {
  68. display: table;
  69. clear: both;
  70. content: "";
  71. }
  72. .password-strength__bar {
  73. min-width: var(--progress-bar-small-size);
  74. height: var(--progress-bar-small-size);
  75. margin: calc(var(--progress-bar-border-size) * -1);
  76. transition: var(--progress-bar-transition);
  77. border: var(--progress-bar-border-size) solid transparent;
  78. border-radius: var(--progress-bar-small-size-radius);
  79. background-color: transparent;
  80. }
  81. @media screen and (prefers-reduced-motion: reduce) {
  82. .password-strength__bar {
  83. transition: none;
  84. }
  85. }
  86. @media screen and (-ms-high-contrast: active) {
  87. .password-strength__bar {
  88. background-color: windowText;
  89. }
  90. .is-initial .password-strength__bar {
  91. border-color: transparent;
  92. background-color: transparent;
  93. }
  94. }
  95. .password-strength__title {
  96. overflow: hidden;
  97. margin-top: var(--progress-bar-spacing-size);
  98. margin-bottom: var(--progress-bar-spacing-size);
  99. color: var(--progress-bar-description-color);
  100. font-size: var(--progress-bar-description-font-size);
  101. line-height: var(--space-m);
  102. }
  103. .password-strength__text {
  104. color: var(--progress-bar-label-color);
  105. font-weight: bold;
  106. }
  107. /* Password strength states */
  108. .password-strength__bar.is-weak {
  109. border-color: var(--password-strength-bar--weak-border-color);
  110. background-color: var(--password-strength-bar--weak-bg-color);
  111. }
  112. .password-strength__bar.is-fair {
  113. border-color: var(--password-strength-bar--fair-border-color);
  114. background-color: var(--password-strength-bar--fair-bg-color);
  115. }
  116. .password-strength__bar.is-good {
  117. border-color: var(--password-strength-bar--good-border-color);
  118. background-color: var(--password-strength-bar--good-bg-color);
  119. }
  120. .password-strength__bar.is-strong {
  121. border-color: var(--password-strength-bar--strong-border-color);
  122. background-color: var(--password-strength-bar--strong-bg-color);
  123. }
  124. .is-initial.is-password-empty .password-strength__title {
  125. margin: 0;
  126. line-height: 0;
  127. }
  128. /**
  129. * Password match message.
  130. *
  131. * This is the description-like message on the bottom of the password confirm
  132. * input.
  133. */
  134. .password-match-message {
  135. margin-top: var(--progress-bar-spacing-size);
  136. margin-bottom: var(--progress-bar-spacing-size);
  137. color: var(--progress-bar-description-color);
  138. font-size: var(--progress-bar-description-font-size);
  139. }
  140. .password-match-message__text {
  141. color: var(--progress-bar-label-color);
  142. font-weight: bold;
  143. }
  144. .is-confirm-empty .password-match-message {
  145. visibility: hidden;
  146. }
  147. /**
  148. * Password suggestions.
  149. *
  150. * Tips for improving the password.
  151. */
  152. .password-suggestions {
  153. margin-top: var(--progress-bar-spacing-size);
  154. margin-bottom: var(--space-xs);
  155. padding: var(--space-m);
  156. color: var(--progress-bar-description-color);
  157. border: 1px solid var(--color-lightgray);
  158. border-radius: var(--base-border-radius);
  159. background-color: var(--color-white);
  160. box-shadow: var(--details-box-shadow);
  161. font-size: var(--progress-bar-description-font-size);
  162. }
  163. .password-suggestions__tips {
  164. margin: var(--space-xs) 0 0 var(--space-l); /* LTR */
  165. }
  166. [dir="rtl"] .password-suggestions__tips {
  167. margin-right: var(--space-l);
  168. margin-left: 0;
  169. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.