mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve markup validity

Browse source 
- Use `.classes` instead of properties for validations states
- Docs: `aria-label` for `article`
+ Simplify `hgroup`
This commit is contained in:
Lucas 2019-12-10 11:14:24 +07:00
parent ccd29ab40f
commit b3022b256e
11 changed files with 80 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -409,12 +409,7 @@ hgroup {
margin-bottom: 1.5rem;
}
hgroup h1,
hgroup h2,
hgroup h3,
hgroup h4,
hgroup h5,
hgroup h6 {
hgroup * {
margin-bottom: 0;
}
@ -661,31 +656,6 @@ textarea {
padding: 0.75rem 1rem;
}
input:not([type="checkbox"]):not([type="radio"])[invalid]:not(:focus), input:not([type="checkbox"]):not([type="radio"])[valid]:not(:focus),
select[invalid]:not(:focus),
select[valid]:not(:focus),
textarea[invalid]:not(:focus),
textarea[valid]:not(:focus) {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input:not([type="checkbox"]):not([type="radio"])[invalid]:not(:focus),
select[invalid]:not(:focus),
textarea[invalid]:not(:focus) {
border-bottom: 1px solid var(--invalid);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
input:not([type="checkbox"]):not([type="radio"])[valid]:not(:focus),
select[valid]:not(:focus),
textarea[valid]:not(:focus) {
border-bottom: 1px solid var(--valid);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
input[type="color"] {
height: calc(3rem + 2px);
}