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

Define validation states with aria-invalid

Browse source
This commit is contained in:
Lucas 2020-10-27 12:25:53 +07:00
parent c49273df6c
commit d49c7ffcf2
10 changed files with 95 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

21
css/pico.classless.css
View file

@ -1035,6 +1035,27 @@ textarea[disabled] {
opacity: .66;
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input[aria-invalid="false"],
select[aria-invalid="false"],
textarea[aria-invalid="false"] {
background-image: var(--icon-valid);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {

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

File diff suppressed because one or more lines are too long

28
css/pico.css
View file

@ -977,7 +977,7 @@ a[role="button"].contrast:focus {
button.outline,
input[type="submit"].outline,
a.outline[role="button"] {
a[role="button"].outline {
border: var(--button-border-width) solid var(--primary-border);
background-color: transparent;
color: var(--primary);
@ -987,9 +987,9 @@ button.outline:hover, button.outline:active, button.outline:focus,
input[type="submit"].outline:hover,
input[type="submit"].outline:active,
input[type="submit"].outline:focus,
a.outline[role="button"]:hover,
a.outline[role="button"]:active,
a.outline[role="button"]:focus {
a[role="button"].outline:hover,
a[role="button"].outline:active,
a[role="button"].outline:focus {
border: var(--button-border-width) solid var(--primary-hover-border);
color: var(--primary-hover);
}
@ -1230,26 +1230,24 @@ textarea[disabled] {
opacity: .66;
}
input.valid, input.invalid,
select.valid,
select.invalid,
textarea.valid,
textarea.invalid {
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input.valid,
select.valid,
textarea.valid {
input[aria-invalid="false"],
select[aria-invalid="false"],
textarea[aria-invalid="false"] {
background-image: var(--icon-valid);
}
input.invalid,
select.invalid,
textarea.invalid {
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
background-image: var(--icon-invalid);
}

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

@ -1031,6 +1031,27 @@ textarea[disabled] {
opacity: .66;
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input[aria-invalid="false"],
select[aria-invalid="false"],
textarea[aria-invalid="false"] {
background-image: var(--icon-valid);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {

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

21
css/pico.slim.css
View file

@ -1038,6 +1038,27 @@ textarea[disabled] {
opacity: .66;
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input[aria-invalid="false"],
select[aria-invalid="false"],
textarea[aria-invalid="false"] {
background-image: var(--icon-valid);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {

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

File diff suppressed because one or more lines are too long

8
docs/index.html
View file

@ -710,14 +710,14 @@
<p>Disabled and validation states:</p>
<article aria-label="Validation states examples">
<form class="grid">
<input type="text" placeholder="Valid" aria-label="Valid" class="valid">
<input type="text" placeholder="Invalid" aria-label="Invalid" class="invalid">
<input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false">
<input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true">
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
<input type="text" value="Readonly" aria-label="Readonly" readonly>
</form>
<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>class</i>=<u>"valid"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>class</i>=<u>"invalid"</u>&gt;
<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre>

27
scss/content/_form.scss
View file

@ -221,24 +221,19 @@ textarea {
}
// Validation states
@if $enable-input-states and $enable-classes {
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
// Validation states
&.valid,
&.invalid {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
&.valid {
background-image: var(--icon-valid);
}
&.invalid {
background-image: var(--icon-invalid);
}
&[aria-invalid="true"]{
background-image: var(--icon-invalid);
}
}