mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 16:46:14 -04:00
fix: use p tag within hgroup example
This commit is contained in:
parent
5e012413c8
commit
b99a1b2a85
18 changed files with 16 additions and 110 deletions
|
@ -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
2
css/pico.classless.min.css
vendored
2
css/pico.classless.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
26
css/pico.css
26
css/pico.css
|
@ -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
|
@ -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
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.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
2
css/pico.min.css
vendored
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
|
@ -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
2
css/pico.slim.min.css
vendored
2
css/pico.slim.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
|
@ -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><<b>hgroup</b>>
|
<pre><code><<b>hgroup</b>>
|
||||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
<<b>p</b>>Subtitle for heading 2</<b>p</b>>
|
||||||
</<b>hgroup</b>></code></pre>
|
</<b>hgroup</b>></code></pre>
|
||||||
|
|
||||||
<pre><code><<b>div</b> <i>class</i>=<u>"headings</u>">
|
|
||||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
|
||||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
|
||||||
</<b>div</b>></code></pre>
|
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
|
@ -3,13 +3,10 @@
|
||||||
<<b>h3</b>>Heading 3</<b>h3</b>>
|
<<b>h3</b>>Heading 3</<b>h3</b>>
|
||||||
<<b>h4</b>>Heading 4</<b>h4</b>>
|
<<b>h4</b>>Heading 4</<b>h4</b>>
|
||||||
<<b>h5</b>>Heading 5</<b>h5</b>>
|
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||||||
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre></footer></article><p>Inside a <code><<b>hgroup</b>></code> or a <code><<b>div</b> <i>class</i>=<u>"headings"</u>></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><<b>hgroup</b>>
|
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre></footer></article><p>Inside a <code><<b>hgroup</b>></code> or a <code><<b>div</b> <i>class</i>=<u>"headings"</u>></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><<b>hgroup</b>>
|
||||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||||
<<b>p</b>>Subtitle for heading 2</<b>p</b>>
|
<<b>p</b>>Subtitle for heading 2</<b>p</b>>
|
||||||
</<b>hgroup</b>></code></pre><pre><code><<b>div</b> <i>class</i>=<u>"headings</u>">
|
</<b>hgroup</b>></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>ℹ️ 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><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
||||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
|
||||||
<<b>p</b>>Subtitle for heading 2</<b>p</b>>
|
|
||||||
</<b>div</b>></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>ℹ️ 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><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
|
||||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></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><<b>blockquote</b>>
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></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><<b>blockquote</b>>
|
||||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue