fix: use p tag within hgroup example

This commit is contained in:
Lucas Larroche 2023-12-28 13:48:51 +07:00
parent 5e012413c8
commit b99a1b2a85
18 changed files with 16 additions and 110 deletions

View file

@ -763,9 +763,7 @@ small {
:where(dl, ol, ul) { :where(dl, ol, ul) {
padding-right: 0; padding-right: 0;
padding-left: var(--spacing); padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing); padding-inline-start: var(--spacing);
-webkit-padding-end: 0;
padding-inline-end: 0; padding-inline-end: 0;
} }
:where(dl, ol, ul) li { :where(dl, ol, ul) li {
@ -794,9 +792,7 @@ blockquote {
padding: var(--spacing); padding: var(--spacing);
border-right: none; border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color); border-left: 0.25rem solid var(--blockquote-border-color);
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color); border-inline-start: 0.25rem solid var(--blockquote-border-color);
-webkit-border-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
@ -1113,9 +1109,7 @@ textarea[disabled],
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] { :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important; padding-inline-start: var(--form-element-spacing-horizontal) !important;
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
@ -1168,9 +1162,7 @@ select::-ms-expand {
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron); background-image: var(--icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1208,9 +1200,7 @@ label > :where(input, select, textarea) {
margin-top: -0.125em; margin-top: -0.125em;
margin-right: 0.375em; margin-right: 0.375em;
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(--border-width); border-width: var(--border-width);
font-size: inherit; font-size: inherit;
@ -1291,7 +1281,6 @@ label > :where(input, select, textarea) {
} }
[type=checkbox][role=switch]:checked::before { [type=checkbox][role=switch]:checked::before {
margin-left: calc(1.125em - var(--border-width)); margin-left: calc(1.125em - var(--border-width));
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width)); margin-inline-start: calc(1.125em - var(--border-width));
} }
@ -1382,9 +1371,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
@ -1410,9 +1397,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
@ -1547,7 +1532,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
} }
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem; border-radius: 5rem;
background-image: var(--icon-search); background-image: var(--icon-search);
@ -1556,7 +1540,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
background-repeat: no-repeat; background-repeat: no-repeat;
} }
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem; background-position: center left 1.125rem, center right 0.75rem;
} }
@ -1728,7 +1711,6 @@ details summary::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
margin-inline-start: calc(var(--spacing, 1rem) * 0.5); margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
float: right; float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
@ -1924,13 +1906,11 @@ nav[aria-label=breadcrumb] {
justify-content: start; justify-content: start;
} }
nav[aria-label=breadcrumb] ul li:not(:first-child) { nav[aria-label=breadcrumb] ul li:not(:first-child) {
-webkit-margin-start: var(--nav-link-spacing-horizontal);
margin-inline-start: var(--nav-link-spacing-horizontal); margin-inline-start: var(--nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after { nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
position: absolute; position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2); width: calc(var(--nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2); margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/"; content: "/";
color: var(--muted-color); color: var(--muted-color);
@ -2090,7 +2070,6 @@ li[role=list] > a::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: calc(1rem * var(--line-height, 1.5)); height: calc(1rem * var(--line-height, 1.5));
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem; margin-inline-start: 0.5rem;
float: right; float: right;
transform: rotate(0deg); transform: rotate(0deg);
@ -2169,7 +2148,6 @@ nav details[role=list][open] summary {
} }
nav details[role=list] summary + ul { nav details[role=list] summary + ul {
margin-top: var(--outline-width); margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
} }
nav details[role=list] summary[role=link] { nav details[role=list] summary[role=link] {
@ -2178,7 +2156,6 @@ nav details[role=list] summary[role=link] {
} }
nav details[role=list] summary[role=link] + ul { nav details[role=list] summary[role=link] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
} }
@ -2190,7 +2167,6 @@ li[role=list] a:focus ~ ul {
li[role=list] > ul { li[role=list] > ul {
display: none; display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)); margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
} }
li[role=list] > a::after { li[role=list] > a::after {
@ -2225,9 +2201,7 @@ label > details[role=list] {
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(--spacing) * 0.5);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(--spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html):empty {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -820,9 +820,7 @@ small {
:where(dl, ol, ul) { :where(dl, ol, ul) {
padding-right: 0; padding-right: 0;
padding-left: var(--spacing); padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing); padding-inline-start: var(--spacing);
-webkit-padding-end: 0;
padding-inline-end: 0; padding-inline-end: 0;
} }
:where(dl, ol, ul) li { :where(dl, ol, ul) li {
@ -851,9 +849,7 @@ blockquote {
padding: var(--spacing); padding: var(--spacing);
border-right: none; border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color); border-left: 0.25rem solid var(--blockquote-border-color);
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color); border-inline-start: 0.25rem solid var(--blockquote-border-color);
-webkit-border-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
@ -1216,9 +1212,7 @@ textarea[disabled],
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] { :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important; padding-inline-start: var(--form-element-spacing-horizontal) !important;
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
@ -1271,9 +1265,7 @@ select::-ms-expand {
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron); background-image: var(--icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1311,9 +1303,7 @@ label > :where(input, select, textarea) {
margin-top: -0.125em; margin-top: -0.125em;
margin-right: 0.375em; margin-right: 0.375em;
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(--border-width); border-width: var(--border-width);
font-size: inherit; font-size: inherit;
@ -1394,7 +1384,6 @@ label > :where(input, select, textarea) {
} }
[type=checkbox][role=switch]:checked::before { [type=checkbox][role=switch]:checked::before {
margin-left: calc(1.125em - var(--border-width)); margin-left: calc(1.125em - var(--border-width));
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width)); margin-inline-start: calc(1.125em - var(--border-width));
} }
@ -1485,9 +1474,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
@ -1513,9 +1500,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
@ -1650,7 +1635,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
} }
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem; border-radius: 5rem;
background-image: var(--icon-search); background-image: var(--icon-search);
@ -1659,7 +1643,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
background-repeat: no-repeat; background-repeat: no-repeat;
} }
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem; background-position: center left 1.125rem, center right 0.75rem;
} }
@ -1831,7 +1814,6 @@ details summary::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
margin-inline-start: calc(var(--spacing, 1rem) * 0.5); margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
float: right; float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
@ -2091,13 +2073,11 @@ nav[aria-label=breadcrumb] {
justify-content: start; justify-content: start;
} }
nav[aria-label=breadcrumb] ul li:not(:first-child) { nav[aria-label=breadcrumb] ul li:not(:first-child) {
-webkit-margin-start: var(--nav-link-spacing-horizontal);
margin-inline-start: var(--nav-link-spacing-horizontal); margin-inline-start: var(--nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after { nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
position: absolute; position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2); width: calc(var(--nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2); margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/"; content: "/";
color: var(--muted-color); color: var(--muted-color);
@ -2257,7 +2237,6 @@ li[role=list] > a::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: calc(1rem * var(--line-height, 1.5)); height: calc(1rem * var(--line-height, 1.5));
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem; margin-inline-start: 0.5rem;
float: right; float: right;
transform: rotate(0deg); transform: rotate(0deg);
@ -2336,7 +2315,6 @@ nav details[role=list][open] summary {
} }
nav details[role=list] summary + ul { nav details[role=list] summary + ul {
margin-top: var(--outline-width); margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
} }
nav details[role=list] summary[role=link] { nav details[role=list] summary[role=link] {
@ -2345,7 +2323,6 @@ nav details[role=list] summary[role=link] {
} }
nav details[role=list] summary[role=link] + ul { nav details[role=list] summary[role=link] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
} }
@ -2357,7 +2334,6 @@ li[role=list] a:focus ~ ul {
li[role=list] > ul { li[role=list] > ul {
display: none; display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)); margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
} }
li[role=list] > a::after { li[role=list] > a::after {
@ -2392,9 +2368,7 @@ label > details[role=list] {
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(--spacing) * 0.5);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(--spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html):empty {

File diff suppressed because one or more lines are too long

View file

@ -733,9 +733,7 @@ small {
:where(dl, ol, ul) { :where(dl, ol, ul) {
padding-right: 0; padding-right: 0;
padding-left: var(--spacing); padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing); padding-inline-start: var(--spacing);
-webkit-padding-end: 0;
padding-inline-end: 0; padding-inline-end: 0;
} }
:where(dl, ol, ul) li { :where(dl, ol, ul) li {
@ -764,9 +762,7 @@ blockquote {
padding: var(--spacing); padding: var(--spacing);
border-right: none; border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color); border-left: 0.25rem solid var(--blockquote-border-color);
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color); border-inline-start: 0.25rem solid var(--blockquote-border-color);
-webkit-border-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
@ -1083,9 +1079,7 @@ textarea[disabled],
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] { :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important; padding-inline-start: var(--form-element-spacing-horizontal) !important;
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
@ -1138,9 +1132,7 @@ select::-ms-expand {
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron); background-image: var(--icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1178,9 +1170,7 @@ label > :where(input, select, textarea) {
margin-top: -0.125em; margin-top: -0.125em;
margin-right: 0.375em; margin-right: 0.375em;
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(--border-width); border-width: var(--border-width);
font-size: inherit; font-size: inherit;
@ -1261,7 +1251,6 @@ label > :where(input, select, textarea) {
} }
[type=checkbox][role=switch]:checked::before { [type=checkbox][role=switch]:checked::before {
margin-left: calc(1.125em - var(--border-width)); margin-left: calc(1.125em - var(--border-width));
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width)); margin-inline-start: calc(1.125em - var(--border-width));
} }
@ -1352,9 +1341,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
@ -1380,9 +1367,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
@ -1517,7 +1502,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
} }
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem; border-radius: 5rem;
background-image: var(--icon-search); background-image: var(--icon-search);
@ -1526,7 +1510,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
background-repeat: no-repeat; background-repeat: no-repeat;
} }
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem; background-position: center left 1.125rem, center right 0.75rem;
} }
@ -1698,7 +1681,6 @@ details summary::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
margin-inline-start: calc(var(--spacing, 1rem) * 0.5); margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
float: right; float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
@ -1894,13 +1876,11 @@ nav[aria-label=breadcrumb] {
justify-content: start; justify-content: start;
} }
nav[aria-label=breadcrumb] ul li:not(:first-child) { nav[aria-label=breadcrumb] ul li:not(:first-child) {
-webkit-margin-start: var(--nav-link-spacing-horizontal);
margin-inline-start: var(--nav-link-spacing-horizontal); margin-inline-start: var(--nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after { nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
position: absolute; position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2); width: calc(var(--nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2); margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/"; content: "/";
color: var(--muted-color); color: var(--muted-color);
@ -2060,7 +2040,6 @@ li[role=list] > a::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: calc(1rem * var(--line-height, 1.5)); height: calc(1rem * var(--line-height, 1.5));
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem; margin-inline-start: 0.5rem;
float: right; float: right;
transform: rotate(0deg); transform: rotate(0deg);
@ -2139,7 +2118,6 @@ nav details[role=list][open] summary {
} }
nav details[role=list] summary + ul { nav details[role=list] summary + ul {
margin-top: var(--outline-width); margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
} }
nav details[role=list] summary[role=link] { nav details[role=list] summary[role=link] {
@ -2148,7 +2126,6 @@ nav details[role=list] summary[role=link] {
} }
nav details[role=list] summary[role=link] + ul { nav details[role=list] summary[role=link] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
} }
@ -2160,7 +2137,6 @@ li[role=list] a:focus ~ ul {
li[role=list] > ul { li[role=list] > ul {
display: none; display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)); margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
} }
li[role=list] > a::after { li[role=list] > a::after {
@ -2195,9 +2171,7 @@ label > details[role=list] {
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(--spacing) * 0.5);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(--spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html):empty {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -748,9 +748,7 @@ small {
:where(dl, ol, ul) { :where(dl, ol, ul) {
padding-right: 0; padding-right: 0;
padding-left: var(--spacing); padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing); padding-inline-start: var(--spacing);
-webkit-padding-end: 0;
padding-inline-end: 0; padding-inline-end: 0;
} }
:where(dl, ol, ul) li { :where(dl, ol, ul) li {
@ -779,9 +777,7 @@ blockquote {
padding: var(--spacing); padding: var(--spacing);
border-right: none; border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color); border-left: 0.25rem solid var(--blockquote-border-color);
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color); border-inline-start: 0.25rem solid var(--blockquote-border-color);
-webkit-border-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
@ -1142,9 +1138,7 @@ textarea[disabled],
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] { :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
@ -1197,9 +1191,7 @@ select::-ms-expand {
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron); background-image: var(--icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -127,18 +127,13 @@
<article aria-label="Hgroup example"> <article aria-label="Hgroup example">
<div class="headings"> <div class="headings">
<h2>Heading 2</h2> <h2>Heading 2</h2>
<h3>Subtitle for heading 2</h3> <p>Subtitle for heading 2</p>
</div> </div>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>hgroup</b>&gt; <pre><code>&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt; &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt; &lt;<b>p</b>&gt;Subtitle for heading 2&lt;/<b>p</b>&gt;
&lt;/<b>hgroup</b>&gt;</code></pre> &lt;/<b>hgroup</b>&gt;</code></pre>
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
</footer> </footer>
</article> </article>

View file

@ -3,13 +3,10 @@
&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt; &lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt; &lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre></footer></article><p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a <code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p><article aria-label="Hgroup example"><div class="headings"><h2>Heading 2</h2><h3>Subtitle for heading 2</h3></div><footer class="code"><pre><code>&lt;<b>hgroup</b>&gt; &lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre></footer></article><p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a <code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p><article aria-label="Hgroup example"><div class="headings"><h2>Heading 2</h2><p>Subtitle for heading 2</p></div><footer class="code"><pre><code>&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt; &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>p</b>&gt;Subtitle for heading 2&lt;/<b>p</b>&gt; &lt;<b>p</b>&gt;Subtitle for heading 2&lt;/<b>p</b>&gt;
&lt;/<b>hgroup</b>&gt;</code></pre><pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt; &lt;/<b>hgroup</b>&gt;</code></pre></footer></article><p>Inline text elements:</p><article aria-label="Inline text examples"><div class="grid"><div><p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p><p><strong>Bold</strong> <code>strong</code> <code>b</code></p><p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p><p><del>Deleted</del> <code>del</code></p><p><ins>Inserted</ins> <code>ins</code></p><p><kbd>Ctrl + S</kbd> <code>kbd</code></p></div><div><p><mark>Highlighted</mark> <code>mark</code></p><p><s>Strikethrough</s> <code>s</code></p><p><small>Small </small><code>small</code></p><p>Text <sub>Sub</sub> <code>sub</code></p><p>Text <sup>Sup</sup> <code>sup</code></p><p><u>Underline</u> <code>u</code></p></div></div></article><p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p><p>&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p><article aria-label="Links examples"><a href="#" onclick="event.preventDefault()">Primary</a><br/><a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br/><a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br/><footer class="code"><pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>p</b>&gt;Subtitle for heading 2&lt;/<b>p</b>&gt;
&lt;/<b>div</b>&gt;</code></pre></footer></article><p>Inline text elements:</p><article aria-label="Inline text examples"><div class="grid"><div><p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p><p><strong>Bold</strong> <code>strong</code> <code>b</code></p><p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p><p><del>Deleted</del> <code>del</code></p><p><ins>Inserted</ins> <code>ins</code></p><p><kbd>Ctrl + S</kbd> <code>kbd</code></p></div><div><p><mark>Highlighted</mark> <code>mark</code></p><p><s>Strikethrough</s> <code>s</code></p><p><small>Small </small><code>small</code></p><p>Text <sub>Sub</sub> <code>sub</code></p><p>Text <sup>Sup</sup> <code>sup</code></p><p><u>Underline</u> <code>u</code></p></div></div></article><p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p><p>&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p><article aria-label="Links examples"><a href="#" onclick="event.preventDefault()">Primary</a><br/><a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br/><a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br/><footer class="code"><pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt; &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre></footer></article><p>Blockquote:</p><article aria-label="Blockquote example"><blockquote>"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."<footer><cite>- Phasellus eget lacinia</cite></footer></blockquote><footer class="code"><pre><code>&lt;<b>blockquote</b>&gt; &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre></footer></article><p>Blockquote:</p><article aria-label="Blockquote example"><blockquote>"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."<footer><cite>- Phasellus eget lacinia</cite></footer></blockquote><footer class="code"><pre><code>&lt;<b>blockquote</b>&gt;
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.