mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 11:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Style: Add focus for aria-invalid form elements

Browse source
This commit is contained in:
Lucas Larroche 2021-11-08 01:55:20 +07:00
parent 76c1b3d9b8
commit 0b3f1656f2
24 changed files with 131 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

12
css/pico.slim.css
View file

@ -169,9 +169,11 @@ kbd {
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #b71c1c;
--form-element-invalid-active-border-color: #d32f2f;
--form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #2e7d32;
--form-element-valid-active-border-color: #43a047;
--form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
--switch-background-color: #bbc6ce;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -262,8 +264,10 @@ kbd {
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -354,8 +358,10 @@ kbd {
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -1283,6 +1289,7 @@ select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
--border-color: var(--form-element-valid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
}
input[aria-invalid=true],
select[aria-invalid=true],
@ -1295,6 +1302,7 @@ select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
--border-color: var(--form-element-invalid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
}
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],