Update login form style and a11y

This commit is contained in:
Timothée Goguely 2025-05-07 15:13:55 +02:00
parent bb13b7647c
commit f01f62a190
3 changed files with 117 additions and 54 deletions

View file

@ -289,6 +289,9 @@ input[type="checkbox"]:checked::before {
button { button {
cursor: pointer; cursor: pointer;
} }
.field {
position: relative;
}
/* General interactive states */ /* General interactive states */

View file

@ -78,10 +78,15 @@ input[type="checkbox"]:checked + .btn--primary {
--btn-color: var(--color-white); --btn-color: var(--color-white);
} }
.btn--white { .btn--white,
.btn--white[aria-pressed="true"],
.btn--white[aria-pressed="true"]:focus-visible {
--btn-background: var(--color-white); --btn-background: var(--color-white);
--btn-color: var(--color-grey-700); --btn-color: var(--color-grey-700);
} }
.btn--white[aria-pressed="true"]:focus-visible {
outline: transparent;
}
.btn--white-10 { .btn--white-10 {
--btn-background: var(--color-white-10); --btn-background: var(--color-white-10);
--btn-color: var(--color-white-80); --btn-color: var(--color-white-80);
@ -168,11 +173,19 @@ input[type="checkbox"]:checked + .btn--primary {
.btn:hover { .btn:hover {
--btn-background: var(--color-primary-hover); --btn-background: var(--color-primary-hover);
} }
.btn[aria-pressed="true"]:hover {
--btn-background: var(--color-primary-hover);
--btn-border-color: var(--color-primary-hover);
}
.btn--primary:hover { .btn--primary:hover {
--btn-background: var(--color-primary-10); --btn-background: var(--color-primary-10);
} }
.btn--white:hover { .btn--white:hover {
--btn-background: var(--color-black-10);
}
.btn--white[aria-pressed="true"]:hover {
--btn-background: var(--color-white); --btn-background: var(--color-white);
--btn-border-color: transparent;
} }
.btn--white-10:hover { .btn--white-10:hover {
--btn-background: var(--color-white-05); --btn-background: var(--color-white-05);
@ -192,10 +205,6 @@ input[type="checkbox"]:checked + .btn--primary {
.btn--transparent:hover { .btn--transparent:hover {
--btn-background: var(--color-white-05); --btn-background: var(--color-white-05);
} }
.btn[aria-pressed="true"]:hover {
--btn-background: var(--color-primary-hover);
--btn-border-color: var(--color-primary-hover);
}
.btn--image:hover { .btn--image:hover {
--btn-background: var(--color-primary-10); --btn-background: var(--color-primary-10);
} }

File diff suppressed because one or more lines are too long