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

Merge pull request #419 from picocss/dev

Browse source 
1.5.11
This commit is contained in:
Lucas Larroche 2023-12-30 16:44:22 +07:00 • committed by GitHub
commit 2dd9cf7046
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 939 additions and 614 deletions
Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -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:
[![Examples](.github/examples.jpg)](https://picocss.com/#examples) [![Examples](.github/examples.jpg)](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.

48
css/pico.classless.css
View file

@ -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 {

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

29
css/pico.css
View file

@ -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 {

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

48
css/pico.fluid.classless.css
View file

@ -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 {

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

10
css/pico.slim.css
View file

@ -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;

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/accordions.html
View file

File diff suppressed because one or more lines are too long

2
docs/buttons.html
View file

File diff suppressed because one or more lines are too long

2
docs/cards.html
View file

File diff suppressed because one or more lines are too long

2
docs/classless.html
View file

File diff suppressed because one or more lines are too long

2
docs/containers.html
View file

File diff suppressed because one or more lines are too long

2
docs/customization.html
View file

File diff suppressed because one or more lines are too long

2
docs/dropdowns.html
View file

File diff suppressed because one or more lines are too long

2
docs/forms.html
View file

File diff suppressed because one or more lines are too long

2
docs/grid.html
View file

File diff suppressed because one or more lines are too long

2
docs/index.html
View file

File diff suppressed because one or more lines are too long

2
docs/loading.html
View file

File diff suppressed because one or more lines are too long

2
docs/modal.html
View file

File diff suppressed because one or more lines are too long

2
docs/navs.html
View file

File diff suppressed because one or more lines are too long

2
docs/progress.html
View file

File diff suppressed because one or more lines are too long

2
docs/rtl.html
View file

File diff suppressed because one or more lines are too long

2
docs/scroller.html
View file

File diff suppressed because one or more lines are too long

2
docs/src/_nav.html
View file

@ -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">

8
docs/src/accordions.html
View file

@ -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">

8
docs/src/buttons.html
View file

@ -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">

8
docs/src/cards.html
View file

@ -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">

8
docs/src/classless.html
View file

@ -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">

8
docs/src/containers.html
View file

@ -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">

8
docs/src/customization.html
View file

@ -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">

8
docs/src/dropdowns.html
View file

@ -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">

8
docs/src/forms.html
View file

@ -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">

8
docs/src/grid.html
View file

@ -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">

10
docs/src/index.html
View file

@ -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">
@ -22,7 +22,7 @@
</hgroup> </hgroup>
<p>There are 4 ways to get started with Pico CSS:</p> <p>There are 4 ways to get started with Pico CSS:</p>
<h3>Install manually</h3> <h3>Install manually</h3>
<p><a href="https://github.com/picocss/pico/archive/refs/tags/v1.5.10.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</p> <p><a href="https://github.com/picocss/pico/archive/refs/tags/v1.5.11.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre> <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
<h3>Install from CDN</h3> <h3>Install from CDN</h3>
<p>Alternatively, you can use <a href="https://www.jsdelivr.com/package/npm/@picocss/pico">jsDelivr CDN</a> to link pico.css</p> <p>Alternatively, you can use <a href="https://www.jsdelivr.com/package/npm/@picocss/pico">jsDelivr CDN</a> to link pico.css</p>

8
docs/src/loading.html
View file

@ -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">

8
docs/src/modal.html
View file

@ -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">

8
docs/src/navs.html
View file

@ -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">

8
docs/src/progress.html
View file

@ -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">

8
docs/src/rtl.html
View file

@ -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">

8
docs/src/scroller.html
View file

@ -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="&lt;figure&gt; acts as a container to make any content scrollable horizontally." description=`&lt;figure&gt; 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">

8
docs/src/tables.html
View file

@ -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">

8
docs/src/themes.html
View file

@ -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">

8
docs/src/tooltips.html
View file

@ -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">

19
docs/src/typography.html
View file

@ -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>&lt;<b>hgroup</b>&gt; <pre><code>&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt; &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt; &lt;<b>p</b>&gt;Subtitle for heading 2&lt;/<b>p</b>&gt;
&lt;/<b>hgroup</b>&gt;</code></pre> &lt;/<b>hgroup</b>&gt;</code></pre>
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
</footer> </footer>
</article> </article>

8
docs/src/we-love-classes.html
View file

@ -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">

2
docs/tables.html
View file

File diff suppressed because one or more lines are too long

2
docs/themes.html
View file

File diff suppressed because one or more lines are too long

2
docs/tooltips.html
View file

File diff suppressed because one or more lines are too long

11
docs/typography.html
View file

File diff suppressed because one or more lines are too long

2
docs/we-love-classes.html
View file

File diff suppressed because one or more lines are too long

1084
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

16
package.json
View file

@ -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"
] ]
} }

1
scss/components/_dropdown.scss
View file

@ -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;

39
scss/components/_modal.scss
View file

@ -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;
}
} }
} }
} }

2
scss/pico.scss
View file

@ -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
*/ */

2
scss/pico.slim.scss
View file

@ -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