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

22
scss/content/_form.scss
View file

@ -175,30 +175,30 @@ textarea {
margin-bottom: $spacing-typography;
padding: $spacing-input-button;
@if $enable-input-states {
@if $enable-input-states and $enable-classes {
// Validation states
&[invalid]:not(:focus),
&[valid]:not(:focus) {
&.valid,
&.invalid {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&[invalid]:not(:focus) {
// Source: https://feathericons.com/
$invalid-icon-color: "b94646"; // Without '#' !important
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='%23" + $invalid-icon-color + "' 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");
}
&[valid]:not(:focus) {
&.valid {
// Source: https://feathericons.com/
$valid-icon-color: "288a6a"; // Without '#' !important
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='%23" + $valid-icon-color + "' 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");
}
&.invalid {
// Source: https://feathericons.com/
$invalid-icon-color: "b94646"; // Without '#' !important
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='%23" + $invalid-icon-color + "' 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");
}
}
}

8
scss/content/_typography.scss
View file

@ -176,14 +176,10 @@ h6 {
hgroup {
margin-bottom: $spacing-typography;
h1,
h2,
h3,
h4,
h5,
h6{
*{
margin-bottom: 0;
}
> *:last-child {
color: var(--muted-text);
font-size: 1.125rem;