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

Merge pull request #40 from picocss/dev

Browse source 
Minor Release (v1.4.0)
This commit is contained in:
Lucas Larroche 2021-10-24 16:01:08 +07:00 • committed by GitHub
commit 7f47491e2a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
71 changed files with 12143 additions and 2885 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.browserslistrc Normal file
View file

@ -0,0 +1,3 @@
>= 0.5%
last 2 major versions
not dead

5
.gitignore vendored
View file

@ -1,4 +1,5 @@
node_modules/
*.DS_Store
.prettierrc.js
TODO.md
prepros.config
test.html
tests/

12
README.md
View file

@ -8,7 +8,7 @@
<p align="center">
<strong>Minimal CSS Framework for semantic HTML</strong><br>
Elegant styles for all natives HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
Elegant styles for all native HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
<a href="https://picocss.com/#examples">Examples</a> ·
<a href="https://picocss.com/docs/">Documentation</a>
</p>
@ -22,7 +22,7 @@
https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
**Class-light and semantic**
We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
Pico uses simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
**Great styles with just one CSS file**
No dependencies, package manager, external files, or JavaScript.
@ -141,6 +141,7 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
- [Themes](https://picocss.com/docs/#themes)
- [Customization](https://picocss.com/docs/#customization)
- [Class-less version](https://picocss.com/docs/#classless)
- [RTL](https://picocss.com/docs/#rtl)
**Layout**
- [Containers](https://picocss.com/docs/#containers)
@ -166,16 +167,17 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
## Contributing
- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
- Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly. Those files are automatically generated. You should edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss).
- Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.
- Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `npm run build:css`.
## Copyright and license
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
**Relevant third party tools and resources we depend on:**
**Relevant third-party tools and resources we depend on:**
Website and docs:
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL 2.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
- [Most Visible](https://github.com/andyexeter/most-visible): JavaScript module which returns the most visible element (Licensed [MIT](https://github.com/andyexeter/most-visible/blob/master/LICENSE))
- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))

992
css/pico.classless.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

1186
css/pico.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

4
css/pico.min-dist.css
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

659
css/pico.slim.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

226
css/themes/default.css
View file

@ -2,11 +2,13 @@
* Theme: default
*/
:root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
--border-radius: .25rem;
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
--spacing: 1rem;
@ -15,29 +17,25 @@
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: .75rem;
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--transition: .2s ease-in-out;
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
:root {
--font-size: 17px;
}
}
@media (min-width: 768px) {
:root {
--font-size: 18px;
}
}
@media (min-width: 992px) {
:root {
--font-size: 19px;
}
}
@media (min-width: 1200px) {
:root {
--font-size: 20px;
@ -46,36 +44,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);
}
}
@ -85,19 +80,16 @@
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@media (min-width: 768px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 992px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
}
}
@media (min-width: 1200px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 2);
@ -107,7 +99,6 @@
a {
--text-decoration: none;
}
a.secondary, a.contrast {
--text-decoration: underline;
}
@ -150,12 +141,12 @@ h5 {
--typography-spacing-vertical: 1.6875rem;
}
[type="checkbox"],
[type="radio"] {
[type=checkbox],
[type=radio] {
--border-width: 2px;
}
[type="checkbox"][role="switch"] {
[type=checkbox][role=switch] {
--border-width: 3px;
}
@ -172,20 +163,22 @@ pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {
--font-weight: bolder;
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
[data-theme=light],
:root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #FFF;
--background-color: #fff;
--color: #415462;
--h1-color: #1b2832;
--h2-color: #23333e;
--h2-color: #24333e;
--h3-color: #2c3d49;
--h4-color: #374956;
--h5-color: #415462;
@ -195,19 +188,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #415462;
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #1b2832;
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #FFF;
--contrast-inverse: #fff;
--mark-background-color: #fff2ca;
--mark-color: #543a25;
--ins-color: #388E3C;
--del-color: #C62828;
--mark-color: #543a26;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -221,11 +214,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
--form-element-valid-active-border-color: #2E7D32;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #b71c1c;
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #2e7d32;
--switch-background-color: #bbc6ce;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -236,7 +229,7 @@ kbd {
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#f6f8f9;
--table-row-stripped-background-color: #f6f8f9;
--code-background-color: #edf0f3;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
@ -250,52 +243,54 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fafbfc;
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme=light]) {
color-scheme: dark;
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--h2-color: #e1e6ea;
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h6-color: #aebbc3;
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-border-color: #1f2d38;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d0c284;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -309,15 +304,15 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #23333e;
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
@ -325,7 +320,7 @@ kbd {
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #17232c;
--code-background-color: #18232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
@ -337,54 +332,55 @@ kbd {
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e25;
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
}
[data-theme="dark"] {
[data-theme=dark] {
color-scheme: dark;
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--h2-color: #e1e6ea;
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h6-color: #aebbc3;
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-border-color: #1f2d38;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d0c284;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -398,15 +394,15 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #23333e;
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
@ -414,7 +410,7 @@ kbd {
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #17232c;
--code-background-color: #18232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
@ -426,21 +422,23 @@ kbd {
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e25;
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

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

File diff suppressed because one or more lines are too long

177
docs/css/pico.docs.css
View file

@ -5,36 +5,38 @@
* Theme: Additions for docs
*/
:root {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
--invalid-color: #C62828;
--valid-color: #388E3C;
[data-theme=light],
:root:not([data-theme=dark]) {
--invalid-color: #c62828;
--valid-color: #388e3c;
--nav-background-color: rgba(255, 255, 255, 0.7);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #FFF;
--nav-logo-color: #fff;
--article-code-background-color: #f9fafb;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme=light]) {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
--nav-logo-color: #0e1419;
--article-code-background-color: var(--code-background-color);
}
}
[data-theme="dark"] {
[data-theme=dark] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
--nav-logo-color: #0e1419;
--article-code-background-color: var(--code-background-color);
}
/**
@ -50,7 +52,6 @@ html {
body > main {
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
}
@media (min-width: 992px) {
body > main {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
@ -59,62 +60,56 @@ body > main {
grid-template-columns: 200px auto;
}
}
@media (min-width: 1200px) {
body > main {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
body > main > aside,
body > main div[role="document"] {
body > main div[role=document] {
min-width: 0;
}
div[role="document"] > section::before {
div[role=document] > section::before {
display: block;
height: calc(2rem + 3.5rem - .5rem);
margin-top: calc(-2rem - 3.5rem + .5rem);
content: '';
height: calc(2rem + 3.5rem - 0.5rem);
margin-top: calc(-2rem - 3.5rem + 0.5rem);
content: "";
}
@media (min-width: 576px) {
div[role="document"] > section::before {
height: calc(2.5rem + 3.5rem - .5rem);
height: calc(-2.5rem - 3.5rem + .5rem);
div[role=document] > section::before {
height: calc(2.5rem + 3.5rem - 0.5rem);
height: calc(-2.5rem - 3.5rem + 0.5rem);
}
}
@media (min-width: 768px) {
div[role="document"] > section::before {
height: calc(3rem + 3.5rem - .5rem);
margin-top: calc(-3rem - 3.5rem + .5rem);
div[role=document] > section::before {
height: calc(3rem + 3.5rem - 0.5rem);
margin-top: calc(-3rem - 3.5rem + 0.5rem);
}
}
@media (min-width: 992px) {
div[role="document"] > section::before {
height: calc(3.5rem + 3.5rem - .5rem);
margin-top: calc(-3.5rem - 3.5rem + .5rem);
div[role=document] > section::before {
height: calc(3.5rem + 3.5rem - 0.5rem);
margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
}
}
@media (min-width: 1200px) {
div[role="document"] > section::before {
height: calc(4rem + 3.5rem - .5rem);
margin-top: calc(-4rem - 3.5rem + .5rem);
div[role=document] > section::before {
height: calc(4rem + 3.5rem - 0.5rem);
margin-top: calc(-4rem - 3.5rem + 0.5rem);
}
}
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block;
width: 1rem;
height: 1rem;
background-image: var(--icon-external);
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
content: '';
background-size: 0.66rem auto;
content: "";
}
svg {
@ -128,11 +123,9 @@ main > aside nav {
width: 100%;
margin-bottom: var(--block-spacing-vertical);
}
main > aside nav h1 {
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
@media (min-width: 992px) {
main > aside nav {
position: fixed;
@ -146,47 +139,39 @@ main > aside nav h1 {
display: none;
}
}
main > aside li, main > aside summary {
main > aside li,
main > aside summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
}
main > aside li a {
padding: 0.25rem 0.5rem;
}
main > aside li a svg {
vertical-align: middle;
}
main > aside a.secondary:focus {
background-color: transparent;
color: var(--primary-hover);
}
main > aside a.active,
main > aside a.active:hover {
color: var(--primary);
}
main > aside details {
padding-bottom: .25rem;
padding-bottom: 0.25rem;
border-bottom: none;
}
main > aside details summary {
color: var(--h1-color);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
}
main > aside details summary::after {
display: none;
}
main > aside details[open] > summary:not(:focus) {
color: var(--h1-color);
}
@ -205,7 +190,6 @@ main > aside details[open] > summary:not(:focus) {
margin-bottom: 0;
overflow: hidden;
}
@media (min-width: 576px) {
#customization figure {
grid-template-columns: repeat(18, 1fr);
@ -214,13 +198,11 @@ main > aside details[open] > summary:not(:focus) {
border-top-left-radius: var(--border-radius);
}
}
#customization figure ~ article {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#customization figure button {
margin-bottom: 0;
padding: 0;
@ -228,57 +210,48 @@ main > aside details[open] > summary:not(:focus) {
border: none;
border-radius: 0;
}
#customization figure button:focus {
box-shadow: none;
}
#customization figure button.picked {
background-image: var(--icon-check);
background-position: center;
background-repeat: no-repeat;
background-size: .66rem auto;
background-size: 0.66rem auto;
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
}
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {
background-image: var(--icon-check-dark);
}
#customization h4 {
transition: color var(--transition);
}
#customization pre[data-theme="generated"] {
#customization pre[data-theme=generated] {
border-color: var(--primary);
}
#grids {
--grid-spacing-vertical: 1rem;
}
#grids button {
display: block;
width: 100%;
margin-bottom: var(--spacing);
}
@media (min-width: 576px) {
#grids button {
display: inline-block;
width: auto;
margin-right: .5rem;
margin-right: 0.5rem;
}
}
#grids button svg {
stroke: var(--secondary);
margin-right: .5rem;
margin-right: 0.5rem;
border: 2px solid currentColor;
border-radius: 1rem;
background: currentColor;
}
#grids .grid > * {
padding: calc(var(--spacing) / 2) 0;
border-radius: var(--border-radius);
@ -286,11 +259,9 @@ main > aside details[open] > summary:not(:focus) {
font-size: 87.5%;
text-align: center;
}
#grids details {
margin-top: calc(var(--typography-spacing-vertical) * 2);
}
#grids details svg {
vertical-align: bottom;
}
@ -320,53 +291,60 @@ a[role=button] {
/**
* Docs: Code
*/
article > footer.code {
background: var(--article-code-background-color);
}
article pre,
article pre code {
background: transparent;
margin-bottom: 0;
}
section > pre {
background: var(--article-code-background-color);
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
box-shadow: var(--card-box-shadow);
}
[data-theme="invalid"],
[data-theme="valid"] {
[data-theme=invalid],
[data-theme=valid] {
position: relative;
margin-bottom: 0 !important;
}
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
[data-theme=invalid]:before,
[data-theme=valid]:before {
display: block;
position: absolute;
top: 0;
right: 0;
padding: .375rem .75rem;
padding: 0.375rem 0.75rem;
border-radius: 0;
color: var(--primary-inverse);
font-size: 14px;
line-height: 1;
}
@media (min-width: 992px) {
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
[data-theme=invalid]:before,
[data-theme=valid]:before {
top: var(--spacing);
right: var(--spacing);
}
}
[data-theme="invalid"] code,
[data-theme="valid"] code {
padding: calc(var(--spacing) * 1.625) 0;
[data-theme=invalid] code,
[data-theme=valid] code {
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
}
[data-theme="invalid"]:before {
[data-theme=invalid]:before {
background: var(--invalid-color);
content: 'Not so great';
content: "Not so great";
}
[data-theme="valid"]:before {
[data-theme=valid]:before {
background: var(--valid-color);
content: 'Great';
content: "Great";
}
/**
@ -383,15 +361,12 @@ body > nav {
background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border-color);
}
body > nav a {
border-radius: 0;
}
body > nav svg {
vertical-align: text-bottom;
}
body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem;
height: 3.5rem;
@ -400,17 +375,14 @@ body > nav ul:first-of-type li:first-of-type a {
background: var(--h1-color);
color: var(--nav-logo-color);
}
body > nav ul:first-of-type li:first-of-type a svg {
height: 3.5rem;
}
body > nav ul:first-of-type li:nth-of-type(2) {
display: none;
margin-left: var(--spacing);
color: var(--h1-color);
}
@media (min-width: 992px) {
body > nav ul:first-of-type li:nth-of-type(2) {
display: inline;
@ -426,13 +398,12 @@ body > nav ul:first-of-type li:nth-of-type(2) {
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
padding: 0.75rem;
border-radius: 2rem;
box-shadow: var(--card-box-shadow);
line-height: 1;
text-align: right;
}
.switcher::after {
display: inline-block;
width: 1rem;
@ -441,39 +412,33 @@ body > nav ul:first-of-type li:nth-of-type(2) {
border-radius: 50%;
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
vertical-align: bottom;
content: '';
content: "";
transition: transform var(--transition);
}
.switcher i {
display: inline-block;
max-width: 0;
padding: 0;
overflow: hidden;
font-size: .875rem;
font-size: 0.875rem;
font-style: normal;
white-space: nowrap;
}
.switcher:hover, .switcher:focus {
max-width: 100%;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.switcher:hover::after {
transform: rotate(180deg);
}
.switcher:hover i {
max-width: 100%;
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition), padding var(--transition);
}
.switcher:focus {
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
}
@media (min-width: 576px) {
.switcher {
right: var(--spacing);

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

File diff suppressed because one or more lines are too long

102
docs/index.html
View file

@ -52,6 +52,7 @@
<li><a href="#themes" class="secondary">Themes</a></li>
<li><a href="#customization" class="secondary">Customization</a></li>
<li><a href="#classless" class="secondary">Class-less version</a></li>
<li><a href="#rtl" class="secondary">RTL</a></li>
</ul>
</details>
<details open>
@ -153,11 +154,13 @@
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
</form>
<footer class="code">
<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt;
…
&lt;/<b>article</b>&gt;</code></pre>
</footer>
</article>
<article data-theme="dark" aria-label="Forced dark theme example">
<h4>Dark theme</h4>
@ -166,11 +169,13 @@
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
</form>
<footer class="code">
<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;
…
&lt;/<b>article</b>&gt;</code></pre>
</footer>
</article>
</section><!-- ./ Themes -->
@ -178,7 +183,7 @@
<section id="customization">
<hgroup>
<h2>Customization</h2>
<h3>You can customize themes with SCSS or you can simply edit the CSS variables.</h3>
<h3>You can customize themes with SCSS or, you can edit the CSS variables.</h3>
</hgroup>
<p>Example: <strong>pick a color!</strong></p>
@ -197,6 +202,7 @@
</label>
</fieldset>
</form>
<footer class="code">
<pre><code><em>// Simplified example</em>
<b>:root</b> {
@ -204,6 +210,7 @@
}
</code></pre>
</footer>
</article>
<p>There are 2 ways to customize your version of Pico.css:</p>
<h4>Overriding CSS variables</h4>
@ -250,7 +257,7 @@
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
<h4>Importing Pico SASS library</h4>
<p>It is recommended to customize Pico by importing SASS source files into your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
<p>We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
@ -276,7 +283,7 @@
<em>…</em>
</code></pre>
<p>This allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
<p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
</section><!-- ./ Docs: Customization -->
<!-- Docs: Classless -->
@ -304,6 +311,22 @@
</section><!-- ./ Docs: Classless -->
<!-- Docs: RTL -->
<section id="rtl">
<hgroup>
<h2>RTL</h2>
<h3>Support for right-to-left text in Pico.</h3>
</hgroup>
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code>&lt;<b>html</b>&lt;</html></code> element.</p>
<pre><code><em>&lt;!doctype html&gt;</em>
&lt;<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>&gt;
<em>...</em>
&lt;/<b>html</b>&gt;</code></pre>
<p>The RTL feature is still experimental and will probably evolve.</p>
</section><!-- ./ Docs: RTL -->
<!-- Docs: Container -->
<section id="containers">
<hgroup>
@ -318,7 +341,7 @@
&lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt;
&lt;/<b>body</b>&gt;</code></pre>
<p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
<p>Pico uses the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
<figure>
<table role="grid">
<thead>
@ -368,6 +391,7 @@
<div>3</div>
<div>4</div>
</div>
<footer class="code">
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
&lt;<b>div</b>&gt;1&lt;/<b>div</b>&gt;
@ -376,6 +400,7 @@
&lt;<b>div</b>&gt;4&lt;/<b>div</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
</footer>
</article>
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
@ -388,11 +413,11 @@
</svg>
&nbsp;More about grids
</summary>
<p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
<p>A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
<p>If you need a quick way to prototyping or build a complex layouts, you can look about <strong>Flexbox grid layouts</strong>. For example: <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
<p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
<p>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
<p>As Pico focuses on native HTML elements, we kept this grid system very minimalist.</p>
<p>A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
<p>If you need a quick way to prototyping or build a complex layout, you can look at <strong>Flexbox grid layouts</strong>. For example, <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
<p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
<p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>
</details>
</section><!-- ./ Docs: Grid -->
@ -472,7 +497,7 @@
<section id="typography">
<hgroup>
<h2>Typography</h2>
<h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewports.</h3>
<h3>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h3>
</hgroup>
<figure>
<table role="grid">
@ -562,6 +587,7 @@
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<footer class="code">
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
@ -570,6 +596,7 @@
&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</footer>
</article>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
<article aria-label="Hgroup example">
@ -577,12 +604,14 @@
<h2>Heading 2</h2>
<h3>Subtitle for heading 2</h3>
</hgroup>
<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>hgroup</b>&gt;</code></pre>
</footer>
</article>
<p>Inline text elements:</p>
<article aria-label="Inline text examples">
@ -610,11 +639,13 @@
<a href="#" onclick="event.preventDefault()">Primary</a><br>
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
<footer class="code">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
</footer>
</article>
<p>Blockquote:</p>
<article aria-label="Blockquote example">
@ -624,6 +655,7 @@
<cite>- Phasellus eget lacinia</cite>
</footer>
</blockquote>
<footer class="code">
<pre><code>&lt;<b>blockquote</b>&gt;
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
@ -632,6 +664,7 @@
&lt;/<b>footer</b>&gt;
&lt;/<b>blockquote</b>&gt;</code></pre>
</footer>
</article>
</section><!-- ./ Docs: Typography -->
@ -644,39 +677,47 @@
<article aria-label="Button example">
<button aria-label="Button">Button</button>
<input type="submit">
<footer class="code">
<pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"submit"</u>&gt;</code></pre>
</footer>
</article>
<p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code>&lt;<b>a</b> <i>role</i>=<u>"button"&gt;</u></code> if you need an inline element.</p>
<article aria-label="Inline buttons examples">
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
<footer class="code">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;</code></pre>
</footer>
</article>
<p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
<article aria-label="Buttons styles examples">
<a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a>
<a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a>
<footer class="code">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
</footer>
</article>
<p>And a classic <code>.outline</code> variant.</p>
<article aria-label="Outline style examples">
<a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a>
<a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a>
<a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a>
<footer class="code">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
</footer>
</article>
</section><!-- ./ Docs: Button -->
@ -684,10 +725,10 @@
<section id="forms">
<hgroup>
<h2>Forms</h2>
<h3>All form elements are in pure semantic HTML and fully responsive, allowing forms to scale gracefully across devices and viewports.</h3>
<h3>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h3>
</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 themable with CSS variables.</p>
<p>All natives form elements are fully customizable and themeable with CSS variables.</p>
<article aria-label="Form example">
<form>
<div class="grid">
@ -705,6 +746,7 @@
<small>We'll never share your email with anyone else.</small>
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
</form>
<footer class="code">
<pre><code>&lt;<b>form</b>&gt;
@ -734,6 +776,7 @@
&lt;/<b>form</b>&gt;</code></pre>
</footer>
</article>
<p>Disabled and validation states:</p>
<article aria-label="Validation states examples">
@ -743,14 +786,16 @@
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
<input type="text" value="Readonly" aria-label="Readonly" readonly>
</form>
<footer class="code">
<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre>
</footer>
</article>
<p><code>&lt;<b>fieldset</b>&gt;</code> are unstyled and act as a container for radios and checkboxes providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
<p><code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
<p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
<article aria-label="Select, radios, checkboxes, switch examples">
<label for="fruit">Fruit</label>
@ -789,6 +834,7 @@
Publish on my profile
</label>
</fieldset>
<footer class="code">
<pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
@ -830,19 +876,22 @@
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;</code></pre>
</footer>
</article>
<p>You can change a checkbox to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
<p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
<article aria-label="Indeterminate checkbox example">
<label for="indeterminate-checkbox">
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
Select all
</label>
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
<footer class="code">
<pre><code>&lt;<b>script</b>&gt;
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre>
</footer>
</article>
<p>Others input types:</p>
<article aria-label="File browser, range slider, date, time, color examples">
@ -861,6 +910,7 @@
<label for="color">Color
<input type="color" id="color" name="color" value="#0eaaaa">
</label>
<footer class="code">
<pre><code><em>&lt;!-- File browser --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
@ -887,6 +937,7 @@
&lt;<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
&lt;/<b>label</b>&gt;</code></pre>
</footer>
</article>
</section><!-- ./ Docs: Form -->
@ -1024,6 +1075,7 @@
<li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
</ul>
</details>
<footer class="code">
<pre><code>&lt;<b>details</b>&gt;
&lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</b>&gt;
@ -1038,6 +1090,7 @@
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;</code></pre>
</footer>
</article>
</section><!-- ./ Docs: Accordions -->
@ -1083,6 +1136,7 @@
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
</ul>
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
@ -1095,6 +1149,7 @@
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
<p><code>&lt;<b>ul</b>&gt;</code> are automatically distributed horizontally.</p>
<p><code>&lt;<b>li</b>&gt;</code> are unstyled and inlined.</p>
@ -1125,6 +1180,7 @@
</li>
</ul>
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
@ -1138,6 +1194,7 @@
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
<p>Inside <code>&lt;<b>aside</b>&gt;</code>, navs are stacked vertically.</p>
<article aria-label="Vertical nav example">
@ -1150,6 +1207,7 @@
</ul>
</nav>
</aside>
<footer class="code">
<pre><code>&lt;<b>aside</b>&gt;
&lt;<b>nav</b>&gt;
@ -1161,6 +1219,7 @@
&lt;/<b>nav</b>&gt;
&lt;/<b>aside</b>&gt;</code></pre>
</footer>
</article>
</section><!-- ./ Docs: Nav -->
@ -1172,19 +1231,23 @@
</hgroup>
<article aria-label="Progress bar example">
<progress value="25" max="100"></progress>
<footer class="code">
<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
</footer>
</article>
<p>You can change a progress bar to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
<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>
<article aria-label="Indeterminate progress bar example">
<progress id="indeterminate-progress"></progress>
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
<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>
</footer>
</article>
</section><!-- ./ Docs: Progress -->
@ -1197,10 +1260,12 @@
<article aria-label="Loading buttons example">
<button aria-busy="true">Please wait…</button>
<button aria-busy="true" class="secondary"></button>
<footer class="code">
<pre><code>&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u>&gt;Please wait…&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>&gt;&lt;/<b>button</b>&gt;</code></pre>
</footer>
</article>
<p>It can be applied to any block:</p>
<article aria-busy="true"></article>
@ -1208,8 +1273,9 @@
<p>Or any text element:</p>
<article aria-label="Loading paragraph example">
<a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait…</a>
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>&gt;Generating link, please wait…&lt;/<b>a</b>&gt;</code></pre>
<footer class="code">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>&gt;Generating link, please wait…&lt;/<b>a</b>&gt;</code></pre>
</footer>
</article>
</section><!-- ./ Docs: Loading -->
@ -1223,11 +1289,13 @@
<p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
<p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
<footer class="code">
<pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</code></pre>
</footer>
</article>
</section><!-- ./ Docs: Tooltips -->

15
docs/js/pico.docs.js
View file

@ -6,13 +6,12 @@
*/
// Imports
import * as mostVisible from './src/most-visible.min.js';
import { aside } from './src/aside.js';
import { themeSwitcher } from './src/theme-switcher.js';
import { materialDesignColors } from './src/material-design-colors.js';
import { colorPicker } from './src/color-picker.js';
import { grid } from './src/grid.js';
import { scrollspy } from './src/scrollspy.js';
import aside from './src/aside.js';
import themeSwitcher from './src/theme-switcher.js';
import materialDesignColors from './src/material-design-colors.js';
import colorPicker from './src/color-picker.js';
import grid from './src/grid.js';
import scrollspy from './src/scrollspy.js';
// Aside initial state
aside.init();
@ -33,4 +32,4 @@ colorPicker.init();
grid.init();
// Scrollspy
scrollspy.init(mostVisible);
scrollspy.init();

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

File diff suppressed because one or more lines are too long

12
docs/js/src/aside.js
View file

@ -6,7 +6,6 @@
*/
export const aside = {
// Config
minWidth: '992px',
targets: {
@ -14,17 +13,18 @@ export const aside = {
details: 'aside details',
},
// Init
init() {
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
let nav = document.querySelector(this.targets.nav);
let details = document.querySelectorAll(this.targets.details);
if (nav.clientHeight < nav.scrollHeight) {
details.forEach(function(detail) {
detail.removeAttribute("open");
details.forEach(function (detail) {
detail.removeAttribute('open');
});
}
}
}
}
},
};
export default aside;

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

@ -6,7 +6,6 @@
*/
export const colorPicker = {
// Config
colors: null,
buttonsTarget: '#customization article[data-theme="generated"]',
@ -24,16 +23,19 @@ export const colorPicker = {
// Generate Buttons
generateButtons() {
// Init
let innerButtons = '';
let innerStyles = '';
// Loop colors
for (const color in this.colors) {
// Buttons
innerButtons += '<button data-color="' + color + '" aria-label="Activate ' + color + ' theme"></button>';
innerButtons +=
'<button data-color="' +
color +
'" aria-label="Activate ' +
color +
' theme"></button>';
// Styles
innerStyles += `
@ -52,7 +54,6 @@ export const colorPicker = {
}`;
}
// Insert buttons
let containerButtons = document.createElement('FIGURE');
containerButtons.innerHTML = innerButtons;
@ -60,13 +61,19 @@ export const colorPicker = {
// Buttons listeners
this.buttons = document.querySelectorAll(this.selectorButton);
this.buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
let color = event.target.getAttribute('data-color');
this.setActiveButton(color);
this.generateTheme(color);
}.bind(this), false);
}.bind(this));
this.buttons.forEach(
function (button) {
button.addEventListener(
'click',
function (event) {
let color = event.target.getAttribute('data-color');
this.setActiveButton(color);
this.generateTheme(color);
}.bind(this),
false
);
}.bind(this)
);
// Insert CSS Styles
let containerStyles = document.createElement('STYLE');
@ -76,21 +83,22 @@ export const colorPicker = {
document.querySelector('head').appendChild(containerStyles);
},
// Set active button
setActiveButton(color) {
// Remove all active states
this.buttons.forEach(function(button) {
button.removeAttribute('class');
}.bind(this));
this.buttons.forEach(
function (button) {
button.removeAttribute('class');
}.bind(this)
);
// Set active state
let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
let buttonPicked = document.querySelector(
this.selectorButton + '[data-color="' + color + '"]'
);
buttonPicked.setAttribute('class', 'picked');
},
// Set active button
generateTheme(color) {
let name = color;
@ -102,17 +110,23 @@ export const colorPicker = {
'.c500': data[500],
'.c600': data[600],
'.c700': data[700],
'.c600-outline-light': this.hexToRgbA(data[600], .125),
'.c600-outline-dark': this.hexToRgbA(data[600], .25),
'.c600-outline-light': this.hexToRgbA(data[600], 0.125),
'.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
'.inverse': data['inverse'],
}
};
Object.keys(swaps).forEach(function(swap) {
let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
targets.forEach(function(target) {
target.innerHTML = swaps[swap];
}.bind(this));
}.bind(this));
Object.keys(swaps).forEach(
function (swap) {
let targets = document.querySelectorAll(
this.selectorSection + ' ' + swap
);
targets.forEach(
function (target) {
target.innerHTML = swaps[swap];
}.bind(this)
);
}.bind(this)
);
// 2. Update CSS Styles
const innerStyles = `
@ -120,7 +134,7 @@ export const colorPicker = {
--h4-color: ${data[700]};
--primary: ${data[600]};
--primary-hover: ${data[700]};
--primary-focus: ${this.hexToRgbA(data[600], .125)};
--primary-focus: ${this.hexToRgbA(data[600], 0.125)};
--primary-inverse: ${data['inverse']};
}
@media only screen and (prefers-color-scheme: dark) {
@ -128,7 +142,7 @@ export const colorPicker = {
--h4-color: ${data[400]};
--primary: ${data[600]};
--primary-hover: ${data[500]};
--primary-focus: ${this.hexToRgbA(data[600], .25)};
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
--primary-inverse: ${data['inverse']};
}
}
@ -136,7 +150,7 @@ export const colorPicker = {
--h4-color: ${data[500]};
--primary: ${data[600]};
--primary-hover: ${data[500]};
--primary-focus: ${this.hexToRgbA(data[600], .25)};
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
--primary-inverse: ${data['inverse']};
}
[data-theme="generated"] {
@ -146,16 +160,15 @@ export const colorPicker = {
--switch-checked-background-color: var(--primary);
}`;
document.querySelector('style[title="color-picker"]').innerHTML = this.generatedStyles + this.minifyCSS(innerStyles);
document.querySelector('style[title="color-picker"]').innerHTML =
this.generatedStyles + this.minifyCSS(innerStyles);
},
// Minify CSS
minifyCSS(css) {
return css.replace(/^ +/gm, '')
return css.replace(/^ +/gm, '');
},
// Hexadecimal to Rgba
hexToRgbA(hex, alpha) {
let c;
@ -165,8 +178,16 @@ export const colorPicker = {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = '0x' + c.join('');
return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') + ', ' + alpha + ')';
return (
'rgba(' +
[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') +
', ' +
alpha +
')'
);
}
throw new Error('Bad Hex');
}
}
},
};
export default colorPicker;

40
docs/js/src/grid.js
View file

@ -6,34 +6,30 @@
*/
export const grid = {
// Config
buttons: {
text: {
add: 'Add column',
remove: 'Remove column'
remove: 'Remove column',
},
target: '#grids article'
target: '#grids article',
},
grid: {
current: 4,
min: 1,
max: 12,
gridTarget: '#grids .grid',
codeTarget: '#grids pre code'
codeTarget: '#grids pre code',
},
// Init
init() {
this.addButtons();
this.generateGrid()
this.generateGrid();
},
// Add buttons
addButtons() {
// Insert buttons
let buttons = document.createElement('P');
buttons.innerHTML = `
@ -54,20 +50,26 @@ export const grid = {
document.querySelector(this.buttons.target).before(buttons);
// Add button listener
document.querySelector('#grids button.add').addEventListener('click', function() {
this.addColumn();
}.bind(this), false);
document.querySelector('#grids button.add').addEventListener(
'click',
function () {
this.addColumn();
}.bind(this),
false
);
// Remove button listener
document.querySelector('#grids button.remove').addEventListener('click', function() {
this.removeColumn();
}.bind(this), false);
document.querySelector('#grids button.remove').addEventListener(
'click',
function () {
this.removeColumn();
}.bind(this),
false
);
},
// Generate grid
generateGrid() {
// Config
let htmlInner = '';
let codeInner = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
@ -84,7 +86,6 @@ export const grid = {
document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
},
// Add column
addColumn() {
if (this.grid.current < this.grid.max) {
@ -93,12 +94,13 @@ export const grid = {
}
},
// Remove column
removeColumn() {
if (this.grid.current > this.grid.min) {
this.grid.current--;
this.generateGrid();
}
}
},
};
export default grid;

538
docs/js/src/material-design-colors.js
View file

@ -1,301 +1,303 @@
// Source: https://material.io/design/color/the-color-system.html
export const materialDesignColors = {
red: {
50: "#ffebee",
100: "#ffcdd2",
200: "#ef9a9a",
300: "#e57373",
400: "#ef5350",
500: "#f44336",
600: "#e53935",
700: "#d32f2f",
800: "#c62828",
900: "#b71c1c",
a100: "#ff8a80",
a200: "#ff5252",
a400: "#ff1744",
a700: "#d50000",
inverse: "#FFF"
50: '#ffebee',
100: '#ffcdd2',
200: '#ef9a9a',
300: '#e57373',
400: '#ef5350',
500: '#f44336',
600: '#e53935',
700: '#d32f2f',
800: '#c62828',
900: '#b71c1c',
a100: '#ff8a80',
a200: '#ff5252',
a400: '#ff1744',
a700: '#d50000',
inverse: '#FFF',
},
pink: {
50: "#fce4ec",
100: "#f8bbd0",
200: "#f48fb1",
300: "#f06292",
400: "#ec407a",
500: "#e91e63",
600: "#d81b60",
700: "#c2185b",
800: "#ad1457",
900: "#880e4f",
a100: "#ff80ab",
a200: "#ff4081",
a400: "#f50057",
a700: "#c51162",
inverse: "#FFF"
50: '#fce4ec',
100: '#f8bbd0',
200: '#f48fb1',
300: '#f06292',
400: '#ec407a',
500: '#e91e63',
600: '#d81b60',
700: '#c2185b',
800: '#ad1457',
900: '#880e4f',
a100: '#ff80ab',
a200: '#ff4081',
a400: '#f50057',
a700: '#c51162',
inverse: '#FFF',
},
purple: {
50: "#f3e5f5",
100: "#e1bee7",
200: "#ce93d8",
300: "#ba68c8",
400: "#ab47bc",
500: "#9c27b0",
600: "#8e24aa",
700: "#7b1fa2",
800: "#6a1b9a",
900: "#4a148c",
a100: "#ea80fc",
a200: "#e040fb",
a400: "#d500f9",
a700: "#aa00ff",
inverse: "#FFF"
50: '#f3e5f5',
100: '#e1bee7',
200: '#ce93d8',
300: '#ba68c8',
400: '#ab47bc',
500: '#9c27b0',
600: '#8e24aa',
700: '#7b1fa2',
800: '#6a1b9a',
900: '#4a148c',
a100: '#ea80fc',
a200: '#e040fb',
a400: '#d500f9',
a700: '#aa00ff',
inverse: '#FFF',
},
"deep-purple": {
50: "#ede7f6",
100: "#d1c4e9",
200: "#b39ddb",
300: "#9575cd",
400: "#7e57c2",
500: "#673ab7",
600: "#5e35b1",
700: "#512da8",
800: "#4527a0",
900: "#311b92",
a100: "#b388ff",
a200: "#7c4dff",
a400: "#651fff",
a700: "#6200ea",
inverse: "#FFF"
'deep-purple': {
50: '#ede7f6',
100: '#d1c4e9',
200: '#b39ddb',
300: '#9575cd',
400: '#7e57c2',
500: '#673ab7',
600: '#5e35b1',
700: '#512da8',
800: '#4527a0',
900: '#311b92',
a100: '#b388ff',
a200: '#7c4dff',
a400: '#651fff',
a700: '#6200ea',
inverse: '#FFF',
},
indigo: {
50: "#e8eaf6",
100: "#c5cae9",
200: "#9fa8da",
300: "#7986cb",
400: "#5c6bc0",
500: "#3f51b5",
600: "#3949ab",
700: "#303f9f",
800: "#283593",
900: "#1a237e",
a100: "#8c9eff",
a200: "#536dfe",
a400: "#3d5afe",
a700: "#304ffe",
inverse: "#FFF"
50: '#e8eaf6',
100: '#c5cae9',
200: '#9fa8da',
300: '#7986cb',
400: '#5c6bc0',
500: '#3f51b5',
600: '#3949ab',
700: '#303f9f',
800: '#283593',
900: '#1a237e',
a100: '#8c9eff',
a200: '#536dfe',
a400: '#3d5afe',
a700: '#304ffe',
inverse: '#FFF',
},
blue: {
50: "#e3f2fd",
100: "#bbdefb",
200: "#90caf9",
300: "#64b5f6",
400: "#42a5f5",
500: "#2196f3",
600: "#1e88e5",
700: "#1976d2",
800: "#1565c0",
900: "#0d47a1",
a100: "#82b1ff",
a200: "#448aff",
a400: "#2979ff",
a700: "#2962ff",
inverse: "#FFF"
50: '#e3f2fd',
100: '#bbdefb',
200: '#90caf9',
300: '#64b5f6',
400: '#42a5f5',
500: '#2196f3',
600: '#1e88e5',
700: '#1976d2',
800: '#1565c0',
900: '#0d47a1',
a100: '#82b1ff',
a200: '#448aff',
a400: '#2979ff',
a700: '#2962ff',
inverse: '#FFF',
},
"light-blue": {
50: "#e1f5fe",
100: "#b3e5fc",
200: "#81d4fa",
300: "#4fc3f7",
400: "#29b6f6",
500: "#03a9f4",
600: "#039be5",
700: "#0288d1",
800: "#0277bd",
900: "#01579b",
a100: "#80d8ff",
a200: "#40c4ff",
a400: "#00b0ff",
a700: "#0091ea",
inverse: "#FFF"
'light-blue': {
50: '#e1f5fe',
100: '#b3e5fc',
200: '#81d4fa',
300: '#4fc3f7',
400: '#29b6f6',
500: '#03a9f4',
600: '#039be5',
700: '#0288d1',
800: '#0277bd',
900: '#01579b',
a100: '#80d8ff',
a200: '#40c4ff',
a400: '#00b0ff',
a700: '#0091ea',
inverse: '#FFF',
},
cyan: {
50: "#e0f7fa",
100: "#b2ebf2",
200: "#80deea",
300: "#4dd0e1",
400: "#26c6da",
500: "#00bcd4",
600: "#00acc1",
700: "#0097a7",
800: "#00838f",
900: "#006064",
a100: "#84ffff",
a200: "#18ffff",
a400: "#00e5ff",
a700: "#00b8d4",
inverse: "#FFF"
50: '#e0f7fa',
100: '#b2ebf2',
200: '#80deea',
300: '#4dd0e1',
400: '#26c6da',
500: '#00bcd4',
600: '#00acc1',
700: '#0097a7',
800: '#00838f',
900: '#006064',
a100: '#84ffff',
a200: '#18ffff',
a400: '#00e5ff',
a700: '#00b8d4',
inverse: '#FFF',
},
teal: {
50: "#e0f2f1",
100: "#b2dfdb",
200: "#80cbc4",
300: "#4db6ac",
400: "#26a69a",
500: "#009688",
600: "#00897b",
700: "#00796b",
800: "#00695c",
900: "#004d40",
a100: "#a7ffeb",
a200: "#64ffda",
a400: "#1de9b6",
a700: "#00bfa5",
inverse: "#FFF"
50: '#e0f2f1',
100: '#b2dfdb',
200: '#80cbc4',
300: '#4db6ac',
400: '#26a69a',
500: '#009688',
600: '#00897b',
700: '#00796b',
800: '#00695c',
900: '#004d40',
a100: '#a7ffeb',
a200: '#64ffda',
a400: '#1de9b6',
a700: '#00bfa5',
inverse: '#FFF',
},
green: {
50: "#e8f5e9",
100: "#c8e6c9",
200: "#a5d6a7",
300: "#81c784",
400: "#66bb6a",
500: "#4caf50",
600: "#43a047",
700: "#388e3c",
800: "#2e7d32",
900: "#1b5e20",
a100: "#b9f6ca",
a200: "#69f0ae",
a400: "#00e676",
a700: "#00c853",
inverse: "#FFF"
50: '#e8f5e9',
100: '#c8e6c9',
200: '#a5d6a7',
300: '#81c784',
400: '#66bb6a',
500: '#4caf50',
600: '#43a047',
700: '#388e3c',
800: '#2e7d32',
900: '#1b5e20',
a100: '#b9f6ca',
a200: '#69f0ae',
a400: '#00e676',
a700: '#00c853',
inverse: '#FFF',
},
"light-green": {
50: "#f1f8e9",
100: "#dcedc8",
200: "#c5e1a5",
300: "#aed581",
400: "#9ccc65",
500: "#8bc34a",
600: "#7cb342",
700: "#689f38",
800: "#558b2f",
900: "#33691e",
a100: "#ccff90",
a200: "#b2ff59",
a400: "#76ff03",
a700: "#64dd17",
inverse: "#FFF"
'light-green': {
50: '#f1f8e9',
100: '#dcedc8',
200: '#c5e1a5',
300: '#aed581',
400: '#9ccc65',
500: '#8bc34a',
600: '#7cb342',
700: '#689f38',
800: '#558b2f',
900: '#33691e',
a100: '#ccff90',
a200: '#b2ff59',
a400: '#76ff03',
a700: '#64dd17',
inverse: '#FFF',
},
lime: {
50: "#f9fbe7",
100: "#f0f4c3",
200: "#e6ee9c",
300: "#dce775",
400: "#d4e157",
500: "#cddc39",
600: "#c0ca33",
700: "#afb42b",
800: "#9e9d24",
900: "#827717",
a100: "#f4ff81",
a200: "#eeff41",
a400: "#c6ff00",
a700: "#aeea00",
inverse: "rgba(0, 0, 0, 0.75)"
50: '#f9fbe7',
100: '#f0f4c3',
200: '#e6ee9c',
300: '#dce775',
400: '#d4e157',
500: '#cddc39',
600: '#c0ca33',
700: '#afb42b',
800: '#9e9d24',
900: '#827717',
a100: '#f4ff81',
a200: '#eeff41',
a400: '#c6ff00',
a700: '#aeea00',
inverse: 'rgba(0, 0, 0, 0.75)',
},
yellow: {
50: "#fffde7",
100: "#fff9c4",
200: "#fff59d",
300: "#fff176",
400: "#ffee58",
500: "#ffeb3b",
600: "#fdd835",
700: "#fbc02d",
800: "#f9a825",
900: "#f57f17",
a100: "#ffff8d",
a200: "#ffff00",
a400: "#ffea00",
a700: "#ffd600",
inverse: "rgba(0, 0, 0, 0.75)"
50: '#fffde7',
100: '#fff9c4',
200: '#fff59d',
300: '#fff176',
400: '#ffee58',
500: '#ffeb3b',
600: '#fdd835',
700: '#fbc02d',
800: '#f9a825',
900: '#f57f17',
a100: '#ffff8d',
a200: '#ffff00',
a400: '#ffea00',
a700: '#ffd600',
inverse: 'rgba(0, 0, 0, 0.75)',
},
amber: {
50: "#fff8e1",
100: "#ffecb3",
200: "#ffe082",
300: "#ffd54f",
400: "#ffca28",
500: "#ffc107",
600: "#ffb300",
700: "#ffa000",
800: "#ff8f00",
900: "#ff6f00",
a100: "#ffe57f",
a200: "#ffd740",
a400: "#ffc400",
a700: "#ffab00",
inverse: "rgba(0, 0, 0, 0.75)"
50: '#fff8e1',
100: '#ffecb3',
200: '#ffe082',
300: '#ffd54f',
400: '#ffca28',
500: '#ffc107',
600: '#ffb300',
700: '#ffa000',
800: '#ff8f00',
900: '#ff6f00',
a100: '#ffe57f',
a200: '#ffd740',
a400: '#ffc400',
a700: '#ffab00',
inverse: 'rgba(0, 0, 0, 0.75)',
},
orange: {
50: "#fff3e0",
100: "#ffe0b2",
200: "#ffcc80",
300: "#ffb74d",
400: "#ffa726",
500: "#ff9800",
600: "#fb8c00",
700: "#f57c00",
800: "#ef6c00",
900: "#e65100",
a100: "#ffd180",
a200: "#ffab40",
a400: "#ff9100",
a700: "#ff6d00",
inverse: "#FFF"
50: '#fff3e0',
100: '#ffe0b2',
200: '#ffcc80',
300: '#ffb74d',
400: '#ffa726',
500: '#ff9800',
600: '#fb8c00',
700: '#f57c00',
800: '#ef6c00',
900: '#e65100',
a100: '#ffd180',
a200: '#ffab40',
a400: '#ff9100',
a700: '#ff6d00',
inverse: '#FFF',
},
"deep-orange": {
50: "#fbe9e7",
100: "#ffccbc",
200: "#ffab91",
300: "#ff8a65",
400: "#ff7043",
500: "#ff5722",
600: "#f4511e",
700: "#e64a19",
800: "#d84315",
900: "#bf360c",
a100: "#ff9e80",
a200: "#ff6e40",
a400: "#ff3d00",
a700: "#dd2c00",
inverse: "#FFF"
'deep-orange': {
50: '#fbe9e7',
100: '#ffccbc',
200: '#ffab91',
300: '#ff8a65',
400: '#ff7043',
500: '#ff5722',
600: '#f4511e',
700: '#e64a19',
800: '#d84315',
900: '#bf360c',
a100: '#ff9e80',
a200: '#ff6e40',
a400: '#ff3d00',
a700: '#dd2c00',
inverse: '#FFF',
},
grey: {
50: "#fafafa",
100: "#f5f5f5",
200: "#eeeeee",
300: "#e0e0e0",
400: "#bdbdbd",
500: "#9e9e9e",
600: "#757575",
700: "#616161",
800: "#424242",
900: "#212121",
inverse: "#FFF"
50: '#fafafa',
100: '#f5f5f5',
200: '#eeeeee',
300: '#e0e0e0',
400: '#bdbdbd',
500: '#9e9e9e',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
inverse: '#FFF',
},
'blue-grey': {
50: '#eceff1',
100: '#cfd8dc',
200: '#b0bec5',
300: '#90a4ae',
400: '#78909c',
500: '#607d8b',
600: '#546e7a',
700: '#455a64',
800: '#37474f',
900: '#263238',
inverse: '#FFF',
},
"blue-grey": {
50: "#eceff1",
100: "#cfd8dc",
200: "#b0bec5",
300: "#90a4ae",
400: "#78909c",
500: "#607d8b",
600: "#546e7a",
700: "#455a64",
800: "#37474f",
900: "#263238",
inverse: "#FFF"
}
};
export default materialDesignColors;

151
docs/js/src/most-visible.js Normal file
View file

@ -0,0 +1,151 @@
/**
* Most Visible v1.5.0
*
* @author Andy Palmer <andy@andypalmer.me>
* @license MIT
*/
(function (root, factory) {
// Universal Module Definition
/* jshint strict:false */
/* global define: false, module: false */
if (typeof define === 'function' && define.amd) {
define([], function () {
return factory(root);
});
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(root);
} else {
root.mostVisible = factory(root);
}
})(typeof self !== 'undefined' ? self : this, function (window) {
/* jshint unused: vars */
'use strict';
/**
* MostVisible constructor
*
* @param {NodeList|string} elements
* @param {{}} options
* @constructor
*/
function MostVisible(elements, options) {
if (!(this instanceof MostVisible)) {
return new MostVisible(elements, options).getMostVisible();
}
if (typeof elements === 'string') {
elements = document.querySelectorAll(elements);
}
this.elements = elements;
this.options = extend({}, MostVisible.defaults, options);
}
/**
* MostVisible default options
*
* @namespace
* @property {{}} defaults Default options hash.
* @property {boolean} defaults.percentage Whether to calculate visibility as a percentage of height.
* @property {number} defaults.offset An offset to take into account when calculating visibility.
*/
MostVisible.defaults = {
percentage: false,
offset: 0,
};
MostVisible.prototype = {
/**
* Returns the most visible element from the instance's NodeList.
*
* @returns {HTMLElement} Most visible element.
*/
getMostVisible: function () {
var _this = this;
var viewportHeight = document.documentElement.clientHeight;
return Array.prototype.reduce.call(
this.elements,
function (carry, element) {
var value = _this.getVisibleHeight(element, viewportHeight);
return value > carry[0] ? [value, element] : carry;
},
[0, null]
)[1];
},
/**
* Returns the visible height of an element.
*
* @param {HTMLElement} element Element to check the visibility of.
* @param {number} viewportHeight
* @returns {number} Visible height of the element in pixels or a percentage of the element's total height.
*/
getVisibleHeight: function (element, viewportHeight) {
var rect = element.getBoundingClientRect(),
rectTopOffset = rect.top - this.options.offset,
rectBottomOffset = rect.bottom - this.options.offset,
height = rect.bottom - rect.top,
visible = {
top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight,
};
var visiblePx = 0;
if (visible.top && visible.bottom) {
// Whole element is visible
visiblePx = height;
} else if (visible.top) {
visiblePx = viewportHeight - rect.top;
} else if (visible.bottom) {
visiblePx = rectBottomOffset;
} else if (height > viewportHeight && rectTopOffset < 0) {
var absTop = Math.abs(rectTopOffset);
if (absTop < height) {
// Part of the element is visible
visiblePx = height - absTop;
}
}
if (this.options.percentage) {
return (visiblePx / height) * 100;
}
return visiblePx;
},
};
MostVisible.makeJQueryPlugin = function ($) {
if (!$) {
return;
}
$.fn.mostVisible = function (options) {
var instance = new MostVisible(this.get(), options);
return this.filter(instance.getMostVisible());
};
}; // Try adding the jQuery plugin to window.jQuery
MostVisible.makeJQueryPlugin(window.jQuery);
/**
* Extends obj by adding the properties of all other objects passed to the function.
*
* @param {...{}} obj
* @returns {{}} The extended object.
*/
function extend(obj) {
for (var i = 1; i < arguments.length; i++) {
for (var key in arguments[i]) {
obj[key] = arguments[i][key];
}
}
return obj;
}
return MostVisible;
});

7
docs/js/src/most-visible.min.js vendored
View file

@ -1,7 +0,0 @@
/**
* Most Visible v1.5.0
*
* @author Andy Palmer <andy@andypalmer.me>
* @license MIT
*/
!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"==typeof module&&module.exports?module.exports=t(e):e.mostVisible=t(e)}("undefined"!=typeof self?self:this,function(e){"use strict";function i(e,t){if(!(this instanceof i))return new i(e,t).getMostVisible();"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=e,this.options=function(e){for(var t=1;t<arguments.length;t++)for(var i in arguments[t])e[i]=arguments[t][i];return e}({},i.defaults,t)}return i.defaults={percentage:!1,offset:0},i.prototype={getMostVisible:function(){var n=this,o=document.documentElement.clientHeight;return Array.prototype.reduce.call(this.elements,function(e,t){var i=n.getVisibleHeight(t,o);return i>e[0]?[i,t]:e},[0,null])[1]},getVisibleHeight:function(e,t){var i=e.getBoundingClientRect(),n=i.top-this.options.offset,o=i.bottom-this.options.offset,s=i.bottom-i.top,r=0<=n&&n<t,f=0<o&&o<t,u=0;if(r&&f)u=s;else if(r)u=t-i.top;else if(f)u=o;else if(t<s&&n<0){var l=Math.abs(n);l<s&&(u=s-l)}return this.options.percentage?u/s*100:u}},i.makeJQueryPlugin=function(e){e&&(e.fn.mostVisible=function(e){var t=new i(this.get(),e);return this.filter(t.getMostVisible())})},i.makeJQueryPlugin(e.jQuery),i});

58
docs/js/src/scrollspy.js
View file

@ -8,10 +8,14 @@
* Copyright 2019-2021 - Licensed under MIT
*/
import * as MostVisible from './most-visible.js';
export const scrollspy = {
mostVisible() {
new MostVisible();
},
// Config
mostVisible: null,
minWidth: '992px',
interval: 75,
targets: {
@ -20,48 +24,56 @@ export const scrollspy = {
active: 'active',
},
// Init
init(mostVisible) {
if (this.mostVisible == null) {
this.mostVisible = mostVisible;
}
init() {
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
this.setActiveNav();
this.scrollStop();
}
},
// Set active section in nav
setActiveNav() {
// Get active section
let currentSection = this.mostVisible(this.targets.sections).getAttribute('id');
let currentSection = mostVisible(this.targets.sections).getAttribute('id');
// Remove all active states
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
links.forEach(function(link) {
link.classList.remove(this.targets.active);
}.bind(this));
let links = document.querySelectorAll(
this.targets.nav + ' a.' + this.targets.active
);
links.forEach(
function (link) {
link.classList.remove(this.targets.active);
}.bind(this)
);
// Set active state
let activeLink = document.querySelector(this.targets.nav + ' a[href="#' + currentSection + '"]');
let activeLink = document.querySelector(
this.targets.nav + ' a[href="#' + currentSection + '"]'
);
activeLink.classList.add(this.targets.active);
// Open details parent
activeLink.closest('details').setAttribute('open', '');
},
// Scroll stop
scrollStop() {
let isScrolling;
window.addEventListener('scroll', function(event) {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
this.setActiveNav();
}.bind(this), this.interval);
}.bind(this), false);
}
}
window.addEventListener(
'scroll',
function (event) {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(
function () {
this.setActiveNav();
}.bind(this),
this.interval
);
}.bind(this),
false
);
},
};
export default scrollspy;

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

@ -6,69 +6,63 @@
*/
export const themeSwitcher = {
// Config
_scheme: 'auto',
change: {
light: '<i>Turn on dark mode</i>',
dark: '<i>Turn off dark mode</i>'
dark: '<i>Turn off dark mode</i>',
},
buttonsTarget: '.theme-switcher',
// Init
init() {
this.scheme = this._scheme;
this.initSwitchers();
},
// Prefered color scheme
get preferedColorScheme() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
else {
} else {
return 'light';
}
},
// Init switchers
initSwitchers() {
const buttons = document.querySelectorAll(this.buttonsTarget);
buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
if (this.scheme == 'dark') {
this.scheme = 'light';
}
else {
this.scheme = 'dark';
}
}.bind(this), false);
}.bind(this));
buttons.forEach(
function (button) {
button.addEventListener(
'click',
function (event) {
if (this.scheme == 'dark') {
this.scheme = 'light';
} else {
this.scheme = 'dark';
}
}.bind(this),
false
);
}.bind(this)
);
},
// Add new button
addButton(config) {
// Insert Switcher
let button = document.createElement(config.tag);
button.className = config.class;
document.querySelector(config.target).appendChild(button);
},
// Set scheme
set scheme(scheme) {
if (scheme == 'auto') {
if (this.preferedColorScheme == 'dark') {
this._scheme = 'dark';
}
else {
} else {
this._scheme = 'light';
}
}
@ -82,31 +76,31 @@ export const themeSwitcher = {
this.applyScheme();
},
// Get scheme
get scheme() {
return this._scheme;
},
// Apply scheme
applyScheme() {
// Root attribute
document.querySelector('html').setAttribute('data-theme', this.scheme);
// Buttons text
const buttons = document.querySelectorAll(this.buttonsTarget);
let text;
buttons.forEach(function(button) {
if (this.scheme == 'dark') {
text = this.change.dark;
}
else {
text = this.change.light;
}
button.innerHTML = text;
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
}.bind(this));
}
}
buttons.forEach(
function (button) {
if (this.scheme == 'dark') {
text = this.change.dark;
} else {
text = this.change.light;
}
button.innerHTML = text;
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
}.bind(this)
);
},
};
export default themeSwitcher;

1
docs/scss/components/_nav.scss
View file

@ -23,7 +23,6 @@ body > nav {
// Band & Title
ul:first-of-type li {
// Brand
&:first-of-type {
a {

22
docs/scss/components/_theme-switcher.scss
View file

@ -8,7 +8,7 @@
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
padding: 0.75rem;
border-radius: 2rem;
box-shadow: var(--card-box-shadow);
line-height: 1;
@ -20,9 +20,14 @@
height: 1rem;
border: 0.15rem solid currentColor;
border-radius: 50%;
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
background: linear-gradient(
to right,
currentColor 0%,
currentColor 50%,
transparent 50%
);
vertical-align: bottom;
content: '';
content: "";
transition: transform var(--transition);
}
@ -31,7 +36,7 @@
max-width: 0;
padding: 0;
overflow: hidden;
font-size: .875rem;
font-size: 0.875rem;
font-style: normal;
white-space: nowrap;
}
@ -39,10 +44,8 @@
&:hover,
&:focus {
max-width: 100%;
transition:
background-color var(--transition),
border-color var(--transition),
color var(--transition),
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
@ -54,8 +57,7 @@
i {
max-width: 100%;
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition),
padding var(--transition);
transition: max-width var(--transition), padding var(--transition);
}
}

27
docs/scss/content/_code.scss
View file

@ -2,11 +2,23 @@
* Docs: Code
*/
// Custom spacings for <pre> (Horizontally aligned with <article> content)
// Code block inside article
article > footer.code {
background: var(--article-code-background-color);
}
article pre,
article pre code {
background: transparent;
margin-bottom: 0;
}
// Code block outside article
// Horizontally aligned with <article> content
section > pre {
background: var(--article-code-background-color);
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
padding: calc(var(--block-spacing-vertical) / 1.5)
var(--block-spacing-horizontal);
box-shadow: var(--card-box-shadow);
}
@ -22,7 +34,7 @@ section > pre {
position: absolute;
top: 0;
right: 0;
padding: .375rem .75rem;
padding: 0.375rem 0.75rem;
border-radius: 0;
color: var(--primary-inverse);
font-size: 14px;
@ -36,7 +48,8 @@ section > pre {
// Spacing for Valid & Invalid badge
code {
padding: calc(var(--spacing) * 1.625) 0;
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
var(--block-spacing-horizontal);
}
}
@ -44,13 +57,13 @@ section > pre {
[data-theme="invalid"] {
&:before {
background: var(--invalid-color);
content: 'Not so great';
content: "Not so great";
}
}
[data-theme="valid"] {
&:before {
background: var(--valid-color);
content: 'Great';
content: "Great";
}
}

4
docs/scss/content/_typography.scss
View file

@ -6,12 +6,12 @@ section > hgroup {
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
a[role="button"] {
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] {
[role="document"] {
section > h1,
section > h2,
section > h3 {

8
docs/scss/layout/_aside.scss
View file

@ -3,7 +3,6 @@
*/
main > aside {
nav {
width: 100%;
margin-bottom: var(--block-spacing-vertical);
@ -26,7 +25,8 @@ main > aside {
}
}
li, summary {
li,
summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
@ -51,7 +51,7 @@ main > aside {
}
details {
padding-bottom: .25rem;
padding-bottom: 0.25rem;
border-bottom: none;
summary {
@ -66,7 +66,7 @@ main > aside {
}
&[open] {
>summary:not(:focus) {
> summary:not(:focus) {
color: var(--h1-color);
}
}

2
docs/scss/layout/_document.scss
View file

@ -3,5 +3,5 @@
*/
html {
scroll-behavior:smooth;
scroll-behavior: smooth;
}

23
docs/scss/layout/_documentation.scss
View file

@ -11,7 +11,6 @@
// Docs: Customization
#customization {
figure {
display: grid;
grid-template-columns: repeat(9, 1fr);
@ -32,12 +31,12 @@
border-top-left-radius: 0;
}
button {
margin-bottom: 0;
padding: 0;
padding-top: 100%;
border:none;
border-radius: 0;
button {
margin-bottom: 0;
padding: 0;
padding-top: 100%;
border: none;
border-radius: 0;
&:focus {
box-shadow: none;
@ -47,8 +46,8 @@
background-image: var(--icon-check);
background-position: center;
background-repeat: no-repeat;
background-size: .66rem auto;
box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25);
background-size: 0.66rem auto;
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
}
&[data-color="lime"],
&[data-color="yellow"],
@ -69,10 +68,8 @@
}
}
// Docs: Grids
#grids {
--grid-spacing-vertical: 1rem;
button {
@ -83,12 +80,12 @@
@media (min-width: map-get($breakpoints, "sm")) {
display: inline-block;
width: auto;
margin-right: .5rem;
margin-right: 0.5rem;
}
svg {
stroke: var(--secondary);
margin-right: .5rem;
margin-right: 0.5rem;
border: 2px solid currentColor;
border-radius: 1rem;
background: currentColor;

31
docs/scss/layout/_main.scss
View file

@ -7,7 +7,6 @@ $navHeight: 3.5rem;
// Main grid
body > main {
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
@if map-get($breakpoints, "lg") {
@ -33,51 +32,51 @@ body > main {
// Anchors hacks for internal links
div[role="document"] > section::before {
display: block;
height: calc(2rem + #{$navHeight} - .5rem);
margin-top: calc(-2rem - #{$navHeight} + .5rem);
content: '';
height: calc(2rem + #{$navHeight} - 0.5rem);
margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
content: "";
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
height: calc(2.5rem + #{$navHeight} - .5rem);
height: calc(-2.5rem - #{$navHeight} + .5rem);
height: calc(2.5rem + #{$navHeight} - 0.5rem);
height: calc(-2.5rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
height: calc(3rem + #{$navHeight} - .5rem);
margin-top: calc(-3rem - #{$navHeight} + .5rem);
height: calc(3rem + #{$navHeight} - 0.5rem);
margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
height: calc(3.5rem + #{$navHeight} - .5rem);
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
height: calc(3.5rem + #{$navHeight} - 0.5rem);
margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
height: calc(4rem + #{$navHeight} - .5rem);
margin-top: calc(-4rem - #{$navHeight} + .5rem);
height: calc(4rem + #{$navHeight} - 0.5rem);
margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
}
}
}
// External links
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
{
display: inline-block;
width: 1rem;
height: 1rem;
background-image: var(--icon-external);
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
content: '';
background-size: 0.66rem auto;
content: "";
}
// Embedded SVG

25
docs/scss/themes/_docs.scss Normal file
View file

@ -0,0 +1,25 @@
/**
* Theme: Additions for docs
*/
@import "../../../scss/themes/default/colors";
@import "docs/icons";
// Light theme (Default)
// Can be forced with data-theme="light"
@import "docs/light";
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@import "docs/dark";
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@include dark;
}
}
// Dark theme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark;
}

8
docs/scss/themes/docs.scss
View file

@ -1,8 +0,0 @@
/**
* Theme: Additions for docs
*/
@import "../../../scss/themes/default/colors";
@import "docs/icons";
@import "docs/light";
@import "docs/dark";

28
docs/scss/themes/docs/_dark.scss
View file

@ -1,23 +1,9 @@
// Dark theme (Auto) [Additions for docs]
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
}
}
// Dark theme (Forced) [Additions for docs]
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
// Dark theme [Additions for docs]
@mixin dark {
--invalid-color: #{rgba($red-900, 0.5)};
--valid-color: #{rgba($green-800, 0.5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};
--nav-border-color: #{rgba($grey-500, 0.2)};
--nav-logo-color: #{mix($black, $grey-900)};
--article-code-background-color: var(--code-background-color);
}

4
docs/scss/themes/docs/_icons.scss
View file

@ -1,7 +1,7 @@
// Icons
// Source: https://feathericons.com/
:root {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

5
docs/scss/themes/docs/_light.scss
View file

@ -4,7 +4,8 @@
:root:not([data-theme="dark"]) {
--invalid-color: #{$red-800};
--valid-color: #{$green-700};
--nav-background-color: #{rgba($white, .7)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-background-color: #{rgba($white, 0.7)};
--nav-border-color: #{rgba($grey-500, 0.2)};
--nav-logo-color: #{$white};
--article-code-background-color: #{mix($grey-50, $white, 33%)};
}

8716
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

30
package.json
View file

@ -25,5 +25,35 @@
],
"bugs": {
"url": "https://github.com/picocss/pico/issues"
},
"scripts": {
"css:compile": "sass --style expanded --no-source-map --no-error-css scss/:css/",
"css:compile:docs": "sass --style expanded --no-source-map --no-error-css docs/scss/:docs/css/",
"css:prefix": "postcss css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css --use autoprefixer --no-map --replace",
"css:minify": "cleancss -O1 --batch --batch-suffix '.min' css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css",
"js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife",
"js:babel": "babel docs/js/pico.docs.min.js --out-file docs/js/pico.docs.min.js --presets=@babel/preset-env",
"js:minify": "uglifyjs docs/js/pico.docs.min.js --compress --mangle --output docs/js/pico.docs.min.js",
"build:css": "npm-run-all css:compile css:compile:docs css:prefix css:minify",
"build:js": "npm-run-all js:bundle js:babel js:minify",
"build": "npm-run-all build:css build:js",
"watch:scss": "nodemon --watch scss/ --ext scss --exec 'npm run build:css'",
"watch:scss:docs": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:css'",
"watch:js:docs": "nodemon --watch docs/js/ --ext js --ignore 'docs/js/pico.docs.min.js' --exec 'npm run build:js'",
"watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs"
},
"devDependencies": {
"@babel/cli": "^7.15.4",
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"autoprefixer": "^10.3.4",
"clean-css-cli": "^5.3.3",
"nodemon": "^2.0.12",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"rollup": "^2.56.3",
"sass": "^1.39.0",
"uglify-js": "^3.14.1"
}
}

5
scss/_variables.scss
View file

@ -29,7 +29,6 @@ $enable-transitions: true !default;
// Enable overriding with !important
$enable-important: true !default;
// Responsive
// ––––––––––––––––––––
@ -51,12 +50,12 @@ $breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xl: 1200px,
) !default;
// Viewports
$viewports: (
// 'null' disable the viewport on a breakpoint
// 'null' disable the viewport on a breakpoint
sm: 510px,
md: 700px,
lg: 920px,

21
scss/components/_accordion.scss
View file

@ -6,7 +6,7 @@
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing) / 2);
padding-bottom: calc(var(--spacing) * 0.5);
border-bottom: var(--border-width) solid var(--accordion-border-color);
summary {
@ -35,7 +35,7 @@ details {
// Marker
&::after {
display: inline-block;
display: block;
width: 1rem;
height: 1rem;
float: right;
@ -44,7 +44,7 @@ details {
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;
content: '';
content: "";
@if $enable-transitions {
transition: transform var(--transition);
@ -57,7 +57,7 @@ details {
}
~ * {
margin-top: calc(var(--spacing) / 2);
margin-top: calc(var(--spacing) * 0.5);
~ * {
margin-top: 0;
@ -67,9 +67,8 @@ details {
// Open
&[open] {
> summary {
margin-bottom: calc(var(--spacing) / 4);
margin-bottom: calc(var(--spacing) * 0.25);
&:not(:focus) {
color: var(--accordion-open-summary-color);
@ -77,6 +76,16 @@ details {
&::after {
transform: rotate(0);
}
}
}
}
[dir="rtl"] {
details {
summary {
&::after {
float: left;
}
}
}

9
scss/components/_card.scss
View file

@ -11,11 +11,11 @@ article {
box-shadow: var(--card-box-shadow);
> header,
> footer,
> pre {
> footer {
margin-right: calc(var(--block-spacing-horizontal) * -1);
margin-left: calc(var(--block-spacing-horizontal) * -1);
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
padding: calc(var(--block-spacing-vertical) * 0.66)
var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
}
@ -25,8 +25,7 @@ article {
border-bottom: var(--border-width) solid var(--card-border-color);
}
> footer,
> pre {
> footer {
margin-top: var(--block-spacing-vertical);
margin-bottom: calc(var(--block-spacing-vertical) * -1);
border-top: var(--border-width) solid var(--card-border-color);

9
scss/components/_nav.scss
View file

@ -29,7 +29,7 @@ nav {
li {
display: inline-block;
margin: 0;
padding: var(--spacing) calc(var(--spacing) / 2);
padding: var(--spacing) calc(var(--spacing) * 0.5);
// HACK: Input & Button inside Nav
> *,
@ -41,7 +41,7 @@ nav {
a {
display: block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing) calc(var(--spacing) / 2);
padding: var(--spacing) calc(var(--spacing) * 0.5);
border-radius: var(--border-radius);
text-decoration: none;
@ -55,7 +55,6 @@ nav {
// Vertical Nav
aside {
nav,
ol,
ul,
@ -64,11 +63,11 @@ aside {
}
li {
padding: calc(var(--spacing) / 2);
padding: calc(var(--spacing) * 0.5);
a {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) / 2);
padding: calc(var(--spacing) * 0.5);
}
}
}

23
scss/components/_progress.scss
View file

@ -2,7 +2,6 @@
* Progress
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -11,26 +10,24 @@
// 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
progress {
display: inline-block; // 1
vertical-align: baseline; // 2
display: inline-block; // 1
vertical-align: baseline; // 2
}
// Pico
// ––––––––––––––––––––
progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
// Styles
display: inline-block;
width: 100%;
height: .5rem;
margin-bottom: calc(var(--spacing) / 2);
height: 0.5rem;
margin-bottom: calc(var(--spacing) * 0.5);
overflow: hidden;
// Remove Firefox and Opera border
@ -55,7 +52,13 @@ progress {
// Indeterminate state
@media (prefers-reduced-motion: no-preference) {
&:indeterminate {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
background: var(--progress-background-color)
linear-gradient(
to right,
var(--progress-color) 30%,
var(--progress-background-color) 30%
)
top left / 150% 150% no-repeat;
animation: progressIndeterminate 1s linear infinite;
&[value]::-webkit-progress-value {

27
scss/content/_button.scss
View file

@ -2,7 +2,6 @@
* Button
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -35,7 +34,6 @@ button::-moz-focus-inner,
border-style: none;
}
// Pico
// ––––––––––––––––––––
@ -59,7 +57,8 @@ a[role="button"] {
--border-color: var(--primary);
--color: var(--primary-inverse);
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
@ -73,10 +72,8 @@ a[role="button"] {
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
border-color var(--transition),
color var(--transition),
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
@ -89,7 +86,8 @@ a[role="button"] {
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
}
@ -108,7 +106,8 @@ input[type="reset"] {
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
}
@ -119,7 +118,6 @@ input[type="reset"] {
input[type="button"],
input[type="reset"],
a[role="button"] {
// Secondary
&.secondary {
--background-color: var(--secondary);
@ -135,7 +133,8 @@ input[type="reset"] {
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
}
@ -153,7 +152,8 @@ input[type="reset"] {
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
}
@ -200,9 +200,8 @@ input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
&[disabled] {
opacity: .5;
opacity: 0.5;
pointer-events: none;
}
}

17
scss/content/_code.scss
View file

@ -2,20 +2,19 @@
* Code
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Correct the inheritance and scaling of font size in all browsers
// 2. Correct the odd `em` font sizing in all browsers
// 2. Correct the font sizing in all browsers
pre,
code,
kbd,
samp {
font-family: var(--font-family); // 1
font-size: .875rem; // 2
font-size: 0.875em; // 2
}
// Prevent overflow of the container in all browsers (opinionated)
@ -24,7 +23,6 @@ pre {
overflow: auto;
}
// Pico
// ––––––––––––––––––––
@ -35,26 +33,24 @@ kbd {
color: var(--code-color);
font-weight: var(--font-weight);
line-height: initial;
border-radius: var(--border-radius);
}
code,
kbd {
display: inline-block;
padding: .375rem .5rem;
border-radius: var(--border-radius);
padding: 0.375rem 0.5rem;
}
pre {
display: block;
margin-bottom: var(--spacing);
padding: var(--spacing);
overflow-x: auto;
background: var(--code-background-color);
> code {
display: block;
padding: 0;
background: transparent;
display: block;
padding: var(--spacing);
font-size: 14px;
line-height: var(--line-height);
}
@ -62,7 +58,6 @@ pre {
// Code Syntax
code {
// Tags
b {
color: var(--code-tag-color);

1
scss/content/_embedded.scss
View file

@ -2,7 +2,6 @@
* Embedded content
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css

185
scss/content/_form-alt-input-types.scss
View file

@ -5,63 +5,82 @@
// Color
[type="color"] {
// Wrapper
&::-webkit-color-swatch-wrapper {
@mixin color-wrapper {
padding: 0;
}
&::-webkit-color-swatch-wrapper {
@include color-wrapper;
}
&::-moz-focus-inner {
padding: 0;
@include color-wrapper;
}
// Swatch
&::-webkit-color-swatch {
@mixin color-swatch {
border: none;
border-radius: calc(var(--border-radius) / 2);
border-radius: calc(var(--border-radius) * 0.5);
}
&::-webkit-color-swatch {
@include color-swatch;
}
&::-moz-color-swatch {
border: none;
border-radius: calc(var(--border-radius) / 2);
@include color-swatch;
}
}
// Date & Time
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
background-image: var(--icon-date);
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
:not(:dir(rtl)) {
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
&::-webkit-calendar-picker-indicator {
opacity: 0;
&::-webkit-calendar-picker-indicator {
opacity: 0;
}
}
}
// Time
[type="time"] {
background-image: var(--icon-time);
// Time
[type="time"] {
background-image: var(--icon-time);
}
}
// File
[type="file"] {
--color: var(--muted-color);
padding: calc(var(--form-element-spacing-vertical)/2) 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
border: none;
border-radius: 0;
background: none;
&::-webkit-file-upload-button {
&:hover,
&:active,
&:focus {
border: none;
background: none;
}
@mixin file-selector-button {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
margin-left: 0;
margin-inline-end: calc(var(--spacing) / 2);
margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
@ -75,138 +94,98 @@
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
border-color var(--transition),
color var(--transition),
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
}
&:hover,
&:active,
&:focus {
--color: var(--color);
border: none;
background: none;
&::-webkit-file-upload-button {
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
}
&::file-selector-button {
@include file-selector-button;
}
&::-webkit-file-upload-button {
@include file-selector-button;
}
&::-ms-browse {
@include file-selector-button;
}
}
// Range
[type="range"] {
// Config
$height-track: .25rem;
$height-track: 0.25rem;
$height-thumb: 1.25rem;
$border-thumb: 2px;
// Styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
-moz-appearance: none;
appearance: none;
width: 100%;
height: $height-thumb;
background: transparent;
// Slider Track
&::-webkit-slider-runnable-track {
@mixin slider-track {
width: 100%;
height: $height-track;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
@if $enable-transitions {
transition:
background-color var(--transition),
transition: background-color var(--transition),
box-shadow var(--transition);
}
}
&::-webkit-slider-runnable-track {
@include slider-track;
}
&::-moz-range-track {
width: 100%;
height:$height-track;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
@if $enable-transitions {
transition:
background-color var(--transition),
box-shadow var(--transition);
}
@include slider-track;
}
&::-ms-track {
width: 100%;
height: $height-track;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
@if $enable-transitions {
transition:
background-color var(--transition),
box-shadow var(--transition);
}
}
&::-ms-fill-lower {
background-color: var(--border-radius);
@include slider-track;
}
// Slider Thumb
&::-webkit-slider-thumb {
@mixin slider-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
transition: background-color var(--transition),
transform var(--transition);
}
}
&::-webkit-slider-thumb {
@include slider-thumb;
}
&::-moz-range-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
transform var(--transition);
}
@include slider-thumb;
}
&::-ms-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
transform var(--transition);
}
@include slider-thumb;
}
&:hover,
@ -238,7 +217,9 @@
border-radius: 5rem;
@if $enable-important {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-left: calc(
var(--form-element-spacing-horizontal) + 1.75rem
) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-repeat: no-repeat;

34
scss/content/_form-checkbox-radio.scss
View file

@ -6,13 +6,15 @@
[type="checkbox"],
[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
-moz-appearance: none;
appearance: none;
width: 1.25em;
height: 1.25em;
margin-top: -.125em;
margin-right: .375em;
margin-top: -0.125em;
margin-right: 0.375em;
margin-left: 0;
margin-inline-end: 0.375em;
margin-inline-start: 0;
border-width: var(--border-width);
vertical-align: middle;
cursor: pointer;
@ -29,12 +31,12 @@
background-image: var(--icon-checkbox);
background-position: center;
background-repeat: no-repeat;
background-size: .75em auto;
background-size: 0.75em auto;
}
& ~ label {
display: inline-block;
margin-right: .375em;
margin-right: 0.375em;
margin-bottom: 0;
cursor: pointer;
}
@ -48,7 +50,7 @@
background-image: var(--icon-minus);
background-position: center;
background-repeat: no-repeat;
background-size: .75em auto;
background-size: 0.75em auto;
}
}
@ -58,9 +60,9 @@
&:checked,
&:checked:active,
&:checked:focus{
&:checked:focus {
--background-color: var(--primary-inverse);
border-width: .35em;
border-width: 0.35em;
background-image: none;
}
}
@ -72,9 +74,9 @@
--color: var(--switch-color);
// Config
$switch-height: 1.25em;
$switch-width: 2.25em;
$switch-transition: .1s ease-in-out;
$switch-height: 1.25em;
$switch-width: 2.25em;
$switch-transition: 0.1s ease-in-out;
// Styles
width: $switch-width;
@ -100,7 +102,7 @@
height: 100%;
border-radius: 50%;
background-color: var(--color);
content: '';
content: "";
@if $enable-transitions {
transition: margin $switch-transition;
@ -112,7 +114,9 @@
&::before {
margin-right: 0;
margin-left: calc(#{$switch-width / 2} - var(--border-width));
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-end: 0;
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
}
}
}

83
scss/content/_form.scss
View file

@ -2,7 +2,6 @@
* Form elements
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -106,16 +105,14 @@ textarea {
border-width: 0;
}
// Pico
// ––––––––––––––––––––
// Force height for alternatives input types
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
height: calc(
(1rem * var(--line-height)) +
(var(--form-element-spacing-vertical) * 2) +
(var(--border-width) * 2)
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
(var(--border-width) * 2)
);
}
@ -131,15 +128,13 @@ fieldset {
label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) / 4);
vertical-align: middle;
margin-bottom: calc(var(--spacing) * 0.25);
}
// Blocks, 100%
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
display: block;
width: 100%;
}
@ -147,10 +142,9 @@ textarea {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
appearance: none;
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
vertical-align: middle;
}
@ -171,10 +165,8 @@ textarea {
font-weight: var(--font-weight);
@if $enable-transitions {
transition:
background-color var(--transition),
border-color var(--transition),
color var(--transition),
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
}
@ -223,10 +215,23 @@ textarea {
input,
select,
textarea {
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
@if $enable-important {
padding-right: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important;
} @else {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
}
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
@ -238,9 +243,10 @@ textarea {
&:active,
&:focus {
@if $enable-important {
--border-color: var(--form-element-valid-active-border-color) !important;
}
@else {
--border-color: var(
--form-element-valid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-valid-active-border-color);
}
}
@ -253,15 +259,26 @@ textarea {
&:active,
&:focus {
@if $enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important;
}
@else {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-invalid-active-border-color);
}
}
}
}
[dir="rtl"] {
input,
select,
textarea {
&[aria-invalid] {
background-position: center left 0.75rem;
}
}
}
// Placeholder
input::placeholder,
input::-webkit-input-placeholder,
@ -281,7 +298,6 @@ textarea {
// Select
select {
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
@ -290,13 +306,24 @@ select {
&:not([multiple]):not([size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
background-image: var(--icon-chevron);
background-position: center right .75rem;
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
}
[dir="rtl"] {
select {
&:not([multiple]):not([size]) {
background-position: center left 0.75rem;
}
}
}
// Helper
input,
select,
@ -315,6 +342,6 @@ label {
& > input,
& > select,
& > textarea {
margin-top: calc(var(--spacing) / 4);
margin-top: calc(var(--spacing) * 0.25);
}
}

7
scss/content/_miscs.scss
View file

@ -2,7 +2,6 @@
* Miscs
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -21,7 +20,11 @@ hr {
// Add the correct display in IE 10+
[hidden],
template {
display: none;
@if $enable-important {
display: none !important;
} @else {
display: none;
}
}
// Add the correct styles in Edge 18-, IE, and Safari

3
scss/content/_table.scss
View file

@ -2,7 +2,6 @@
* Table
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -19,7 +18,6 @@ table {
text-indent: 0; // 3
}
// Pico
// ––––––––––––––––––––
@ -32,6 +30,7 @@ td {
font-size: var(--font-size);
font-weight: var(--font-weight);
text-align: left;
text-align: start;
}
// Rows

29
scss/content/_typography.scss
View file

@ -2,7 +2,6 @@
* Typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -18,7 +17,7 @@ strong {
sub,
sup {
position: relative;
font-size: .75em;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
@ -46,7 +45,6 @@ ul ul {
margin: 0;
}
// Pico
// ––––––––––––––––––––
@ -63,7 +61,8 @@ ul {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-size: 1rem;
font-size: var(--font-size);
font-weight: var(--font-weight);
font-style: normal;
}
@ -78,11 +77,8 @@ a {
text-decoration: var(--text-decoration);
@if $enable-transitions {
transition:
background-color var(--transition),
color var(--transition),
text-decoration var(--transition),
box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition),
text-decoration var(--transition), box-shadow var(--transition);
}
&:hover,
@ -97,7 +93,6 @@ a {
}
@if $enable-classes {
// Secondary
&.secondary {
--color: var(--secondary);
@ -214,10 +209,13 @@ small {
// Lists
ul,
ol {
padding-right: 0;
padding-left: var(--spacing);
padding-inline-end: 0;
padding-inline-start: var(--spacing);
li {
margin-bottom: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}
}
@ -227,7 +225,7 @@ ul li {
// Highlighted text
mark {
padding: .125rem .25rem;
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: middle;
@ -238,10 +236,13 @@ blockquote {
display: block;
margin: var(--typography-spacing-vertical) 0;
padding: var(--spacing);
border-left: .25rem solid var(--blockquote-border-color);
border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color);
border-inline-end: none;
border-inline-start: 0.25rem solid var(--blockquote-border-color);
footer {
margin-top: calc(var(--typography-spacing-vertical) / 2);
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
color: var(--blockquote-footer-color);
}
}

4
scss/layout/_container.scss
View file

@ -1,6 +1,5 @@
@if ($enable-class-container and $enable-classes) {
/**
/**
* Container
*/
@ -14,7 +13,6 @@
}
.container {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");

5
scss/layout/_document.scss
View file

@ -3,7 +3,6 @@
* Content-box & Responsive typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -32,8 +31,8 @@
// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
html {
-webkit-text-size-adjust: 100%; // 2
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3
-moz-tab-size: 4; // 5
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
tab-size: 4; // 5
-ms-text-size-adjust: 100%; // 6
background-color: var(--background-color);
color: var(--color);

3
scss/layout/_grid.scss
View file

@ -1,6 +1,5 @@
@if $enable-classes {
/**
/**
* Grid
* Minimal grid system with auto-layout columns
*/

4
scss/layout/_scroller.scss
View file

@ -5,12 +5,12 @@
// Wrapper to make any content responsive across all viewports
figure {
display: block;
margin:0;
margin: 0;
padding: 0;
overflow-x: auto;
figcaption {
padding: calc(var(--spacing) / 2) 0;
padding: calc(var(--spacing) * 0.5) 0;
color: var(--muted-color);
}
}

3
scss/layout/_sectioning.scss
View file

@ -3,7 +3,6 @@
* Container and responsive spacings for header, main, footer
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -14,7 +13,6 @@ main {
display: block;
}
// Pico
// ––––––––––––––––––––
@ -35,7 +33,6 @@ body {
// Centered viewport
@if $enable-viewport {
@if map-get($breakpoints, "sm") and $enable-viewport {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");

1
scss/pico.classless.scss
View file

@ -7,7 +7,6 @@ $enable-semantic-container: true;
// Enable .classes
$enable-classes: false;
// Pico Lib
// --------------------

1
scss/pico.fluid.classless.scss
View file

@ -10,7 +10,6 @@ $enable-viewport: false;
// Enable .classes
$enable-classes: false;
// Pico Lib
// --------------------

48
scss/pico.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.3.3 (https://picocss.com)
* Pico.css v1.4.0 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
@ -10,32 +10,32 @@
@import "themes/default";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
// Components
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/nav"; // nav
@import "components/progress"; // progress
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/nav"; // nav
@import "components/progress"; // progress
// Utilities
@import "utilities/loading"; // aria-busy=true
@import "utilities/tooltip"; // data-tooltip
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion
@import "utilities/loading"; // aria-busy=true
@import "utilities/tooltip"; // data-tooltip
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion

42
scss/pico.slim.scss
View file

@ -1,12 +1,11 @@
/*!
* Pico.css v1.3.3 (https://picocss.com)
* Pico.css v1.4.0 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example
* You can export only the modules you need
*/
// Config
// --------------------
@ -19,7 +18,6 @@ $enable-transitions: false;
// Enable overriding with !important
$enable-important: false;
// Pico Lib
// --------------------
@ -30,32 +28,20 @@ $enable-important: false;
@import "themes/default";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
// @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ...
// @import "content/code"; // pre, code, ...
// @import "content/miscs"; // hr, template, [hidden], dialog, canvas
// Components
// @import "components/accordion"; // details, summary
// @import "components/card"; // article
// @import "components/nav"; // nav
// @import "components/progress"; // progress
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
@import "content/table"; // table, tr, td, ...
// Utilities
// @import "utilities/loading"; // aria-busy=true
// @import "utilities/tooltip"; // data-tooltip
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion

82
scss/themes/default/_colors.scss
View file

@ -1,6 +1,6 @@
// Navy-Grey
$grey-hue: 205 !default;
$grey-50: hsl($grey-hue, 20%, 94%) !default;
$grey-50: hsl($grey-hue, 20%, 94%) !default;
$grey-100: hsl($grey-hue, 18%, 86%) !default;
$grey-200: hsl($grey-hue, 16%, 77%) !default;
$grey-300: hsl($grey-hue, 14%, 68%) !default;
@ -13,53 +13,53 @@ $grey-900: hsl($grey-hue, 30%, 15%) !default;
// Light Blue
$primary-hue: 195 !default;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;
$primary-300: hsl($primary-hue, 84%, 68%) !default;
$primary-400: hsl($primary-hue, 82%, 59%) !default;
$primary-500: hsl($primary-hue, 80%, 50%) !default;
$primary-600: hsl($primary-hue, 85%, 41%) !default;
$primary-700: hsl($primary-hue, 90%, 32%) !default;
$primary-800: hsl($primary-hue, 95%, 23%) !default;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;
$primary-300: hsl($primary-hue, 84%, 68%) !default;
$primary-400: hsl($primary-hue, 82%, 59%) !default;
$primary-500: hsl($primary-hue, 80%, 50%) !default;
$primary-600: hsl($primary-hue, 85%, 41%) !default;
$primary-700: hsl($primary-hue, 90%, 32%) !default;
$primary-800: hsl($primary-hue, 95%, 23%) !default;
$primary-900: hsl($primary-hue, 100%, 15%) !default;
// Black & White
$black: #000 !default;
$white: #FFF !default;
$white: #fff !default;
// Amber
$amber-50: #FFF8E1 !default;
$amber-100: #FFECB3 !default;
$amber-200: #FFE082 !default;
$amber-300: #FFD54F !default;
$amber-400: #FFCA28 !default;
$amber-500: #FFC107 !default;
$amber-600: #FFB300 !default;
$amber-700: #FFA000 !default;
$amber-800: #FF8F00 !default;
$amber-900: #FF6F00 !default;
$amber-50: #fff8e1 !default;
$amber-100: #ffecb3 !default;
$amber-200: #ffe082 !default;
$amber-300: #ffd54f !default;
$amber-400: #ffca28 !default;
$amber-500: #ffc107 !default;
$amber-600: #ffb300 !default;
$amber-700: #ffa000 !default;
$amber-800: #ff8f00 !default;
$amber-900: #ff6f00 !default;
// Green
$green-50: #E8F5E9 !default;
$green-100: #C8E6C9 !default;
$green-200: #A5D6A7 !default;
$green-300: #81C784 !default;
$green-400: #66BB6A !default;
$green-500: #4CAF50 !default;
$green-600: #43A047 !default;
$green-700: #388E3C !default;
$green-800: #2E7D32 !default;
$green-900: #1B5E20 !default;
$green-50: #e8f5e9 !default;
$green-100: #c8e6c9 !default;
$green-200: #a5d6a7 !default;
$green-300: #81c784 !default;
$green-400: #66bb6a !default;
$green-500: #4caf50 !default;
$green-600: #43a047 !default;
$green-700: #388e3c !default;
$green-800: #2e7d32 !default;
$green-900: #1b5e20 !default;
// Red
$red-50: #FFEBEE !default;
$red-100: #FFCDD2 !default;
$red-200: #EF9A9A !default;
$red-300: #E57373 !default;
$red-400: #EF5350 !default;
$red-500: #F44336 !default;
$red-600: #E53935 !default;
$red-700: #D32F2F !default;
$red-800: #C62828 !default;
$red-900: #B71C1C !default;
$red-50: #ffebee !default;
$red-100: #ffcdd2 !default;
$red-200: #ef9a9a !default;
$red-300: #e57373 !default;
$red-400: #ef5350 !default;
$red-500: #f44336 !default;
$red-600: #e53935 !default;
$red-700: #d32f2f !default;
$red-800: #c62828 !default;
$red-900: #b71c1c !default;

33
scss/themes/default/_dark.scss
View file

@ -1,6 +1,5 @@
// Default: Dark theme
@mixin dark {
// Document
color-scheme: dark;
--background-color: #{mix($black, $grey-900, 37.5%)};
@ -21,19 +20,19 @@
// Primary colors
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-focus: #{rgba($primary-600, 0.25)};
--primary-inverse: #{$white};
// Secondary colors
--secondary: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-500, .25)};
--secondary-focus: #{rgba($grey-500, 0.25)};
--secondary-inverse: #{$white};
// Contrast colors
--contrast: #{$grey-50};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-500, .25)};
--contrast-focus: #{rgba($grey-500, 0.25)};
--contrast-inverse: #{$black};
// Highlighted text (<mark>)
@ -64,7 +63,7 @@
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700};
--form-element-disabled-opacity: .5;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-800};
--form-element-valid-border-color: #{$green-800};
@ -85,7 +84,7 @@
// Table
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: #{rgba($grey-500, .05)};
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
// Code
--code-background-color: #{mix($black, $grey-900, 12.5%)};
@ -94,7 +93,7 @@
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #{hsl(330, 30%, 50%)};
--code-property-color: #{hsl(185, 30%, 50%)};
--code-value-color: #{hsl(40, 10%, 50%)};
--code-value-color: #{hsl(40, 10%, 50%)};
--code-comment-color: #{mix($grey-700, $grey-600)};
// Accordion (<details>)
@ -106,7 +105,9 @@
// Card (<article>)
--card-background-color: #{mix($black, $grey-900, 25%)};
--card-border-color: #{mix($black, $grey-900, 37.5%)};
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)},
0 0.125rem 2rem #{rgba($black, 0.12)},
0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Progress
@ -114,19 +115,19 @@
--progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-800, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-800, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

33
scss/themes/default/_light.scss
View file

@ -1,7 +1,6 @@
// Default: Light theme
[data-theme="light"],
:root:not([data-theme="dark"]) {
// Document
color-scheme: light;
--background-color: #{$white};
@ -22,19 +21,19 @@
// Primary colors
--primary: #{$primary-600};
--primary-hover: #{$primary-700};
--primary-focus: #{rgba($primary-600, .125)};
--primary-focus: #{rgba($primary-600, 0.125)};
--primary-inverse: #{$white};
// Secondary colors
--secondary: #{$grey-600};
--secondary-hover: #{$grey-700};
--secondary-focus: #{rgba($grey-600, .125)};
--secondary-focus: #{rgba($grey-600, 0.125)};
--secondary-inverse: #{$white};
// Contrast colors
--contrast: #{$grey-900};
--contrast-hover: #{$black};
--contrast-focus: #{rgba($grey-600, .125)};
--contrast-focus: #{rgba($grey-600, 0.125)};
--contrast-inverse: #{$white};
// Highlighted text (<mark>)
@ -65,7 +64,7 @@
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300};
--form-element-disabled-opacity: .5;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-800};
--form-element-invalid-active-border-color: #{$red-900};
--form-element-valid-border-color: #{$green-700};
@ -86,7 +85,7 @@
// Table
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#{mix($grey-50, $white)};
--table-row-stripped-background-color: #{mix($grey-50, $white)};
// Code
--code-background-color: #{$grey-50};
@ -95,7 +94,7 @@
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #{hsl(330, 40%, 50%)};
--code-property-color: #{hsl(185, 40%, 40%)};
--code-value-color: #{hsl(40, 20%, 50%)};
--code-value-color: #{hsl(40, 20%, 50%)};
--code-comment-color: #{$grey-300};
// Accordion (<details>)
@ -106,7 +105,9 @@
// Card (<article>)
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)},
0 0.125rem 2rem #{rgba($grey-900, 0.08)},
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Progress
@ -114,19 +115,19 @@
--progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-700, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-700, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

19
scss/themes/default/_styles.scss
View file

@ -1,15 +1,15 @@
// Commons Styles
:root {
// Typography
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
// Responsive typography
@if $enable-responsive-typography {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--font-size: 17px;
@ -36,7 +36,7 @@
}
// Borders
--border-radius: .25rem;
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
@ -55,22 +55,20 @@
--grid-spacing-horizontal: var(--spacing);
// Spacings for form elements and button
--form-element-spacing-vertical: .75rem;
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
// Transitions
--transition: .2s ease-in-out;
--transition: 0.2s ease-in-out;
}
// Responsives spacings
@if $enable-responsive-spacings {
// Sectionning
body > header,
body > main,
body > footer,
section {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
@ -98,7 +96,6 @@
// Card (<article>)
article {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
@ -203,7 +200,9 @@ pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {

8
scss/utilities/_accessibility.scss
View file

@ -44,3 +44,11 @@ textarea,
[tabindex] {
-ms-touch-action: manipulation;
}
// Pico
// ––––––––––––––––––––
[dir="rtl"] {
direction: rtl;
}

5
scss/utilities/_loading.scss
View file

@ -27,7 +27,10 @@
&:not(:empty) {
&::before {
margin-right: calc(var(--spacing) / 2);
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
margin-inline-end: calc(var(--spacing) * 0.5);
margin-inline-start: 0;
}
}