Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3353641 by Gauravvvv, Santosh_Verma, smustgrave, nod_, bnjmnm, lauriii, quietone: make use of component-level CSS custom properties in Claro's form--password-confirm stylesheet

merge-requests/5495/merge
Lauri Eskola 2023-11-30 17:18:13 +02:00
parent b173b8394d
commit c9453274e5
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
2 changed files with 26 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
core/themes/claro/css/components/form--password-confirm.css
View File

@ -10,21 +10,6 @@
* Visual styles for the Password widgets. * Visual styles for the Password widgets.
*/ */
:root {
/* Weak */
--password-strength-bar-weak-bg-color: var(--color-maximumred);
--password-strength-bar-weak-border-color: var(--color-maximumred);
/* Fair */
--password-strength-bar-fair-bg-color: var(--color-sunglow);
--password-strength-bar-fair-border-color: #977405;
/* Good */
--password-strength-bar-good-bg-color: var(--color-lightninggreen);
--password-strength-bar-good-border-color: var(--color-lightninggreen);
/* Strong */
--password-strength-bar-strong-bg-color: var(--color-lightninggreen);
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
}
/** /**
* Password confirm widget styles. * Password confirm widget styles.
*/ */
@ -77,6 +62,19 @@
*/ */
.password-strength { .password-strength {
/* Weak */
--password-strength-bar-weak-bg-color: var(--color-maximumred);
--password-strength-bar-weak-border-color: var(--color-maximumred);
/* Fair */
--password-strength-bar-fair-bg-color: var(--color-sunglow);
--password-strength-bar-fair-border-color: #977405;
/* Good */
--password-strength-bar-good-bg-color: var(--color-lightninggreen);
--password-strength-bar-good-border-color: var(--color-lightninggreen);
/* Strong */
--password-strength-bar-strong-bg-color: var(--color-lightninggreen);
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
margin-block: var(--progress-bar-spacing-size); margin-block: var(--progress-bar-spacing-size);
} }
@ -150,28 +148,6 @@
font-weight: bold; font-weight: bold;
} }
/* Password strength states */
.password-strength__bar.is-weak {
border-color: var(--password-strength-bar-weak-border-color);
background-color: var(--password-strength-bar-weak-bg-color);
}
.password-strength__bar.is-fair {
border-color: var(--password-strength-bar-fair-border-color);
background-color: var(--password-strength-bar-fair-bg-color);
}
.password-strength__bar.is-good {
border-color: var(--password-strength-bar-good-border-color);
background-color: var(--password-strength-bar-good-bg-color);
}
.password-strength__bar.is-strong {
border-color: var(--password-strength-bar-strong-border-color);
background-color: var(--password-strength-bar-strong-bg-color);
}
@media (forced-colors: active) { @media (forced-colors: active) {
.password-strength__bar.is-weak, .password-strength__bar.is-weak,
.password-strength__bar.is-fair, .password-strength__bar.is-fair,

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

@ -3,21 +3,6 @@
* Visual styles for the Password widgets. * Visual styles for the Password widgets.
*/ */
:root {
/* Weak */
--password-strength-bar-weak-bg-color: var(--color-maximumred);
--password-strength-bar-weak-border-color: var(--color-maximumred);
/* Fair */
--password-strength-bar-fair-bg-color: var(--color-sunglow);
--password-strength-bar-fair-border-color: #977405;
/* Good */
--password-strength-bar-good-bg-color: var(--color-lightninggreen);
--password-strength-bar-good-border-color: var(--color-lightninggreen);
/* Strong */
--password-strength-bar-strong-bg-color: var(--color-lightninggreen);
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
}
/** /**
* Password confirm widget styles. * Password confirm widget styles.
*/ */
@ -64,6 +49,19 @@
* Description and strength indicator for the main input. * Description and strength indicator for the main input.
*/ */
.password-strength { .password-strength {
/* Weak */
--password-strength-bar-weak-bg-color: var(--color-maximumred);
--password-strength-bar-weak-border-color: var(--color-maximumred);
/* Fair */
--password-strength-bar-fair-bg-color: var(--color-sunglow);
--password-strength-bar-fair-border-color: #977405;
/* Good */
--password-strength-bar-good-bg-color: var(--color-lightninggreen);
--password-strength-bar-good-border-color: var(--color-lightninggreen);
/* Strong */
--password-strength-bar-strong-bg-color: var(--color-lightninggreen);
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
margin-block: var(--progress-bar-spacing-size); margin-block: var(--progress-bar-spacing-size);
} }
@ -136,26 +134,6 @@
font-weight: bold; font-weight: bold;
} }
/* Password strength states */
.password-strength__bar {
&.is-weak {
border-color: var(--password-strength-bar-weak-border-color);
background-color: var(--password-strength-bar-weak-bg-color);
}
&.is-fair {
border-color: var(--password-strength-bar-fair-border-color);
background-color: var(--password-strength-bar-fair-bg-color);
}
&.is-good {
border-color: var(--password-strength-bar-good-border-color);
background-color: var(--password-strength-bar-good-bg-color);
}
&.is-strong {
border-color: var(--password-strength-bar-strong-border-color);
background-color: var(--password-strength-bar-strong-bg-color);
}
}
@media (forced-colors: active) { @media (forced-colors: active) {
.password-strength__bar { .password-strength__bar {
&.is-weak, &.is-weak,