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

commit build output

Browse source
This commit is contained in:
drmason13 2024-08-31 12:29:19 +01:00
parent fd93112beb
commit 1b4853ca06
236 changed files with 11926 additions and 11926 deletions
Download patch file Download diff file Expand all files Collapse all files

216
css/pico.amber.css
View file

@ -655,7 +655,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ section {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -847,18 +847,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
:is(button, [type=submit], [type=button], [role=button]).secondary, :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1233,7 +1233,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1500,9 +1500,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset, .grid) + small { :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ article > footer {
*/ */
details.dropdown { details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
details.dropdown summary::after, details.dropdown summary::after,
details.dropdown > button::after, details.dropdown > button::after,
@ -2010,7 +2010,7 @@ details.dropdown > a::after {
} }
nav details.dropdown { nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
details.dropdown summary:not([role]) { details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ details.dropdown summary + ul {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ details.dropdown summary + ul[dir=rtl] {
} }
details.dropdown summary + ul li { details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
details.dropdown summary + ul li:first-of-type { details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
details.dropdown summary + ul li:last-of-type { details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
details.dropdown summary + ul li a { details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ details.dropdown summary + ul li:has(label):hover {
} }
details.dropdown[open] summary { details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
details.dropdown[open] summary + ul { details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ details.dropdown[open] summary::before {
} }
label > details.dropdown { label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ label > details.dropdown {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ label > details.dropdown {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ label > details.dropdown {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ label > details.dropdown {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ label > details.dropdown {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -2266,12 +2266,12 @@ label > details.dropdown {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header .close, dialog article > header :is(a, button)[rel=prev] { dialog article > header .close, dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article .close, dialog article :is(a, button)[rel=prev] { dialog article .close, dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ dialog:not([open]), dialog[open=false] {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

216
css/pico.blue.css
View file

@ -655,7 +655,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ section {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -847,18 +847,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
:is(button, [type=submit], [type=button], [role=button]).secondary, :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1233,7 +1233,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1500,9 +1500,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset, .grid) + small { :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ article > footer {
*/ */
details.dropdown { details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
details.dropdown summary::after, details.dropdown summary::after,
details.dropdown > button::after, details.dropdown > button::after,
@ -2010,7 +2010,7 @@ details.dropdown > a::after {
} }
nav details.dropdown { nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
details.dropdown summary:not([role]) { details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ details.dropdown summary + ul {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ details.dropdown summary + ul[dir=rtl] {
} }
details.dropdown summary + ul li { details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
details.dropdown summary + ul li:first-of-type { details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
details.dropdown summary + ul li:last-of-type { details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
details.dropdown summary + ul li a { details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ details.dropdown summary + ul li:has(label):hover {
} }
details.dropdown[open] summary { details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
details.dropdown[open] summary + ul { details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ details.dropdown[open] summary::before {
} }
label > details.dropdown { label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ label > details.dropdown {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ label > details.dropdown {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ label > details.dropdown {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ label > details.dropdown {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ label > details.dropdown {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -2266,12 +2266,12 @@ label > details.dropdown {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header .close, dialog article > header :is(a, button)[rel=prev] { dialog article > header .close, dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article .close, dialog article :is(a, button)[rel=prev] { dialog article .close, dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ dialog:not([open]), dialog[open=false] {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.amber.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.blue.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.amber.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.blue.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.cyan.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.fuchsia.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.green.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.grey.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.indigo.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.jade.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.lime.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.orange.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.pink.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.pumpkin.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.purple.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.red.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.sand.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.slate.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.violet.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.yellow.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.conditional.zinc.css
View file

@ -581,8 +581,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ main {
.pico body > main, .pico body > main,
.pico body > footer { .pico body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -753,18 +753,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico [type=reset], .pico [type=reset],
@ -938,7 +938,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1067,7 +1067,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1334,9 +1334,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ main {
.pico :where(input, select, textarea, fieldset) + small { .pico :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -1940,12 +1940,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

194
css/pico.classless.cyan.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.fuchsia.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.green.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.grey.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.indigo.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.jade.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.lime.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.orange.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.pink.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.pumpkin.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.purple.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.red.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.sand.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.slate.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.violet.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.yellow.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

194
css/pico.classless.zinc.css
View file

@ -581,8 +581,8 @@ body > header,
body > main, body > main,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -590,8 +590,8 @@ body > footer {
body > main, body > main,
body > footer { body > footer {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -627,7 +627,7 @@ body > footer {
* Section * Section
*/ */
section { section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -662,8 +662,8 @@ p,
pre, pre,
table, table,
ul { ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -675,8 +675,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -709,19 +709,19 @@ h6 {
} }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
p { p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup { hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
hgroup > * { hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
hgroup > *:not(:first-child):last-child { hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -730,12 +730,12 @@ hgroup > *:not(:first-child):last-child {
} }
:where(ol, ul) li { :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -753,18 +753,18 @@ blockquote {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -898,7 +898,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit], [type=submit],
[type=reset], [type=reset],
[type=button] { [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
[type=reset], [type=reset],
@ -938,7 +938,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
th, th,
td { td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -948,8 +948,8 @@ td {
tfoot th, tfoot th,
tfoot td { tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) th,
@ -1031,7 +1031,7 @@ kbd {
pre { pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
@ -1067,7 +1067,7 @@ hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1167,7 +1167,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
fieldset { fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1175,13 +1175,13 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
@ -1263,10 +1263,10 @@ label[aria-disabled=true] input[disabled] {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1326,7 +1326,7 @@ select:invalid {
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
select::-ms-expand { select::-ms-expand {
@ -1334,9 +1334,9 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple], [size]) { select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1365,8 +1365,8 @@ textarea[aria-invalid] {
:where(input, select, textarea, fieldset) + small { :where(input, select, textarea, fieldset) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset)[aria-invalid=false] + small { :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
@ -1377,7 +1377,7 @@ textarea[aria-invalid] {
} }
label > :where(input, select, textarea) { label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1396,8 +1396,8 @@ label:has([type=checkbox], [type=radio]) {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1420,7 +1420,7 @@ label:has([type=checkbox], [type=radio]) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type), [type=checkbox] ~ label:not(:last-of-type),
@ -1541,7 +1541,7 @@ label:has([type=checkbox], [type=radio]) {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1557,8 +1557,8 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1568,7 +1568,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
[type=month], [type=month],
[type=time], [type=time],
[type=week] { [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1581,15 +1581,15 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
[type=file]:is(:hover, :active, :focus)::file-selector-button { [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1639,7 +1639,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1651,7 +1651,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1663,7 +1663,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1718,7 +1718,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
*/ */
details { details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details summary { details summary {
line-height: 1rem; line-height: 1rem;
@ -1771,7 +1771,7 @@ details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
details[open] > summary { details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
details[open] > summary:not([role]):not(:focus) { details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1792,7 +1792,7 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1800,24 +1800,24 @@ article {
} }
article > header, article > header,
article > footer { article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
article > header { article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
article > footer { article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1828,7 +1828,7 @@ article > footer {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -1842,7 +1842,7 @@ article > footer {
[role=group] select { [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
[role=search] > *:not(:first-child), [role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -1850,9 +1850,9 @@ article > footer {
[role=group] > *:not(:first-child), [role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
[role=search] > *:not(:last-child), [role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -1860,8 +1860,8 @@ article > footer {
[role=group] > *:not(:last-child), [role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) { [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
[role=search] > *:focus, [role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus, [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -1885,7 +1885,7 @@ article > footer {
[role=group] [role=button]:not(:first-child), [role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) { [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
[role=search] button, [role=search] button,
[role=search] [type=submit], [role=search] [type=submit],
@ -1940,12 +1940,12 @@ article > footer {
} }
[role=search] > *:first-child { [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
[role=search] > *:last-child { [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2025,11 +2025,11 @@ dialog article {
} }
} }
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2038,19 +2038,19 @@ dialog article > footer {
} }
dialog article > footer button, dialog article > footer button,
dialog article > footer [role=button] { dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
dialog article > footer button:not(:first-of-type), dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2087,17 +2087,17 @@ nav {
nav ol, nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
@ -2119,9 +2119,9 @@ nav li [type=button],
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
nav li select { nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav[aria-label=breadcrumb] { nav[aria-label=breadcrumb] {
@ -2188,7 +2188,7 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2241,7 +2241,7 @@ progress::-moz-progress-bar {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2270,10 +2270,10 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=top]::after, [data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2286,7 +2286,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=bottom]:after { [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { [data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2298,7 +2298,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=left]:after { [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { [data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2310,7 +2310,7 @@ progress::-moz-progress-bar {
[data-tooltip][data-placement=right]:after { [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

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

File diff suppressed because one or more lines are too long

216
css/pico.conditional.amber.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

2
css/pico.conditional.amber.min.css vendored
View file

File diff suppressed because one or more lines are too long

216
css/pico.conditional.blue.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

2
css/pico.conditional.blue.min.css vendored
View file

File diff suppressed because one or more lines are too long

216
css/pico.conditional.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

216
css/pico.conditional.cyan.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

2
css/pico.conditional.cyan.min.css vendored
View file

File diff suppressed because one or more lines are too long

216
css/pico.conditional.fuchsia.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

2
css/pico.conditional.fuchsia.min.css vendored
View file

File diff suppressed because one or more lines are too long

216
css/pico.conditional.green.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

2
css/pico.conditional.green.min.css vendored
View file

File diff suppressed because one or more lines are too long

216
css/pico.conditional.grey.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

2
css/pico.conditional.grey.min.css vendored
View file

File diff suppressed because one or more lines are too long

216
css/pico.conditional.indigo.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

2
css/pico.conditional.indigo.min.css vendored
View file

File diff suppressed because one or more lines are too long

216
css/pico.conditional.jade.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

2
css/pico.conditional.jade.min.css vendored
View file

File diff suppressed because one or more lines are too long

216
css/pico.conditional.lime.css
View file

@ -655,7 +655,7 @@ main {
* Section * Section
*/ */
.pico section { .pico section {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
} }
/** /**
@ -664,17 +664,17 @@ main {
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
padding-right: var(--pico-spacing); padding-inline-start: var(--pico-spacing);
padding-left: var(--pico-spacing); padding-inline-end: var(--pico-spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px; max-width: 510px;
padding-right: 0; padding-inline-start: 0;
padding-left: 0; padding-inline-end: 0;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -756,8 +756,8 @@ main {
.pico pre, .pico pre,
.pico table, .pico table,
.pico ul { .pico ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-style: normal; font-style: normal;
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -769,8 +769,8 @@ main {
.pico h4, .pico h4,
.pico h5, .pico h5,
.pico h6 { .pico h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
@ -803,19 +803,19 @@ main {
} }
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top); margin-block-start: var(--pico-typography-spacing-top);
} }
.pico p { .pico p {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup { .pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical); margin-block-end: var(--pico-typography-spacing-vertical);
} }
.pico hgroup > * { .pico hgroup > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
.pico hgroup > *:not(:first-child):last-child { .pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
@ -824,12 +824,12 @@ main {
} }
.pico :where(ol, ul) li { .pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-end: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico :where(dl, ol, ul) :where(dl, ol, ul) { .pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.25);
} }
.pico ul li { .pico ul li {
@ -847,18 +847,18 @@ main {
display: block; display: block;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing); padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
border-inline-end: none; border-inline-end: none;
} }
.pico blockquote footer { .pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color); color: var(--pico-blockquote-footer-color);
} }
.pico abbr[title] { .pico abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -1012,7 +1012,7 @@ main {
.pico [type=submit], .pico [type=submit],
.pico [type=reset], .pico [type=reset],
.pico [type=button] { .pico [type=button] {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico :is(button, [type=submit], [type=button], [role=button]).secondary, .pico :is(button, [type=submit], [type=button], [role=button]).secondary,
@ -1104,7 +1104,7 @@ main {
.pico th, .pico th,
.pico td { .pico td {
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); border-block-end: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-font-weight); font-weight: var(--pico-font-weight);
@ -1114,8 +1114,8 @@ main {
.pico tfoot th, .pico tfoot th,
.pico tfoot td { .pico tfoot td {
border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-block-start: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0; border-block-end: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd) th,
@ -1197,7 +1197,7 @@ main {
.pico pre { .pico pre {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
overflow-x: auto; overflow-x: auto;
} }
.pico pre > code { .pico pre > code {
@ -1233,7 +1233,7 @@ main {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0; margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-block-start: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
} }
@ -1333,7 +1333,7 @@ main {
.pico fieldset { .pico fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -1341,13 +1341,13 @@ main {
.pico label, .pico label,
.pico fieldset legend { .pico fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375); margin-block-end: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color); color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
.pico fieldset legend { .pico fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
} }
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
@ -1429,10 +1429,10 @@ main {
[type=time], [type=time],
[type=week], [type=week],
[type=range])[aria-invalid] { [type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--pico-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;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1492,7 +1492,7 @@ main {
.pico input:not([type=checkbox], [type=radio]), .pico input:not([type=checkbox], [type=radio]),
.pico select, .pico select,
.pico textarea { .pico textarea {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico select::-ms-expand { .pico select::-ms-expand {
@ -1500,9 +1500,9 @@ main {
background-color: transparent; background-color: transparent;
} }
.pico select:not([multiple], [size]) { .pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal); padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron); background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
@ -1531,8 +1531,8 @@ main {
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-block-start: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
@ -1543,7 +1543,7 @@ main {
} }
.pico label > :where(input, select, textarea) { .pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -1562,8 +1562,8 @@ main {
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
margin-block-start: -0.125em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1586,7 +1586,7 @@ main {
.pico [type=checkbox] ~ label, .pico [type=checkbox] ~ label,
.pico [type=radio] ~ label { .pico [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
} }
.pico [type=checkbox] ~ label:not(:last-of-type), .pico [type=checkbox] ~ label:not(:last-of-type),
@ -1707,7 +1707,7 @@ main {
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem; --pico-icon-position: 0.75rem;
--pico-icon-width: 1rem; --pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); padding-inline-end: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date); background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position); background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto; background-size: var(--pico-icon-width) auto;
@ -1723,8 +1723,8 @@ main {
.pico [type=time]::-webkit-calendar-picker-indicator, .pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator { .pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width); width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1); margin-inline-start: var(--pico-icon-position);
margin-left: var(--pico-icon-position); margin-inline-end: calc(var(--pico-icon-width) * -1);
opacity: 0; opacity: 0;
} }
@ -1734,7 +1734,7 @@ main {
.pico [type=month], .pico [type=month],
.pico [type=time], .pico [type=time],
.pico [type=week] { .pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important; padding-inline-end: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
@ -1747,15 +1747,15 @@ main {
*/ */
.pico [type=file] { .pico [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1); margin-inline-start: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width); padding-inline-start: var(--pico-outline-width);
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
.pico [type=file]::file-selector-button { .pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
} }
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button { .pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
@ -1805,7 +1805,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1817,7 +1817,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1829,7 +1829,7 @@ main {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-top: -0.4375rem; margin-block-start: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color); border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--pico-range-thumb-color); background-color: var(--pico-range-thumb-color);
@ -1884,7 +1884,7 @@ main {
*/ */
.pico details { .pico details {
display: block; display: block;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details summary { .pico details summary {
line-height: 1rem; line-height: 1rem;
@ -1937,7 +1937,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5)); height: calc(1rem * var(--pico-line-height, 1.5));
} }
.pico details[open] > summary { .pico details[open] > summary {
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
} }
.pico details[open] > summary:not([role]):not(:focus) { .pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color); color: var(--pico-accordion-open-summary-color);
@ -1958,7 +1958,7 @@ main {
* Card (<article>) * Card (<article>)
*/ */
.pico article { .pico article {
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);
@ -1966,24 +1966,24 @@ main {
} }
.pico article > header, .pico article > header,
.pico article > footer { .pico article > footer {
margin-right: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color); background-color: var(--pico-card-sectioning-background-color);
} }
.pico article > header { .pico article > header {
margin-top: calc(var(--pico-block-spacing-vertical) * -1); margin-block-start: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical); margin-block-end: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); border-block-end: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius); border-start-start-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius); border-end-start-radius: var(--pico-border-radius);
} }
.pico article > footer { .pico article > footer {
margin-top: var(--pico-block-spacing-vertical); margin-block-start: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); margin-block-end: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color); border-block-start: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius); border-start-end-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius); border-end-end-radius: var(--pico-border-radius);
} }
/** /**
@ -1991,7 +1991,7 @@ main {
*/ */
.pico details.dropdown { .pico details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
@ -2010,7 +2010,7 @@ main {
} }
.pico nav details.dropdown { .pico nav details.dropdown {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown summary:not([role]) {
@ -2073,7 +2073,7 @@ main {
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(--pico-outline-width); margin-block-start: var(--pico-outline-width);
padding: 0; padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color); border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2090,15 +2090,15 @@ main {
} }
.pico details.dropdown summary + ul li { .pico details.dropdown summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown summary + ul li a {
display: block; display: block;
@ -2121,7 +2121,7 @@ main {
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] summary + ul {
@ -2143,7 +2143,7 @@ main {
} }
.pico label > details.dropdown { .pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25); margin-block-start: calc(var(--pico-spacing) * 0.25);
} }
/** /**
@ -2154,7 +2154,7 @@ main {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(--pico-spacing); margin-block-end: var(--pico-spacing);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -2168,7 +2168,7 @@ main {
.pico [role=group] select { .pico [role=group] select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
} }
.pico [role=search] > *:not(:first-child), .pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
@ -2176,9 +2176,9 @@ main {
.pico [role=group] > *:not(:first-child), .pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
.pico [role=search] > *:not(:last-child), .pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
@ -2186,8 +2186,8 @@ main {
.pico [role=group] > *:not(:last-child), .pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=group] select:not(:last-child) { .pico [role=group] select:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.pico [role=search] > *:focus, .pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus, .pico [role=search] input:not([type=checkbox], [type=radio]):focus,
@ -2211,7 +2211,7 @@ main {
.pico [role=group] [role=button]:not(:first-child), .pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child), .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=group] select:not(:first-child) { .pico [role=group] select:not(:first-child) {
margin-left: calc(var(--pico-border-width) * -1); margin-inline-start: calc(var(--pico-border-width) * -1);
} }
.pico [role=search] button, .pico [role=search] button,
.pico [role=search] [type=submit], .pico [role=search] [type=submit],
@ -2266,12 +2266,12 @@ main {
} }
.pico [role=search] > *:first-child { .pico [role=search] > *:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
.pico [role=search] > *:last-child { .pico [role=search] > *:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
/** /**
@ -2351,11 +2351,11 @@ main {
} }
} }
.pico dialog article > header > * { .pico dialog article > header > * {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-inline-start: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -2364,19 +2364,19 @@ main {
} }
.pico dialog article > footer button, .pico dialog article > footer button,
.pico dialog article > footer [role=button] { .pico dialog article > footer [role=button] {
margin-bottom: 0; margin-block-end: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-inline-start: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--pico-spacing) * -1); margin-inline-start: auto;
margin-bottom: var(--pico-spacing); margin-block-start: calc(var(--pico-spacing) * -1);
margin-left: auto; margin-block-end: var(--pico-spacing);
border: none; border: none;
background-image: var(--pico-icon-close); background-image: var(--pico-icon-close);
background-position: center; background-position: center;
@ -2394,7 +2394,7 @@ main {
} }
.modal-is-open { .modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px); padding-inline-end: var(--pico-scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
@ -2458,17 +2458,17 @@ main {
.pico nav ol, .pico nav ol,
.pico nav ul { .pico nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.pico nav ol:first-of-type, .pico nav ol:first-of-type,
.pico nav ul:first-of-type { .pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav ol:last-of-type, .pico nav ol:last-of-type,
.pico nav ul:last-of-type { .pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(--pico-nav-element-spacing-horizontal) * -1);
} }
.pico nav li { .pico nav li {
display: inline-block; display: inline-block;
@ -2490,9 +2490,9 @@ main {
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), .pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select { .pico nav li select {
height: auto; height: auto;
margin-right: inherit; margin-inline-start: inherit;
margin-bottom: 0; margin-inline-end: inherit;
margin-left: inherit; margin-block-end: 0;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav[aria-label=breadcrumb] { .pico nav[aria-label=breadcrumb] {
@ -2559,7 +2559,7 @@ main {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5); margin-block-end: calc(var(--pico-spacing) * 0.5);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
@ -2612,7 +2612,7 @@ main {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -2641,10 +2641,10 @@ main {
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after { .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline-start: 0.3rem solid transparent;
border-inline-end: 0.3rem solid transparent;
border-block-start: 0.3rem solid;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--pico-tooltip-background-color); color: var(--pico-tooltip-background-color);
@ -2657,7 +2657,7 @@ main {
.pico [data-tooltip][data-placement=bottom]:after { .pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after { .pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%; top: 50%;
@ -2669,7 +2669,7 @@ main {
.pico [data-tooltip][data-placement=left]:after { .pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after { .pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%; top: 50%;
@ -2681,7 +2681,7 @@ main {
.pico [data-tooltip][data-placement=right]:after { .pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after { .pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1; opacity: 1;

Some files were not shown because too many files have changed in this diff Show more