mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 10:26:13 -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

45
css/pico.classless.css
View file

@ -237,9 +237,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);
@ -330,8 +332,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);
@ -422,8 +426,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);
@ -1176,9 +1182,8 @@ select[aria-invalid=false]:active,
select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
--border-color: var(--form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
}
input[aria-invalid=true],
select[aria-invalid=true],
@ -1190,9 +1195,8 @@ select[aria-invalid=true]:active,
select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
--border-color: var(--form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
}
[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],
@ -1357,22 +1361,23 @@ label > input, label > select, label > textarea {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
[type=checkbox][role=switch][aria-invalid=false] {
[type=checkbox][aria-invalid=false],
[type=checkbox]:checked[aria-invalid=false],
[type=radio][aria-invalid=false],
[type=radio]:checked[aria-invalid=false],
[type=checkbox][role=switch][aria-invalid=false],
[type=checkbox][role=switch]:checked[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
[type=checkbox][role=switch][aria-invalid=true] {
[type=checkbox][aria-invalid=true],
[type=checkbox]:checked[aria-invalid=true],
[type=radio][aria-invalid=true],
[type=radio]:checked[aria-invalid=true],
[type=checkbox][role=switch][aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
}
/**
* Form elements

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

45
css/pico.css
View file

@ -237,9 +237,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);
@ -330,8 +332,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);
@ -422,8 +426,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);
@ -1355,9 +1361,8 @@ select[aria-invalid=false]:active,
select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
--border-color: var(--form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
}
input[aria-invalid=true],
select[aria-invalid=true],
@ -1369,9 +1374,8 @@ select[aria-invalid=true]:active,
select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
--border-color: var(--form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
}
[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],
@ -1536,22 +1540,23 @@ label > input, label > select, label > textarea {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
[type=checkbox][role=switch][aria-invalid=false] {
[type=checkbox][aria-invalid=false],
[type=checkbox]:checked[aria-invalid=false],
[type=radio][aria-invalid=false],
[type=radio]:checked[aria-invalid=false],
[type=checkbox][role=switch][aria-invalid=false],
[type=checkbox][role=switch]:checked[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
[type=checkbox][role=switch][aria-invalid=true] {
[type=checkbox][aria-invalid=true],
[type=checkbox]:checked[aria-invalid=true],
[type=radio][aria-invalid=true],
[type=radio]:checked[aria-invalid=true],
[type=checkbox][role=switch][aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
}
/**
* Form elements

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

45
css/pico.fluid.classless.css
View file

@ -237,9 +237,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);
@ -330,8 +332,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);
@ -422,8 +426,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);
@ -1146,9 +1152,8 @@ select[aria-invalid=false]:active,
select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
--border-color: var(--form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
}
input[aria-invalid=true],
select[aria-invalid=true],
@ -1160,9 +1165,8 @@ select[aria-invalid=true]:active,
select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
--border-color: var(--form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
}
[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],
@ -1327,22 +1331,23 @@ label > input, label > select, label > textarea {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
[type=checkbox][role=switch][aria-invalid=false] {
[type=checkbox][aria-invalid=false],
[type=checkbox]:checked[aria-invalid=false],
[type=radio][aria-invalid=false],
[type=radio]:checked[aria-invalid=false],
[type=checkbox][role=switch][aria-invalid=false],
[type=checkbox][role=switch]:checked[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
[type=checkbox][role=switch][aria-invalid=true] {
[type=checkbox][aria-invalid=true],
[type=checkbox]:checked[aria-invalid=true],
[type=radio][aria-invalid=true],
[type=radio]:checked[aria-invalid=true],
[type=checkbox][role=switch][aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
}
/**
* Form elements

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

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],

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

10
css/themes/default.css
View file

@ -233,9 +233,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);
@ -326,8 +328,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);
@ -418,8 +422,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);

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View file

File diff suppressed because one or more lines are too long