Skip to content
Snippets Groups Projects
Verified Commit f43ee842 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3294005 by Aditya4478, Gauravvvv, Sakthivel M, smustgrave, sasanikolic,... 

Issue #3294005 by Aditya4478, Gauravvvv, Sakthivel M, smustgrave, sasanikolic, lauriii: Refactor Claro's form--password-confirm stylesheet
parent bf01a581
Branches
Tags
27 merge requests!12227Issue #3181946 by jonmcl, mglaman,!54479.5.x SF update,!5014Issue #3071143: Table Render Array Example Is Incorrect,!4868Issue #1428520: Improve menu parent link selection,!4289Issue #1344552 by marcingy, Niklas Fiekas, Ravi.J, aleevas, Eduardo Morales...,!4114Issue #2707291: Disable body-level scrolling when a dialog is open as a modal,!4100Issue #3249600: Add support for PHP 8.1 Enums as allowed values for list_* data types,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2334Issue #3228209: Add hasRole() method to AccountInterface,!2062Issue #3246454: Add weekly granularity to views date sort,!1591Issue #3199697: Add JSON:API Translation experimental module,!1484Exposed filters get values from URL when Ajax is on,!1255Issue #3238922: Refactor (if feasible) uses of the jQuery serialize function to use vanillaJS,!1162Issue #3100350: Unable to save '/' root path alias,!1105Issue #3025039: New non translatable field on translatable content throws error,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!925Issue #2339235: Remove taxonomy hard dependency on node module,!877Issue #2708101: Default value for link text is not saved,!872Draft: Issue #3221319: Race condition when creating menu links and editing content deletes menu links,!844Resolve #3036010 "Updaters",!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493,!485Sets the autocomplete attribute for username/password input field on login form.,!213Issue #2906496: Give Media a menu item under Content,!30Issue #3182188: Updates composer usage to point at ./vendor/bin/composer
Show whitespace changes
Inline Side-by-side
core/themes/claro/css/components/form--password-confirm.css
+ 61
− 48
View file @ f43ee842
......@@ -12,17 +12,17 @@
:root {
/* Weak */
--password-strength-bar--weak-bg-color: var(--color-maximumred);
--password-strength-bar--weak-border-color: var(--color-maximumred);
--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;
--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);
--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-strength-bar-strong-bg-color: var(--color-lightninggreen);
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
}
/**
......@@ -30,15 +30,15 @@
*/
.password-confirm {
max-width: 25rem;
max-inline-size: 25rem;
}
.password-confirm__password {
margin-bottom: 0;
margin-block-end: 0;
}
.password-confirm__confirm {
margin-bottom: 0;
margin-block-end: 0;
}
.js .password-confirm__confirm {
......@@ -55,13 +55,13 @@
/* Password confirm widget states. */
.js .is-initial:not(.form-item--error) .form-item__description {
margin-top: 0;
margin-block-start: 0;
}
.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
display: none;
max-height: 0;
margin-top: 0;
max-block-size: 0;
margin-block-start: 0;
}
/**
......@@ -71,14 +71,12 @@
*/
.password-strength {
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--progress-bar-spacing-size);
margin-block: var(--progress-bar-spacing-size);
}
.password-strength__track {
height: var(--progress-bar-small-size);
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--progress-bar-spacing-size);
margin-block: var(--progress-bar-spacing-size);
border: var(--progress-bar-border-size) solid var(--progress-track-border-color);
border-radius: var(--progress-bar-small-size-radius);
background-color: var(--progress-track-bg-color);
......@@ -90,8 +88,10 @@
content: "";
}
/* Password strength states */
.password-strength__bar {
min-width: var(--progress-bar-small-size);
min-inline-size: var(--progress-bar-small-size);
height: var(--progress-bar-small-size);
margin: calc(var(--progress-bar-border-size) * -1);
transition: var(--progress-bar-transition);
......@@ -100,6 +100,26 @@
background-color: transparent;
}
.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 screen and (prefers-reduced-motion: reduce) {
.password-strength__bar {
transition: none;
......@@ -108,13 +128,17 @@
.password-strength__title {
overflow: hidden;
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--progress-bar-spacing-size);
margin-block: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
line-height: var(--space-m);
}
.is-initial.is-password-empty .password-strength__title {
margin: 0;
line-height: 0;
}
.password-strength__text {
color: var(--progress-bar-label-color);
font-weight: bold;
......@@ -123,23 +147,23 @@
/* 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);
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);
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);
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);
border-color: var(--password-strength-bar-strong-border-color);
background-color: var(--password-strength-bar-strong-bg-color);
}
@media (forced-colors: active) {
......@@ -156,11 +180,6 @@
}
}
.is-initial.is-password-empty .password-strength__title {
margin: 0;
line-height: 0;
}
/**
* Password match message.
*
......@@ -169,21 +188,20 @@
*/
.password-match-message {
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--progress-bar-spacing-size);
margin-block: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
}
.is-confirm-empty .password-match-message {
visibility: hidden;
}
.password-match-message__text {
color: var(--progress-bar-label-color);
font-weight: bold;
}
.is-confirm-empty .password-match-message {
visibility: hidden;
}
/**
* Password suggestions.
*
......@@ -191,8 +209,7 @@
*/
.password-suggestions {
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--space-xs);
margin-block: var(--progress-bar-spacing-size) var(--space-xs);
padding: var(--space-m);
color: var(--progress-bar-description-color);
border: 1px solid var(--color-gray-200);
......@@ -203,10 +220,6 @@
}
.password-suggestions__tips {
margin: var(--space-xs) 0 0 var(--space-l); /* LTR */
}
[dir="rtl"] .password-suggestions__tips {
margin-right: var(--space-l);
margin-left: 0;
margin-block-start: var(--space-xs);
margin-inline-start: var(--space-l);
}
core/themes/claro/css/components/form--password-confirm.pcss.css
+ 73
− 62
View file @ f43ee842
......@@ -5,38 +5,38 @@
:root {
/* Weak */
--password-strength-bar--weak-bg-color: var(--color-maximumred);
--password-strength-bar--weak-border-color: var(--color-maximumred);
--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;
--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);
--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-strength-bar-strong-bg-color: var(--color-lightninggreen);
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
}
/**
* Password confirm widget styles.
*/
.password-confirm {
max-width: 25rem;
max-inline-size: 25rem;
}
.password-confirm__password {
margin-bottom: 0;
margin-block-end: 0;
}
.password-confirm__confirm {
margin-bottom: 0;
}
margin-block-end: 0;
.js .password-confirm__confirm {
@nest .js & {
max-height: 10rem;
transition: max-height var(--speed-transition) ease-in-out, margin var(--speed-transition) ease-in-out;
}
}
@media screen and (prefers-reduced-motion: reduce) {
.js .password-confirm__confirm {
......@@ -46,13 +46,12 @@
/* Password confirm widget states. */
.js .is-initial:not(.form-item--error) .form-item__description {
margin-top: 0;
margin-block-start: 0;
}
.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
display: none;
max-height: 0;
margin-top: 0;
max-block-size: 0;
margin-block-start: 0;
}
/**
......@@ -61,14 +60,12 @@
* Description and strength indicator for the main input.
*/
.password-strength {
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--progress-bar-spacing-size);
margin-block: var(--progress-bar-spacing-size);
}
.password-strength__track {
height: var(--progress-bar-small-size);
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--progress-bar-spacing-size);
margin-block: var(--progress-bar-spacing-size);
border: var(--progress-bar-border-size) solid var(--progress-track-border-color);
border-radius: var(--progress-bar-small-size-radius);
background-color: var(--progress-track-bg-color);
......@@ -80,14 +77,35 @@
content: "";
}
/* Password strength states */
.password-strength__bar {
min-width: var(--progress-bar-small-size);
min-inline-size: var(--progress-bar-small-size);
height: var(--progress-bar-small-size);
margin: calc(var(--progress-bar-border-size) * -1);
transition: var(--progress-bar-transition);
border: var(--progress-bar-border-size) solid transparent;
border-radius: var(--progress-bar-small-size-radius);
background-color: transparent;
&.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 screen and (prefers-reduced-motion: reduce) {
......@@ -98,11 +116,15 @@
.password-strength__title {
overflow: hidden;
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--progress-bar-spacing-size);
margin-block: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
line-height: var(--space-m);
@nest .is-initial.is-password-empty & {
margin: 0;
line-height: 0;
}
}
.password-strength__text {
......@@ -111,24 +133,23 @@
}
/* 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-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);
&.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);
&.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);
}
.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) {
......@@ -147,11 +168,6 @@
}
}
.is-initial.is-password-empty .password-strength__title {
margin: 0;
line-height: 0;
}
/**
* Password match message.
*
......@@ -159,10 +175,13 @@
* input.
*/
.password-match-message {
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--progress-bar-spacing-size);
margin-block: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
@nest .is-confirm-empty & {
visibility: hidden;
}
}
.password-match-message__text {
......@@ -170,18 +189,13 @@
font-weight: bold;
}
.is-confirm-empty .password-match-message {
visibility: hidden;
}
/**
* Password suggestions.
*
* Tips for improving the password.
*/
.password-suggestions {
margin-top: var(--progress-bar-spacing-size);
margin-bottom: var(--space-xs);
margin-block: var(--progress-bar-spacing-size) var(--space-xs);
padding: var(--space-m);
color: var(--progress-bar-description-color);
border: 1px solid var(--color-gray-200);
......@@ -192,9 +206,6 @@
}
.password-suggestions__tips {
margin: var(--space-xs) 0 0 var(--space-l); /* LTR */
}
[dir="rtl"] .password-suggestions__tips {
margin-right: var(--space-l);
margin-left: 0;
margin-block-start: var(--space-xs);
margin-inline-start: var(--space-l);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment