mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 17:16: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">
<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>
<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>
</p>
@ -52,7 +52,7 @@ There are 4 ways to get started with Pico CSS:
**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
<link rel="stylesheet" href="css/pico.min.css">
@ -80,7 +80,7 @@ composer require picocss/pico
## 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.
@ -119,7 +119,7 @@ Then just write pure HTML, and it should look great:
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)**
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";
/*!
* Pico CSS v1.5.10 (https://picocss.com)
* Pico CSS v1.5.11 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*/
/**
@ -763,9 +763,7 @@ small {
:where(dl, ol, ul) {
padding-right: 0;
padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing);
-webkit-padding-end: 0;
padding-inline-end: 0;
}
:where(dl, ol, ul) li {
@ -794,9 +792,7 @@ blockquote {
padding: var(--spacing);
border-right: none;
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);
-webkit-border-end: none;
border-inline-end: none;
}
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] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
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;
-webkit-padding-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-size: 1rem auto;
@ -1168,9 +1162,7 @@ select::-ms-expand {
select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-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);
background-image: var(--icon-chevron);
background-position: center right 0.75rem;
@ -1208,9 +1200,7 @@ label > :where(input, select, textarea) {
margin-top: -0.125em;
margin-right: 0.375em;
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--border-width);
font-size: inherit;
@ -1291,7 +1281,6 @@ label > :where(input, select, textarea) {
}
[type=checkbox][role=switch]:checked::before {
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));
}
@ -1382,9 +1371,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-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);
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);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-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);
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] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
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;
}
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;
background-position: center left 1.125rem, center right 0.75rem;
}
@ -1728,7 +1711,6 @@ details summary::after {
display: block;
width: 1rem;
height: 1rem;
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
@ -1849,7 +1831,7 @@ dialog article > header,
dialog article > footer {
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-left: var(--spacing);
float: right;
@ -1866,6 +1848,23 @@ dialog article > footer [role=button]:not(:first-of-type) {
dialog article p:last-of-type {
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] {
display: none;
}
@ -1924,13 +1923,11 @@ nav[aria-label=breadcrumb] {
justify-content: start;
}
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);
}
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
position: absolute;
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);
content: "/";
color: var(--muted-color);
@ -2090,10 +2087,10 @@ li[role=list] > a::after {
display: block;
width: 1rem;
height: calc(1rem * var(--line-height, 1.5));
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem;
float: right;
transform: rotate(0deg);
background-image: var(--icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
@ -2169,7 +2166,6 @@ nav details[role=list][open] summary {
}
nav details[role=list] summary + ul {
margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0;
}
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 {
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);
}
@ -2190,7 +2185,6 @@ li[role=list] a:focus ~ ul {
li[role=list] > ul {
display: none;
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));
}
li[role=list] > a::after {
@ -2225,9 +2219,7 @@ label > details[role=list] {
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5);
}
[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";
/*!
* Pico CSS v1.5.10 (https://picocss.com)
* Pico CSS v1.5.11 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*/
/**
@ -820,9 +820,7 @@ small {
:where(dl, ol, ul) {
padding-right: 0;
padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing);
-webkit-padding-end: 0;
padding-inline-end: 0;
}
:where(dl, ol, ul) li {
@ -851,9 +849,7 @@ blockquote {
padding: var(--spacing);
border-right: none;
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);
-webkit-border-end: none;
border-inline-end: none;
}
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] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
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;
-webkit-padding-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-size: 1rem auto;
@ -1271,9 +1265,7 @@ select::-ms-expand {
select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-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);
background-image: var(--icon-chevron);
background-position: center right 0.75rem;
@ -1311,9 +1303,7 @@ label > :where(input, select, textarea) {
margin-top: -0.125em;
margin-right: 0.375em;
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--border-width);
font-size: inherit;
@ -1394,7 +1384,6 @@ label > :where(input, select, textarea) {
}
[type=checkbox][role=switch]:checked::before {
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));
}
@ -1485,9 +1474,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-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);
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);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-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);
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] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
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;
}
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;
background-position: center left 1.125rem, center right 0.75rem;
}
@ -1831,7 +1814,6 @@ details summary::after {
display: block;
width: 1rem;
height: 1rem;
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
@ -2091,13 +2073,11 @@ nav[aria-label=breadcrumb] {
justify-content: start;
}
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);
}
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
position: absolute;
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);
content: "/";
color: var(--muted-color);
@ -2257,10 +2237,10 @@ li[role=list] > a::after {
display: block;
width: 1rem;
height: calc(1rem * var(--line-height, 1.5));
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem;
float: right;
transform: rotate(0deg);
background-image: var(--icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
@ -2336,7 +2316,6 @@ nav details[role=list][open] summary {
}
nav details[role=list] summary + ul {
margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0;
}
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 {
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);
}
@ -2357,7 +2335,6 @@ li[role=list] a:focus ~ ul {
li[role=list] > ul {
display: none;
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));
}
li[role=list] > a::after {
@ -2392,9 +2369,7 @@ label > details[role=list] {
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5);
}
[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";
/*!
* Pico CSS v1.5.10 (https://picocss.com)
* Pico CSS v1.5.11 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*/
/**
@ -733,9 +733,7 @@ small {
:where(dl, ol, ul) {
padding-right: 0;
padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing);
-webkit-padding-end: 0;
padding-inline-end: 0;
}
:where(dl, ol, ul) li {
@ -764,9 +762,7 @@ blockquote {
padding: var(--spacing);
border-right: none;
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);
-webkit-border-end: none;
border-inline-end: none;
}
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] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
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;
-webkit-padding-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-size: 1rem auto;
@ -1138,9 +1132,7 @@ select::-ms-expand {
select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-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);
background-image: var(--icon-chevron);
background-position: center right 0.75rem;
@ -1178,9 +1170,7 @@ label > :where(input, select, textarea) {
margin-top: -0.125em;
margin-right: 0.375em;
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--border-width);
font-size: inherit;
@ -1261,7 +1251,6 @@ label > :where(input, select, textarea) {
}
[type=checkbox][role=switch]:checked::before {
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));
}
@ -1352,9 +1341,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-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);
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);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-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);
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] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
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;
}
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;
background-position: center left 1.125rem, center right 0.75rem;
}
@ -1698,7 +1681,6 @@ details summary::after {
display: block;
width: 1rem;
height: 1rem;
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
@ -1819,7 +1801,7 @@ dialog article > header,
dialog article > footer {
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-left: var(--spacing);
float: right;
@ -1836,6 +1818,23 @@ dialog article > footer [role=button]:not(:first-of-type) {
dialog article p:last-of-type {
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] {
display: none;
}
@ -1894,13 +1893,11 @@ nav[aria-label=breadcrumb] {
justify-content: start;
}
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);
}
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
position: absolute;
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);
content: "/";
color: var(--muted-color);
@ -2060,10 +2057,10 @@ li[role=list] > a::after {
display: block;
width: 1rem;
height: calc(1rem * var(--line-height, 1.5));
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem;
float: right;
transform: rotate(0deg);
background-image: var(--icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
@ -2139,7 +2136,6 @@ nav details[role=list][open] summary {
}
nav details[role=list] summary + ul {
margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0;
}
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 {
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);
}
@ -2160,7 +2155,6 @@ li[role=list] a:focus ~ ul {
li[role=list] > ul {
display: none;
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));
}
li[role=list] > a::after {
@ -2195,9 +2189,7 @@ label > details[role=list] {
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5);
}
[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
*
* Slim version example
@ -748,9 +748,7 @@ small {
:where(dl, ol, ul) {
padding-right: 0;
padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing);
-webkit-padding-end: 0;
padding-inline-end: 0;
}
:where(dl, ol, ul) li {
@ -779,9 +777,7 @@ blockquote {
padding: var(--spacing);
border-right: none;
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);
-webkit-border-end: none;
border-inline-end: none;
}
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] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-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);
background-position: center right 0.75rem;
background-size: 1rem auto;
@ -1197,9 +1191,7 @@ select::-ms-expand {
select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-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);
background-image: var(--icon-chevron);
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>
</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="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">
<head>
${require('./_head.html')
title="Accordions"
description="Toggle sections of content in pure HTML, without JavaScript."
canonical="accordions.html"
title=`Accordions`
description=`Toggle sections of content in pure HTML, without JavaScript.`
canonical=`accordions.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="accordions-link"}
${require('./_sidebar.html') active=`accordions-link`}
<div role="document">
<section id="accordions">

8
docs/src/buttons.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Buttons"
description="The essential button in pure HTML, without .classes for the default style."
canonical="buttons.html"
title=`Buttons`
description=`The essential button in pure HTML, without .classes for the default style.`
canonical=`buttons.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="buttons-link"}
${require('./_sidebar.html') active=`buttons-link`}
<div role="document">
<section id="buttons">

8
docs/src/cards.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Cards"
description="A flexible container with graceful spacings across devices and viewports."
canonical="cards.html"
title=`Cards`
description=`A flexible container with graceful spacings across devices and viewports.`
canonical=`cards.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="cards-link"}
${require('./_sidebar.html') active=`cards-link`}
<div role="document">
<section id="cards">

8
docs/src/classless.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Class-less version"
description="For wild HTML purists, Pico provides a .classless version."
canonical="classless.html"
title=`Class-less version`
description=`For wild HTML purists, Pico provides a .classless version.`
canonical=`classless.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="classless-link"}
${require('./_sidebar.html') active=`classless-link`}
<div role="document">
<section id="classless">

8
docs/src/containers.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Containers"
description=".container enable a centered viewport, .container-fluid enable a 100% layout."
canonical="containers.html"
title=`Containers`
description=`.container enable a centered viewport, .container-fluid enable a 100% layout.`
canonical=`containers.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="containers-link"}
${require('./_sidebar.html') active=`containers-link`}
<div role="document">
<section id="containers">

8
docs/src/customization.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
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)."
canonical="customization.html"
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).`
canonical=`customization.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="customization-link"}
${require('./_sidebar.html') active=`customization-link`}
<div role="document">
<section id="customization">

8
docs/src/dropdowns.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Dropdowns"
description="Dropdown menus and custom selects without JavaScript."
canonical="dropdowns.html"
title=`Dropdowns`
description=`Dropdown menus and custom selects without JavaScript.`
canonical=`dropdowns.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="dropdowns-link"}
${require('./_sidebar.html') active=`dropdowns-link`}
<div role="document">
<section id="dropdown">

8
docs/src/forms.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Forms"
description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports."
canonical="forms.html"
title=`Forms`
description=`All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.`
canonical=`forms.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="forms-link"}
${require('./_sidebar.html') active=`forms-link`}
<div role="document">
<section id="forms">

8
docs/src/grid.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Grid"
description=".grid enable a minimal grid system with auto-layout columns."
canonical="grid.html"
title=`Grid`
description=`.grid enable a minimal grid system with auto-layout columns.`
canonical=`grid.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="grid-link"}
${require('./_sidebar.html') active=`grid-link`}
<div role="document">
<section id="grid">

10
docs/src/index.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
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."
canonical=""
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.`
canonical=``
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="start-link"}
${require('./_sidebar.html') active=`start-link`}
<div role="document">
<section id="start">
@ -22,7 +22,7 @@
</hgroup>
<p>There are 4 ways to get started with Pico CSS:</p>
<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>
<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>

8
docs/src/loading.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Loading"
description="aria-busy='true' enable a loading indicator."
canonical="loading.html"
title=`Loading`
description=`aria-busy='true' enable a loading indicator.`
canonical=`loading.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="loading-link"}
${require('./_sidebar.html') active=`loading-link`}
<div role="document">
<section id="loading">

8
docs/src/modal.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Modal"
description="A flexible container with graceful spacings across devices and viewports."
canonical="modal.html"
title=`Modal`
description=`A flexible container with graceful spacings across devices and viewports.`
canonical=`modal.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="modal-link"}
${require('./_sidebar.html') active=`modal-link`}
<div role="document">
<section id="modal">

8
docs/src/navs.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Navs"
description="The essential navbar component in pure semantic HTML."
canonical="navs.html"
title=`Navs`
description=`The essential navbar component in pure semantic HTML.`
canonical=`navs.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="navs-link"}
${require('./_sidebar.html') active=`navs-link`}
<div role="document">
<section id="navs">

8
docs/src/progress.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Progress"
description="Progress bar element in pure HTML, without JavaScript."
canonical="progress.html"
title=`Progress`
description=`Progress bar element in pure HTML, without JavaScript.`
canonical=`progress.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="progress-link"}
${require('./_sidebar.html') active=`progress-link`}
<div role="document">
<section id="progress">

8
docs/src/rtl.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="RTL (Right-To-Left)"
description="Support for right-to-left text in Pico with dir='rtl'"
canonical="rtl.html"
title=`RTL (Right-To-Left)`
description=`Support for right-to-left text in Pico with dir='rtl'`
canonical=`rtl.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="rtl-link"}
${require('./_sidebar.html') active=`rtl-link`}
<div role="document">
<section id="rtl">

8
docs/src/scroller.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Horizontal scroller"
description="&lt;figure&gt; acts as a container to make any content scrollable horizontally."
canonical="scroller.html"
title=`Horizontal scroller`
description=`&lt;figure&gt; acts as a container to make any content scrollable horizontally.`
canonical=`scroller.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="scroller-link"}
${require('./_sidebar.html') active=`scroller-link`}
<div role="document">
<section id="scroller">

8
docs/src/tables.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Tables"
description="Default styles for tables without .classes"
canonical="tables.html"
title=`Tables`
description=`Default styles for tables without .classes`
canonical=`tables.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="tables-link"}
${require('./_sidebar.html') active=`tables-link`}
<div role="document">
<section id="tables">

8
docs/src/themes.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
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')."
canonical="themes.html"
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').`
canonical=`themes.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="themes-link"}
${require('./_sidebar.html') active=`themes-link`}
<div role="document">
<section id="themes">

8
docs/src/tooltips.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
title="Tooltips"
description="Enable tooltips everywhere in pure HTML, without JavaScript."
canonical="tooltips.html"
title=`Tooltips`
description=`Enable tooltips everywhere in pure HTML, without JavaScript.`
canonical=`tooltips.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="tooltips-link"}
${require('./_sidebar.html') active=`tooltips-link`}
<div role="document">
<section id="tooltips">

19
docs/src/typography.html
View file

@ -1,16 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
${require('./_head.html') title="Typography" description="All typographic
elements are responsive, allowing text to scale gracefully across devices
and viewports." canonical="typography.html" }
${require('./_head.html')
title=`Typography`
description=`All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.`
canonical=`typography.html`
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="typography-link"}
${require('./_sidebar.html') active=`typography-link`}
<div role="document">
<section id="typography">
@ -127,18 +129,13 @@
<article aria-label="Hgroup example">
<div class="headings">
<h2>Heading 2</h2>
<h3>Subtitle for heading 2</h3>
<p>Subtitle for heading 2</p>
</div>
<footer class="code">
<pre><code>&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>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>
<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>
</article>

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

@ -2,9 +2,9 @@
<html lang="en">
<head>
${require('./_head.html')
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."
canonical="we-love-classes.html"
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.`
canonical=`we-love-classes.html`
}
</head>
@ -12,7 +12,7 @@
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="we-love-classes-link"}
${require('./_sidebar.html') active=`we-love-classes-link`}
<div role="document">
<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

14
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@picocss/pico",
"version": "1.5.10",
"version": "1.5.11",
"description": "Minimal CSS Framework for semantic HTML",
"author": "Lucas Larroche",
"main": "css/pico.min.css",
@ -83,16 +83,16 @@
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"autoprefixer": "^10.4.14",
"caniuse-lite": "1.0.30001481",
"caniuse-lite": "1.0.30001572",
"clean-css-cli": "^5.6.2",
"css-declaration-sorter": "^6.4.0",
"html-includes": "^4.4.1",
"nodemon": "^2.0.22",
"css-declaration-sorter": "^7.1.1",
"html-includes": "^5.0.0",
"nodemon": "^3.0.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.23",
"postcss-cli": "^10.1.0",
"postcss-cli": "^11.0.0",
"postcss-scss": "^4.0.6",
"rollup": "^3.20.7",
"rollup": "^4.9.1",
"sass": "^1.62.0",
"uglify-js": "^3.17.4"
},

1
scss/components/_dropdown.scss
View file

@ -71,6 +71,7 @@ li[role="list"] > a {
margin-inline-start: 0.5rem;
float: right;
transform: rotate(0deg);
background-image: var(--icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;

39
scss/components/_modal.scss
View file

@ -28,6 +28,7 @@ dialog {
// Content
article {
$close-selector: if($enable-classes, ".close", "a[rel='prev']");
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
@ -50,7 +51,7 @@ dialog {
}
> header {
.close {
#{$close-selector} {
margin: 0;
margin-left: var(--spacing);
float: right;
@ -76,27 +77,25 @@ dialog {
}
// Close icon
@if $enable-classes {
.close {
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;
#{$close-selector} {
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;
@if $enable-transitions {
transition: opacity var(--transition);
}
@if $enable-transitions {
transition: opacity var(--transition);
}
&:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
&:is([aria-current], :hover, :active, :focus) {
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
*/

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
*
* Slim version example