form--password-confirm.pcss.css

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

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