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

Fix: checkbox and radio aria-invalid #44

Browse source
This commit is contained in:
Lucas Larroche 2021-10-25 09:30:01 +07:00
parent 55ec30e953
commit e329c85d28
10 changed files with 165 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

34
css/pico.classless.css
View file

@ -1120,9 +1120,9 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
@ -1133,11 +1133,20 @@ textarea[aria-invalid] {
background-repeat: no-repeat;
background-size: 1rem auto;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
@ -1152,7 +1161,6 @@ input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
@ -1322,6 +1330,22 @@ label > input, label > select, label > textarea {
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
}
[type=checkbox][role=switch][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] {
--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.min.css vendored
View file

File diff suppressed because one or more lines are too long

34
css/pico.css
View file

@ -1299,9 +1299,9 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
@ -1312,11 +1312,20 @@ textarea[aria-invalid] {
background-repeat: no-repeat;
background-size: 1rem auto;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
@ -1331,7 +1340,6 @@ input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
@ -1501,6 +1509,22 @@ label > input, label > select, label > textarea {
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
}
[type=checkbox][role=switch][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] {
--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

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

@ -1090,9 +1090,9 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
@ -1103,11 +1103,20 @@ textarea[aria-invalid] {
background-repeat: no-repeat;
background-size: 1rem auto;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
@ -1122,7 +1131,6 @@ input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
@ -1292,6 +1300,22 @@ label > input, label > select, label > textarea {
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
}
[type=checkbox][role=switch][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] {
--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.min.css vendored
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

18
css/pico.slim.css
View file

@ -1243,9 +1243,9 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
@ -1256,11 +1256,20 @@ textarea[aria-invalid] {
background-repeat: no-repeat;
background-size: 1rem auto;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
@ -1273,7 +1282,6 @@ input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,

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

File diff suppressed because one or more lines are too long