mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #289 from picocss/dev

Browse source 
v1.5.7
This commit is contained in:
Lucas Larroche 2023-01-28 14:35:59 +07:00 • committed by GitHub
commit edfb8cb5d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
67 changed files with 650 additions and 633 deletions
Download patch file Download diff file Expand all files Collapse all files

2
LICENSE.md
View file

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2019-2022 Pico
Copyright (c) 2019-2023 Pico
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

17
README.md
View file

@ -60,10 +60,10 @@ There are 4 ways to get started with pico.css:
**Install from CDN**
Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.
Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@1.*/) to link pico.css.
```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
```
**Install with NPM**
@ -87,13 +87,13 @@ In this version, `header`, `main` and `footer` act as containers.
Use the default `.classless` version if you need centered viewports:
```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.classless.min.css">
```
Or use the `.fluid.classless` version if you need a fluid container:
```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.fluid.classless.min.css">
```
Then just write pure HTML, and it should look great:
@ -104,7 +104,7 @@ Then just write pure HTML, and it should look great:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.classless.min.css">
<title>Hello, world!</title>
</head>
<body>
@ -154,6 +154,7 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
## Documentation
**Getting started**
- [Usage](https://picocss.com/docs/)
- [Themes](https://picocss.com/docs/themes.html)
- [Customization](https://picocss.com/docs/customization.html)
@ -161,17 +162,20 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
- [RTL](https://picocss.com/docs/rtl.html)
**Layout**
- [Containers](https://picocss.com/docs/containers.html)
- [Grids](https://picocss.com/docs/grid.html)
- [Horizontal scroller](https://picocss.com/docs/scroller.html)
**Elements**
- [Typography](https://picocss.com/docs/typography.html)
- [Buttons](https://picocss.com/docs/buttons.html)
- [Forms](https://picocss.com/docs/forms.html)
- [Tables](https://picocss.com/docs/tables.html)
**Components**
- [Accordions](https://picocss.com/docs/accordions.html)
- [Cards](https://picocss.com/docs/cards.html)
- [Dropdowns](https://picocss.com/docs/dropdowns.html)
@ -180,10 +184,11 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
- [Progress](https://picocss.com/docs/progress.html)
**Utilities**
- [Loading](https://picocss.com/docs/loading.html)
- [Tooltips](https://picocss.com/docs/tooltips.html)
## Browser Support
## Browser support
Pico is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.

50
css/pico.classless.css
View file

@ -1,7 +1,7 @@
@charset "UTF-8";
/*!
* Pico.css v1.5.6 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
* Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*/
/**
* Theme: default
@ -53,33 +53,33 @@
@media (min-width: 576px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 768px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@media (min-width: 992px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@media (min-width: 1200px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
@ -304,7 +304,7 @@ kbd {
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
:root:not([data-theme]) {
--background-color: #11191f;
--color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%);
@ -581,8 +581,8 @@ body > footer {
}
@media (min-width: 576px) {
body > header,
body > main,
body > footer {
body > main,
body > footer {
max-width: 510px;
padding-right: 0;
padding-left: 0;
@ -590,22 +590,22 @@ body > footer {
}
@media (min-width: 768px) {
body > header,
body > main,
body > footer {
body > main,
body > footer {
max-width: 700px;
}
}
@media (min-width: 992px) {
body > header,
body > main,
body > footer {
body > main,
body > footer {
max-width: 920px;
}
}
@media (min-width: 1200px) {
body > header,
body > main,
body > footer {
body > main,
body > footer {
max-width: 1130px;
}
}
@ -2478,8 +2478,8 @@ textarea,
*/
@media (prefers-reduced-motion: reduce) {
*:not([aria-busy=true]),
:not([aria-busy=true])::before,
:not([aria-busy=true])::after {
:not([aria-busy=true])::before,
:not([aria-busy=true])::after {
background-attachment: initial !important;
animation-duration: 1ms !important;
animation-delay: -1ms !important;

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

File diff suppressed because one or more lines are too long

6
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

37
css/pico.css
View file

@ -1,7 +1,7 @@
@charset "UTF-8";
/*!
* Pico.css v1.5.6 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
* Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*/
/**
* Theme: default
@ -55,33 +55,33 @@
@media (min-width: 576px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 768px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@media (min-width: 992px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@media (min-width: 1200px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
@ -309,7 +309,7 @@ kbd {
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
:root:not([data-theme]) {
--background-color: #11191f;
--color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%);
@ -1285,7 +1285,7 @@ select:not([multiple], [size]) {
background-position: center left 0.75rem;
}
:where(input, select, textarea) + small {
:where(input, select, textarea, .grid) + small {
display: block;
width: 100%;
margin-top: calc(var(--spacing) * -0.75);
@ -1987,6 +1987,7 @@ dialog:not([open]), dialog[open=false] {
padding-right: var(--scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
touch-action: none;
}
.modal-is-open dialog {
pointer-events: auto;
@ -2644,8 +2645,8 @@ textarea,
*/
@media (prefers-reduced-motion: reduce) {
*:not([aria-busy=true]),
:not([aria-busy=true])::before,
:not([aria-busy=true])::after {
:not([aria-busy=true])::before,
:not([aria-busy=true])::after {
background-attachment: initial !important;
animation-duration: 1ms !important;
animation-delay: -1ms !important;

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -1,7 +1,7 @@
@charset "UTF-8";
/*!
* Pico.css v1.5.6 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
* Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*/
/**
* Theme: default
@ -53,33 +53,33 @@
@media (min-width: 576px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 768px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@media (min-width: 992px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@media (min-width: 1200px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
@ -304,7 +304,7 @@ kbd {
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
:root:not([data-theme]) {
--background-color: #11191f;
--color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%);
@ -2448,8 +2448,8 @@ textarea,
*/
@media (prefers-reduced-motion: reduce) {
*:not([aria-busy=true]),
:not([aria-busy=true])::before,
:not([aria-busy=true])::after {
:not([aria-busy=true])::before,
:not([aria-busy=true])::after {
background-attachment: initial !important;
animation-duration: 1ms !important;
animation-delay: -1ms !important;

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

File diff suppressed because one or more lines are too long

6
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

6
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

8
css/pico.slim.css
View file

@ -1,6 +1,6 @@
/*!
* Pico.css v1.5.6 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
* Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*
* Slim version example
* You can export only the modules you need
@ -240,7 +240,7 @@ kbd {
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
:root:not([data-theme]) {
--background-color: #11191f;
--color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%);
@ -1211,7 +1211,7 @@ select:not([multiple], [size]) {
background-position: center left 0.75rem;
}
:where(input, select, textarea) + small {
:where(input, select, textarea, .grid) + small {
display: block;
width: 100%;
margin-top: calc(var(--spacing) * -0.75);

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

File diff suppressed because one or more lines are too long

6
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

26
css/themes/default.css
View file

@ -50,33 +50,33 @@
@media (min-width: 576px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 768px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@media (min-width: 992px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@media (min-width: 1200px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
@ -304,7 +304,7 @@ kbd {
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
:root:not([data-theme]) {
--background-color: #11191f;
--color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%);

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.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

8
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/css/pico.docs.css
View file

@ -345,7 +345,7 @@ section > pre {
}
@media (min-width: 992px) {
[data-theme=invalid]:before,
[data-theme=valid]:before {
[data-theme=valid]:before {
top: var(--spacing);
right: var(--spacing);
}

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
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

4
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/js/commons.js
View file

@ -2,7 +2,7 @@
* Add some magic to Pico docs
*
* Pico.css - https://picocss.com
* Copyright 2019-2022 - Licensed under MIT
* Copyright 2019-2023 - Licensed under MIT
*/
// Imports

2
docs/js/commons.min.js vendored
View file

@ -1 +1 @@
"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",localStorageKey:"picoPreferedColorScheme",init(){this.scheme=this.schemeFromLocalStorage,this.initSwitchers()},get schemeFromLocalStorage(){return void 0!==window.localStorage&&null!==window.localStorage.getItem(this.localStorageKey)?window.localStorage.getItem(this.localStorageKey):this._scheme},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers(){document.querySelectorAll(this.buttonsTarget).forEach(e=>{e.addEventListener("click",()=>{"dark"==this.scheme?this.scheme="light":this.scheme="dark"},!1)})},addButton(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme(),this.schemeToLocalStorage()},get scheme(){return this._scheme},applyScheme(){document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(e=>{var t="dark"==this.scheme?this.change.dark:this.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})},schemeToLocalStorage(){void 0!==window.localStorage&&window.localStorage.setItem(this.localStorageKey,this.scheme)}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init(){this.onToggleClick()},onToggleClick(){this.toggleLink.addEventListener("click",e=>{e.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();
"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",localStorageKey:"picoPreferredColorScheme",init(){this.scheme=this.schemeFromLocalStorage,this.initSwitchers()},get schemeFromLocalStorage(){return void 0!==window.localStorage&&null!==window.localStorage.getItem(this.localStorageKey)?window.localStorage.getItem(this.localStorageKey):this._scheme},get preferredColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers(){document.querySelectorAll(this.buttonsTarget).forEach(e=>{e.addEventListener("click",()=>{"dark"==this.scheme?this.scheme="light":this.scheme="dark"},!1)})},addButton(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferredColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme(),this.schemeToLocalStorage()},get scheme(){return this._scheme},applyScheme(){document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(e=>{var t="dark"==this.scheme?this.change.dark:this.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})},schemeToLocalStorage(){void 0!==window.localStorage&&window.localStorage.setItem(this.localStorageKey,this.scheme)}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init(){this.onToggleClick()},onToggleClick(){this.toggleLink.addEventListener("click",e=>{e.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();

2
docs/js/customization.js
View file

@ -2,7 +2,7 @@
* Customization
*
* Pico.css - https://picocss.com
* Copyright 2019-2022 - Licensed under MIT
* Copyright 2019-2023 - Licensed under MIT
*/
// Imports

2
docs/js/grid.js
View file

@ -2,7 +2,7 @@
* Grid
*
* Pico.css - https://picocss.com
* Copyright 2019-2022 - Licensed under MIT
* Copyright 2019-2023 - Licensed under MIT
*/
const grid = {

2
docs/js/modal.js
View file

@ -2,7 +2,7 @@
* Modal
*
* Pico.css - https://picocss.com
* Copyright 2019-2022 - Licensed under MIT
* Copyright 2019-2023 - Licensed under MIT
*/
// Config

2
docs/js/src/color-picker.js
View file

@ -2,7 +2,7 @@
* Color Picker
*
* Pico.css - https://picocss.com
* Copyright 2019-2022 - Licensed under MIT
* Copyright 2019-2023 - Licensed under MIT
*/
export const colorPicker = {

10
docs/js/src/theme-switcher.js
View file

@ -2,7 +2,7 @@
* Theme switcher
*
* Pico.css - https://picocss.com
* Copyright 2019-2022 - Licensed under MIT
* Copyright 2019-2023 - Licensed under MIT
*/
export const themeSwitcher = {
@ -14,7 +14,7 @@ export const themeSwitcher = {
dark: '<i>Turn off dark mode</i>',
},
buttonsTarget: '.theme-switcher',
localStorageKey: 'picoPreferedColorScheme',
localStorageKey: 'picoPreferredColorScheme',
// Init
init() {
@ -32,8 +32,8 @@ export const themeSwitcher = {
return this._scheme;
},
// Prefered color scheme
get preferedColorScheme() {
// Preferred color scheme
get preferredColorScheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
},
@ -57,7 +57,7 @@ export const themeSwitcher = {
// Set scheme
set scheme(scheme) {
if (scheme == 'auto') {
this.preferedColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
this.preferredColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
}
else if (scheme == 'dark' || scheme == 'light') {
this._scheme = scheme;

2
docs/js/src/toggle-navigation.js
View file

@ -2,7 +2,7 @@
* Toggle navigation
*
* Pico.css - https://picocss.com
* Copyright 2019-2022 - Licensed under MIT
* Copyright 2019-2023 - Licensed under MIT
*/
export const toggleNavigation = {

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

4
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

4
docs/src/_sidebar.html
View file

@ -9,7 +9,7 @@
<title>Collapse</title>
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path>
</svg>
Table of content
Table of contents
</a>
<details>
<summary>Getting started</summary>
@ -71,4 +71,4 @@
activeLink.setAttribute('aria-current', 'page');
parentAccordion.setAttribute('open', 'true');
</script>
</aside>
</aside>

6
docs/src/classless.html
View file

@ -36,14 +36,14 @@
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
<p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
<p>These <code>.classless</code> versions are also available on <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a>:</p>
<p>These <code>.classless</code> versions are also available on <a href="https://unpkg.com/@picocss/pico@1.*/">unpkg CDN</a>:</p>
<pre><code><em>// Centered viewport</em>
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css"</u>&gt;
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@1.*/css/pico.classless.min.css"</u>&gt;
</code></pre>
<pre><code><em>// Fluid viewport</em>
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"</u>&gt;
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@1.*/css/pico.fluid.classless.min.css"</u>&gt;
</code></pre>
<p>If you need to customize the default parent (<code>&lt;<b>body</b>&gt;</code>) for <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</code>, you can recompile Pico by defining another CSS selector.</p>

2
docs/src/customization.html
View file

@ -64,7 +64,7 @@
<em>/* <span class="name"></span>Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em>
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
<b>:root:not([data-theme=<u>"light"</u>])</b> {
<b>:root:not([data-theme])</b> {
<i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c500">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;

14
docs/src/forms.html
View file

@ -1,8 +1,8 @@
<!doctype html>
<html lang="en">
<head>
${require('./_head.html')
title="Forms"
${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"
}
@ -10,10 +10,10 @@
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="forms-link"}
<div role="document">
<section id="forms">
<hgroup>
@ -21,7 +21,7 @@
<h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
</hgroup>
<p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
<p>All natives form elements are fully customizable and themeable with CSS variables.</p>
<p>All native form elements are fully customizable and themeable with CSS variables.</p>
<article aria-label="Form example">
<form>
<div class="grid">
@ -233,7 +233,7 @@
<pre><code><em>&lt;!-- Search --&gt;</em>
&lt;<b>input</b> <i>type</i>=<u>"search"</u> <i>id</i>=<u>"search"</u> <i>name</i>=<u>"search"</u> <i>placeholder</i>=<u>"Search"</u>&gt;
&lt;!-- File browser --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
&lt;<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>&gt;
@ -264,7 +264,7 @@
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>

4
docs/src/index.html
View file

@ -25,8 +25,8 @@
<p><a href="https://github.com/picocss/pico/archive/refs/heads/master.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://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>&gt;</code></pre>
<p>Alternatively, you can use <a href="https://unpkg.com/@picocss/pico@1.*/">unpkg CDN</a> to link pico.css</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@1.*/css/pico.min.css"</u>&gt;</code></pre>
<h3>Install with NPM</h3>
<pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
<h3>Install with Composer</h3>

19
docs/src/progress.html
View file

@ -1,8 +1,8 @@
<!doctype html>
<html lang="en">
<head>
${require('./_head.html')
title="Progress"
${require('./_head.html')
title="Progress"
description="Progress bar element in pure HTML, without JavaScript."
canonical="progress.html"
}
@ -10,10 +10,10 @@
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="progress-link"}
<div role="document">
<section id="progress">
<hgroup>
@ -28,22 +28,19 @@
</footer>
</article>
<p>You can change a progress bar to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
<p>A progress bar without a <code><b>value</b></code> attribute is indeterminate.</p>
<article aria-label="Indeterminate progress bar example">
<progress id="indeterminate-progress"></progress>
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
<progress></progress>
<footer class="code">
<pre><code>&lt;<b>script</b>&gt;
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre>
<pre><code>&lt;<b>progress</b>&gt;&lt;/<b>progress</b>&gt;</code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>

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

4
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

879
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

24
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@picocss/pico",
"version": "1.5.6",
"version": "1.5.7",
"description": "Minimal CSS Framework for semantic HTML",
"author": "Lucas Larroche",
"main": "css/pico.min.css",
@ -79,21 +79,21 @@
"watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
},
"devDependencies": {
"@babel/cli": "^7.19.3",
"@babel/core": "^7.19.3",
"@babel/preset-env": "^7.19.3",
"autoprefixer": "^10.4.12",
"clean-css-cli": "^5.6.1",
"@babel/cli": "^7.20.7",
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"autoprefixer": "^10.4.13",
"clean-css-cli": "^5.6.2",
"css-declaration-sorter": "^6.3.1",
"html-includes": "^4.4.1",
"nodemon": "^2.0.20",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.17",
"postcss-cli": "^10.0.0",
"postcss-scss": "^4.0.5",
"rollup": "^2.79.1",
"sass": "^1.55.0",
"uglify-js": "^3.17.2"
"postcss": "^8.4.21",
"postcss-cli": "^10.1.0",
"postcss-scss": "^4.0.6",
"rollup": "^3.11.0",
"sass": "^1.57.1",
"uglify-js": "^3.17.4"
},
"browserslist": [
">= 0.5%",

1
scss/components/_modal.scss
View file

@ -114,6 +114,7 @@ dialog {
padding-right: var(--scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
touch-action: none;
dialog {
pointer-events: auto;

14
scss/content/_form.scss
View file

@ -220,7 +220,7 @@ textarea[disabled],
padding-inline-end: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
}
}
@else {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
@ -248,7 +248,7 @@ textarea[disabled],
@if $enable-important {
--border-color: var(--form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
}
}
@else {
--border-color: var(--form-element-valid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
@ -263,7 +263,7 @@ textarea[disabled],
@if $enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
}
}
@else {
--border-color: var(--form-element-invalid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
@ -328,7 +328,13 @@ select {
}
// Helper
:where(input, select, textarea) {
$inputs: "input, select, textarea";
@if ($enable-classes and $enable-grid) {
$inputs: $inputs + ", .grid";
}
:where(#{$inputs}) {
+ small {
display: block;
width: 100%;

4
scss/pico.scss
View file

@ -1,6 +1,6 @@
/*!
* Pico.css v1.5.6 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
* Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*/
// Config

4
scss/pico.slim.scss
View file

@ -1,6 +1,6 @@
/*!
* Pico.css v1.5.6 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
* Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*
* Slim version example
* You can export only the modules you need

2
scss/themes/default.scss
View file

@ -17,7 +17,7 @@
// Automatically enabled if user has Dark mode enabled
@import "default/dark";
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme]) {
@include dark;
}
}