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

Prevent breaking changes for validation states

Browse source
This commit is contained in:
Lucas 2020-10-27 17:12:36 +07:00
parent d49c7ffcf2
commit 78a1c879a0
5 changed files with 61 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

15
css/pico.css
View file

@ -1230,8 +1230,13 @@ textarea[disabled] {
opacity: .66; opacity: .66;
} }
input[aria-invalid], input .valid,
input .invalid, input[aria-invalid],
select .valid,
select .invalid,
select[aria-invalid], select[aria-invalid],
textarea .valid,
textarea .invalid,
textarea[aria-invalid] { textarea[aria-invalid] {
padding-right: 2rem; padding-right: 2rem;
background-position: center right .75rem; background-position: center right .75rem;
@ -1239,14 +1244,18 @@ textarea[aria-invalid] {
background-size: 1rem auto; background-size: 1rem auto;
} }
input[aria-invalid="false"], input .valid, input[aria-invalid="false"],
select .valid,
select[aria-invalid="false"], select[aria-invalid="false"],
textarea .valid,
textarea[aria-invalid="false"] { textarea[aria-invalid="false"] {
background-image: var(--icon-valid); background-image: var(--icon-valid);
} }
input[aria-invalid="true"], input .invalid, input[aria-invalid="true"],
select .invalid,
select[aria-invalid="true"], select[aria-invalid="true"],
textarea .invalid,
textarea[aria-invalid="true"] { textarea[aria-invalid="true"] {
background-image: var(--icon-invalid); background-image: var(--icon-invalid);
} }

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

15
css/pico.slim.css
View file

@ -1038,8 +1038,13 @@ textarea[disabled] {
opacity: .66; opacity: .66;
} }
input[aria-invalid], input .valid,
input .invalid, input[aria-invalid],
select .valid,
select .invalid,
select[aria-invalid], select[aria-invalid],
textarea .valid,
textarea .invalid,
textarea[aria-invalid] { textarea[aria-invalid] {
padding-right: 2rem; padding-right: 2rem;
background-position: center right .75rem; background-position: center right .75rem;
@ -1047,14 +1052,18 @@ textarea[aria-invalid] {
background-size: 1rem auto; background-size: 1rem auto;
} }
input[aria-invalid="false"], input .valid, input[aria-invalid="false"],
select .valid,
select[aria-invalid="false"], select[aria-invalid="false"],
textarea .valid,
textarea[aria-invalid="false"] { textarea[aria-invalid="false"] {
background-image: var(--icon-valid); background-image: var(--icon-valid);
} }
input[aria-invalid="true"], input .invalid, input[aria-invalid="true"],
select .invalid,
select[aria-invalid="true"], select[aria-invalid="true"],
textarea .invalid,
textarea[aria-invalid="true"] { textarea[aria-invalid="true"] {
background-image: var(--icon-invalid); background-image: var(--icon-invalid);
} }

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

File diff suppressed because one or more lines are too long

46
scss/content/_form.scss
View file

@ -220,20 +220,44 @@ textarea {
opacity: .66; opacity: .66;
} }
// Validation states // Validation states: with aria-invalid only
&[aria-invalid] { @if $enable-classes {
padding-right: 2rem; .valid,
background-position: center right .75rem; .invalid,
background-repeat: no-repeat; &[aria-invalid] {
background-size: 1rem auto; padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
.valid,
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
.invalid,
&[aria-invalid="true"]{
background-image: var(--icon-invalid);
}
} }
&[aria-invalid="false"] { // Validation states: with aria-invalid and classes (.valid & .invalid)
background-image: var(--icon-valid); @else {
} &[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&[aria-invalid="true"]{ &[aria-invalid="false"] {
background-image: var(--icon-invalid); background-image: var(--icon-valid);
}
&[aria-invalid="true"]{
background-image: var(--icon-invalid);
}
} }
} }