mirror of
https://github.com/picocss/pico.git
synced 2025-07-27 00:02:10 -04:00
Compare commits
22 Commits
5ce6840d49
...
873ad1b015
| Author | SHA1 | Date | |
|---|---|---|---|
|
873ad1b015 | ||
|
d85d2f177c | ||
|
|
a88ad874c5 | ||
|
|
97c124933c | ||
|
|
14fa09035c | ||
|
|
af49fbb755 | ||
|
|
d7dfeb524d | ||
|
|
86f700c58d | ||
|
|
3fc47b759e | ||
|
|
9051b75806 | ||
|
|
f0cde7139d | ||
|
|
7eb1b5cf3c | ||
|
|
b99a1b2a85 | ||
|
|
2097a11ea8 | ||
|
|
29b19b8afc | ||
|
|
6102a69373 | ||
|
|
adf7552778 | ||
|
|
04c4324c4f | ||
|
|
31002a26b5 | ||
|
|
30be6cd2ba | ||
|
175e7def64 | ||
|
5e012413c8 |
@ -9,7 +9,7 @@
|
|||||||
<p align="center">
|
<p align="center">
|
||||||
<strong>Minimal CSS Framework for semantic HTML</strong><br>
|
<strong>Minimal CSS Framework for semantic HTML</strong><br>
|
||||||
Elegant styles for all native HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
|
Elegant styles for all native HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
|
||||||
<a href="https://picocss.com/#examples">Examples</a> ·
|
<a href="https://github.com/picocss/examples">Examples</a> ·
|
||||||
<a href="https://picocss.com/docs/">Documentation</a>
|
<a href="https://picocss.com/docs/">Documentation</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@ -52,7 +52,7 @@ There are 4 ways to get started with Pico CSS:
|
|||||||
|
|
||||||
**Install manually**
|
**Install manually**
|
||||||
|
|
||||||
[Download Pico](https://github.com/picocss/pico/archive/refs/tags/v1.5.10.zip) and link `/css/pico.min.css` in the `<head>` of your website.
|
[Download Pico](https://github.com/picocss/pico/archive/refs/tags/v1.5.11.zip) and link `/css/pico.min.css` in the `<head>` of your website.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="css/pico.min.css">
|
<link rel="stylesheet" href="css/pico.min.css">
|
||||||
@ -80,7 +80,7 @@ composer require picocss/pico
|
|||||||
|
|
||||||
## Class-less version
|
## Class-less version
|
||||||
|
|
||||||
Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
|
Pico provides a `.classless` version ([example](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)).
|
||||||
|
|
||||||
In this version, `header`, `main` and `footer` act as containers.
|
In this version, `header`, `main` and `footer` act as containers.
|
||||||
|
|
||||||
@ -119,7 +119,7 @@ Then just write pure HTML, and it should look great:
|
|||||||
|
|
||||||
Minimalist templates to discover Pico in action:
|
Minimalist templates to discover Pico in action:
|
||||||
|
|
||||||
[](https://picocss.com/#examples)
|
[](https://github.com/picocss/examples)
|
||||||
|
|
||||||
- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview)**
|
- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview)**
|
||||||
A starter example with most of the Pico components and styles.
|
A starter example with most of the Pico components and styles.
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS v1.5.10 (https://picocss.com)
|
* Pico CSS v1.5.11 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
@ -763,9 +763,7 @@ small {
|
|||||||
:where(dl, ol, ul) {
|
:where(dl, ol, ul) {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-start: var(--spacing);
|
|
||||||
padding-inline-start: var(--spacing);
|
padding-inline-start: var(--spacing);
|
||||||
-webkit-padding-end: 0;
|
|
||||||
padding-inline-end: 0;
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
:where(dl, ol, ul) li {
|
:where(dl, ol, ul) li {
|
||||||
@ -794,9 +792,7 @@ blockquote {
|
|||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
|
||||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-end: none;
|
|
||||||
border-inline-end: none;
|
border-inline-end: none;
|
||||||
}
|
}
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
@ -1113,9 +1109,7 @@ textarea[disabled],
|
|||||||
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
|
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
@ -1168,9 +1162,7 @@ select::-ms-expand {
|
|||||||
select:not([multiple], [size]) {
|
select:not([multiple], [size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
@ -1208,9 +1200,7 @@ label > :where(input, select, textarea) {
|
|||||||
margin-top: -0.125em;
|
margin-top: -0.125em;
|
||||||
margin-right: 0.375em;
|
margin-right: 0.375em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: 0.375em;
|
|
||||||
margin-inline-end: 0.375em;
|
margin-inline-end: 0.375em;
|
||||||
border-width: var(--border-width);
|
border-width: var(--border-width);
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
@ -1291,7 +1281,6 @@ label > :where(input, select, textarea) {
|
|||||||
}
|
}
|
||||||
[type=checkbox][role=switch]:checked::before {
|
[type=checkbox][role=switch]:checked::before {
|
||||||
margin-left: calc(1.125em - var(--border-width));
|
margin-left: calc(1.125em - var(--border-width));
|
||||||
-webkit-margin-start: calc(1.125em - var(--border-width));
|
|
||||||
margin-inline-start: calc(1.125em - var(--border-width));
|
margin-inline-start: calc(1.125em - var(--border-width));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1382,9 +1371,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
@ -1410,9 +1397,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
@ -1547,7 +1532,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
|
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
|
||||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
|
||||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||||
border-radius: 5rem;
|
border-radius: 5rem;
|
||||||
background-image: var(--icon-search);
|
background-image: var(--icon-search);
|
||||||
@ -1556,7 +1540,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
|
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
|
||||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
|
||||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||||
background-position: center left 1.125rem, center right 0.75rem;
|
background-position: center left 1.125rem, center right 0.75rem;
|
||||||
}
|
}
|
||||||
@ -1728,7 +1711,6 @@ details summary::after {
|
|||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
|
|
||||||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
@ -1849,7 +1831,7 @@ dialog article > header,
|
|||||||
dialog article > footer {
|
dialog article > footer {
|
||||||
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
||||||
}
|
}
|
||||||
dialog article > header .close {
|
dialog article > header a[rel=prev] {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: var(--spacing);
|
margin-left: var(--spacing);
|
||||||
float: right;
|
float: right;
|
||||||
@ -1866,6 +1848,23 @@ dialog article > footer [role=button]:not(:first-of-type) {
|
|||||||
dialog article p:last-of-type {
|
dialog article p:last-of-type {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
dialog article a[rel=prev] {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||||
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: var(--icon-close);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto 1rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
dialog article a[rel=prev]:is([aria-current], :hover, :active, :focus) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
dialog:not([open]), dialog[open=false] {
|
dialog:not([open]), dialog[open=false] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -1924,13 +1923,11 @@ nav[aria-label=breadcrumb] {
|
|||||||
justify-content: start;
|
justify-content: start;
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
||||||
-webkit-margin-start: var(--nav-link-spacing-horizontal);
|
|
||||||
margin-inline-start: var(--nav-link-spacing-horizontal);
|
margin-inline-start: var(--nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
|
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
||||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
|
||||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
||||||
content: "/";
|
content: "/";
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
@ -2090,10 +2087,10 @@ li[role=list] > a::after {
|
|||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: calc(1rem * var(--line-height, 1.5));
|
height: calc(1rem * var(--line-height, 1.5));
|
||||||
-webkit-margin-start: 0.5rem;
|
|
||||||
margin-inline-start: 0.5rem;
|
margin-inline-start: 0.5rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
background-position: right center;
|
background-position: right center;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -2169,7 +2166,6 @@ nav details[role=list][open] summary {
|
|||||||
}
|
}
|
||||||
nav details[role=list] summary + ul {
|
nav details[role=list] summary + ul {
|
||||||
margin-top: var(--outline-width);
|
margin-top: var(--outline-width);
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
}
|
}
|
||||||
nav details[role=list] summary[role=link] {
|
nav details[role=list] summary[role=link] {
|
||||||
@ -2178,7 +2174,6 @@ nav details[role=list] summary[role=link] {
|
|||||||
}
|
}
|
||||||
nav details[role=list] summary[role=link] + ul {
|
nav details[role=list] summary[role=link] + ul {
|
||||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
|
||||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2190,7 +2185,6 @@ li[role=list] a:focus ~ ul {
|
|||||||
li[role=list] > ul {
|
li[role=list] > ul {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
|
||||||
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
||||||
}
|
}
|
||||||
li[role=list] > a::after {
|
li[role=list] > a::after {
|
||||||
@ -2225,9 +2219,7 @@ label > details[role=list] {
|
|||||||
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
|
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
|
||||||
margin-right: calc(var(--spacing) * 0.5);
|
margin-right: calc(var(--spacing) * 0.5);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
|
||||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||||
}
|
}
|
||||||
[aria-busy=true]:not(input, select, textarea, html):empty {
|
[aria-busy=true]:not(input, select, textarea, html):empty {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
4
css/pico.classless.min.css
vendored
4
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
29
css/pico.css
29
css/pico.css
@ -1,6 +1,6 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS v1.5.10 (https://picocss.com)
|
* Pico CSS v1.5.11 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
@ -820,9 +820,7 @@ small {
|
|||||||
:where(dl, ol, ul) {
|
:where(dl, ol, ul) {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-start: var(--spacing);
|
|
||||||
padding-inline-start: var(--spacing);
|
padding-inline-start: var(--spacing);
|
||||||
-webkit-padding-end: 0;
|
|
||||||
padding-inline-end: 0;
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
:where(dl, ol, ul) li {
|
:where(dl, ol, ul) li {
|
||||||
@ -851,9 +849,7 @@ blockquote {
|
|||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
|
||||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-end: none;
|
|
||||||
border-inline-end: none;
|
border-inline-end: none;
|
||||||
}
|
}
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
@ -1216,9 +1212,7 @@ textarea[disabled],
|
|||||||
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
|
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
@ -1271,9 +1265,7 @@ select::-ms-expand {
|
|||||||
select:not([multiple], [size]) {
|
select:not([multiple], [size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
@ -1311,9 +1303,7 @@ label > :where(input, select, textarea) {
|
|||||||
margin-top: -0.125em;
|
margin-top: -0.125em;
|
||||||
margin-right: 0.375em;
|
margin-right: 0.375em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: 0.375em;
|
|
||||||
margin-inline-end: 0.375em;
|
margin-inline-end: 0.375em;
|
||||||
border-width: var(--border-width);
|
border-width: var(--border-width);
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
@ -1394,7 +1384,6 @@ label > :where(input, select, textarea) {
|
|||||||
}
|
}
|
||||||
[type=checkbox][role=switch]:checked::before {
|
[type=checkbox][role=switch]:checked::before {
|
||||||
margin-left: calc(1.125em - var(--border-width));
|
margin-left: calc(1.125em - var(--border-width));
|
||||||
-webkit-margin-start: calc(1.125em - var(--border-width));
|
|
||||||
margin-inline-start: calc(1.125em - var(--border-width));
|
margin-inline-start: calc(1.125em - var(--border-width));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1485,9 +1474,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
@ -1513,9 +1500,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
@ -1650,7 +1635,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
|
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
|
||||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
|
||||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||||
border-radius: 5rem;
|
border-radius: 5rem;
|
||||||
background-image: var(--icon-search);
|
background-image: var(--icon-search);
|
||||||
@ -1659,7 +1643,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
|
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
|
||||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
|
||||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||||
background-position: center left 1.125rem, center right 0.75rem;
|
background-position: center left 1.125rem, center right 0.75rem;
|
||||||
}
|
}
|
||||||
@ -1831,7 +1814,6 @@ details summary::after {
|
|||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
|
|
||||||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
@ -2091,13 +2073,11 @@ nav[aria-label=breadcrumb] {
|
|||||||
justify-content: start;
|
justify-content: start;
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
||||||
-webkit-margin-start: var(--nav-link-spacing-horizontal);
|
|
||||||
margin-inline-start: var(--nav-link-spacing-horizontal);
|
margin-inline-start: var(--nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
|
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
||||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
|
||||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
||||||
content: "/";
|
content: "/";
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
@ -2257,10 +2237,10 @@ li[role=list] > a::after {
|
|||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: calc(1rem * var(--line-height, 1.5));
|
height: calc(1rem * var(--line-height, 1.5));
|
||||||
-webkit-margin-start: 0.5rem;
|
|
||||||
margin-inline-start: 0.5rem;
|
margin-inline-start: 0.5rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
background-position: right center;
|
background-position: right center;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -2336,7 +2316,6 @@ nav details[role=list][open] summary {
|
|||||||
}
|
}
|
||||||
nav details[role=list] summary + ul {
|
nav details[role=list] summary + ul {
|
||||||
margin-top: var(--outline-width);
|
margin-top: var(--outline-width);
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
}
|
}
|
||||||
nav details[role=list] summary[role=link] {
|
nav details[role=list] summary[role=link] {
|
||||||
@ -2345,7 +2324,6 @@ nav details[role=list] summary[role=link] {
|
|||||||
}
|
}
|
||||||
nav details[role=list] summary[role=link] + ul {
|
nav details[role=list] summary[role=link] + ul {
|
||||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
|
||||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2357,7 +2335,6 @@ li[role=list] a:focus ~ ul {
|
|||||||
li[role=list] > ul {
|
li[role=list] > ul {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
|
||||||
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
||||||
}
|
}
|
||||||
li[role=list] > a::after {
|
li[role=list] > a::after {
|
||||||
@ -2392,9 +2369,7 @@ label > details[role=list] {
|
|||||||
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
|
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
|
||||||
margin-right: calc(var(--spacing) * 0.5);
|
margin-right: calc(var(--spacing) * 0.5);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
|
||||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||||
}
|
}
|
||||||
[aria-busy=true]:not(input, select, textarea, html):empty {
|
[aria-busy=true]:not(input, select, textarea, html):empty {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS v1.5.10 (https://picocss.com)
|
* Pico CSS v1.5.11 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
@ -733,9 +733,7 @@ small {
|
|||||||
:where(dl, ol, ul) {
|
:where(dl, ol, ul) {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-start: var(--spacing);
|
|
||||||
padding-inline-start: var(--spacing);
|
padding-inline-start: var(--spacing);
|
||||||
-webkit-padding-end: 0;
|
|
||||||
padding-inline-end: 0;
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
:where(dl, ol, ul) li {
|
:where(dl, ol, ul) li {
|
||||||
@ -764,9 +762,7 @@ blockquote {
|
|||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
|
||||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-end: none;
|
|
||||||
border-inline-end: none;
|
border-inline-end: none;
|
||||||
}
|
}
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
@ -1083,9 +1079,7 @@ textarea[disabled],
|
|||||||
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
|
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
@ -1138,9 +1132,7 @@ select::-ms-expand {
|
|||||||
select:not([multiple], [size]) {
|
select:not([multiple], [size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
@ -1178,9 +1170,7 @@ label > :where(input, select, textarea) {
|
|||||||
margin-top: -0.125em;
|
margin-top: -0.125em;
|
||||||
margin-right: 0.375em;
|
margin-right: 0.375em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: 0.375em;
|
|
||||||
margin-inline-end: 0.375em;
|
margin-inline-end: 0.375em;
|
||||||
border-width: var(--border-width);
|
border-width: var(--border-width);
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
@ -1261,7 +1251,6 @@ label > :where(input, select, textarea) {
|
|||||||
}
|
}
|
||||||
[type=checkbox][role=switch]:checked::before {
|
[type=checkbox][role=switch]:checked::before {
|
||||||
margin-left: calc(1.125em - var(--border-width));
|
margin-left: calc(1.125em - var(--border-width));
|
||||||
-webkit-margin-start: calc(1.125em - var(--border-width));
|
|
||||||
margin-inline-start: calc(1.125em - var(--border-width));
|
margin-inline-start: calc(1.125em - var(--border-width));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1352,9 +1341,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
@ -1380,9 +1367,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
@ -1517,7 +1502,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
|
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
|
||||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
|
||||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||||
border-radius: 5rem;
|
border-radius: 5rem;
|
||||||
background-image: var(--icon-search);
|
background-image: var(--icon-search);
|
||||||
@ -1526,7 +1510,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
|
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
|
||||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
|
||||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||||
background-position: center left 1.125rem, center right 0.75rem;
|
background-position: center left 1.125rem, center right 0.75rem;
|
||||||
}
|
}
|
||||||
@ -1698,7 +1681,6 @@ details summary::after {
|
|||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
|
|
||||||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
@ -1819,7 +1801,7 @@ dialog article > header,
|
|||||||
dialog article > footer {
|
dialog article > footer {
|
||||||
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
||||||
}
|
}
|
||||||
dialog article > header .close {
|
dialog article > header a[rel=prev] {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: var(--spacing);
|
margin-left: var(--spacing);
|
||||||
float: right;
|
float: right;
|
||||||
@ -1836,6 +1818,23 @@ dialog article > footer [role=button]:not(:first-of-type) {
|
|||||||
dialog article p:last-of-type {
|
dialog article p:last-of-type {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
dialog article a[rel=prev] {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||||
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: var(--icon-close);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto 1rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
dialog article a[rel=prev]:is([aria-current], :hover, :active, :focus) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
dialog:not([open]), dialog[open=false] {
|
dialog:not([open]), dialog[open=false] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -1894,13 +1893,11 @@ nav[aria-label=breadcrumb] {
|
|||||||
justify-content: start;
|
justify-content: start;
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
||||||
-webkit-margin-start: var(--nav-link-spacing-horizontal);
|
|
||||||
margin-inline-start: var(--nav-link-spacing-horizontal);
|
margin-inline-start: var(--nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
|
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
||||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
|
||||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
||||||
content: "/";
|
content: "/";
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
@ -2060,10 +2057,10 @@ li[role=list] > a::after {
|
|||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: calc(1rem * var(--line-height, 1.5));
|
height: calc(1rem * var(--line-height, 1.5));
|
||||||
-webkit-margin-start: 0.5rem;
|
|
||||||
margin-inline-start: 0.5rem;
|
margin-inline-start: 0.5rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
background-position: right center;
|
background-position: right center;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -2139,7 +2136,6 @@ nav details[role=list][open] summary {
|
|||||||
}
|
}
|
||||||
nav details[role=list] summary + ul {
|
nav details[role=list] summary + ul {
|
||||||
margin-top: var(--outline-width);
|
margin-top: var(--outline-width);
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
}
|
}
|
||||||
nav details[role=list] summary[role=link] {
|
nav details[role=list] summary[role=link] {
|
||||||
@ -2148,7 +2144,6 @@ nav details[role=list] summary[role=link] {
|
|||||||
}
|
}
|
||||||
nav details[role=list] summary[role=link] + ul {
|
nav details[role=list] summary[role=link] + ul {
|
||||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
|
||||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2160,7 +2155,6 @@ li[role=list] a:focus ~ ul {
|
|||||||
li[role=list] > ul {
|
li[role=list] > ul {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
|
||||||
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
||||||
}
|
}
|
||||||
li[role=list] > a::after {
|
li[role=list] > a::after {
|
||||||
@ -2195,9 +2189,7 @@ label > details[role=list] {
|
|||||||
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
|
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
|
||||||
margin-right: calc(var(--spacing) * 0.5);
|
margin-right: calc(var(--spacing) * 0.5);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
|
||||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||||
}
|
}
|
||||||
[aria-busy=true]:not(input, select, textarea, html):empty {
|
[aria-busy=true]:not(input, select, textarea, html):empty {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
4
css/pico.fluid.classless.min.css
vendored
4
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
css/pico.min.css
vendored
4
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
|||||||
/*!
|
/*!
|
||||||
* Pico CSS v1.5.10 (https://picocss.com)
|
* Pico CSS v1.5.11 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*
|
*
|
||||||
* Slim version example
|
* Slim version example
|
||||||
@ -748,9 +748,7 @@ small {
|
|||||||
:where(dl, ol, ul) {
|
:where(dl, ol, ul) {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-start: var(--spacing);
|
|
||||||
padding-inline-start: var(--spacing);
|
padding-inline-start: var(--spacing);
|
||||||
-webkit-padding-end: 0;
|
|
||||||
padding-inline-end: 0;
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
:where(dl, ol, ul) li {
|
:where(dl, ol, ul) li {
|
||||||
@ -779,9 +777,7 @@ blockquote {
|
|||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
|
||||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-end: none;
|
|
||||||
border-inline-end: none;
|
border-inline-end: none;
|
||||||
}
|
}
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
@ -1142,9 +1138,7 @@ textarea[disabled],
|
|||||||
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
|
:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
@ -1197,9 +1191,7 @@ select::-ms-expand {
|
|||||||
select:not([multiple], [size]) {
|
select:not([multiple], [size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
4
css/pico.slim.min.css
vendored
4
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -10,7 +10,7 @@
|
|||||||
<li>Documentation</li>
|
<li>Documentation</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>
|
<li><a href="https://github.com/picocss/examples" class="secondary">Examples</a></li>
|
||||||
<li><a href="./" class="secondary">Docs</a></li>
|
<li><a href="./" class="secondary">Docs</a></li>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
|
<a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Accordions"
|
title=`Accordions`
|
||||||
description="Toggle sections of content in pure HTML, without JavaScript."
|
description=`Toggle sections of content in pure HTML, without JavaScript.`
|
||||||
canonical="accordions.html"
|
canonical=`accordions.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="accordions-link"}
|
${require('./_sidebar.html') active=`accordions-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="accordions">
|
<section id="accordions">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Buttons"
|
title=`Buttons`
|
||||||
description="The essential button in pure HTML, without .classes for the default style."
|
description=`The essential button in pure HTML, without .classes for the default style.`
|
||||||
canonical="buttons.html"
|
canonical=`buttons.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="buttons-link"}
|
${require('./_sidebar.html') active=`buttons-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="buttons">
|
<section id="buttons">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Cards"
|
title=`Cards`
|
||||||
description="A flexible container with graceful spacings across devices and viewports."
|
description=`A flexible container with graceful spacings across devices and viewports.`
|
||||||
canonical="cards.html"
|
canonical=`cards.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="cards-link"}
|
${require('./_sidebar.html') active=`cards-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="cards">
|
<section id="cards">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Class-less version"
|
title=`Class-less version`
|
||||||
description="For wild HTML purists, Pico provides a .classless version."
|
description=`For wild HTML purists, Pico provides a .classless version.`
|
||||||
canonical="classless.html"
|
canonical=`classless.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="classless-link"}
|
${require('./_sidebar.html') active=`classless-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="classless">
|
<section id="classless">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Containers"
|
title=`Containers`
|
||||||
description=".container enable a centered viewport, .container-fluid enable a 100% layout."
|
description=`.container enable a centered viewport, .container-fluid enable a 100% layout.`
|
||||||
canonical="containers.html"
|
canonical=`containers.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="containers-link"}
|
${require('./_sidebar.html') active=`containers-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="containers">
|
<section id="containers">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Customization"
|
title=`Customization`
|
||||||
description="You can customize themes with SCSS, or you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables)."
|
description=`You can customize themes with SCSS, or you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables).`
|
||||||
canonical="customization.html"
|
canonical=`customization.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="customization-link"}
|
${require('./_sidebar.html') active=`customization-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="customization">
|
<section id="customization">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Dropdowns"
|
title=`Dropdowns`
|
||||||
description="Dropdown menus and custom selects without JavaScript."
|
description=`Dropdown menus and custom selects without JavaScript.`
|
||||||
canonical="dropdowns.html"
|
canonical=`dropdowns.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="dropdowns-link"}
|
${require('./_sidebar.html') active=`dropdowns-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="dropdown">
|
<section id="dropdown">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Forms"
|
title=`Forms`
|
||||||
description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports."
|
description=`All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.`
|
||||||
canonical="forms.html"
|
canonical=`forms.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="forms-link"}
|
${require('./_sidebar.html') active=`forms-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="forms">
|
<section id="forms">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Grid"
|
title=`Grid`
|
||||||
description=".grid enable a minimal grid system with auto-layout columns."
|
description=`.grid enable a minimal grid system with auto-layout columns.`
|
||||||
canonical="grid.html"
|
canonical=`grid.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="grid-link"}
|
${require('./_sidebar.html') active=`grid-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="grid">
|
<section id="grid">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Documentation"
|
title=`Documentation`
|
||||||
description="Pico works without package manager or dependencies! There are 4 ways to get started with Pico CSS: manually, from a CDN, with NPM, or with Composer."
|
description=`Pico works without package manager or dependencies! There are 4 ways to get started with Pico CSS: manually, from a CDN, with NPM, or with Composer.`
|
||||||
canonical=""
|
canonical=``
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="start-link"}
|
${require('./_sidebar.html') active=`start-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="start">
|
<section id="start">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Loading"
|
title=`Loading`
|
||||||
description="aria-busy='true' enable a loading indicator."
|
description=`aria-busy='true' enable a loading indicator.`
|
||||||
canonical="loading.html"
|
canonical=`loading.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="loading-link"}
|
${require('./_sidebar.html') active=`loading-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="loading">
|
<section id="loading">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Modal"
|
title=`Modal`
|
||||||
description="A flexible container with graceful spacings across devices and viewports."
|
description=`A flexible container with graceful spacings across devices and viewports.`
|
||||||
canonical="modal.html"
|
canonical=`modal.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="modal-link"}
|
${require('./_sidebar.html') active=`modal-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="modal">
|
<section id="modal">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Navs"
|
title=`Navs`
|
||||||
description="The essential navbar component in pure semantic HTML."
|
description=`The essential navbar component in pure semantic HTML.`
|
||||||
canonical="navs.html"
|
canonical=`navs.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="navs-link"}
|
${require('./_sidebar.html') active=`navs-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="navs">
|
<section id="navs">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Progress"
|
title=`Progress`
|
||||||
description="Progress bar element in pure HTML, without JavaScript."
|
description=`Progress bar element in pure HTML, without JavaScript.`
|
||||||
canonical="progress.html"
|
canonical=`progress.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="progress-link"}
|
${require('./_sidebar.html') active=`progress-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="progress">
|
<section id="progress">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="RTL (Right-To-Left)"
|
title=`RTL (Right-To-Left)`
|
||||||
description="Support for right-to-left text in Pico with dir='rtl'"
|
description=`Support for right-to-left text in Pico with dir='rtl'`
|
||||||
canonical="rtl.html"
|
canonical=`rtl.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="rtl-link"}
|
${require('./_sidebar.html') active=`rtl-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="rtl">
|
<section id="rtl">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Horizontal scroller"
|
title=`Horizontal scroller`
|
||||||
description="<figure> acts as a container to make any content scrollable horizontally."
|
description=`<figure> acts as a container to make any content scrollable horizontally.`
|
||||||
canonical="scroller.html"
|
canonical=`scroller.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="scroller-link"}
|
${require('./_sidebar.html') active=`scroller-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="scroller">
|
<section id="scroller">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Tables"
|
title=`Tables`
|
||||||
description="Default styles for tables without .classes"
|
description=`Default styles for tables without .classes`
|
||||||
canonical="tables.html"
|
canonical=`tables.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="tables-link"}
|
${require('./_sidebar.html') active=`tables-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="tables">
|
<section id="tables">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Themes"
|
title=`Themes`
|
||||||
description="Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark')."
|
description=`Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark').`
|
||||||
canonical="themes.html"
|
canonical=`themes.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="themes-link"}
|
${require('./_sidebar.html') active=`themes-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="themes">
|
<section id="themes">
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="Tooltips"
|
title=`Tooltips`
|
||||||
description="Enable tooltips everywhere in pure HTML, without JavaScript."
|
description=`Enable tooltips everywhere in pure HTML, without JavaScript.`
|
||||||
canonical="tooltips.html"
|
canonical=`tooltips.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="tooltips-link"}
|
${require('./_sidebar.html') active=`tooltips-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="tooltips">
|
<section id="tooltips">
|
||||||
|
|||||||
@ -1,16 +1,18 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html') title="Typography" description="All typographic
|
${require('./_head.html')
|
||||||
elements are responsive, allowing text to scale gracefully across devices
|
title=`Typography`
|
||||||
and viewports." canonical="typography.html" }
|
description=`All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.`
|
||||||
|
canonical=`typography.html`
|
||||||
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="typography-link"}
|
${require('./_sidebar.html') active=`typography-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="typography">
|
<section id="typography">
|
||||||
@ -127,18 +129,13 @@
|
|||||||
<article aria-label="Hgroup example">
|
<article aria-label="Hgroup example">
|
||||||
<div class="headings">
|
<div class="headings">
|
||||||
<h2>Heading 2</h2>
|
<h2>Heading 2</h2>
|
||||||
<h3>Subtitle for heading 2</h3>
|
<p>Subtitle for heading 2</p>
|
||||||
</div>
|
</div>
|
||||||
<footer class="code">
|
<footer class="code">
|
||||||
<pre><code><<b>hgroup</b>>
|
<pre><code><<b>hgroup</b>>
|
||||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
<<b>p</b>>Subtitle for heading 2</<b>p</b>>
|
||||||
</<b>hgroup</b>></code></pre>
|
</<b>hgroup</b>></code></pre>
|
||||||
|
|
||||||
<pre><code><<b>div</b> <i>class</i>=<u>"headings</u>">
|
|
||||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
|
||||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
|
||||||
</<b>div</b>></code></pre>
|
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
${require('./_head.html')
|
${require('./_head.html')
|
||||||
title="We love .classes"
|
title=`We love .classes`
|
||||||
description="As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers."
|
description=`As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers.`
|
||||||
canonical="we-love-classes.html"
|
canonical=`we-love-classes.html`
|
||||||
}
|
}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
${require('./_nav.html')}
|
${require('./_nav.html')}
|
||||||
|
|
||||||
<main class="container" id="docs">
|
<main class="container" id="docs">
|
||||||
${require('./_sidebar.html') active="we-love-classes-link"}
|
${require('./_sidebar.html') active=`we-love-classes-link`}
|
||||||
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section id="we-love-classes">
|
<section id="we-love-classes">
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1084
package-lock.json
generated
1084
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@picocss/pico",
|
"name": "@picocss/pico",
|
||||||
"version": "1.5.10",
|
"version": "1.5.11",
|
||||||
"description": "Minimal CSS Framework for semantic HTML",
|
"description": "Minimal CSS Framework for semantic HTML",
|
||||||
"author": "Lucas Larroche",
|
"author": "Lucas Larroche",
|
||||||
"main": "css/pico.min.css",
|
"main": "css/pico.min.css",
|
||||||
@ -83,16 +83,16 @@
|
|||||||
"@babel/core": "^7.21.4",
|
"@babel/core": "^7.21.4",
|
||||||
"@babel/preset-env": "^7.21.4",
|
"@babel/preset-env": "^7.21.4",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"caniuse-lite": "1.0.30001481",
|
"caniuse-lite": "1.0.30001572",
|
||||||
"clean-css-cli": "^5.6.2",
|
"clean-css-cli": "^5.6.2",
|
||||||
"css-declaration-sorter": "^6.4.0",
|
"css-declaration-sorter": "^7.1.1",
|
||||||
"html-includes": "^4.4.1",
|
"html-includes": "^5.0.0",
|
||||||
"nodemon": "^2.0.22",
|
"nodemon": "^3.0.2",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"postcss": "^8.4.23",
|
"postcss": "^8.4.23",
|
||||||
"postcss-cli": "^10.1.0",
|
"postcss-cli": "^11.0.0",
|
||||||
"postcss-scss": "^4.0.6",
|
"postcss-scss": "^4.0.6",
|
||||||
"rollup": "^3.20.7",
|
"rollup": "^4.9.1",
|
||||||
"sass": "^1.62.0",
|
"sass": "^1.62.0",
|
||||||
"uglify-js": "^3.17.4"
|
"uglify-js": "^3.17.4"
|
||||||
},
|
},
|
||||||
@ -102,4 +102,4 @@
|
|||||||
"not dead",
|
"not dead",
|
||||||
"not ie > 0"
|
"not ie > 0"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -71,6 +71,7 @@ li[role="list"] > a {
|
|||||||
margin-inline-start: 0.5rem;
|
margin-inline-start: 0.5rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
background-position: right center;
|
background-position: right center;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|||||||
@ -28,6 +28,7 @@ dialog {
|
|||||||
|
|
||||||
// Content
|
// Content
|
||||||
article {
|
article {
|
||||||
|
$close-selector: if($enable-classes, ".close", "a[rel='prev']");
|
||||||
max-height: calc(100vh - var(--spacing) * 2);
|
max-height: calc(100vh - var(--spacing) * 2);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
@ -50,7 +51,7 @@ dialog {
|
|||||||
}
|
}
|
||||||
|
|
||||||
> header {
|
> header {
|
||||||
.close {
|
#{$close-selector} {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: var(--spacing);
|
margin-left: var(--spacing);
|
||||||
float: right;
|
float: right;
|
||||||
@ -76,27 +77,25 @@ dialog {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Close icon
|
// Close icon
|
||||||
@if $enable-classes {
|
#{$close-selector} {
|
||||||
.close {
|
display: block;
|
||||||
display: block;
|
width: 1rem;
|
||||||
width: 1rem;
|
height: 1rem;
|
||||||
height: 1rem;
|
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||||
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-left: auto;
|
||||||
margin-left: auto;
|
background-image: var(--icon-close);
|
||||||
background-image: var(--icon-close);
|
background-position: center;
|
||||||
background-position: center;
|
background-size: auto 1rem;
|
||||||
background-size: auto 1rem;
|
background-repeat: no-repeat;
|
||||||
background-repeat: no-repeat;
|
opacity: 0.5;
|
||||||
opacity: 0.5;
|
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition: opacity var(--transition);
|
transition: opacity var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:is([aria-current], :hover, :active, :focus) {
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
/*!
|
/*!
|
||||||
* Pico CSS v1.5.10 (https://picocss.com)
|
* Pico CSS v1.5.11 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
/*!
|
/*!
|
||||||
* Pico CSS v1.5.10 (https://picocss.com)
|
* Pico CSS v1.5.11 (https://picocss.com)
|
||||||
* Copyright 2019-2023 - Licensed under MIT
|
* Copyright 2019-2023 - Licensed under MIT
|
||||||
*
|
*
|
||||||
* Slim version example
|
* Slim version example
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user