form--password-confirm.css

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

Visual styles for the Password widgets.

File

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

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

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