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

46
scss/content/_form.scss
View file

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