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 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 Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal 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** **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 ```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** **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: Use the default `.classless` version if you need centered viewports:
```html ```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: Or use the `.fluid.classless` version if you need a fluid container:
```html ```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: 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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <title>Hello, world!</title>
</head> </head>
<body> <body>
@ -154,6 +154,7 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
## Documentation ## Documentation
**Getting started** **Getting started**
- [Usage](https://picocss.com/docs/) - [Usage](https://picocss.com/docs/)
- [Themes](https://picocss.com/docs/themes.html) - [Themes](https://picocss.com/docs/themes.html)
- [Customization](https://picocss.com/docs/customization.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) - [RTL](https://picocss.com/docs/rtl.html)
**Layout** **Layout**
- [Containers](https://picocss.com/docs/containers.html) - [Containers](https://picocss.com/docs/containers.html)
- [Grids](https://picocss.com/docs/grid.html) - [Grids](https://picocss.com/docs/grid.html)
- [Horizontal scroller](https://picocss.com/docs/scroller.html) - [Horizontal scroller](https://picocss.com/docs/scroller.html)
**Elements** **Elements**
- [Typography](https://picocss.com/docs/typography.html) - [Typography](https://picocss.com/docs/typography.html)
- [Buttons](https://picocss.com/docs/buttons.html) - [Buttons](https://picocss.com/docs/buttons.html)
- [Forms](https://picocss.com/docs/forms.html) - [Forms](https://picocss.com/docs/forms.html)
- [Tables](https://picocss.com/docs/tables.html) - [Tables](https://picocss.com/docs/tables.html)
**Components** **Components**
- [Accordions](https://picocss.com/docs/accordions.html) - [Accordions](https://picocss.com/docs/accordions.html)
- [Cards](https://picocss.com/docs/cards.html) - [Cards](https://picocss.com/docs/cards.html)
- [Dropdowns](https://picocss.com/docs/dropdowns.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) - [Progress](https://picocss.com/docs/progress.html)
**Utilities** **Utilities**
- [Loading](https://picocss.com/docs/loading.html) - [Loading](https://picocss.com/docs/loading.html)
- [Tooltips](https://picocss.com/docs/tooltips.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. 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.

6
css/pico.classless.css
View file

@ -1,7 +1,7 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* Pico.css v1.5.6 (https://picocss.com) * Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2023 - Licensed under MIT
*/ */
/** /**
* Theme: default * Theme: default
@ -304,7 +304,7 @@ kbd {
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme]) {
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);

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

9
css/pico.css
View file

@ -1,7 +1,7 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* Pico.css v1.5.6 (https://picocss.com) * Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2023 - Licensed under MIT
*/ */
/** /**
* Theme: default * Theme: default
@ -309,7 +309,7 @@ kbd {
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme]) {
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -1285,7 +1285,7 @@ select:not([multiple], [size]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
:where(input, select, textarea) + small { :where(input, select, textarea, .grid) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--spacing) * -0.75); margin-top: calc(var(--spacing) * -0.75);
@ -1987,6 +1987,7 @@ dialog:not([open]), dialog[open=false] {
padding-right: var(--scrollbar-width, 0px); padding-right: var(--scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none;
} }
.modal-is-open dialog { .modal-is-open dialog {
pointer-events: auto; pointer-events: auto;

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -1,7 +1,7 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* Pico.css v1.5.6 (https://picocss.com) * Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2023 - Licensed under MIT
*/ */
/** /**
* Theme: default * Theme: default
@ -304,7 +304,7 @@ kbd {
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme]) {
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);

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

2
css/themes/default.css
View file

@ -304,7 +304,7 @@ kbd {
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme]) {
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --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.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

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

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

2
docs/js/grid.js
View file

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

2
docs/js/modal.js
View file

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

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

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

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

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

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

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

2
docs/src/_sidebar.html
View file

@ -9,7 +9,7 @@
<title>Collapse</title> <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> <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> </svg>
Table of content Table of contents
</a> </a>
<details> <details>
<summary>Getting started</summary> <summary>Getting started</summary>

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> <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> <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> <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> <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> </code></pre>
<pre><code><em>// Fluid viewport</em> <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> </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> <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) */ <em>/* <span class="name"></span>Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em> /* 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> { <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</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c500">…</u>; <i>--primary-hover</i>: <u class="c500">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>; <i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;

2
docs/src/forms.html
View file

@ -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> <h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
</hgroup> </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>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"> <article aria-label="Form example">
<form> <form>
<div class="grid"> <div class="grid">

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> <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> <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://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p> <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@latest/css/pico.min.css"</u>&gt;</code></pre> <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> <h3>Install with NPM</h3>
<pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre> <pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
<h3>Install with Composer</h3> <h3>Install with Composer</h3>

9
docs/src/progress.html
View file

@ -28,15 +28,12 @@
</footer> </footer>
</article> </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"> <article aria-label="Indeterminate progress bar example">
<progress id="indeterminate-progress"></progress> <progress></progress>
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>script</b>&gt; <pre><code>&lt;<b>progress</b>&gt;&lt;/<b>progress</b>&gt;</code></pre>
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre>
</footer> </footer>
</article> </article>

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", "name": "@picocss/pico",
"version": "1.5.6", "version": "1.5.7",
"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",
@ -79,21 +79,21 @@
"watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'" "watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.19.3", "@babel/cli": "^7.20.7",
"@babel/core": "^7.19.3", "@babel/core": "^7.20.12",
"@babel/preset-env": "^7.19.3", "@babel/preset-env": "^7.20.2",
"autoprefixer": "^10.4.12", "autoprefixer": "^10.4.13",
"clean-css-cli": "^5.6.1", "clean-css-cli": "^5.6.2",
"css-declaration-sorter": "^6.3.1", "css-declaration-sorter": "^6.3.1",
"html-includes": "^4.4.1", "html-includes": "^4.4.1",
"nodemon": "^2.0.20", "nodemon": "^2.0.20",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.4.17", "postcss": "^8.4.21",
"postcss-cli": "^10.0.0", "postcss-cli": "^10.1.0",
"postcss-scss": "^4.0.5", "postcss-scss": "^4.0.6",
"rollup": "^2.79.1", "rollup": "^3.11.0",
"sass": "^1.55.0", "sass": "^1.57.1",
"uglify-js": "^3.17.2" "uglify-js": "^3.17.4"
}, },
"browserslist": [ "browserslist": [
">= 0.5%", ">= 0.5%",

1
scss/components/_modal.scss
View file

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

8
scss/content/_form.scss
View file

@ -328,7 +328,13 @@ select {
} }
// Helper // Helper
:where(input, select, textarea) { $inputs: "input, select, textarea";
@if ($enable-classes and $enable-grid) {
$inputs: $inputs + ", .grid";
}
:where(#{$inputs}) {
+ small { + small {
display: block; display: block;
width: 100%; width: 100%;

4
scss/pico.scss
View file

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

4
scss/pico.slim.scss
View file

@ -1,6 +1,6 @@
/*! /*!
* Pico.css v1.5.6 (https://picocss.com) * Pico.css v1.5.7 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2023 - Licensed under MIT
* *
* Slim version example * Slim version example
* You can export only the modules you need * 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 // Automatically enabled if user has Dark mode enabled
@import "default/dark"; @import "default/dark";
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme]) {
@include dark; @include dark;
} }
} }