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

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

+61 −48
Original line number Diff line number Diff line
@@ -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
Original line number Diff line number Diff line
@@ -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);

}