From bbb53c7dd40a368c15d0738ecef8aa604b72aadb Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Sun, 31 Oct 2021 21:33:19 +0700 Subject: [PATCH 1/7] Docs: separate pages --- README.md | 1 - docs/accordions.html | 12 + docs/buttons.html | 6 + docs/cards.html | 5 + docs/classless.html | 5 + docs/containers.html | 3 + docs/css/pico.docs.css | 14 +- docs/css/pico.docs.css.map | 2 +- docs/css/pico.docs.min.css | 2 +- docs/css/pico.docs.min.css.map | 2 +- docs/customization.html | 59 ++ docs/forms.html | 93 ++ docs/grid.html | 6 + docs/index.html | 1323 +------------------------- docs/js/commons.js | 17 + docs/js/commons.min.js | 1 + docs/js/customization.js | 14 + docs/js/customization.min.js | 1 + docs/js/grid.js | 12 + docs/js/grid.min.js | 1 + docs/js/pico.docs.js | 35 - docs/js/pico.docs.min.js | 1 - docs/js/src/aside.js | 30 - docs/js/src/grid.js | 10 +- docs/js/src/scrollspy.js | 74 -- docs/loading.html | 2 + docs/navs.html | 28 + docs/progress.html | 3 + docs/rtl.html | 4 + docs/scroller.html | 5 + docs/scss/layout/_documentation.scss | 4 +- docs/src/_footer.html | 4 + docs/src/_head.html | 8 + docs/src/_nav.html | 23 + docs/src/_sidebar.html | 63 ++ docs/src/accordions.html | 62 ++ docs/src/buttons.html | 76 ++ docs/src/cards.html | 48 + docs/src/classless.html | 48 + docs/src/containers.html | 74 ++ docs/src/customization.html | 131 +++ docs/src/forms.html | 243 +++++ docs/src/grid.html | 67 ++ docs/src/index.html | 57 ++ docs/src/loading.html | 51 + docs/src/navs.html | 127 +++ docs/src/progress.html | 51 + docs/src/rtl.html | 39 + docs/src/scroller.html | 95 ++ docs/src/tables.html | 157 +++ docs/src/themes.html | 66 ++ docs/src/tooltips.html | 43 + docs/src/typography.html | 198 ++++ docs/src/we-love-classes.html | 38 + docs/tables.html | 40 + docs/themes.html | 5 + docs/tooltips.html | 3 + docs/typography.html | 16 + docs/we-love-classes.html | 1 + package-lock.json | 826 ++++++++++++++++ package.json | 57 +- 61 files changed, 2994 insertions(+), 1498 deletions(-) create mode 100644 docs/accordions.html create mode 100644 docs/buttons.html create mode 100644 docs/cards.html create mode 100644 docs/classless.html create mode 100644 docs/containers.html create mode 100644 docs/customization.html create mode 100644 docs/forms.html create mode 100644 docs/grid.html create mode 100644 docs/js/commons.js create mode 100644 docs/js/commons.min.js create mode 100644 docs/js/customization.js create mode 100644 docs/js/customization.min.js create mode 100644 docs/js/grid.js create mode 100644 docs/js/grid.min.js delete mode 100644 docs/js/pico.docs.js delete mode 100644 docs/js/pico.docs.min.js delete mode 100644 docs/js/src/aside.js delete mode 100644 docs/js/src/scrollspy.js create mode 100644 docs/loading.html create mode 100644 docs/navs.html create mode 100644 docs/progress.html create mode 100644 docs/rtl.html create mode 100644 docs/scroller.html create mode 100644 docs/src/_footer.html create mode 100644 docs/src/_head.html create mode 100644 docs/src/_nav.html create mode 100644 docs/src/_sidebar.html create mode 100644 docs/src/accordions.html create mode 100644 docs/src/buttons.html create mode 100644 docs/src/cards.html create mode 100644 docs/src/classless.html create mode 100644 docs/src/containers.html create mode 100644 docs/src/customization.html create mode 100644 docs/src/forms.html create mode 100644 docs/src/grid.html create mode 100644 docs/src/index.html create mode 100644 docs/src/loading.html create mode 100644 docs/src/navs.html create mode 100644 docs/src/progress.html create mode 100644 docs/src/rtl.html create mode 100644 docs/src/scroller.html create mode 100644 docs/src/tables.html create mode 100644 docs/src/themes.html create mode 100644 docs/src/tooltips.html create mode 100644 docs/src/typography.html create mode 100644 docs/src/we-love-classes.html create mode 100644 docs/tables.html create mode 100644 docs/themes.html create mode 100644 docs/tooltips.html create mode 100644 docs/typography.html create mode 100644 docs/we-love-classes.html diff --git a/README.md b/README.md index 38459ced..ce76f848 100644 --- a/README.md +++ b/README.md @@ -178,7 +178,6 @@ Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LIC Website and docs: - [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)) Pico Library: diff --git a/docs/accordions.html b/docs/accordions.html new file mode 100644 index 00000000..72a15368 --- /dev/null +++ b/docs/accordions.html @@ -0,0 +1,12 @@ +Accordions • Pico.css

Accordions

Toggle sections of content in pure HTML, without JavaScript.

Collapsible elements 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

Collapsible elements 2
  • Vestibulum id elit quis massa interdum sodales.
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
  • Quisque sed eros non eros ornare elementum.
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
<details>
+  <summary>Collapsible elements 1</summary>
+  <p>…</p>
+</details>
+
+<details open>
+  <summary>Collapsible elements 2</summary>
+  <ul>
+    <li>…</li>
+    <li>…</li>
+  </ul>
+</details>

Code licensed MIT

\ No newline at end of file diff --git a/docs/buttons.html b/docs/buttons.html new file mode 100644 index 00000000..9010f962 --- /dev/null +++ b/docs/buttons.html @@ -0,0 +1,6 @@ +Buttons • Pico.css

Buttons

The essential button in pure HTML, without .classes for the default style.

<button>Button</button>
+<input type="submit">

Buttons are width: 100%; by default. Use <a role="button"> if you need an inline element.

Link Link
<a href="#" role="button">Link</a>
+<a href="#" role="button">Link</a>

Buttons come with .secondary and .contrast styles.

Secondary Contrast
<a href="#" role="button" class="secondary">Secondary</a>
+<a href="#" role="button" class="contrast">Contrast</a>

And a classic .outline variant.

Primary Secondary Contrast
<a href="#" role="button" class="outline">Primary</a>
+<a href="#" role="button" class="secondary outline">Secondary</a>
+<a href="#" role="button" class="contrast outline">Contrast</a>

Code licensed MIT

\ No newline at end of file diff --git a/docs/cards.html b/docs/cards.html new file mode 100644 index 00000000..42c8b122 --- /dev/null +++ b/docs/cards.html @@ -0,0 +1,5 @@ +Cards • Pico.css

Cards

A flexible container with graceful spacings across devices and viewports.

I'm a card!
<article>I'm a card!</article>

You can use <header> and footer <footer> inside <article>

Header
Body
Footer
<article>
+  <header>Header</header>
+  Body
+  <footer>Footer</footer>
+</article>

Code licensed MIT

\ No newline at end of file diff --git a/docs/classless.html b/docs/classless.html new file mode 100644 index 00000000..98dfad1c --- /dev/null +++ b/docs/classless.html @@ -0,0 +1,5 @@ +Class-less version • Pico.css

Class-less version

For wild HTML purists!

Pico provides a .classless version (example).

In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.

Usage:

Use the default .classless version if you need centered viewports:

<link rel="stylesheet" href="css/pico.classless.min.css">

Or use the .fluid.classless version if you need a fluid container:

<link rel="stylesheet" href="css/pico.fluid.classless.min.css">

These .classless versions are also available on unpkg CDN:

// Centered viewport
+<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
+
// Fluid viewport
+<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
+

Code licensed MIT

\ No newline at end of file diff --git a/docs/containers.html b/docs/containers.html new file mode 100644 index 00000000..328eda5c --- /dev/null +++ b/docs/containers.html @@ -0,0 +1,3 @@ +Containers • Pico.css

Containers

.container enable a centered viewport.
.container-fluid enable a 100% layout.

<body>
+  <main class="container"></main>
+</body>

Pico uses the same breakpoints and viewports sizes as Bootstrap.

DeviceExtra smallSmallMediumLargeExtra large
Breakpoint<576px≥576px≥768px≥992px≥1200px
Viewport100%540px720px960px1140px

<header>, <main> and <footer> as direct childs of <body> provide a responsive vertical padding

<section> provide a responsive margin-bottom to separate your sections.

Code licensed MIT

\ No newline at end of file diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index fc24ce28..531c3f2b 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -230,39 +230,39 @@ main > aside details[open] > summary:not(:focus) { border-color: var(--primary); } -#grids { +#grid { --grid-spacing-vertical: 1rem; } -#grids button { +#grid button { display: block; width: 100%; margin-bottom: var(--spacing); } @media (min-width: 576px) { - #grids button { + #grid button { display: inline-block; width: auto; margin-right: 0.5rem; } } -#grids button svg { +#grid button svg { stroke: var(--secondary); margin-right: 0.5rem; border: 2px solid currentColor; border-radius: 1rem; background: currentColor; } -#grids .grid > * { +#grid .grid > * { padding: calc(var(--spacing) / 2) 0; border-radius: var(--border-radius); background: var(--code-background-color); font-size: 87.5%; text-align: center; } -#grids details { +#grid details { margin-top: calc(var(--typography-spacing-vertical) * 2); } -#grids details svg { +#grid details svg { vertical-align: bottom; } diff --git a/docs/css/pico.docs.css.map b/docs/css/pico.docs.css.map index 4e984d4a..770a88fa 100644 --- a/docs/css/pico.docs.css.map +++ b/docs/css/pico.docs.css.map @@ -1 +1 @@ -{"version":3,"sources":["../scss/pico.docs.scss","../scss/themes/_docs.scss","../scss/themes/docs/_icons.scss","pico.docs.css","../scss/themes/docs/_light.scss","../scss/themes/docs/_dark.scss","../scss/layout/_document.scss","../scss/layout/_main.scss","../scss/layout/_aside.scss","../scss/layout/_documentation.scss","../scss/content/_typography.scss","../scss/content/_code.scss","../scss/components/_nav.scss","../scss/components/_theme-switcher.scss"],"names":[],"mappings":"AAAA;;EAAA;ACAA;;EAAA;ACEA;EACE,scAAA;EACA,0RAAA;EACA,4SAAA;ACKF;;ACRA;;EAEE,wBAAA;EACA,sBAAA;EACA,gDAAA;EACA,4CAAA;EACA,sBAAA;EACA,wCAAA;ADWF;;AFNA;EACE;IIbA,uCAAA;IACA,qCAAA;IACA,6CAAA;IACA,4CAAA;IACA,yBAAA;IACA,6DAAA;EFuBA;AACF;AFTA;EIpBE,uCAAA;EACA,qCAAA;EACA,6CAAA;EACA,4CAAA;EACA,yBAAA;EACA,6DAAA;AFgCF;;AGvCA;;EAAA;AAIA;EACE,uBAAA;AHyCF;;AI9CA;;EAAA;AAQA;EACE,yDAAA;AJ4CF;AIzCI;EAJJ;IAKM,uDAAA;IACA,0DAAA;IACA,aAAA;IACA,iCAAA;EJ4CJ;AACF;AIxCI;EAbJ;IAcM,oDAAA;EJ2CJ;AACF;AIxCE;;EAEE,YAAA;AJ0CJ;;AIrCA;EACE,cAAA;EACA,oCAAA;EACA,yCAAA;EACA,WAAA;AJwCF;AIrCI;EAPJ;IAQM,sCAAA;IACA,uCAAA;EJwCJ;AACF;AIpCI;EAdJ;IAeM,oCAAA;IACA,yCAAA;EJuCJ;AACF;AInCI;EArBJ;IAsBM,sCAAA;IACA,2CAAA;EJsCJ;AACF;AIlCI;EA5BJ;IA6BM,oCAAA;IACA,yCAAA;EJqCJ;AACF;;AIhCA;EAEE,qBAAA;EACA,WAAA;EACA,YAAA;EACA,sCAAA;EACA,+BAAA;EACA,4BAAA;EACA,6BAAA;EACA,WAAA;AJkCF;;AI9BA;EACE,YAAA;AJiCF;;AKpHA;;EAAA;AAKE;EACE,WAAA;EACA,4CAAA;ALqHJ;AKnHI;EACE,2DAAA;ALqHN;AKlHI;EARF;IASI,eAAA;IACA,YAAA;IACA,gCAAA;IACA,gBAAA;IACA,kBAAA;IACA,gBAAA;ELqHJ;EKnHI;IACE,aAAA;ELqHN;AACF;AKjHE;;EAEE,cAAA;EACA,iBAAA;EACA,eAAA;ALmHJ;AKhHE;EACE,uBAAA;ALkHJ;AKhHI;EACE,sBAAA;ALkHN;AK9GE;EACE,6BAAA;EACA,2BAAA;ALgHJ;AK7GE;;EAEE,qBAAA;AL+GJ;AK5GE;EACE,uBAAA;EACA,mBAAA;AL8GJ;AK5GI;EACE,sBAAA;EACA,eAAA;EACA,gBAAA;EACA,yBAAA;AL8GN;AK5GM;EACE,aAAA;AL8GR;AKzGM;EACE,sBAAA;AL2GR;;AMhLA;;EAAA;AAME;EACE,kBAAA;ANgLJ;;AM1KE;EACE,aAAA;EACA,qCAAA;EACA,kCAAA;EACA,gBAAA;EACA,gBAAA;AN6KJ;AM3KI;EAPF;IAQI,sCAAA;IACA,uBAAA;IACA,6CAAA;IACA,4CAAA;EN8KJ;AACF;AM5KI;EACE,aAAA;EACA,0BAAA;EACA,yBAAA;AN8KN;AM3KI;EACE,gBAAA;EACA,UAAA;EACA,iBAAA;EACA,YAAA;EACA,gBAAA;AN6KN;AM3KM;EACE,gBAAA;AN6KR;AM1KM;EACE,mCAAA;EACA,2BAAA;EACA,4BAAA;EACA,6BAAA;EACA,gDAAA;AN4KR;AMvKQ;EACE,wCAAA;ANyKV;AMnKE;EACE,mCAAA;ANqKJ;AMlKE;EACE,4BAAA;ANoKJ;;AM/JA;EACE,6BAAA;ANkKF;AMhKE;EACE,cAAA;EACA,WAAA;EACA,6BAAA;ANkKJ;AMhKI;EALF;IAMI,qBAAA;IACA,WAAA;IACA,oBAAA;ENmKJ;AACF;AMjKI;EACE,wBAAA;EACA,oBAAA;EACA,8BAAA;EACA,mBAAA;EACA,wBAAA;ANmKN;AM9JI;EACE,mCAAA;EACA,mCAAA;EACA,wCAAA;EACA,gBAAA;EACA,kBAAA;ANgKN;AM5JE;EACE,wDAAA;AN8JJ;AM5JI;EACE,sBAAA;AN8JN;;AMxJA;EACE,eAAA;AN2JF;;AO9QA;;EAAA;AAIA;EACE,2DAAA;APgRF;;AO7QA;EACE,0DAAA;EACA,iDAAA;APgRF;;AO5QE;;;EAGE,cAAA;AP+QJ;;AQhSA;;EAAA;AAKA;EACE,gDAAA;ARiSF;;AQ/RA;;EAEE,uBAAA;EACA,gBAAA;ARkSF;;AQ7RA;EACE,gDAAA;EACA,uCAAA;EACA,kFAAA;EAEA,kCAAA;AR+RF;;AQ3RA;;EAEE,kBAAA;EACA,2BAAA;AR8RF;AQ3RE;;EACE,cAAA;EACA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,yBAAA;EACA,gBAAA;EACA,6BAAA;EACA,eAAA;EACA,cAAA;AR8RJ;AQ5RI;EAXF;;IAYI,mBAAA;IACA,qBAAA;ERgSJ;AACF;AQ5RE;;EACE,mGAAA;AR+RJ;;AQxRE;EACE,gCAAA;EACA,uBAAA;AR2RJ;;AQtRE;EACE,8BAAA;EACA,gBAAA;ARyRJ;;AS3VA;;EAAA;AAIA;EACE,kDAAA;EACA,WAAA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,OAAA;EACA,0CAAA;EACA,6CAAA;EACA,6CAAA;AT6VF;AS3VE;EACE,gBAAA;AT6VJ;AS1VE;EACE,2BAAA;AT4VJ;ASrVM;EACE,aAAA;EACA,cAAA;EACA,sCAAA;EACA,UAAA;EACA,2BAAA;EACA,4BAAA;ATuVR;ASrVQ;EACE,cAAA;ATuVV;ASjVI;EACE,aAAA;EACA,2BAAA;EACA,sBAAA;ATmVN;ASjVM;EALF;IAMI,eAAA;EToVN;AACF;;AUrYA;;EAAA;AAIA;EACE,eAAA;EACA,+BAAA;EACA,sBAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,kCAAA;EACA,cAAA;EACA,iBAAA;AVuYF;AUrYE;EACE,qBAAA;EACA,WAAA;EACA,YAAA;EACA,kCAAA;EACA,kBAAA;EACA,yFAAA;EAMA,sBAAA;EACA,WAAA;EACA,uCAAA;AVkYJ;AU/XE;EACE,qBAAA;EACA,YAAA;EACA,UAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,mBAAA;AViYJ;AU9XE;EAEE,eAAA;EACA,qIAAA;AV+XJ;AUzXI;EACE,yBAAA;AV2XN;AUxXI;EACE,eAAA;EACA,8DAAA;EACA,kEAAA;AV0XN;AUtXE;EACE,uEAAA;AVwXJ;AUrXE;EA/DF;IAgEI,qBAAA;EVwXF;AACF","file":"pico.docs.css","sourcesContent":["/*!\n * Pico: Customs styles for Docs\n */\n\n// Config\n@import \"../../scss/variables\";\n\n// Theming\n@import \"themes/docs\";\n\n// Layout\n@import \"layout/document\";\n@import \"layout/main\";\n@import \"layout/aside\";\n@import \"layout/documentation\";\n\n// Content\n@import \"content/typography\";\n@import \"content/code\";\n\n// Components\n@import \"components/nav\";\n@import \"components/theme-switcher\";\n","/**\n * Theme: Additions for docs\n */\n\n@import \"../../../scss/themes/default/colors\";\n@import \"docs/icons\";\n\n// Light theme (Default)\n// Can be forced with data-theme=\"light\"\n@import \"docs/light\";\n\n// Dark theme (Auto)\n// Automatically enabled if user has Dark mode enabled\n@import \"docs/dark\";\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n @include dark;\n }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-theme=\"dark\"] {\n @include dark;\n}\n","// Icons\n// Source: https://feathericons.com/\n:root {\n --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\");\n --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\");\n --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\");\n}\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n --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\");\n --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\");\n --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\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --invalid-color: #c62828;\n --valid-color: #388e3c;\n --nav-background-color: rgba(255, 255, 255, 0.7);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #fff;\n --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n }\n}\n[data-theme=dark] {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 4);\n display: grid;\n grid-template-columns: 200px auto;\n }\n}\n@media (min-width: 1200px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n}\nbody > main > aside,\nbody > main div[role=document] {\n min-width: 0;\n}\n\ndiv[role=document] > section::before {\n display: block;\n height: calc(2rem + 3.5rem - 0.5rem);\n margin-top: calc(-2rem - 3.5rem + 0.5rem);\n content: \"\";\n}\n@media (min-width: 576px) {\n div[role=document] > section::before {\n height: calc(2.5rem + 3.5rem - 0.5rem);\n height: calc(-2.5rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 768px) {\n div[role=document] > section::before {\n height: calc(3rem + 3.5rem - 0.5rem);\n margin-top: calc(-3rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 992px) {\n div[role=document] > section::before {\n height: calc(3.5rem + 3.5rem - 0.5rem);\n margin-top: calc(-3.5rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 1200px) {\n div[role=document] > section::before {\n height: calc(4rem + 3.5rem - 0.5rem);\n margin-top: calc(-4rem - 3.5rem + 0.5rem);\n }\n}\n\ndiv[role=document] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"]):not([role])::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n content: \"\";\n}\n\nsvg {\n height: 1rem;\n}\n\n/**\n * Docs: Aside\n */\nmain > aside nav {\n width: 100%;\n margin-bottom: var(--block-spacing-vertical);\n}\nmain > aside nav h1 {\n margin-bottom: calc(var(--typography-spacing-vertical) / 2);\n}\n@media (min-width: 992px) {\n main > aside nav {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n }\n main > aside nav h1 {\n display: none;\n }\n}\nmain > aside li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside li a {\n padding: 0.25rem 0.5rem;\n}\nmain > aside li a svg {\n vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n}\nmain > aside a.active,\nmain > aside a.active:hover {\n color: var(--primary);\n}\nmain > aside details {\n padding-bottom: 0.25rem;\n border-bottom: none;\n}\nmain > aside details summary {\n color: var(--h1-color);\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n}\nmain > aside details summary::after {\n display: none;\n}\nmain > aside details[open] > summary:not(:focus) {\n color: var(--h1-color);\n}\n\n/**\n * Docs: Documentation\n */\n#themes button i {\n font-style: normal;\n}\n\n#customization figure {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n grid-template-rows: repeat(2, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n}\n@media (min-width: 576px) {\n #customization figure {\n grid-template-columns: repeat(18, 1fr);\n grid-template-rows: 1fr;\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n}\n#customization figure ~ article {\n margin-top: 0;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n}\n#customization figure button {\n margin-bottom: 0;\n padding: 0;\n padding-top: 100%;\n border: none;\n border-radius: 0;\n}\n#customization figure button:focus {\n box-shadow: none;\n}\n#customization figure button.picked {\n background-image: var(--icon-check);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n}\n#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {\n background-image: var(--icon-check-dark);\n}\n#customization h4 {\n transition: color var(--transition);\n}\n#customization pre[data-theme=generated] {\n border-color: var(--primary);\n}\n\n#grids {\n --grid-spacing-vertical: 1rem;\n}\n#grids button {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n}\n@media (min-width: 576px) {\n #grids button {\n display: inline-block;\n width: auto;\n margin-right: 0.5rem;\n }\n}\n#grids button svg {\n stroke: var(--secondary);\n margin-right: 0.5rem;\n border: 2px solid currentColor;\n border-radius: 1rem;\n background: currentColor;\n}\n#grids .grid > * {\n padding: calc(var(--spacing) / 2) 0;\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n font-size: 87.5%;\n text-align: center;\n}\n#grids details {\n margin-top: calc(var(--typography-spacing-vertical) * 2);\n}\n#grids details svg {\n vertical-align: bottom;\n}\n\n#forms div.grid {\n grid-row-gap: 0;\n}\n\n/**\n * Docs: Typography\n */\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\na[role=button] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n background: transparent;\n margin-bottom: 0;\n}\n\nsection > pre {\n background: var(--article-code-background-color);\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);\n box-shadow: var(--card-box-shadow);\n}\n\n[data-theme=invalid],\n[data-theme=valid] {\n position: relative;\n margin-bottom: 0 !important;\n}\n[data-theme=invalid]:before,\n[data-theme=valid]:before {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.375rem 0.75rem;\n border-radius: 0;\n color: var(--primary-inverse);\n font-size: 14px;\n line-height: 1;\n}\n@media (min-width: 992px) {\n [data-theme=invalid]:before,\n[data-theme=valid]:before {\n top: var(--spacing);\n right: var(--spacing);\n }\n}\n[data-theme=invalid] code,\n[data-theme=valid] code {\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);\n}\n\n[data-theme=invalid]:before {\n background: var(--invalid-color);\n content: \"Not so great\";\n}\n\n[data-theme=valid]:before {\n background: var(--valid-color);\n content: \"Great\";\n}\n\n/**\n * Docs: Navs\n */\nbody > nav {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n z-index: 99;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: var(--nav-background-color);\n box-shadow: 0px 1px 0 var(--nav-border-color);\n}\nbody > nav a {\n border-radius: 0;\n}\nbody > nav svg {\n vertical-align: text-bottom;\n}\nbody > nav ul:first-of-type li:first-of-type a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n}\n@media (min-width: 992px) {\n body > nav ul:first-of-type li:nth-of-type(2) {\n display: inline;\n }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2);\n bottom: var(--spacing);\n width: auto;\n margin-bottom: 0;\n padding: 0.75rem;\n border-radius: 2rem;\n box-shadow: var(--card-box-shadow);\n line-height: 1;\n text-align: right;\n}\n.switcher::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 0.15rem solid currentColor;\n border-radius: 50%;\n background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);\n vertical-align: bottom;\n content: \"\";\n transition: transform var(--transition);\n}\n.switcher i {\n display: inline-block;\n max-width: 0;\n padding: 0;\n overflow: hidden;\n font-size: 0.875rem;\n font-style: normal;\n white-space: nowrap;\n}\n.switcher:hover, .switcher:focus {\n max-width: 100%;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n.switcher:hover::after {\n transform: rotate(180deg);\n}\n.switcher:hover i {\n max-width: 100%;\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n transition: max-width var(--transition), padding var(--transition);\n}\n.switcher:focus {\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n}\n@media (min-width: 576px) {\n .switcher {\n right: var(--spacing);\n }\n}\n\n/*# sourceMappingURL=pico.docs.css.map */\n","// Light theme (Default) [Additions for docs]\n// Can be forced with data-theme=\"light\"\n[data-theme=\"light\"],\n:root:not([data-theme=\"dark\"]) {\n --invalid-color: #{$red-800};\n --valid-color: #{$green-700};\n --nav-background-color: #{rgba($white, 0.7)};\n --nav-border-color: #{rgba($grey-500, 0.2)};\n --nav-logo-color: #{$white};\n --article-code-background-color: #{mix($grey-50, $white, 33%)};\n}\n","// Dark theme [Additions for docs]\n@mixin dark {\n --invalid-color: #{rgba($red-900, 0.5)};\n --valid-color: #{rgba($green-800, 0.5)};\n --nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};\n --nav-border-color: #{rgba($grey-500, 0.2)};\n --nav-logo-color: #{mix($black, $grey-900)};\n --article-code-background-color: var(--code-background-color);\n}\n","/**\n * Docs: Document\n */\n\nhtml {\n scroll-behavior: smooth;\n}\n","/**\n * Docs: Main (Grid)\n */\n\n// Config\n$navHeight: 3.5rem;\n\n// Main grid\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});\n\n @if map-get($breakpoints, \"lg\") {\n @media (min-width: map-get($breakpoints, \"lg\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 4);\n display: grid;\n grid-template-columns: 200px auto;\n }\n }\n\n @if map-get($breakpoints, \"xl\") {\n @media (min-width: map-get($breakpoints, \"xl\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n }\n\n > aside,\n div[role=\"document\"] {\n min-width: 0;\n }\n}\n\n// Anchors hacks for internal links\ndiv[role=\"document\"] > section::before {\n display: block;\n height: calc(2rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-2rem - #{$navHeight} + 0.5rem);\n content: \"\";\n\n @if map-get($breakpoints, \"sm\") {\n @media (min-width: map-get($breakpoints, \"sm\")) {\n height: calc(2.5rem + #{$navHeight} - 0.5rem);\n height: calc(-2.5rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"md\") {\n @media (min-width: map-get($breakpoints, \"md\")) {\n height: calc(3rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-3rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"lg\") {\n @media (min-width: map-get($breakpoints, \"lg\")) {\n height: calc(3.5rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"xl\") {\n @media (min-width: map-get($breakpoints, \"xl\")) {\n height: calc(4rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-4rem - #{$navHeight} + 0.5rem);\n }\n }\n}\n\n// External links\ndiv[role=\"document\"] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"]):not([role])::after\n{\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n content: \"\";\n}\n\n// Embedded SVG\nsvg {\n height: 1rem;\n}\n","/**\n * Docs: Aside\n */\n\nmain > aside {\n nav {\n width: 100%;\n margin-bottom: var(--block-spacing-vertical);\n\n h1 {\n margin-bottom: calc(var(--typography-spacing-vertical) / 2);\n }\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n\n h1 {\n display: none;\n }\n }\n }\n\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n li a {\n padding: 0.25rem 0.5rem;\n\n svg {\n vertical-align: middle;\n }\n }\n\n a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n }\n\n a.active,\n a.active:hover {\n color: var(--primary);\n }\n\n details {\n padding-bottom: 0.25rem;\n border-bottom: none;\n\n summary {\n color: var(--h1-color);\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n\n &::after {\n display: none;\n }\n }\n\n &[open] {\n > summary:not(:focus) {\n color: var(--h1-color);\n }\n }\n }\n}\n","/**\n * Docs: Documentation\n */\n\n// Docs: Themes\n#themes {\n button i {\n font-style: normal;\n }\n}\n\n// Docs: Customization\n#customization {\n figure {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n grid-template-rows: repeat(2, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n grid-template-columns: repeat(18, 1fr);\n grid-template-rows: 1fr;\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n\n ~ article {\n margin-top: 0;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n }\n\n button {\n margin-bottom: 0;\n padding: 0;\n padding-top: 100%;\n border: none;\n border-radius: 0;\n\n &:focus {\n box-shadow: none;\n }\n\n &.picked {\n background-image: var(--icon-check);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n }\n &[data-color=\"lime\"],\n &[data-color=\"yellow\"],\n &[data-color=\"amber\"] {\n &.picked {\n background-image: var(--icon-check-dark);\n }\n }\n }\n }\n\n h4 {\n transition: color var(--transition);\n }\n\n pre[data-theme=\"generated\"] {\n border-color: var(--primary);\n }\n}\n\n// Docs: Grids\n#grids {\n --grid-spacing-vertical: 1rem;\n\n button {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n display: inline-block;\n width: auto;\n margin-right: 0.5rem;\n }\n\n svg {\n stroke: var(--secondary);\n margin-right: 0.5rem;\n border: 2px solid currentColor;\n border-radius: 1rem;\n background: currentColor;\n }\n }\n\n .grid {\n > * {\n padding: calc(var(--spacing) / 2) 0;\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n font-size: 87.5%;\n text-align: center;\n }\n }\n\n details {\n margin-top: calc(var(--typography-spacing-vertical) * 2);\n\n svg {\n vertical-align: bottom;\n }\n }\n}\n\n// Docs: Forms\n#forms div.grid {\n grid-row-gap: 0;\n}\n","/**\n * Docs: Typography\n */\n\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\na[role=\"button\"] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=\"document\"] {\n section > h1,\n section > h2,\n section > h3 {\n line-height: 1;\n }\n}\n","/**\n * Docs: Code\n */\n\n// Code block inside article\narticle > footer.code {\n background: var(--article-code-background-color);\n}\narticle pre,\narticle pre code {\n background: transparent;\n margin-bottom: 0;\n}\n\n// Code block outside article\n// Horizontally aligned with
content\nsection > pre {\n background: var(--article-code-background-color);\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5)\n var(--block-spacing-horizontal);\n box-shadow: var(--card-box-shadow);\n}\n\n// Badge for Valid & Invalid code\n[data-theme=\"invalid\"],\n[data-theme=\"valid\"] {\n position: relative;\n margin-bottom: 0 !important;\n\n // Label\n &:before {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.375rem 0.75rem;\n border-radius: 0;\n color: var(--primary-inverse);\n font-size: 14px;\n line-height: 1;\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n top: var(--spacing);\n right: var(--spacing);\n }\n }\n\n // Spacing for Valid & Invalid badge\n code {\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)\n var(--block-spacing-horizontal);\n }\n}\n\n// Color for Valid & Invalid code\n[data-theme=\"invalid\"] {\n &:before {\n background: var(--invalid-color);\n content: \"Not so great\";\n }\n}\n\n[data-theme=\"valid\"] {\n &:before {\n background: var(--valid-color);\n content: \"Great\";\n }\n}\n","/**\n * Docs: Navs\n */\n\nbody > nav {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n z-index: 99;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: var(--nav-background-color);\n box-shadow: 0px 1px 0 var(--nav-border-color);\n\n a {\n border-radius: 0;\n }\n\n svg {\n vertical-align: text-bottom;\n }\n\n // Band & Title\n ul:first-of-type li {\n // Brand\n &:first-of-type {\n a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n\n svg {\n height: 3.5rem;\n }\n }\n }\n\n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2);\n bottom: var(--spacing);\n width: auto;\n margin-bottom: 0;\n padding: 0.75rem;\n border-radius: 2rem;\n box-shadow: var(--card-box-shadow);\n line-height: 1;\n text-align: right;\n\n &::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 0.15rem solid currentColor;\n border-radius: 50%;\n background: linear-gradient(\n to right,\n currentColor 0%,\n currentColor 50%,\n transparent 50%\n );\n vertical-align: bottom;\n content: \"\";\n transition: transform var(--transition);\n }\n\n i {\n display: inline-block;\n max-width: 0;\n padding: 0;\n overflow: hidden;\n font-size: 0.875rem;\n font-style: normal;\n white-space: nowrap;\n }\n\n &:hover,\n &:focus {\n max-width: 100%;\n transition: background-color var(--transition),\n border-color var(--transition), color var(--transition),\n box-shadow var(--transition);\n }\n\n &:hover {\n &::after {\n transform: rotate(180deg);\n }\n\n i {\n max-width: 100%;\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n transition: max-width var(--transition), padding var(--transition);\n }\n }\n\n &:focus {\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n }\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n right: var(--spacing);\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../scss/pico.docs.scss","../scss/themes/_docs.scss","../scss/themes/docs/_icons.scss","pico.docs.css","../scss/themes/docs/_light.scss","../scss/themes/docs/_dark.scss","../scss/layout/_document.scss","../scss/layout/_main.scss","../scss/layout/_aside.scss","../scss/layout/_documentation.scss","../scss/content/_typography.scss","../scss/content/_code.scss","../scss/components/_nav.scss","../scss/components/_theme-switcher.scss"],"names":[],"mappings":"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","file":"pico.docs.css","sourcesContent":["/*!\n * Pico: Customs styles for Docs\n */\n\n// Config\n@import \"../../scss/variables\";\n\n// Theming\n@import \"themes/docs\";\n\n// Layout\n@import \"layout/document\";\n@import \"layout/main\";\n@import \"layout/aside\";\n@import \"layout/documentation\";\n\n// Content\n@import \"content/typography\";\n@import \"content/code\";\n\n// Components\n@import \"components/nav\";\n@import \"components/theme-switcher\";\n","/**\n * Theme: Additions for docs\n */\n\n@import \"../../../scss/themes/default/colors\";\n@import \"docs/icons\";\n\n// Light theme (Default)\n// Can be forced with data-theme=\"light\"\n@import \"docs/light\";\n\n// Dark theme (Auto)\n// Automatically enabled if user has Dark mode enabled\n@import \"docs/dark\";\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n @include dark;\n }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-theme=\"dark\"] {\n @include dark;\n}\n","// Icons\n// Source: https://feathericons.com/\n:root {\n --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\");\n --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\");\n --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\");\n}\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n --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\");\n --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\");\n --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\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --invalid-color: #c62828;\n --valid-color: #388e3c;\n --nav-background-color: rgba(255, 255, 255, 0.7);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #fff;\n --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n }\n}\n[data-theme=dark] {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 4);\n display: grid;\n grid-template-columns: 200px auto;\n }\n}\n@media (min-width: 1200px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n}\nbody > main > aside,\nbody > main div[role=document] {\n min-width: 0;\n}\n\ndiv[role=document] > section::before {\n display: block;\n height: calc(2rem + 3.5rem - 0.5rem);\n margin-top: calc(-2rem - 3.5rem + 0.5rem);\n content: \"\";\n}\n@media (min-width: 576px) {\n div[role=document] > section::before {\n height: calc(2.5rem + 3.5rem - 0.5rem);\n height: calc(-2.5rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 768px) {\n div[role=document] > section::before {\n height: calc(3rem + 3.5rem - 0.5rem);\n margin-top: calc(-3rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 992px) {\n div[role=document] > section::before {\n height: calc(3.5rem + 3.5rem - 0.5rem);\n margin-top: calc(-3.5rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 1200px) {\n div[role=document] > section::before {\n height: calc(4rem + 3.5rem - 0.5rem);\n margin-top: calc(-4rem - 3.5rem + 0.5rem);\n }\n}\n\ndiv[role=document] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"]):not([role])::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n content: \"\";\n}\n\nsvg {\n height: 1rem;\n}\n\n/**\n * Docs: Aside\n */\nmain > aside nav {\n width: 100%;\n margin-bottom: var(--block-spacing-vertical);\n}\nmain > aside nav h1 {\n margin-bottom: calc(var(--typography-spacing-vertical) / 2);\n}\n@media (min-width: 992px) {\n main > aside nav {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n }\n main > aside nav h1 {\n display: none;\n }\n}\nmain > aside li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside li a {\n padding: 0.25rem 0.5rem;\n}\nmain > aside li a svg {\n vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n}\nmain > aside a.active,\nmain > aside a.active:hover {\n color: var(--primary);\n}\nmain > aside details {\n padding-bottom: 0.25rem;\n border-bottom: none;\n}\nmain > aside details summary {\n color: var(--h1-color);\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n}\nmain > aside details summary::after {\n display: none;\n}\nmain > aside details[open] > summary:not(:focus) {\n color: var(--h1-color);\n}\n\n/**\n * Docs: Documentation\n */\n#themes button i {\n font-style: normal;\n}\n\n#customization figure {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n grid-template-rows: repeat(2, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n}\n@media (min-width: 576px) {\n #customization figure {\n grid-template-columns: repeat(18, 1fr);\n grid-template-rows: 1fr;\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n}\n#customization figure ~ article {\n margin-top: 0;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n}\n#customization figure button {\n margin-bottom: 0;\n padding: 0;\n padding-top: 100%;\n border: none;\n border-radius: 0;\n}\n#customization figure button:focus {\n box-shadow: none;\n}\n#customization figure button.picked {\n background-image: var(--icon-check);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n}\n#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {\n background-image: var(--icon-check-dark);\n}\n#customization h4 {\n transition: color var(--transition);\n}\n#customization pre[data-theme=generated] {\n border-color: var(--primary);\n}\n\n#grid {\n --grid-spacing-vertical: 1rem;\n}\n#grid button {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n}\n@media (min-width: 576px) {\n #grid button {\n display: inline-block;\n width: auto;\n margin-right: 0.5rem;\n }\n}\n#grid button svg {\n stroke: var(--secondary);\n margin-right: 0.5rem;\n border: 2px solid currentColor;\n border-radius: 1rem;\n background: currentColor;\n}\n#grid .grid > * {\n padding: calc(var(--spacing) / 2) 0;\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n font-size: 87.5%;\n text-align: center;\n}\n#grid details {\n margin-top: calc(var(--typography-spacing-vertical) * 2);\n}\n#grid details svg {\n vertical-align: bottom;\n}\n\n#forms div.grid {\n grid-row-gap: 0;\n}\n\n/**\n * Docs: Typography\n */\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\na[role=button] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n background: transparent;\n margin-bottom: 0;\n}\n\nsection > pre {\n background: var(--article-code-background-color);\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);\n box-shadow: var(--card-box-shadow);\n}\n\n[data-theme=invalid],\n[data-theme=valid] {\n position: relative;\n margin-bottom: 0 !important;\n}\n[data-theme=invalid]:before,\n[data-theme=valid]:before {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.375rem 0.75rem;\n border-radius: 0;\n color: var(--primary-inverse);\n font-size: 14px;\n line-height: 1;\n}\n@media (min-width: 992px) {\n [data-theme=invalid]:before,\n[data-theme=valid]:before {\n top: var(--spacing);\n right: var(--spacing);\n }\n}\n[data-theme=invalid] code,\n[data-theme=valid] code {\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);\n}\n\n[data-theme=invalid]:before {\n background: var(--invalid-color);\n content: \"Not so great\";\n}\n\n[data-theme=valid]:before {\n background: var(--valid-color);\n content: \"Great\";\n}\n\n/**\n * Docs: Navs\n */\nbody > nav {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n z-index: 99;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: var(--nav-background-color);\n box-shadow: 0px 1px 0 var(--nav-border-color);\n}\nbody > nav a {\n border-radius: 0;\n}\nbody > nav svg {\n vertical-align: text-bottom;\n}\nbody > nav ul:first-of-type li:first-of-type a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n}\n@media (min-width: 992px) {\n body > nav ul:first-of-type li:nth-of-type(2) {\n display: inline;\n }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2);\n bottom: var(--spacing);\n width: auto;\n margin-bottom: 0;\n padding: 0.75rem;\n border-radius: 2rem;\n box-shadow: var(--card-box-shadow);\n line-height: 1;\n text-align: right;\n}\n.switcher::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 0.15rem solid currentColor;\n border-radius: 50%;\n background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);\n vertical-align: bottom;\n content: \"\";\n transition: transform var(--transition);\n}\n.switcher i {\n display: inline-block;\n max-width: 0;\n padding: 0;\n overflow: hidden;\n font-size: 0.875rem;\n font-style: normal;\n white-space: nowrap;\n}\n.switcher:hover, .switcher:focus {\n max-width: 100%;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n.switcher:hover::after {\n transform: rotate(180deg);\n}\n.switcher:hover i {\n max-width: 100%;\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n transition: max-width var(--transition), padding var(--transition);\n}\n.switcher:focus {\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n}\n@media (min-width: 576px) {\n .switcher {\n right: var(--spacing);\n }\n}\n\n/*# sourceMappingURL=pico.docs.css.map */\n","// Light theme (Default) [Additions for docs]\n// Can be forced with data-theme=\"light\"\n[data-theme=\"light\"],\n:root:not([data-theme=\"dark\"]) {\n --invalid-color: #{$red-800};\n --valid-color: #{$green-700};\n --nav-background-color: #{rgba($white, 0.7)};\n --nav-border-color: #{rgba($grey-500, 0.2)};\n --nav-logo-color: #{$white};\n --article-code-background-color: #{mix($grey-50, $white, 33%)};\n}\n","// Dark theme [Additions for docs]\n@mixin dark {\n --invalid-color: #{rgba($red-900, 0.5)};\n --valid-color: #{rgba($green-800, 0.5)};\n --nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};\n --nav-border-color: #{rgba($grey-500, 0.2)};\n --nav-logo-color: #{mix($black, $grey-900)};\n --article-code-background-color: var(--code-background-color);\n}\n","/**\n * Docs: Document\n */\n\nhtml {\n scroll-behavior: smooth;\n}\n","/**\n * Docs: Main (Grid)\n */\n\n// Config\n$navHeight: 3.5rem;\n\n// Main grid\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});\n\n @if map-get($breakpoints, \"lg\") {\n @media (min-width: map-get($breakpoints, \"lg\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 4);\n display: grid;\n grid-template-columns: 200px auto;\n }\n }\n\n @if map-get($breakpoints, \"xl\") {\n @media (min-width: map-get($breakpoints, \"xl\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n }\n\n > aside,\n div[role=\"document\"] {\n min-width: 0;\n }\n}\n\n// Anchors hacks for internal links\ndiv[role=\"document\"] > section::before {\n display: block;\n height: calc(2rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-2rem - #{$navHeight} + 0.5rem);\n content: \"\";\n\n @if map-get($breakpoints, \"sm\") {\n @media (min-width: map-get($breakpoints, \"sm\")) {\n height: calc(2.5rem + #{$navHeight} - 0.5rem);\n height: calc(-2.5rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"md\") {\n @media (min-width: map-get($breakpoints, \"md\")) {\n height: calc(3rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-3rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"lg\") {\n @media (min-width: map-get($breakpoints, \"lg\")) {\n height: calc(3.5rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"xl\") {\n @media (min-width: map-get($breakpoints, \"xl\")) {\n height: calc(4rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-4rem - #{$navHeight} + 0.5rem);\n }\n }\n}\n\n// External links\ndiv[role=\"document\"] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"]):not([role])::after\n{\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n content: \"\";\n}\n\n// Embedded SVG\nsvg {\n height: 1rem;\n}\n","/**\n * Docs: Aside\n */\n\nmain > aside {\n nav {\n width: 100%;\n margin-bottom: var(--block-spacing-vertical);\n\n h1 {\n margin-bottom: calc(var(--typography-spacing-vertical) / 2);\n }\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n\n h1 {\n display: none;\n }\n }\n }\n\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n li a {\n padding: 0.25rem 0.5rem;\n\n svg {\n vertical-align: middle;\n }\n }\n\n a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n }\n\n a.active,\n a.active:hover {\n color: var(--primary);\n }\n\n details {\n padding-bottom: 0.25rem;\n border-bottom: none;\n\n summary {\n color: var(--h1-color);\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n\n &::after {\n display: none;\n }\n }\n\n &[open] {\n > summary:not(:focus) {\n color: var(--h1-color);\n }\n }\n }\n}\n","/**\n * Docs: Documentation\n */\n\n// Docs: Themes\n#themes {\n button i {\n font-style: normal;\n }\n}\n\n// Docs: Customization\n#customization {\n figure {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n grid-template-rows: repeat(2, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n grid-template-columns: repeat(18, 1fr);\n grid-template-rows: 1fr;\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n\n ~ article {\n margin-top: 0;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n }\n\n button {\n margin-bottom: 0;\n padding: 0;\n padding-top: 100%;\n border: none;\n border-radius: 0;\n\n &:focus {\n box-shadow: none;\n }\n\n &.picked {\n background-image: var(--icon-check);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n }\n &[data-color=\"lime\"],\n &[data-color=\"yellow\"],\n &[data-color=\"amber\"] {\n &.picked {\n background-image: var(--icon-check-dark);\n }\n }\n }\n }\n\n h4 {\n transition: color var(--transition);\n }\n\n pre[data-theme=\"generated\"] {\n border-color: var(--primary);\n }\n}\n\n// Docs: Grid\n#grid {\n --grid-spacing-vertical: 1rem;\n\n button {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n display: inline-block;\n width: auto;\n margin-right: 0.5rem;\n }\n\n svg {\n stroke: var(--secondary);\n margin-right: 0.5rem;\n border: 2px solid currentColor;\n border-radius: 1rem;\n background: currentColor;\n }\n }\n\n .grid {\n > * {\n padding: calc(var(--spacing) / 2) 0;\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n font-size: 87.5%;\n text-align: center;\n }\n }\n\n details {\n margin-top: calc(var(--typography-spacing-vertical) * 2);\n\n svg {\n vertical-align: bottom;\n }\n }\n}\n\n// Docs: Forms\n#forms div.grid {\n grid-row-gap: 0;\n}\n","/**\n * Docs: Typography\n */\n\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\na[role=\"button\"] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=\"document\"] {\n section > h1,\n section > h2,\n section > h3 {\n line-height: 1;\n }\n}\n","/**\n * Docs: Code\n */\n\n// Code block inside article\narticle > footer.code {\n background: var(--article-code-background-color);\n}\narticle pre,\narticle pre code {\n background: transparent;\n margin-bottom: 0;\n}\n\n// Code block outside article\n// Horizontally aligned with
content\nsection > pre {\n background: var(--article-code-background-color);\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5)\n var(--block-spacing-horizontal);\n box-shadow: var(--card-box-shadow);\n}\n\n// Badge for Valid & Invalid code\n[data-theme=\"invalid\"],\n[data-theme=\"valid\"] {\n position: relative;\n margin-bottom: 0 !important;\n\n // Label\n &:before {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.375rem 0.75rem;\n border-radius: 0;\n color: var(--primary-inverse);\n font-size: 14px;\n line-height: 1;\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n top: var(--spacing);\n right: var(--spacing);\n }\n }\n\n // Spacing for Valid & Invalid badge\n code {\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)\n var(--block-spacing-horizontal);\n }\n}\n\n// Color for Valid & Invalid code\n[data-theme=\"invalid\"] {\n &:before {\n background: var(--invalid-color);\n content: \"Not so great\";\n }\n}\n\n[data-theme=\"valid\"] {\n &:before {\n background: var(--valid-color);\n content: \"Great\";\n }\n}\n","/**\n * Docs: Navs\n */\n\nbody > nav {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n z-index: 99;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: var(--nav-background-color);\n box-shadow: 0px 1px 0 var(--nav-border-color);\n\n a {\n border-radius: 0;\n }\n\n svg {\n vertical-align: text-bottom;\n }\n\n // Band & Title\n ul:first-of-type li {\n // Brand\n &:first-of-type {\n a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n\n svg {\n height: 3.5rem;\n }\n }\n }\n\n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2);\n bottom: var(--spacing);\n width: auto;\n margin-bottom: 0;\n padding: 0.75rem;\n border-radius: 2rem;\n box-shadow: var(--card-box-shadow);\n line-height: 1;\n text-align: right;\n\n &::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 0.15rem solid currentColor;\n border-radius: 50%;\n background: linear-gradient(\n to right,\n currentColor 0%,\n currentColor 50%,\n transparent 50%\n );\n vertical-align: bottom;\n content: \"\";\n transition: transform var(--transition);\n }\n\n i {\n display: inline-block;\n max-width: 0;\n padding: 0;\n overflow: hidden;\n font-size: 0.875rem;\n font-style: normal;\n white-space: nowrap;\n }\n\n &:hover,\n &:focus {\n max-width: 100%;\n transition: background-color var(--transition),\n border-color var(--transition), color var(--transition),\n box-shadow var(--transition);\n }\n\n &:hover {\n &::after {\n transform: rotate(180deg);\n }\n\n i {\n max-width: 100%;\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n transition: max-width var(--transition), padding var(--transition);\n }\n }\n\n &:focus {\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n }\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n right: var(--spacing);\n }\n}\n"]} \ No newline at end of file diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index 6bd3a6cc..c9af84b9 100644 --- a/docs/css/pico.docs.min.css +++ b/docs/css/pico.docs.min.css @@ -1,4 +1,4 @@ /*! * Pico: Customs styles 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-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")}:root:not([data-theme=dark]),[data-theme=light]{--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;--article-code-background-color:#f9fafb}@media only screen and (prefers-color-scheme:dark){: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:#0e1419;--article-code-background-color:var(--code-background-color)}}[data-theme=dark]{--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:#0e1419;--article-code-background-color:var(--code-background-color)}html{scroll-behavior:smooth}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);grid-column-gap:calc(var(--block-spacing-horizontal) * 4);display:grid;grid-template-columns:200px auto}}@media (min-width:1200px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 2)}}body>main div[role=document],body>main>aside{min-width:0}div[role=document]>section::before{display:block;height:calc(2rem + 3.5rem - .5rem);margin-top:calc(-2rem - 3.5rem + .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)}}@media (min-width:768px){div[role=document]>section::before{height:calc(3rem + 3.5rem - .5rem);margin-top:calc(-3rem - 3.5rem + .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)}}@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 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:""}svg{height:1rem}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;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:.25rem .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;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)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(2,1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18,1fr);grid-template-rows:1fr;border-top-right-radius:var(--border-radius);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;padding-top:100%;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;box-shadow:inset 0 0 1rem 0 rgba(0,0,0,.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#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}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:2px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing)/ 2) 0;border-radius:var(--border-radius);background:var(--code-background-color);font-size:87.5%;text-align:center}#grids details{margin-top:calc(var(--typography-spacing-vertical) * 2)}#grids details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--typography-spacing-vertical) * 2)}a[role=button]{margin-right:calc(var(--typography-spacing-vertical)/ 4);margin-bottom:var(--typography-spacing-vertical)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}article>footer.code{background:var(--article-code-background-color)}article pre,article pre code{background:0 0;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);box-shadow:var(--card-box-shadow)}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .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{top:var(--spacing);right:var(--spacing)}}[data-theme=invalid] code,[data-theme=valid] code{padding:calc(var(--block-spacing-vertical)/ 1.5 + 14px + .75rem) var(--block-spacing-horizontal)}[data-theme=invalid]:before{background:var(--invalid-color);content:"Not so great"}[data-theme=valid]:before{background:var(--valid-color);content:"Great"}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background-color);box-shadow:0 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;margin-left:calc(var(--spacing) * -1);padding:0;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}}.switcher{position:fixed;right:calc(var(--spacing)/ 2);bottom:var(--spacing);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-box-shadow);line-height:1;text-align:right}.switcher::after{display:inline-block;width:1rem;height:1rem;border:.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right,currentColor 0,currentColor 50%,transparent 50%);vertical-align:bottom;content:"";transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{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 .2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing)}} + */: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-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")}:root:not([data-theme=dark]),[data-theme=light]{--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;--article-code-background-color:#f9fafb}@media only screen and (prefers-color-scheme:dark){: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:#0e1419;--article-code-background-color:var(--code-background-color)}}[data-theme=dark]{--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:#0e1419;--article-code-background-color:var(--code-background-color)}html{scroll-behavior:smooth}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);grid-column-gap:calc(var(--block-spacing-horizontal) * 4);display:grid;grid-template-columns:200px auto}}@media (min-width:1200px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 2)}}body>main div[role=document],body>main>aside{min-width:0}div[role=document]>section::before{display:block;height:calc(2rem + 3.5rem - .5rem);margin-top:calc(-2rem - 3.5rem + .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)}}@media (min-width:768px){div[role=document]>section::before{height:calc(3rem + 3.5rem - .5rem);margin-top:calc(-3rem - 3.5rem + .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)}}@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 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:""}svg{height:1rem}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;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:.25rem .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;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)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(2,1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18,1fr);grid-template-rows:1fr;border-top-right-radius:var(--border-radius);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;padding-top:100%;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;box-shadow:inset 0 0 1rem 0 rgba(0,0,0,.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grid{--grid-spacing-vertical:1rem}#grid button{display:block;width:100%;margin-bottom:var(--spacing)}@media (min-width:576px){#grid button{display:inline-block;width:auto;margin-right:.5rem}}#grid button svg{stroke:var(--secondary);margin-right:.5rem;border:2px solid currentColor;border-radius:1rem;background:currentColor}#grid .grid>*{padding:calc(var(--spacing)/ 2) 0;border-radius:var(--border-radius);background:var(--code-background-color);font-size:87.5%;text-align:center}#grid details{margin-top:calc(var(--typography-spacing-vertical) * 2)}#grid details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--typography-spacing-vertical) * 2)}a[role=button]{margin-right:calc(var(--typography-spacing-vertical)/ 4);margin-bottom:var(--typography-spacing-vertical)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}article>footer.code{background:var(--article-code-background-color)}article pre,article pre code{background:0 0;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);box-shadow:var(--card-box-shadow)}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .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{top:var(--spacing);right:var(--spacing)}}[data-theme=invalid] code,[data-theme=valid] code{padding:calc(var(--block-spacing-vertical)/ 1.5 + 14px + .75rem) var(--block-spacing-horizontal)}[data-theme=invalid]:before{background:var(--invalid-color);content:"Not so great"}[data-theme=valid]:before{background:var(--valid-color);content:"Great"}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background-color);box-shadow:0 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;margin-left:calc(var(--spacing) * -1);padding:0;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}}.switcher{position:fixed;right:calc(var(--spacing)/ 2);bottom:var(--spacing);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-box-shadow);line-height:1;text-align:right}.switcher::after{display:inline-block;width:1rem;height:1rem;border:.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right,currentColor 0,currentColor 50%,transparent 50%);vertical-align:bottom;content:"";transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{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 .2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing)}} /*# sourceMappingURL=pico.docs.min.css.map */ \ No newline at end of file diff --git a/docs/css/pico.docs.min.css.map b/docs/css/pico.docs.min.css.map index b5590ad5..3e195e39 100644 --- a/docs/css/pico.docs.min.css.map +++ b/docs/css/pico.docs.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["docs/scss/pico.docs.scss","docs/scss/themes/docs/_icons.scss","docs/css/pico.docs.css","docs/scss/themes/docs/_light.scss","docs/scss/themes/_docs.scss","docs/scss/themes/docs/_dark.scss","docs/scss/layout/_document.scss","docs/scss/layout/_main.scss","docs/scss/layout/_aside.scss","docs/scss/layout/_documentation.scss","docs/scss/content/_typography.scss","docs/scss/content/_code.scss","docs/scss/components/_nav.scss","docs/scss/components/_theme-switcher.scss"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Pico: Customs styles for Docs\n */\n\n// Config\n@import \"../../scss/variables\";\n\n// Theming\n@import \"themes/docs\";\n\n// Layout\n@import \"layout/document\";\n@import \"layout/main\";\n@import \"layout/aside\";\n@import \"layout/documentation\";\n\n// Content\n@import \"content/typography\";\n@import \"content/code\";\n\n// Components\n@import \"components/nav\";\n@import \"components/theme-switcher\";\n","// Icons\n// Source: https://feathericons.com/\n:root {\n --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\");\n --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\");\n --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\");\n}\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n --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\");\n --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\");\n --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\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --invalid-color: #c62828;\n --valid-color: #388e3c;\n --nav-background-color: rgba(255, 255, 255, 0.7);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #fff;\n --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n }\n}\n[data-theme=dark] {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 4);\n display: grid;\n grid-template-columns: 200px auto;\n }\n}\n@media (min-width: 1200px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n}\nbody > main > aside,\nbody > main div[role=document] {\n min-width: 0;\n}\n\ndiv[role=document] > section::before {\n display: block;\n height: calc(2rem + 3.5rem - 0.5rem);\n margin-top: calc(-2rem - 3.5rem + 0.5rem);\n content: \"\";\n}\n@media (min-width: 576px) {\n div[role=document] > section::before {\n height: calc(2.5rem + 3.5rem - 0.5rem);\n height: calc(-2.5rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 768px) {\n div[role=document] > section::before {\n height: calc(3rem + 3.5rem - 0.5rem);\n margin-top: calc(-3rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 992px) {\n div[role=document] > section::before {\n height: calc(3.5rem + 3.5rem - 0.5rem);\n margin-top: calc(-3.5rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 1200px) {\n div[role=document] > section::before {\n height: calc(4rem + 3.5rem - 0.5rem);\n margin-top: calc(-4rem - 3.5rem + 0.5rem);\n }\n}\n\ndiv[role=document] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"]):not([role])::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n content: \"\";\n}\n\nsvg {\n height: 1rem;\n}\n\n/**\n * Docs: Aside\n */\nmain > aside nav {\n width: 100%;\n margin-bottom: var(--block-spacing-vertical);\n}\nmain > aside nav h1 {\n margin-bottom: calc(var(--typography-spacing-vertical) / 2);\n}\n@media (min-width: 992px) {\n main > aside nav {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n }\n main > aside nav h1 {\n display: none;\n }\n}\nmain > aside li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside li a {\n padding: 0.25rem 0.5rem;\n}\nmain > aside li a svg {\n vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n}\nmain > aside a.active,\nmain > aside a.active:hover {\n color: var(--primary);\n}\nmain > aside details {\n padding-bottom: 0.25rem;\n border-bottom: none;\n}\nmain > aside details summary {\n color: var(--h1-color);\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n}\nmain > aside details summary::after {\n display: none;\n}\nmain > aside details[open] > summary:not(:focus) {\n color: var(--h1-color);\n}\n\n/**\n * Docs: Documentation\n */\n#themes button i {\n font-style: normal;\n}\n\n#customization figure {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n grid-template-rows: repeat(2, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n}\n@media (min-width: 576px) {\n #customization figure {\n grid-template-columns: repeat(18, 1fr);\n grid-template-rows: 1fr;\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n}\n#customization figure ~ article {\n margin-top: 0;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n}\n#customization figure button {\n margin-bottom: 0;\n padding: 0;\n padding-top: 100%;\n border: none;\n border-radius: 0;\n}\n#customization figure button:focus {\n box-shadow: none;\n}\n#customization figure button.picked {\n background-image: var(--icon-check);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n}\n#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {\n background-image: var(--icon-check-dark);\n}\n#customization h4 {\n transition: color var(--transition);\n}\n#customization pre[data-theme=generated] {\n border-color: var(--primary);\n}\n\n#grids {\n --grid-spacing-vertical: 1rem;\n}\n#grids button {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n}\n@media (min-width: 576px) {\n #grids button {\n display: inline-block;\n width: auto;\n margin-right: 0.5rem;\n }\n}\n#grids button svg {\n stroke: var(--secondary);\n margin-right: 0.5rem;\n border: 2px solid currentColor;\n border-radius: 1rem;\n background: currentColor;\n}\n#grids .grid > * {\n padding: calc(var(--spacing) / 2) 0;\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n font-size: 87.5%;\n text-align: center;\n}\n#grids details {\n margin-top: calc(var(--typography-spacing-vertical) * 2);\n}\n#grids details svg {\n vertical-align: bottom;\n}\n\n#forms div.grid {\n grid-row-gap: 0;\n}\n\n/**\n * Docs: Typography\n */\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\na[role=button] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n background: transparent;\n margin-bottom: 0;\n}\n\nsection > pre {\n background: var(--article-code-background-color);\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);\n box-shadow: var(--card-box-shadow);\n}\n\n[data-theme=invalid],\n[data-theme=valid] {\n position: relative;\n margin-bottom: 0 !important;\n}\n[data-theme=invalid]:before,\n[data-theme=valid]:before {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.375rem 0.75rem;\n border-radius: 0;\n color: var(--primary-inverse);\n font-size: 14px;\n line-height: 1;\n}\n@media (min-width: 992px) {\n [data-theme=invalid]:before,\n[data-theme=valid]:before {\n top: var(--spacing);\n right: var(--spacing);\n }\n}\n[data-theme=invalid] code,\n[data-theme=valid] code {\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);\n}\n\n[data-theme=invalid]:before {\n background: var(--invalid-color);\n content: \"Not so great\";\n}\n\n[data-theme=valid]:before {\n background: var(--valid-color);\n content: \"Great\";\n}\n\n/**\n * Docs: Navs\n */\nbody > nav {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n z-index: 99;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: var(--nav-background-color);\n box-shadow: 0px 1px 0 var(--nav-border-color);\n}\nbody > nav a {\n border-radius: 0;\n}\nbody > nav svg {\n vertical-align: text-bottom;\n}\nbody > nav ul:first-of-type li:first-of-type a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n}\n@media (min-width: 992px) {\n body > nav ul:first-of-type li:nth-of-type(2) {\n display: inline;\n }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2);\n bottom: var(--spacing);\n width: auto;\n margin-bottom: 0;\n padding: 0.75rem;\n border-radius: 2rem;\n box-shadow: var(--card-box-shadow);\n line-height: 1;\n text-align: right;\n}\n.switcher::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 0.15rem solid currentColor;\n border-radius: 50%;\n background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);\n vertical-align: bottom;\n content: \"\";\n transition: transform var(--transition);\n}\n.switcher i {\n display: inline-block;\n max-width: 0;\n padding: 0;\n overflow: hidden;\n font-size: 0.875rem;\n font-style: normal;\n white-space: nowrap;\n}\n.switcher:hover, .switcher:focus {\n max-width: 100%;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n.switcher:hover::after {\n transform: rotate(180deg);\n}\n.switcher:hover i {\n max-width: 100%;\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n transition: max-width var(--transition), padding var(--transition);\n}\n.switcher:focus {\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n}\n@media (min-width: 576px) {\n .switcher {\n right: var(--spacing);\n }\n}\n\n/*# sourceMappingURL=pico.docs.css.map */\n","// Light theme (Default) [Additions for docs]\n// Can be forced with data-theme=\"light\"\n[data-theme=\"light\"],\n:root:not([data-theme=\"dark\"]) {\n --invalid-color: #{$red-800};\n --valid-color: #{$green-700};\n --nav-background-color: #{rgba($white, 0.7)};\n --nav-border-color: #{rgba($grey-500, 0.2)};\n --nav-logo-color: #{$white};\n --article-code-background-color: #{mix($grey-50, $white, 33%)};\n}\n","/**\n * Theme: Additions for docs\n */\n\n@import \"../../../scss/themes/default/colors\";\n@import \"docs/icons\";\n\n// Light theme (Default)\n// Can be forced with data-theme=\"light\"\n@import \"docs/light\";\n\n// Dark theme (Auto)\n// Automatically enabled if user has Dark mode enabled\n@import \"docs/dark\";\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n @include dark;\n }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-theme=\"dark\"] {\n @include dark;\n}\n","// Dark theme [Additions for docs]\n@mixin dark {\n --invalid-color: #{rgba($red-900, 0.5)};\n --valid-color: #{rgba($green-800, 0.5)};\n --nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};\n --nav-border-color: #{rgba($grey-500, 0.2)};\n --nav-logo-color: #{mix($black, $grey-900)};\n --article-code-background-color: var(--code-background-color);\n}\n","/**\n * Docs: Document\n */\n\nhtml {\n scroll-behavior: smooth;\n}\n","/**\n * Docs: Main (Grid)\n */\n\n// Config\n$navHeight: 3.5rem;\n\n// Main grid\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});\n\n @if map-get($breakpoints, \"lg\") {\n @media (min-width: map-get($breakpoints, \"lg\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 4);\n display: grid;\n grid-template-columns: 200px auto;\n }\n }\n\n @if map-get($breakpoints, \"xl\") {\n @media (min-width: map-get($breakpoints, \"xl\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n }\n\n > aside,\n div[role=\"document\"] {\n min-width: 0;\n }\n}\n\n// Anchors hacks for internal links\ndiv[role=\"document\"] > section::before {\n display: block;\n height: calc(2rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-2rem - #{$navHeight} + 0.5rem);\n content: \"\";\n\n @if map-get($breakpoints, \"sm\") {\n @media (min-width: map-get($breakpoints, \"sm\")) {\n height: calc(2.5rem + #{$navHeight} - 0.5rem);\n height: calc(-2.5rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"md\") {\n @media (min-width: map-get($breakpoints, \"md\")) {\n height: calc(3rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-3rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"lg\") {\n @media (min-width: map-get($breakpoints, \"lg\")) {\n height: calc(3.5rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"xl\") {\n @media (min-width: map-get($breakpoints, \"xl\")) {\n height: calc(4rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-4rem - #{$navHeight} + 0.5rem);\n }\n }\n}\n\n// External links\ndiv[role=\"document\"] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"]):not([role])::after\n{\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n content: \"\";\n}\n\n// Embedded SVG\nsvg {\n height: 1rem;\n}\n","/**\n * Docs: Aside\n */\n\nmain > aside {\n nav {\n width: 100%;\n margin-bottom: var(--block-spacing-vertical);\n\n h1 {\n margin-bottom: calc(var(--typography-spacing-vertical) / 2);\n }\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n\n h1 {\n display: none;\n }\n }\n }\n\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n li a {\n padding: 0.25rem 0.5rem;\n\n svg {\n vertical-align: middle;\n }\n }\n\n a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n }\n\n a.active,\n a.active:hover {\n color: var(--primary);\n }\n\n details {\n padding-bottom: 0.25rem;\n border-bottom: none;\n\n summary {\n color: var(--h1-color);\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n\n &::after {\n display: none;\n }\n }\n\n &[open] {\n > summary:not(:focus) {\n color: var(--h1-color);\n }\n }\n }\n}\n","/**\n * Docs: Documentation\n */\n\n// Docs: Themes\n#themes {\n button i {\n font-style: normal;\n }\n}\n\n// Docs: Customization\n#customization {\n figure {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n grid-template-rows: repeat(2, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n grid-template-columns: repeat(18, 1fr);\n grid-template-rows: 1fr;\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n\n ~ article {\n margin-top: 0;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n }\n\n button {\n margin-bottom: 0;\n padding: 0;\n padding-top: 100%;\n border: none;\n border-radius: 0;\n\n &:focus {\n box-shadow: none;\n }\n\n &.picked {\n background-image: var(--icon-check);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n }\n &[data-color=\"lime\"],\n &[data-color=\"yellow\"],\n &[data-color=\"amber\"] {\n &.picked {\n background-image: var(--icon-check-dark);\n }\n }\n }\n }\n\n h4 {\n transition: color var(--transition);\n }\n\n pre[data-theme=\"generated\"] {\n border-color: var(--primary);\n }\n}\n\n// Docs: Grids\n#grids {\n --grid-spacing-vertical: 1rem;\n\n button {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n display: inline-block;\n width: auto;\n margin-right: 0.5rem;\n }\n\n svg {\n stroke: var(--secondary);\n margin-right: 0.5rem;\n border: 2px solid currentColor;\n border-radius: 1rem;\n background: currentColor;\n }\n }\n\n .grid {\n > * {\n padding: calc(var(--spacing) / 2) 0;\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n font-size: 87.5%;\n text-align: center;\n }\n }\n\n details {\n margin-top: calc(var(--typography-spacing-vertical) * 2);\n\n svg {\n vertical-align: bottom;\n }\n }\n}\n\n// Docs: Forms\n#forms div.grid {\n grid-row-gap: 0;\n}\n","/**\n * Docs: Typography\n */\n\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\na[role=\"button\"] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=\"document\"] {\n section > h1,\n section > h2,\n section > h3 {\n line-height: 1;\n }\n}\n","/**\n * Docs: Code\n */\n\n// Code block inside article\narticle > footer.code {\n background: var(--article-code-background-color);\n}\narticle pre,\narticle pre code {\n background: transparent;\n margin-bottom: 0;\n}\n\n// Code block outside article\n// Horizontally aligned with
content\nsection > pre {\n background: var(--article-code-background-color);\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5)\n var(--block-spacing-horizontal);\n box-shadow: var(--card-box-shadow);\n}\n\n// Badge for Valid & Invalid code\n[data-theme=\"invalid\"],\n[data-theme=\"valid\"] {\n position: relative;\n margin-bottom: 0 !important;\n\n // Label\n &:before {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.375rem 0.75rem;\n border-radius: 0;\n color: var(--primary-inverse);\n font-size: 14px;\n line-height: 1;\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n top: var(--spacing);\n right: var(--spacing);\n }\n }\n\n // Spacing for Valid & Invalid badge\n code {\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)\n var(--block-spacing-horizontal);\n }\n}\n\n// Color for Valid & Invalid code\n[data-theme=\"invalid\"] {\n &:before {\n background: var(--invalid-color);\n content: \"Not so great\";\n }\n}\n\n[data-theme=\"valid\"] {\n &:before {\n background: var(--valid-color);\n content: \"Great\";\n }\n}\n","/**\n * Docs: Navs\n */\n\nbody > nav {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n z-index: 99;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: var(--nav-background-color);\n box-shadow: 0px 1px 0 var(--nav-border-color);\n\n a {\n border-radius: 0;\n }\n\n svg {\n vertical-align: text-bottom;\n }\n\n // Band & Title\n ul:first-of-type li {\n // Brand\n &:first-of-type {\n a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n\n svg {\n height: 3.5rem;\n }\n }\n }\n\n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2);\n bottom: var(--spacing);\n width: auto;\n margin-bottom: 0;\n padding: 0.75rem;\n border-radius: 2rem;\n box-shadow: var(--card-box-shadow);\n line-height: 1;\n text-align: right;\n\n &::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 0.15rem solid currentColor;\n border-radius: 50%;\n background: linear-gradient(\n to right,\n currentColor 0%,\n currentColor 50%,\n transparent 50%\n );\n vertical-align: bottom;\n content: \"\";\n transition: transform var(--transition);\n }\n\n i {\n display: inline-block;\n max-width: 0;\n padding: 0;\n overflow: hidden;\n font-size: 0.875rem;\n font-style: normal;\n white-space: nowrap;\n }\n\n &:hover,\n &:focus {\n max-width: 100%;\n transition: background-color var(--transition),\n border-color var(--transition), color var(--transition),\n box-shadow var(--transition);\n }\n\n &:hover {\n &::after {\n transform: rotate(180deg);\n }\n\n i {\n max-width: 100%;\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n transition: max-width var(--transition), padding var(--transition);\n }\n }\n\n &:focus {\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n }\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n right: var(--spacing);\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["docs/scss/pico.docs.scss","docs/scss/themes/docs/_icons.scss","docs/css/pico.docs.css","docs/scss/themes/docs/_light.scss","docs/scss/themes/_docs.scss","docs/scss/themes/docs/_dark.scss","docs/scss/layout/_document.scss","docs/scss/layout/_main.scss","docs/scss/layout/_aside.scss","docs/scss/layout/_documentation.scss","docs/scss/content/_typography.scss","docs/scss/content/_code.scss","docs/scss/components/_nav.scss","docs/scss/components/_theme-switcher.scss"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Pico: Customs styles for Docs\n */\n\n// Config\n@import \"../../scss/variables\";\n\n// Theming\n@import \"themes/docs\";\n\n// Layout\n@import \"layout/document\";\n@import \"layout/main\";\n@import \"layout/aside\";\n@import \"layout/documentation\";\n\n// Content\n@import \"content/typography\";\n@import \"content/code\";\n\n// Components\n@import \"components/nav\";\n@import \"components/theme-switcher\";\n","// Icons\n// Source: https://feathericons.com/\n:root {\n --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\");\n --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\");\n --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\");\n}\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n --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\");\n --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\");\n --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\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --invalid-color: #c62828;\n --valid-color: #388e3c;\n --nav-background-color: rgba(255, 255, 255, 0.7);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #fff;\n --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n }\n}\n[data-theme=dark] {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 4);\n display: grid;\n grid-template-columns: 200px auto;\n }\n}\n@media (min-width: 1200px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n}\nbody > main > aside,\nbody > main div[role=document] {\n min-width: 0;\n}\n\ndiv[role=document] > section::before {\n display: block;\n height: calc(2rem + 3.5rem - 0.5rem);\n margin-top: calc(-2rem - 3.5rem + 0.5rem);\n content: \"\";\n}\n@media (min-width: 576px) {\n div[role=document] > section::before {\n height: calc(2.5rem + 3.5rem - 0.5rem);\n height: calc(-2.5rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 768px) {\n div[role=document] > section::before {\n height: calc(3rem + 3.5rem - 0.5rem);\n margin-top: calc(-3rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 992px) {\n div[role=document] > section::before {\n height: calc(3.5rem + 3.5rem - 0.5rem);\n margin-top: calc(-3.5rem - 3.5rem + 0.5rem);\n }\n}\n@media (min-width: 1200px) {\n div[role=document] > section::before {\n height: calc(4rem + 3.5rem - 0.5rem);\n margin-top: calc(-4rem - 3.5rem + 0.5rem);\n }\n}\n\ndiv[role=document] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"]):not([role])::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n content: \"\";\n}\n\nsvg {\n height: 1rem;\n}\n\n/**\n * Docs: Aside\n */\nmain > aside nav {\n width: 100%;\n margin-bottom: var(--block-spacing-vertical);\n}\nmain > aside nav h1 {\n margin-bottom: calc(var(--typography-spacing-vertical) / 2);\n}\n@media (min-width: 992px) {\n main > aside nav {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n }\n main > aside nav h1 {\n display: none;\n }\n}\nmain > aside li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside li a {\n padding: 0.25rem 0.5rem;\n}\nmain > aside li a svg {\n vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n}\nmain > aside a.active,\nmain > aside a.active:hover {\n color: var(--primary);\n}\nmain > aside details {\n padding-bottom: 0.25rem;\n border-bottom: none;\n}\nmain > aside details summary {\n color: var(--h1-color);\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n}\nmain > aside details summary::after {\n display: none;\n}\nmain > aside details[open] > summary:not(:focus) {\n color: var(--h1-color);\n}\n\n/**\n * Docs: Documentation\n */\n#themes button i {\n font-style: normal;\n}\n\n#customization figure {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n grid-template-rows: repeat(2, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n}\n@media (min-width: 576px) {\n #customization figure {\n grid-template-columns: repeat(18, 1fr);\n grid-template-rows: 1fr;\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n}\n#customization figure ~ article {\n margin-top: 0;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n}\n#customization figure button {\n margin-bottom: 0;\n padding: 0;\n padding-top: 100%;\n border: none;\n border-radius: 0;\n}\n#customization figure button:focus {\n box-shadow: none;\n}\n#customization figure button.picked {\n background-image: var(--icon-check);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n}\n#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {\n background-image: var(--icon-check-dark);\n}\n#customization h4 {\n transition: color var(--transition);\n}\n#customization pre[data-theme=generated] {\n border-color: var(--primary);\n}\n\n#grid {\n --grid-spacing-vertical: 1rem;\n}\n#grid button {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n}\n@media (min-width: 576px) {\n #grid button {\n display: inline-block;\n width: auto;\n margin-right: 0.5rem;\n }\n}\n#grid button svg {\n stroke: var(--secondary);\n margin-right: 0.5rem;\n border: 2px solid currentColor;\n border-radius: 1rem;\n background: currentColor;\n}\n#grid .grid > * {\n padding: calc(var(--spacing) / 2) 0;\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n font-size: 87.5%;\n text-align: center;\n}\n#grid details {\n margin-top: calc(var(--typography-spacing-vertical) * 2);\n}\n#grid details svg {\n vertical-align: bottom;\n}\n\n#forms div.grid {\n grid-row-gap: 0;\n}\n\n/**\n * Docs: Typography\n */\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\na[role=button] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n background: transparent;\n margin-bottom: 0;\n}\n\nsection > pre {\n background: var(--article-code-background-color);\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);\n box-shadow: var(--card-box-shadow);\n}\n\n[data-theme=invalid],\n[data-theme=valid] {\n position: relative;\n margin-bottom: 0 !important;\n}\n[data-theme=invalid]:before,\n[data-theme=valid]:before {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.375rem 0.75rem;\n border-radius: 0;\n color: var(--primary-inverse);\n font-size: 14px;\n line-height: 1;\n}\n@media (min-width: 992px) {\n [data-theme=invalid]:before,\n[data-theme=valid]:before {\n top: var(--spacing);\n right: var(--spacing);\n }\n}\n[data-theme=invalid] code,\n[data-theme=valid] code {\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);\n}\n\n[data-theme=invalid]:before {\n background: var(--invalid-color);\n content: \"Not so great\";\n}\n\n[data-theme=valid]:before {\n background: var(--valid-color);\n content: \"Great\";\n}\n\n/**\n * Docs: Navs\n */\nbody > nav {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n z-index: 99;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: var(--nav-background-color);\n box-shadow: 0px 1px 0 var(--nav-border-color);\n}\nbody > nav a {\n border-radius: 0;\n}\nbody > nav svg {\n vertical-align: text-bottom;\n}\nbody > nav ul:first-of-type li:first-of-type a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n}\n@media (min-width: 992px) {\n body > nav ul:first-of-type li:nth-of-type(2) {\n display: inline;\n }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2);\n bottom: var(--spacing);\n width: auto;\n margin-bottom: 0;\n padding: 0.75rem;\n border-radius: 2rem;\n box-shadow: var(--card-box-shadow);\n line-height: 1;\n text-align: right;\n}\n.switcher::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 0.15rem solid currentColor;\n border-radius: 50%;\n background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);\n vertical-align: bottom;\n content: \"\";\n transition: transform var(--transition);\n}\n.switcher i {\n display: inline-block;\n max-width: 0;\n padding: 0;\n overflow: hidden;\n font-size: 0.875rem;\n font-style: normal;\n white-space: nowrap;\n}\n.switcher:hover, .switcher:focus {\n max-width: 100%;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n.switcher:hover::after {\n transform: rotate(180deg);\n}\n.switcher:hover i {\n max-width: 100%;\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n transition: max-width var(--transition), padding var(--transition);\n}\n.switcher:focus {\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n}\n@media (min-width: 576px) {\n .switcher {\n right: var(--spacing);\n }\n}\n\n/*# sourceMappingURL=pico.docs.css.map */\n","// Light theme (Default) [Additions for docs]\n// Can be forced with data-theme=\"light\"\n[data-theme=\"light\"],\n:root:not([data-theme=\"dark\"]) {\n --invalid-color: #{$red-800};\n --valid-color: #{$green-700};\n --nav-background-color: #{rgba($white, 0.7)};\n --nav-border-color: #{rgba($grey-500, 0.2)};\n --nav-logo-color: #{$white};\n --article-code-background-color: #{mix($grey-50, $white, 33%)};\n}\n","/**\n * Theme: Additions for docs\n */\n\n@import \"../../../scss/themes/default/colors\";\n@import \"docs/icons\";\n\n// Light theme (Default)\n// Can be forced with data-theme=\"light\"\n@import \"docs/light\";\n\n// Dark theme (Auto)\n// Automatically enabled if user has Dark mode enabled\n@import \"docs/dark\";\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n @include dark;\n }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-theme=\"dark\"] {\n @include dark;\n}\n","// Dark theme [Additions for docs]\n@mixin dark {\n --invalid-color: #{rgba($red-900, 0.5)};\n --valid-color: #{rgba($green-800, 0.5)};\n --nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};\n --nav-border-color: #{rgba($grey-500, 0.2)};\n --nav-logo-color: #{mix($black, $grey-900)};\n --article-code-background-color: var(--code-background-color);\n}\n","/**\n * Docs: Document\n */\n\nhtml {\n scroll-behavior: smooth;\n}\n","/**\n * Docs: Main (Grid)\n */\n\n// Config\n$navHeight: 3.5rem;\n\n// Main grid\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});\n\n @if map-get($breakpoints, \"lg\") {\n @media (min-width: map-get($breakpoints, \"lg\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 4);\n display: grid;\n grid-template-columns: 200px auto;\n }\n }\n\n @if map-get($breakpoints, \"xl\") {\n @media (min-width: map-get($breakpoints, \"xl\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n }\n\n > aside,\n div[role=\"document\"] {\n min-width: 0;\n }\n}\n\n// Anchors hacks for internal links\ndiv[role=\"document\"] > section::before {\n display: block;\n height: calc(2rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-2rem - #{$navHeight} + 0.5rem);\n content: \"\";\n\n @if map-get($breakpoints, \"sm\") {\n @media (min-width: map-get($breakpoints, \"sm\")) {\n height: calc(2.5rem + #{$navHeight} - 0.5rem);\n height: calc(-2.5rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"md\") {\n @media (min-width: map-get($breakpoints, \"md\")) {\n height: calc(3rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-3rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"lg\") {\n @media (min-width: map-get($breakpoints, \"lg\")) {\n height: calc(3.5rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);\n }\n }\n\n @if map-get($breakpoints, \"xl\") {\n @media (min-width: map-get($breakpoints, \"xl\")) {\n height: calc(4rem + #{$navHeight} - 0.5rem);\n margin-top: calc(-4rem - #{$navHeight} + 0.5rem);\n }\n }\n}\n\n// External links\ndiv[role=\"document\"] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"]):not([role])::after\n{\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n content: \"\";\n}\n\n// Embedded SVG\nsvg {\n height: 1rem;\n}\n","/**\n * Docs: Aside\n */\n\nmain > aside {\n nav {\n width: 100%;\n margin-bottom: var(--block-spacing-vertical);\n\n h1 {\n margin-bottom: calc(var(--typography-spacing-vertical) / 2);\n }\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n\n h1 {\n display: none;\n }\n }\n }\n\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n li a {\n padding: 0.25rem 0.5rem;\n\n svg {\n vertical-align: middle;\n }\n }\n\n a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n }\n\n a.active,\n a.active:hover {\n color: var(--primary);\n }\n\n details {\n padding-bottom: 0.25rem;\n border-bottom: none;\n\n summary {\n color: var(--h1-color);\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n\n &::after {\n display: none;\n }\n }\n\n &[open] {\n > summary:not(:focus) {\n color: var(--h1-color);\n }\n }\n }\n}\n","/**\n * Docs: Documentation\n */\n\n// Docs: Themes\n#themes {\n button i {\n font-style: normal;\n }\n}\n\n// Docs: Customization\n#customization {\n figure {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n grid-template-rows: repeat(2, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n grid-template-columns: repeat(18, 1fr);\n grid-template-rows: 1fr;\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n\n ~ article {\n margin-top: 0;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n }\n\n button {\n margin-bottom: 0;\n padding: 0;\n padding-top: 100%;\n border: none;\n border-radius: 0;\n\n &:focus {\n box-shadow: none;\n }\n\n &.picked {\n background-image: var(--icon-check);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0.66rem auto;\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n }\n &[data-color=\"lime\"],\n &[data-color=\"yellow\"],\n &[data-color=\"amber\"] {\n &.picked {\n background-image: var(--icon-check-dark);\n }\n }\n }\n }\n\n h4 {\n transition: color var(--transition);\n }\n\n pre[data-theme=\"generated\"] {\n border-color: var(--primary);\n }\n}\n\n// Docs: Grid\n#grid {\n --grid-spacing-vertical: 1rem;\n\n button {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n display: inline-block;\n width: auto;\n margin-right: 0.5rem;\n }\n\n svg {\n stroke: var(--secondary);\n margin-right: 0.5rem;\n border: 2px solid currentColor;\n border-radius: 1rem;\n background: currentColor;\n }\n }\n\n .grid {\n > * {\n padding: calc(var(--spacing) / 2) 0;\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n font-size: 87.5%;\n text-align: center;\n }\n }\n\n details {\n margin-top: calc(var(--typography-spacing-vertical) * 2);\n\n svg {\n vertical-align: bottom;\n }\n }\n}\n\n// Docs: Forms\n#forms div.grid {\n grid-row-gap: 0;\n}\n","/**\n * Docs: Typography\n */\n\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\na[role=\"button\"] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=\"document\"] {\n section > h1,\n section > h2,\n section > h3 {\n line-height: 1;\n }\n}\n","/**\n * Docs: Code\n */\n\n// Code block inside article\narticle > footer.code {\n background: var(--article-code-background-color);\n}\narticle pre,\narticle pre code {\n background: transparent;\n margin-bottom: 0;\n}\n\n// Code block outside article\n// Horizontally aligned with
content\nsection > pre {\n background: var(--article-code-background-color);\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5)\n var(--block-spacing-horizontal);\n box-shadow: var(--card-box-shadow);\n}\n\n// Badge for Valid & Invalid code\n[data-theme=\"invalid\"],\n[data-theme=\"valid\"] {\n position: relative;\n margin-bottom: 0 !important;\n\n // Label\n &:before {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.375rem 0.75rem;\n border-radius: 0;\n color: var(--primary-inverse);\n font-size: 14px;\n line-height: 1;\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n top: var(--spacing);\n right: var(--spacing);\n }\n }\n\n // Spacing for Valid & Invalid badge\n code {\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)\n var(--block-spacing-horizontal);\n }\n}\n\n// Color for Valid & Invalid code\n[data-theme=\"invalid\"] {\n &:before {\n background: var(--invalid-color);\n content: \"Not so great\";\n }\n}\n\n[data-theme=\"valid\"] {\n &:before {\n background: var(--valid-color);\n content: \"Great\";\n }\n}\n","/**\n * Docs: Navs\n */\n\nbody > nav {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n z-index: 99;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: var(--nav-background-color);\n box-shadow: 0px 1px 0 var(--nav-border-color);\n\n a {\n border-radius: 0;\n }\n\n svg {\n vertical-align: text-bottom;\n }\n\n // Band & Title\n ul:first-of-type li {\n // Brand\n &:first-of-type {\n a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n\n svg {\n height: 3.5rem;\n }\n }\n }\n\n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2);\n bottom: var(--spacing);\n width: auto;\n margin-bottom: 0;\n padding: 0.75rem;\n border-radius: 2rem;\n box-shadow: var(--card-box-shadow);\n line-height: 1;\n text-align: right;\n\n &::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 0.15rem solid currentColor;\n border-radius: 50%;\n background: linear-gradient(\n to right,\n currentColor 0%,\n currentColor 50%,\n transparent 50%\n );\n vertical-align: bottom;\n content: \"\";\n transition: transform var(--transition);\n }\n\n i {\n display: inline-block;\n max-width: 0;\n padding: 0;\n overflow: hidden;\n font-size: 0.875rem;\n font-style: normal;\n white-space: nowrap;\n }\n\n &:hover,\n &:focus {\n max-width: 100%;\n transition: background-color var(--transition),\n border-color var(--transition), color var(--transition),\n box-shadow var(--transition);\n }\n\n &:hover {\n &::after {\n transform: rotate(180deg);\n }\n\n i {\n max-width: 100%;\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n transition: max-width var(--transition), padding var(--transition);\n }\n }\n\n &:focus {\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n }\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n right: var(--spacing);\n }\n}\n"]} \ No newline at end of file diff --git a/docs/customization.html b/docs/customization.html new file mode 100644 index 00000000..ed84547e --- /dev/null +++ b/docs/customization.html @@ -0,0 +1,59 @@ +Customization • Pico.css

Customization

You can customize themes with SCSS or, you can edit the CSS variables.

Example: pick a color!

Custom theme

// Simplified example
+:root {
+  --primary: …;
+}
+

There are 2 ways to customize your version of Pico.css:

Overriding CSS variables

All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.

/* Light scheme (Default) */
+/* Can be forced with data-theme="light" */
+[data-theme="light"],
+  :root:not([data-theme="dark"]) {
+  --primary: …;
+  --primary-hover: …;
+  --primary-focus: …;
+  --primary-inverse: …;
+}
+
+/* Dark scheme (Auto) */
+/* Automatically enabled if user has Dark mode enabled */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --primary: …;
+    --primary-hover: …;
+    --primary-focus: …;
+    --primary-inverse: …;
+  }
+}
+
+/* Dark scheme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme="dark"] {
+  --primary: …;
+  --primary-hover: …;
+  --primary-focus: …;
+  --primary-inverse: …;
+}
+
+/* (Common styles) */
+:root {
+  --form-element-active-border-color: var(--primary);
+  --form-element-focus-color: var(--primary-focus);
+  --switch-color: var(--primary-inverse);
+  --switch-checked-background-color: var(--primary);
+}
+

You can find all the CSS variables used in the default theme here: css/themes/default.css

Importing Pico SASS library

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.

Compile the SASS file to CSS to get a custom version of Pico.

/* Custom  version */
+
+// Override default variables
+$primary-500: …;
+$primary-600: …;
+$primary-700: …;
+
+// Import full Pico source code
+@import "path/pico";

Alternatively, you can create a custom theme and import it into your project with the components you need.

/* Custom  version */
+
+// Custom theme
+@import "path/themes/custom";
+
+// Import needed components
+@import "path/layout/document";
+@import "path/layout/sectioning";
+…
+

Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

Code licensed MIT

\ No newline at end of file diff --git a/docs/forms.html b/docs/forms.html new file mode 100644 index 00000000..b80116bc --- /dev/null +++ b/docs/forms.html @@ -0,0 +1,93 @@ +Forms • Pico.css

Forms

All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

Inputs are width: 100%; by default. You can use .grid inside a form.

All natives form elements are fully customizable and themeable with CSS variables.

We'll never share your email with anyone else. 
<form>
+
+  <!-- Grid -->
+  <div class="grid">
+
+    <!-- Markup example 1: input is inside label -->
+    <label for="firstname">
+      First name
+      <input type="text" id="firstname" name="firstname" placeholder="First name" required>
+    </label>
+
+    <label for="lastname">
+      Last name
+      <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
+    </label>
+
+  </div>
+
+  <!-- Markup example 2: input is after label -->
+  <label for="email">Email address</label>
+  <input type="email" id="email" name="email" placeholder="Email address" required>
+  <small>We'll never share your email with anyone else.</small>
+
+  <!-- Button -->
+  <button type="submit">Submit</button>
+
+</form>

Disabled and validation states:

<input type="text" placeholder="Valid" aria-invalid="false">
+<input type="text" placeholder="Invalid" aria-invalid="true">
+<input type="text" placeholder="Disabled" disabled>
+<input type="text" value="Readonly" readonly>

<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

Size 
<!-- Select -->
+<label for="fruit">Fruit</label>
+<select id="fruit" required>
+  <option value="" selected>Select a fruit…</option>
+  <option>…</option>
+</select>
+
+<!-- Radios -->
+<fieldset>
+  <legend>Size</legend>
+  <label for="small">
+    <input type="radio" id="small" name="size" value="small" checked>
+    Small
+  </label>
+  <label for="medium">
+    <input type="radio" id="medium" name="size" value="medium">
+    Medium
+  </label>
+  <label for="large">
+    <input type="radio" id="large" name="size" value="large">
+    Large
+  </label>
+</fieldset>
+
+<!-- Checkbox -->
+<fieldset>
+  <label for="terms">
+    <input type="checkbox" id="terms" name="terms">
+    I agree to the Terms and Conditions
+  </label>
+</fieldset>
+
+<!-- Switch -->
+<fieldset>
+  <label for="switch">
+    <input type="checkbox" id="switch" name="switch" role="switch">
+    Publish on my profile
+  </label>
+</fieldset>

You can change a checkbox to an indeterminate state by setting the indeterminate property to true

<script>
+  document.getElementById('indeterminate-checkbox').indeterminate = true;
+</script>

Others input types:

<!-- File browser -->
+<label for="file">File browser
+  <input type="file" id="file" name="file">
+</label>
+
+<!-- Range slider -->
+<label for="range">Range slider
+  <input type="range" min="0" max="100" value="50" id="range" name="range">
+</label>
+
+<!-- Date -->
+<label for="date">Date
+  <input type="date" id="date" name="date">
+</label>
+
+<!-- Time -->
+<label for="time">Time
+  <input type="time" id="time" name="time">
+</label>
+
+<!-- Color -->
+<label for="color">Color
+  <input type="color" id="color" name="color" value="#0eaaaa">
+</label>

Code licensed MIT

\ No newline at end of file diff --git a/docs/grid.html b/docs/grid.html new file mode 100644 index 00000000..552d0850 --- /dev/null +++ b/docs/grid.html @@ -0,0 +1,6 @@ +Grid • Pico.css

Grid

.grid enable a minimal grid system with auto-layout columns.

1
2
3
4
<div class="grid">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>

Columns intentionally collapses below large devices (992px)

To go further, discover how to merge Pico with the Bootstrap grid system.

 More about grids

As Pico focuses on native HTML elements, we kept this grid system very minimalist.

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.

If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.

If you need a light and custom grid, you can look at CSS Grid Generators. For example, CSS Grid Generator, Layoutit! or Griddy.

Alternatively, you can learn about CSS Grid.

Code licensed MIT

\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 33d2dd7b..0f992595 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,125 +1,4 @@ - - - - - - - - Pico.css • Minimal CSS Framework for semantic HTML - - - - - - - - - - - -
- - - - - -
- - -
-
-

Usage

-

Work without package manager or dependencies 🙂!

-
-

There are 3 ways to get started with pico.css:

-

Install manually

-

Download Pico and link /css/pico.min.css in the <head> of your website.

- 
<link rel="stylesheet" href="css/pico.min.css">
-

Install from CDN

-

Alternatively, you can use unpkg CDN to link pico.css

- 
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
-

Install with NPM

- 
npm install @picocss/pico
-

Starter HTML template:

- -
<!doctype html>
+Documentation • Pico.css
Usage
Works without package manager or dependencies 🙂!
There are 3 ways to get started with pico.css:
Install manually
Download Pico and link /css/pico.min.css in the <head> of your website.
<link rel="stylesheet" href="css/pico.min.css">
Install from CDN
Alternatively, you can use unpkg CDN to link pico.css
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
Install with NPM
npm install @picocss/pico
Starter HTML template:
<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -132,1202 +11,4 @@
       <h1>Hello, world!</h1>
     </main>
   </body>
-</html>

-
-          

-
-          
-          

-            

-              
Themes

-              
Pico is shipped with 2 consistent themes: Light & Dark.

-            

-            
The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme: dark

-            

-              
-            

-            
Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">

-            

-              
Light theme

-              

-                
-                
-                
-              

-              

-
-
<article data-theme="light">
-  …
-</article>

-
-              

-            

-            

-              
Dark theme

-              

-                
-                
-                
-              

-              

-
-
<article data-theme="dark">
-  …
-</article>

-
-              

-            

-          

-
-          
-          

-            

-              
Customization

-              
You can customize themes with SCSS or, you can edit the CSS variables.

-            

-            
Example: pick a color!

-
-            

-              
Custom theme

-              

-                

-                  
-                  
-                  
-                

-                

-                  
-                

-              

-              

-
-
// Simplified example
-:root {
-  --primary: …;
-}
-

-
-              

-            

-            
There are 2 ways to customize your version of Pico.css:

-            
Overriding CSS variables

-            
All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.

-
-
/* Light scheme (Default) */
-/* Can be forced with data-theme="light" */
-[data-theme="light"],
-:root:not([data-theme="dark"]) {
-  --primary: …;
-  --primary-hover: …;
-  --primary-focus: …;
-  --primary-inverse: …;
-}
-
-/* Dark scheme (Auto) */
-/* Automatically enabled if user has Dark mode enabled */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --primary: …;
-    --primary-hover: …;
-    --primary-focus: …;
-    --primary-inverse: …;
-  }
-}
-
-/* Dark scheme (Forced) */
-/* Enabled if forced with data-theme="dark" */
-[data-theme="dark"] {
-  --primary: …;
-  --primary-hover: …;
-  --primary-focus: …;
-  --primary-inverse: …;
-}
-
-/* (Common styles) */
-:root {
-  --form-element-active-border-color: var(--primary);
-  --form-element-focus-color: var(--primary-focus);
-  --switch-color: var(--primary-inverse);
-  --switch-checked-background-color: var(--primary);
-}
-

-
-            
You can find all the CSS variables used in the default theme here: css/themes/default.css

-            
Importing Pico SASS library

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

-            
Compile the SASS file to CSS to get a custom version of Pico.

-
-
/* Custom  version */
-
-// Override default variables
-$primary-500: …;
-$primary-600: …;
-$primary-700: …;
-
-// Import full Pico source code
-@import "path/pico";

-
-            
Alternatively, you can create a custom theme and import it into your project with the components you need.

-
-
/* Custom  version */
-
-// Custom theme
-@import "path/themes/custom";
-
-// Import needed components
-@import "path/layout/document";
-@import "path/layout/sectioning";
-…
-

-
-            
Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

-          

-
-          
-          

-            

-              
Class-less version

-              
For wild HTML purists!

-            

-            
Pico provides a .classless version (example).

-            
In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.

-            
Usage:

-            
Use the default .classless version if you need centered viewports:

-            
<link rel="stylesheet" href="css/pico.classless.min.css">

-            
Or use the .fluid.classless version if you need a fluid container:

-            
<link rel="stylesheet" href="css/pico.fluid.classless.min.css">

-            
These .classless versions are also available on unpkg CDN:

-
-
// Centered viewport
-<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
-

-
-
// Fluid viewport
-<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
-

-
-          

-
-          
-          

-            

-              
RTL

-              
Support for right-to-left text in Pico.

-            

-            
To enable RTL in Pico you need to set dir="rtl"on the <html< element.

-
-
<!doctype html>
-<html dir="rtl" lang="ar">
-  ...
-</html>

-
-            
The RTL feature is still experimental and will probably evolve.

-          

-
-          
-          

-            

-              
Containers

-              

-                .container enable a centered viewport.

-                .container-fluid enable a 100% layout.
-              

-            

-
-
<body>
-  <main class="container"></main>
-</body>

-
-            
Pico uses the same breakpoints and viewports sizes as Bootstrap.

-            

-              
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-              
DeviceExtra smallSmallMediumLargeExtra large
Breakpoint<576px≥576px≥768px≥992px≥1200px
Viewport100%540px720px960px1140px

-            

-            
<header>, <main> and <footer> as direct childs of <body> provide a responsive vertical padding

-            
<section> provide a responsive margin-bottom to separate your sections.

-          

-
-          
-          

-            

-              
Grids

-              
.grid enable a minimal grid system with auto-layout columns.

-            

-            

-              

-                
1

-                
2

-                
3

-                
4

-              

-              

-
-
<div class="grid">
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-</div>

-
-              

-            

-            
Columns intentionally collapses below large devices (992px)

-            
To go further, discover how to merge Pico with the Bootstrap grid system.

-            

-              
-                
-                 More about grids
-              
-              
As Pico focuses on native HTML elements, we kept this grid system very minimalist.

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

-              
If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.

-              
If you need a light and custom grid, you can look at CSS Grid Generators. For example, CSS Grid Generator, Layoutit! or Griddy.

-              
Alternatively, you can learn about CSS Grid.

-            

-          

-
-          
-          

-            

-              
Horizontal scroller

-              
<figure> acts as a container to make any content scrollable horizontally.

-            

-            
Useful to have responsive <table>

-            

-              
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-              
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell

-            

-
-
<figure>
-  <table>
-    …
-  </table>
-</figure>

-
-          

-
-          
-          

-            

-              
Typography

-              
All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.

-            

-            

-              
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-              
DeviceExtra smallSmallMediumLargeExtra large
Base font16px17px18px19px20px
<h1>32px34px36px38px40px
<h2>28px29px31.5px33.25px35px
<h3>24px25.5px27px28.5px30px
<h4>20px21.25px22.5px23.75px25px
<h5>18px19.125px20.25px21.375px22.5px
<h6>16px17px18px19px20px
<small>14px14.875px15.75px16.625px27.5px

-            

-            
Headings:

-            

-              
Heading 1

-              
Heading 2

-              
Heading 3

-              
Heading 4

-              
Heading 5

-              
Heading 6

-              

-
-
<h1>Heading 1</h1>
-<h2>Heading 2</h2>
-<h3>Heading 3</h3>
-<h4>Heading 4</h4>
-<h5>Heading 5</h5>
-<h6>Heading 6</h6>

-
-              

-            

-            
Inside a <hgroup> all margin-bottom are collapsed and the :last-child is muted.

-            

-              

-                
Heading 2

-                
Subtitle for heading 2

-              

-              

-
-
<hgroup>
-  <h2>Heading 2</h2>
-  <h3>Subtitle for heading 2</h3>
-<hgroup>

-
-              

-            

-            
Inline text elements:

-            

-              

-                

-                  
Abbr. abbr

-                  
Bold strong b

-                  
Italic i em cite

-                  
Deleted del

-                  
Inserted ins

-                  
Ctrl + S kbd

-                

-                

-                  
Highlighted mark

-                  
Strikethrough s

-                  
Small  small

-                  
Text Sub sub

-                  
Text Sup sup

-                  
Underline u

-                

-              

-            

-            
Links come with .secondary and .contrast styles.

-            

-              Primary

-              Secondary

-              Contrast

-              

-
-
<a href="#">Primary</a>
-<a href="#" class="secondary">Secondary</a>
-<a href="#" class="contrast">Contrast</a>

-
-              

-            

-            
Blockquote:

-            

-              

-                "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
-                

-                  - Phasellus eget lacinia
-                

-              

-              

-
-
<blockquote>
-  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
-  <footer>
-    <cite>- Phasellus eget lacinia</cite>
-  </footer>
-</blockquote>

-
-              

-            

-          

-
-          
-          

-            

-              
Buttons

-              
The essential button in pure HTML, without .classes for the default style.

-            

-            

-              
-              
-              

-
-
<button>Button</button>
-<input type="submit">

-
-              

-            

-            
Buttons are width: 100%; by default. Use <a role="button"> if you need an inline element.

-            

-              Link
-              Link
-              

-
-
<a href="#" role="button">Link</a>
-<a href="#" role="button">Link</a>

-
-              

-            

-            
Buttons come with .secondary and .contrast styles.

-            

-              Secondary
-              Contrast
-              

-
-
<a href="#" role="button" class="secondary">Secondary</a>
-<a href="#" role="button" class="contrast">Contrast</a>

-
-              

-            

-            
And a classic .outline variant.

-            

-              Primary
-              Secondary
-              Contrast
-              

-
-
<a href="#" role="button" class="outline">Primary</a>
-<a href="#" role="button" class="secondary outline">Secondary</a>
-<a href="#" role="button" class="contrast outline">Contrast</a>

-
-              

-            

-          

-
-          
-          

-            

-              
Forms

-              
All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

-            

-            
Inputs are width: 100%; by default. You can use .grid inside a form.

-            
All natives form elements are fully customizable and themeable with CSS variables.

-            

-              

-                

-                  
-                  
-                

-                
-                
-                We'll never share your email with anyone else.
-                
-              

-              

-
-
<form>
-
-  <!-- Grid -->
-  <div class="grid">
-
-    <!-- Markup example 1: input is inside label -->
-    <label for="firstname">
-      First name
-      <input type="text" id="firstname" name="firstname" placeholder="First name" required>
-    </label>
-
-    <label for="lastname">
-      Last name
-      <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
-    </label>
-
-  </div>
-
-  <!-- Markup example 2: input is after label -->
-  <label for="email">Email address</label>
-  <input type="email" id="email" name="email" placeholder="Email address" required>
-  <small>We'll never share your email with anyone else.</small>
-
-  <!-- Button -->
-  <button type="submit">Submit</button>
-
-</form>

-
-              

-            

-            
Disabled and validation states:

-            

-              

-                
-                
-                
-                
-              

-              

-
-
<input type="text" placeholder="Valid" aria-invalid="false">
-<input type="text" placeholder="Invalid" aria-invalid="true">
-<input type="text" placeholder="Disabled" disabled>
-<input type="text" value="Readonly" readonly>

-
-              

-            

-            
<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.

-            
role="switch" on a type="checkbox" enable a custom switch.

-            

-              
-              
-              

-                Size
-                
-                
-                
-              

-              

-                
-              

-              

-                
-              

-              

-
-
<!-- Select -->
-<label for="fruit">Fruit</label>
-<select id="fruit" required>
-  <option value="" selected>Select a fruit…</option>
-  <option>…</option>
-</select>
-
-<!-- Radios -->
-<fieldset>
-  <legend>Size</legend>
-  <label for="small">
-    <input type="radio" id="small" name="size" value="small" checked>
-    Small
-  </label>
-  <label for="medium">
-    <input type="radio" id="medium" name="size" value="medium">
-    Medium
-  </label>
-  <label for="large">
-    <input type="radio" id="large" name="size" value="large">
-    Large
-  </label>
-</fieldset>
-
-<!-- Checkbox -->
-<fieldset>
-  <label for="terms">
-    <input type="checkbox" id="terms" name="terms">
-    I agree to the Terms and Conditions
-  </label>
-</fieldset>
-
-<!-- Switch -->
-<fieldset>
-  <label for="switch">
-    <input type="checkbox" id="switch" name="switch" role="switch">
-    Publish on my profile
-  </label>
-</fieldset>

-
-              

-            

-            
You can change a checkbox to an indeterminate state by setting the indeterminate property to true

-            

-              
-              
-              

-
-
<script>
-  document.getElementById('indeterminate-checkbox').indeterminate = true;
-</script>

-
-              

-            

-            
Others input types:

-            

-              
-              
-              
-              
-              
-              

-
-
<!-- File browser -->
-<label for="file">File browser
-  <input type="file" id="file" name="file">
-</label>
-
-<!-- Range slider -->
-<label for="range">Range slider
-  <input type="range" min="0" max="100" value="50" id="range" name="range">
-</label>
-
-<!-- Date -->
-<label for="date">Date
-  <input type="date" id="date" name="date">
-</label>
-
-<!-- Time -->
-<label for="time">Time
-  <input type="time" id="time" name="time">
-</label>
-
-<!-- Color -->
-<label for="color">Color
-  <input type="color" id="color" name="color" value="#0eaaaa">
-</label>

-
-              

-            

-          

-
-          
-          

-            

-              
Tables

-              
Default styles for tables without .classes

-            

-            

-              
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-              
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell

-            

-
-
<table>
-  <thead>
-    <tr>
-      <th scope="col">#</th>
-      <th scope="col">Heading</th>
-      <th scope="col">Heading</th>
-      <th scope="col">Heading</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>

-
-            
role="grid" enable striped rows.

-            

-              
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                  
-                    
-                    
-                    
-                    
-                    
-                    
-                  
-                
-              
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell

-            

-
-
<table role="grid">
-  …
-</table>

-
-          

-
-          
-          

-            

-              
Accordions

-              
Toggle sections of content in pure HTML, without JavaScript.

-            

-            

-              

-                Collapsible elements 1
-                
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

-              

-              

-                Collapsible elements 2
-                
    
-                  
  • Vestibulum id elit quis massa interdum sodales.
    • 
-                  
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • 
-                  
  • Quisque sed eros non eros ornare elementum.
    • 
-                  
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • 
-                

-              

-              

-
-
<details>
-  <summary>Collapsible elements 1</summary>
-  <p>…</p>
-</details>
-
-<details open>
-  <summary>Collapsible elements 2</summary>
-  <ul>
-    <li>…</li>
-    <li>…</li>
-  </ul>
-</details>

-
-              

-            

-          

-
-          
-          

-            

-              
Cards

-              
A flexible container with graceful spacings across devices and viewports.

-            

-            

-              I'm a card!
-            

-            
<article>I'm a card!</article>

-            
You can use <header> and footer <footer> inside <article>

-            

-              
Header

-              Body
-              
Footer

-            

-
-
<article>
-  <header>Header</header>
-  Body
-  <footer>Footer</footer>
-</article>

-
-          

-
-          
-          
-
-          
-          

-            

-              
Progress

-              
Progress bar element in pure HTML, without JavaScript.

-            

-            

-              
-              

-
-
<progress value="25" max="100"></progress>

-
-              

-            

-            
You can change a progress bar to an indeterminate state by setting the indeterminate property to true

-            

-              
-              
-              

-
-
<script>
-  document.getElementById('indeterminate-progress').indeterminate = true;
-</script>

-
-              

-            

-          

-
-          
-          

-            

-              
Loading

-              
aria-busy="true" enable a loading indicator.

-            

-            

-              
-              
-              

-
-
<button aria-busy="true">Please wait…</button>
-<button aria-busy="true" class="secondary"></button>

-
-              

-            

-            
It can be applied to any block:

-            

-            
<article aria-busy="true"></article>

-            
Or any text element:

-            
-          

-
-          
-          

-            

-              
Tooltips

-              
Enable tooltips everywhere in pure HTML, without JavaScript.

-            

-            

-              
Tooltip on a link

-              
Tooltip on inline element

-              

-              

-
-
<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
-<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
-<p><button data-tooltip="Tooltip">Tooltip on a button</button></p>

-
-              

-            

-          

-
-          
-          

-            
We love .classes

-            
As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes

-            
But of course, .classes are not a bad practice at all.

-            
Feel free to use modifiers.

-            

-              
<button class="warning">Action</button>

-            

-            
Just try to keep your HTML clean and semantic to keep the Pico spirit.

-            

-              
<button class="button-red margin-large padding-medium">Action</button>

-            

-          

-
-          
-          

-            

-            
Code licensed MIT

-          

-
-        

-
-    

-
-    
-    
-    
-
-  
-
-
+</html>

Code licensed MIT

\ No newline at end of file diff --git a/docs/js/commons.js b/docs/js/commons.js new file mode 100644 index 00000000..50de61d2 --- /dev/null +++ b/docs/js/commons.js @@ -0,0 +1,17 @@ +/* + * Add some magic to Pico docs + * + * Pico.css - https://picocss.com + * Copyright 2019-2021 - Licensed under MIT + */ + +// Imports +import themeSwitcher from './src/theme-switcher.js'; + +// Theme switcher +themeSwitcher.addButton({ + tag: 'BUTTON', + class: 'contrast switcher theme-switcher', + target: 'body', +}); +themeSwitcher.init(); \ No newline at end of file diff --git a/docs/js/commons.min.js b/docs/js/commons.min.js new file mode 100644 index 00000000..fe352f5f --- /dev/null +++ b/docs/js/commons.min.js @@ -0,0 +1 @@ +"use strict";!function(){var e={_scheme:"auto",change:{light:"Turn on dark mode",dark:"Turn off dark mode"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(e){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var t;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){t="dark"==this.scheme?this.change.dark:this.change.light,e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))}.bind(this))}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init()}(); \ No newline at end of file diff --git a/docs/js/customization.js b/docs/js/customization.js new file mode 100644 index 00000000..101923c9 --- /dev/null +++ b/docs/js/customization.js @@ -0,0 +1,14 @@ +/* + * Add some magic to Pico docs + * + * Pico.css - https://picocss.com + * Copyright 2019-2021 - Licensed under MIT + */ + +// Imports +import materialDesignColors from './src/material-design-colors.js'; +import colorPicker from './src/color-picker.js'; + +// Color Picker +colorPicker.colors = materialDesignColors; +colorPicker.init(); \ No newline at end of file diff --git a/docs/js/customization.min.js b/docs/js/customization.min.js new file mode 100644 index 00000000..b67ee3ff --- /dev/null +++ b/docs/js/customization.min.js @@ -0,0 +1 @@ +"use strict";!function(){var e={colors:null,buttonsTarget:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorSection:"#customization",buttons:null,generatedStyles:null,init:function(){this.generateButtons(),this.setActiveButton("pink"),this.generateTheme("pink")},generateButtons:function(){var e,a="",f="";for(e in this.colors)a+='',f+='\n button[data-color="'.concat(e,'"] {\n background-color: ').concat(this.colors[e][600],';\n }\n [data-theme="light"] button[data-color="').concat(e,'"]:hover,\n [data-theme="light"] button[data-color="').concat(e,'"]:active,\n [data-theme="light"] button[data-color="').concat(e,'"]:focus {\n background-color: ').concat(this.colors[e][700],'; \'\n }\n [data-theme="dark"] button[data-color="').concat(e,'"]:hover,\n [data-theme="dark"] button[data-color="').concat(e,'"]:active,\n [data-theme="dark"] button[data-color="').concat(e,'"]:focus {\n background-color: ').concat(this.colors[e][500],";\n }");var t=document.createElement("FIGURE");t.innerHTML=a,document.querySelector(this.buttonsTarget).before(t),this.buttons=document.querySelectorAll(this.selectorButton),this.buttons.forEach(function(e){e.addEventListener("click",function(e){e=e.target.getAttribute("data-color");this.setActiveButton(e),this.generateTheme(e)}.bind(this),!1)}.bind(this));t=document.createElement("STYLE");t.setAttribute("title","color-picker"),this.generatedStyles=this.minifyCSS(f),t.innerHTML=this.generatedStyles,document.querySelector("head").appendChild(t)},setActiveButton:function(e){this.buttons.forEach(function(e){e.removeAttribute("class")}.bind(this)),document.querySelector(this.selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")},generateTheme:function(e){var a=e,e=this.colors[e],f={".name":a.charAt(0).toUpperCase()+a.substring(1)+" ",".c500":e[500],".c600":e[600],".c700":e[700],".c600-outline-light":this.hexToRgbA(e[600],.125),".c600-outline-dark":this.hexToRgbA(e[600],.25),".inverse":e.inverse};Object.keys(f).forEach(function(a){document.querySelectorAll(this.selectorSection+" "+a).forEach(function(e){e.innerHTML=f[a]}.bind(this))}.bind(this));e='\n [data-theme="generated"] {\n --h4-color: '.concat(e[700],";\n --primary: ").concat(e[600],";\n --primary-hover: ").concat(e[700],";\n --primary-focus: ").concat(this.hexToRgbA(e[600],.125),";\n --primary-inverse: ").concat(e.inverse,';\n }\n @media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) [data-theme="generated"] {\n --h4-color: ').concat(e[400],";\n --primary: ").concat(e[600],";\n --primary-hover: ").concat(e[500],";\n --primary-focus: ").concat(this.hexToRgbA(e[600],.25),";\n --primary-inverse: ").concat(e.inverse,';\n }\n }\n [data-theme="dark"] [data-theme="generated"] {\n --h4-color: ').concat(e[500],";\n --primary: ").concat(e[600],";\n --primary-hover: ").concat(e[500],";\n --primary-focus: ").concat(this.hexToRgbA(e[600],.25),";\n --primary-inverse: ").concat(e.inverse,';\n }\n [data-theme="generated"] {\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n }');document.querySelector('style[title="color-picker"]').innerHTML=this.generatedStyles+this.minifyCSS(e)},minifyCSS:function(e){return e.replace(/^ +/gm,"")},hexToRgbA:function(e,a){if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return"rgba("+[(e="0x"+(e=3==(e=e.substring(1).split("")).length?[e[0],e[0],e[1],e[1],e[2],e[2]]:e).join(""))>>16&255,e>>8&255,255&e].join(", ")+", "+a+")";throw new Error("Bad Hex")}};e.colors={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"},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"},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"},"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"},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"},"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"},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"},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"},"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)"},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)"},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)"},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"},"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"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}},e.init()}(); \ No newline at end of file diff --git a/docs/js/grid.js b/docs/js/grid.js new file mode 100644 index 00000000..164f4702 --- /dev/null +++ b/docs/js/grid.js @@ -0,0 +1,12 @@ +/* + * Add some magic to Pico docs + * + * Pico.css - https://picocss.com + * Copyright 2019-2021 - Licensed under MIT + */ + +// Imports +import grid from './src/grid.js'; + +// Grid Interaction +grid.init(); \ No newline at end of file diff --git a/docs/js/grid.min.js b/docs/js/grid.min.js new file mode 100644 index 00000000..a6bdc056 --- /dev/null +++ b/docs/js/grid.min.js @@ -0,0 +1 @@ +"use strict";({buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=document.createElement("P");t.innerHTML='\n \n\n "),document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",function(){this.addColumn()}.bind(this),!1),document.querySelector("#grid button.remove").addEventListener("click",function(){this.removeColumn()}.bind(this),!1)},generateGrid:function(){for(var t="",e='<div class="grid">\n',n=0;n"+(n+1)+"",e+=" <div>"+(n+1)+"</div>\n";e+="</div>",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.currentthis.grid.min&&(this.grid.current--,this.generateGrid())}}).init(); \ No newline at end of file diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js deleted file mode 100644 index a0123513..00000000 --- a/docs/js/pico.docs.js +++ /dev/null @@ -1,35 +0,0 @@ -/* - * Add some magic to Pico docs - * - * Pico.css - https://picocss.com - * Copyright 2019-2021 - Licensed under MIT - */ - -// Imports -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(); - -// Theme switcher -themeSwitcher.addButton({ - tag: 'BUTTON', - class: 'contrast switcher theme-switcher', - target: 'body', -}); -themeSwitcher.init(); - -// Color Picker -colorPicker.colors = materialDesignColors; -colorPicker.init(); - -// Grid Interaction -grid.init(); - -// Scrollspy -scrollspy.init(); diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js deleted file mode 100644 index b481939e..00000000 --- a/docs/js/pico.docs.min.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";!function(){var e={minWidth:"992px",targets:{nav:"aside nav",details:"aside details"},init:function(){var e,t;window.matchMedia("(min-width: "+this.minWidth+")").matches&&(e=document.querySelector(this.targets.nav),t=document.querySelectorAll(this.targets.details),e.clientHeightTurn on dark mode",dark:"Turn off dark mode"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(e){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var t;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){t="dark"==this.scheme?this.change.dark:this.change.light,e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))}.bind(this))}},a={colors:null,buttonsTarget:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorSection:"#customization",buttons:null,generatedStyles:null,init:function(){this.generateButtons(),this.setActiveButton("pink"),this.generateTheme("pink")},generateButtons:function(){var e,t="",a="";for(e in this.colors)t+='',a+='\n button[data-color="'.concat(e,'"] {\n background-color: ').concat(this.colors[e][600],';\n }\n [data-theme="light"] button[data-color="').concat(e,'"]:hover,\n [data-theme="light"] button[data-color="').concat(e,'"]:active,\n [data-theme="light"] button[data-color="').concat(e,'"]:focus {\n background-color: ').concat(this.colors[e][700],'; \'\n }\n [data-theme="dark"] button[data-color="').concat(e,'"]:hover,\n [data-theme="dark"] button[data-color="').concat(e,'"]:active,\n [data-theme="dark"] button[data-color="').concat(e,'"]:focus {\n background-color: ').concat(this.colors[e][500],";\n }");var n=document.createElement("FIGURE");n.innerHTML=t,document.querySelector(this.buttonsTarget).before(n),this.buttons=document.querySelectorAll(this.selectorButton),this.buttons.forEach(function(e){e.addEventListener("click",function(e){e=e.target.getAttribute("data-color");this.setActiveButton(e),this.generateTheme(e)}.bind(this),!1)}.bind(this));n=document.createElement("STYLE");n.setAttribute("title","color-picker"),this.generatedStyles=this.minifyCSS(a),n.innerHTML=this.generatedStyles,document.querySelector("head").appendChild(n)},setActiveButton:function(e){this.buttons.forEach(function(e){e.removeAttribute("class")}.bind(this)),document.querySelector(this.selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")},generateTheme:function(e){var t=e,e=this.colors[e],a={".name":t.charAt(0).toUpperCase()+t.substring(1)+" ",".c500":e[500],".c600":e[600],".c700":e[700],".c600-outline-light":this.hexToRgbA(e[600],.125),".c600-outline-dark":this.hexToRgbA(e[600],.25),".inverse":e.inverse};Object.keys(a).forEach(function(t){document.querySelectorAll(this.selectorSection+" "+t).forEach(function(e){e.innerHTML=a[t]}.bind(this))}.bind(this));e='\n [data-theme="generated"] {\n --h4-color: '.concat(e[700],";\n --primary: ").concat(e[600],";\n --primary-hover: ").concat(e[700],";\n --primary-focus: ").concat(this.hexToRgbA(e[600],.125),";\n --primary-inverse: ").concat(e.inverse,';\n }\n @media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) [data-theme="generated"] {\n --h4-color: ').concat(e[400],";\n --primary: ").concat(e[600],";\n --primary-hover: ").concat(e[500],";\n --primary-focus: ").concat(this.hexToRgbA(e[600],.25),";\n --primary-inverse: ").concat(e.inverse,';\n }\n }\n [data-theme="dark"] [data-theme="generated"] {\n --h4-color: ').concat(e[500],";\n --primary: ").concat(e[600],";\n --primary-hover: ").concat(e[500],";\n --primary-focus: ").concat(this.hexToRgbA(e[600],.25),";\n --primary-inverse: ").concat(e.inverse,';\n }\n [data-theme="generated"] {\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n }');document.querySelector('style[title="color-picker"]').innerHTML=this.generatedStyles+this.minifyCSS(e)},minifyCSS:function(e){return e.replace(/^ +/gm,"")},hexToRgbA:function(e,t){if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return"rgba("+[(e="0x"+(e=3==(e=e.substring(1).split("")).length?[e[0],e[0],e[1],e[1],e[2],e[2]]:e).join(""))>>16&255,e>>8&255,255&e].join(", ")+", "+t+")";throw new Error("Bad Hex")}},n={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grids article"},grid:{current:4,min:1,max:12,gridTarget:"#grids .grid",codeTarget:"#grids pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var e=document.createElement("P");e.innerHTML='\n \n\n "),document.querySelector(this.buttons.target).before(e),document.querySelector("#grids button.add").addEventListener("click",function(){this.addColumn()}.bind(this),!1),document.querySelector("#grids button.remove").addEventListener("click",function(){this.removeColumn()}.bind(this),!1)},generateGrid:function(){for(var e="",t='<div class="grid">\n',a=0;a"+(a+1)+"",t+=" <div>"+(a+1)+"</div>\n";t+="</div>",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=t},addColumn:function(){this.grid.currentthis.grid.min&&(this.grid.current--,this.generateGrid())}},i={minWidth:"992px",interval:75,targets:{sections:'[role="document"] > section',nav:"main aside nav",active:"active"},init:function(){window.matchMedia("(min-width: "+this.minWidth+")").matches&&(this.setActiveNav(),this.scrollStop())},setActiveNav:function(){var e=mostVisible(this.targets.sections).getAttribute("id");document.querySelectorAll(this.targets.nav+" a."+this.targets.active).forEach(function(e){e.classList.remove(this.targets.active)}.bind(this));e=document.querySelector(this.targets.nav+' a[href="#'+e+'"]');e.classList.add(this.targets.active),e.closest("details").setAttribute("open","")},scrollStop:function(){var t;window.addEventListener("scroll",function(e){window.clearTimeout(t),t=setTimeout(function(){this.setActiveNav()}.bind(this),this.interval)}.bind(this),!1)}};e.init(),t.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),t.init(),a.colors={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"},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"},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"},"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"},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"},"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"},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"},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"},"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)"},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)"},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)"},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"},"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"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}},a.init(),n.init(),i.init()}(); \ No newline at end of file diff --git a/docs/js/src/aside.js b/docs/js/src/aside.js deleted file mode 100644 index e784b7fd..00000000 --- a/docs/js/src/aside.js +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Aside adjustment - * - * Pico.css - https://picocss.com - * Copyright 2019-2021 - Licensed under MIT - */ - -export const aside = { - // Config - minWidth: '992px', - targets: { - nav: 'aside nav', - 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'); - }); - } - } - }, -}; - -export default aside; diff --git a/docs/js/src/grid.js b/docs/js/src/grid.js index 4d9dd597..2f79b610 100644 --- a/docs/js/src/grid.js +++ b/docs/js/src/grid.js @@ -12,14 +12,14 @@ export const grid = { add: 'Add column', remove: 'Remove column', }, - target: '#grids article', + target: '#grid article', }, grid: { current: 4, min: 1, max: 12, - gridTarget: '#grids .grid', - codeTarget: '#grids pre code', + gridTarget: '#grid .grid', + codeTarget: '#grid pre code', }, // Init @@ -50,7 +50,7 @@ export const grid = { document.querySelector(this.buttons.target).before(buttons); // Add button listener - document.querySelector('#grids button.add').addEventListener( + document.querySelector('#grid button.add').addEventListener( 'click', function () { this.addColumn(); @@ -59,7 +59,7 @@ export const grid = { ); // Remove button listener - document.querySelector('#grids button.remove').addEventListener( + document.querySelector('#grid button.remove').addEventListener( 'click', function () { this.removeColumn(); diff --git a/docs/js/src/scrollspy.js b/docs/js/src/scrollspy.js deleted file mode 100644 index 8b12f1a6..00000000 --- a/docs/js/src/scrollspy.js +++ /dev/null @@ -1,74 +0,0 @@ -/* - * Scrollspy - * Automatically update nav targets based on scroll position - * - * Require `most-visible.js` (https://github.com/andyexeter/most-visible) - * - * Pico.css - https://picocss.com - * Copyright 2019-2021 - Licensed under MIT - */ - -export const scrollspy = { - - // Config - minWidth: '992px', - interval: 75, - targets: { - sections: '[role="document"] > section', - nav: 'main aside nav', - active: 'active', - }, - - // Init - init() { - if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) { - this.setActiveNav(); - this.scrollStop(); - } - }, - - // Set active section in nav - setActiveNav() { - // Get active section - 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) - ); - - // Set active state - 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 - ); - }, -}; - -export default scrollspy; diff --git a/docs/loading.html b/docs/loading.html new file mode 100644 index 00000000..51d84bf8 --- /dev/null +++ b/docs/loading.html @@ -0,0 +1,2 @@ +Loading • Pico.css

Loading

aria-busy="true" enable a loading indicator.

<button aria-busy="true">Please wait…</button>
+<button aria-busy="true" class="secondary"></button>

It can be applied to any block:

<article aria-busy="true"></article>

Or any text element:

Code licensed MIT

\ No newline at end of file diff --git a/docs/navs.html b/docs/navs.html new file mode 100644 index 00000000..9828f9f4 --- /dev/null +++ b/docs/navs.html @@ -0,0 +1,28 @@ +Navs • Pico.css

Code licensed MIT

\ No newline at end of file diff --git a/docs/progress.html b/docs/progress.html new file mode 100644 index 00000000..484ed653 --- /dev/null +++ b/docs/progress.html @@ -0,0 +1,3 @@ +Progress • Pico.css

Progress

Progress bar element in pure HTML, without JavaScript.

<progress value="25" max="100"></progress>

You can change a progress bar to an indeterminate state by setting the indeterminate property to true

<script>
+  document.getElementById('indeterminate-progress').indeterminate = true;
+</script>

Code licensed MIT

\ No newline at end of file diff --git a/docs/rtl.html b/docs/rtl.html new file mode 100644 index 00000000..fb0bc161 --- /dev/null +++ b/docs/rtl.html @@ -0,0 +1,4 @@ +RTL (Right-To-Left) • Pico.css

RTL

Support for right-to-left text in Pico.

To enable RTL in Pico you need to set dir="rtl"on the <html> element.

<!doctype html>
+<html dir="rtl" lang="ar">
+  ...
+</html>

The RTL feature is still experimental and will probably evolve.

Code licensed MIT

\ No newline at end of file diff --git a/docs/scroller.html b/docs/scroller.html new file mode 100644 index 00000000..9324e7aa --- /dev/null +++ b/docs/scroller.html @@ -0,0 +1,5 @@ +Horizontal scroller • Pico.css

Horizontal scroller

<figure> acts as a container to make any content scrollable horizontally.

Useful to have responsive <table>

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
<figure>
+  <table>
+    …
+  </table>
+</figure>

Code licensed MIT

\ No newline at end of file diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss index 12c1be22..6d97dffa 100644 --- a/docs/scss/layout/_documentation.scss +++ b/docs/scss/layout/_documentation.scss @@ -68,8 +68,8 @@ } } -// Docs: Grids -#grids { +// Docs: Grid +#grid { --grid-spacing-vertical: 1rem; button { diff --git a/docs/src/_footer.html b/docs/src/_footer.html new file mode 100644 index 00000000..12d3be15 --- /dev/null +++ b/docs/src/_footer.html @@ -0,0 +1,4 @@ +
+
+

Code licensed MIT

+
\ No newline at end of file diff --git a/docs/src/_head.html b/docs/src/_head.html new file mode 100644 index 00000000..da3ec0f0 --- /dev/null +++ b/docs/src/_head.html @@ -0,0 +1,8 @@ + + +${props.title} • Pico.css + + + + + \ No newline at end of file diff --git a/docs/src/_nav.html b/docs/src/_nav.html new file mode 100644 index 00000000..ec49cb0d --- /dev/null +++ b/docs/src/_nav.html @@ -0,0 +1,23 @@ + \ No newline at end of file diff --git a/docs/src/_sidebar.html b/docs/src/_sidebar.html new file mode 100644 index 00000000..825d494b --- /dev/null +++ b/docs/src/_sidebar.html @@ -0,0 +1,63 @@ + + + \ No newline at end of file diff --git a/docs/src/accordions.html b/docs/src/accordions.html new file mode 100644 index 00000000..e59e27ae --- /dev/null +++ b/docs/src/accordions.html @@ -0,0 +1,62 @@ + + + + ${require('./_head.html') + title="Accordions" + description="Toggle sections of content in pure HTML, without JavaScript." + canonical="accordions.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="accordions-link"} + +
+
+
+

Accordions

+

Toggle sections of content in pure HTML, without JavaScript.

+
+
+
+ Collapsible elements 1 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

+
+
+ Collapsible elements 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ +
<details>
+  <summary>Collapsible elements 1</summary>
+  <p>…</p>
+</details>
+
+<details open>
+  <summary>Collapsible elements 2</summary>
+  <ul>
+    <li>…</li>
+    <li>…</li>
+  </ul>
+</details>
+ +
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/buttons.html b/docs/src/buttons.html new file mode 100644 index 00000000..de2441f8 --- /dev/null +++ b/docs/src/buttons.html @@ -0,0 +1,76 @@ + + + + ${require('./_head.html') + title="Buttons" + description="The essential button in pure HTML, without .classes for the default style." + canonical="buttons.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="buttons-link"} + +
+
+
+

Buttons

+

The essential button in pure HTML, without .classes for the default style.

+
+
+ + +
+ +
<button>Button</button>
+<input type="submit">
+ +
+
+

Buttons are width: 100%; by default. Use <a role="button"> if you need an inline element.

+
+ Link + Link +
+ +
<a href="#" role="button">Link</a>
+<a href="#" role="button">Link</a>
+ +
+
+

Buttons come with .secondary and .contrast styles.

+
+ Secondary + Contrast +
+ +
<a href="#" role="button" class="secondary">Secondary</a>
+<a href="#" role="button" class="contrast">Contrast</a>
+ +
+
+

And a classic .outline variant.

+
+ Primary + Secondary + Contrast +
+ +
<a href="#" role="button" class="outline">Primary</a>
+<a href="#" role="button" class="secondary outline">Secondary</a>
+<a href="#" role="button" class="contrast outline">Contrast</a>
+ +
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/cards.html b/docs/src/cards.html new file mode 100644 index 00000000..2a92f6f5 --- /dev/null +++ b/docs/src/cards.html @@ -0,0 +1,48 @@ + + + + ${require('./_head.html') + title="Cards" + description="A flexible container with graceful spacings across devices and viewports." + canonical="cards.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="cards-link"} + +
+
+
+

Cards

+

A flexible container with graceful spacings across devices and viewports.

+
+
+ I'm a card! +
+ 
<article>I'm a card!</article>
+

You can use <header> and footer <footer> inside <article>

+
+
Header
+ Body +
Footer
+
+ +
<article>
+  <header>Header</header>
+  Body
+  <footer>Footer</footer>
+</article>
+ +
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/classless.html b/docs/src/classless.html new file mode 100644 index 00000000..9785b945 --- /dev/null +++ b/docs/src/classless.html @@ -0,0 +1,48 @@ + + + + ${require('./_head.html') + title="Class-less version" + description="For wild HTML purists, Pico provides a .classless version." + canonical="classless.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="classless-link"} + +
+
+
+

Class-less version

+

For wild HTML purists!

+
+

Pico provides a .classless version (example).

+

In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.

+

Usage:

+

Use the default .classless version if you need centered viewports:

+ 
<link rel="stylesheet" href="css/pico.classless.min.css">
+

Or use the .fluid.classless version if you need a fluid container:

+ 
<link rel="stylesheet" href="css/pico.fluid.classless.min.css">
+

These .classless versions are also available on unpkg CDN:

+ +
// Centered viewport
+<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
+
+ +
// Fluid viewport
+<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
+
+ +
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/containers.html b/docs/src/containers.html new file mode 100644 index 00000000..47ff7fcc --- /dev/null +++ b/docs/src/containers.html @@ -0,0 +1,74 @@ + + + + ${require('./_head.html') + title="Containers" + description=".container enable a centered viewport, .container-fluid enable a 100% layout." + canonical="containers.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="containers-link"} + +
+
+
+

Containers

+

+ .container enable a centered viewport.
+ .container-fluid enable a 100% layout. +

+
+ +
<body>
+  <main class="container"></main>
+</body>
+ +

Pico uses the same breakpoints and viewports sizes as Bootstrap.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DeviceExtra smallSmallMediumLargeExtra large
Breakpoint<576px≥576px≥768px≥992px≥1200px
Viewport100%540px720px960px1140px
+
+

<header>, <main> and <footer> as direct childs of <body> provide a responsive vertical padding

+

<section> provide a responsive margin-bottom to separate your sections.

+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/customization.html b/docs/src/customization.html new file mode 100644 index 00000000..0605489f --- /dev/null +++ b/docs/src/customization.html @@ -0,0 +1,131 @@ + + + + ${require('./_head.html') + title="Customization" + description="You can customize themes with SCSS or, you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables)." + canonical="customization.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="customization-link"} + +
+
+
+

Customization

+

You can customize themes with SCSS or, you can edit the CSS variables.

+
+

Example: pick a color!

+ +
+

Custom theme

+
+
+ + + +
+
+ +
+
+
+ +
// Simplified example
+:root {
+  --primary: …;
+}
+
+ +
+
+

There are 2 ways to customize your version of Pico.css:

+

Overriding CSS variables

+

All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.

+ +
/* Light scheme (Default) */
+/* Can be forced with data-theme="light" */
+[data-theme="light"],
+  :root:not([data-theme="dark"]) {
+  --primary: …;
+  --primary-hover: …;
+  --primary-focus: …;
+  --primary-inverse: …;
+}
+
+/* Dark scheme (Auto) */
+/* Automatically enabled if user has Dark mode enabled */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --primary: …;
+    --primary-hover: …;
+    --primary-focus: …;
+    --primary-inverse: …;
+  }
+}
+
+/* Dark scheme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme="dark"] {
+  --primary: …;
+  --primary-hover: …;
+  --primary-focus: …;
+  --primary-inverse: …;
+}
+
+/* (Common styles) */
+:root {
+  --form-element-active-border-color: var(--primary);
+  --form-element-focus-color: var(--primary-focus);
+  --switch-color: var(--primary-inverse);
+  --switch-checked-background-color: var(--primary);
+}
+
+ +

You can find all the CSS variables used in the default theme here: css/themes/default.css

+

Importing Pico SASS library

+

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.

+

Compile the SASS file to CSS to get a custom version of Pico.

+ +
/* Custom  version */
+
+// Override default variables
+$primary-500: …;
+$primary-600: …;
+$primary-700: …;
+
+// Import full Pico source code
+@import "path/pico";
+ +

Alternatively, you can create a custom theme and import it into your project with the components you need.

+ +
/* Custom  version */
+
+// Custom theme
+@import "path/themes/custom";
+
+// Import needed components
+@import "path/layout/document";
+@import "path/layout/sectioning";
+…
+
+ +

Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

+
+ + ${require('./_footer.html')} + +
+
+ + + + diff --git a/docs/src/forms.html b/docs/src/forms.html new file mode 100644 index 00000000..2f4af14b --- /dev/null +++ b/docs/src/forms.html @@ -0,0 +1,243 @@ + + + + ${require('./_head.html') + title="Forms" + description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports." + canonical="forms.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="forms-link"} + +
+
+
+

Forms

+

All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

+
+

Inputs are width: 100%; by default. You can use .grid inside a form.

+

All natives form elements are fully customizable and themeable with CSS variables.

+
+
+
+ + +
+ + + We'll never share your email with anyone else. + +
+
+ +
<form>
+
+  <!-- Grid -->
+  <div class="grid">
+
+    <!-- Markup example 1: input is inside label -->
+    <label for="firstname">
+      First name
+      <input type="text" id="firstname" name="firstname" placeholder="First name" required>
+    </label>
+
+    <label for="lastname">
+      Last name
+      <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
+    </label>
+
+  </div>
+
+  <!-- Markup example 2: input is after label -->
+  <label for="email">Email address</label>
+  <input type="email" id="email" name="email" placeholder="Email address" required>
+  <small>We'll never share your email with anyone else.</small>
+
+  <!-- Button -->
+  <button type="submit">Submit</button>
+
+</form>
+ +
+
+

Disabled and validation states:

+
+
+ + + + +
+
+ +
<input type="text" placeholder="Valid" aria-invalid="false">
+<input type="text" placeholder="Invalid" aria-invalid="true">
+<input type="text" placeholder="Disabled" disabled>
+<input type="text" value="Readonly" readonly>
+ +
+
+

<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.

+

role="switch" on a type="checkbox" enable a custom switch.

+
+ + +
+ Size + + + +
+
+ +
+
+ +
+
+ +
<!-- Select -->
+<label for="fruit">Fruit</label>
+<select id="fruit" required>
+  <option value="" selected>Select a fruit…</option>
+  <option>…</option>
+</select>
+
+<!-- Radios -->
+<fieldset>
+  <legend>Size</legend>
+  <label for="small">
+    <input type="radio" id="small" name="size" value="small" checked>
+    Small
+  </label>
+  <label for="medium">
+    <input type="radio" id="medium" name="size" value="medium">
+    Medium
+  </label>
+  <label for="large">
+    <input type="radio" id="large" name="size" value="large">
+    Large
+  </label>
+</fieldset>
+
+<!-- Checkbox -->
+<fieldset>
+  <label for="terms">
+    <input type="checkbox" id="terms" name="terms">
+    I agree to the Terms and Conditions
+  </label>
+</fieldset>
+
+<!-- Switch -->
+<fieldset>
+  <label for="switch">
+    <input type="checkbox" id="switch" name="switch" role="switch">
+    Publish on my profile
+  </label>
+</fieldset>
+ +
+
+

You can change a checkbox to an indeterminate state by setting the indeterminate property to true

+
+ + +
+ +
<script>
+  document.getElementById('indeterminate-checkbox').indeterminate = true;
+</script>
+ +
+
+

Others input types:

+
+ + + + + +
+ +
<!-- File browser -->
+<label for="file">File browser
+  <input type="file" id="file" name="file">
+</label>
+
+<!-- Range slider -->
+<label for="range">Range slider
+  <input type="range" min="0" max="100" value="50" id="range" name="range">
+</label>
+
+<!-- Date -->
+<label for="date">Date
+  <input type="date" id="date" name="date">
+</label>
+
+<!-- Time -->
+<label for="time">Time
+  <input type="time" id="time" name="time">
+</label>
+
+<!-- Color -->
+<label for="color">Color
+  <input type="color" id="color" name="color" value="#0eaaaa">
+</label>
+ +
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/grid.html b/docs/src/grid.html new file mode 100644 index 00000000..a5874707 --- /dev/null +++ b/docs/src/grid.html @@ -0,0 +1,67 @@ + + + + ${require('./_head.html') + title="Grid" + description=".grid enable a minimal grid system with auto-layout columns." + canonical="grid.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="grid-link"} + +
+
+
+

Grid

+

.grid enable a minimal grid system with auto-layout columns.

+
+
+
+
1
+
2
+
3
+
4
+
+
+ +
<div class="grid">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>
+ +
+
+

Columns intentionally collapses below large devices (992px)

+

To go further, discover how to merge Pico with the Bootstrap grid system.

+
+ + +  More about grids + +

As Pico focuses on native HTML elements, we kept this grid system very minimalist.

+

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.

+

If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.

+

If you need a light and custom grid, you can look at CSS Grid Generators. For example, CSS Grid Generator, Layoutit! or Griddy.

+

Alternatively, you can learn about CSS Grid.

+
+
+ + ${require('./_footer.html')} + +
+
+ + + + diff --git a/docs/src/index.html b/docs/src/index.html new file mode 100644 index 00000000..2bc54cf5 --- /dev/null +++ b/docs/src/index.html @@ -0,0 +1,57 @@ + + + + ${require('./_head.html') + title="Documentation" + description="Pico works without package manager or dependencies! There are 3 ways to get started with pico.css: manually, from a CDN, with NPM." + canonical="" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="start-link"} + +
+
+
+

Usage

+

Works without package manager or dependencies 🙂!

+
+

There are 3 ways to get started with pico.css:

+

Install manually

+

Download Pico and link /css/pico.min.css in the <head> of your website.

+ 
<link rel="stylesheet" href="css/pico.min.css">
+

Install from CDN

+

Alternatively, you can use unpkg CDN to link pico.css

+ 
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+

Install with NPM

+ 
npm install @picocss/pico
+

Starter HTML template:

+ +
<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/pico.min.css">
+    <title>Hello, world!</title>
+  </head>
+  <body>
+    <main class="container">
+      <h1>Hello, world!</h1>
+    </main>
+  </body>
+</html>
+ +
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/loading.html b/docs/src/loading.html new file mode 100644 index 00000000..4995dd70 --- /dev/null +++ b/docs/src/loading.html @@ -0,0 +1,51 @@ + + + + ${require('./_head.html') + title="Loading" + description="aria-busy='true' enable a loading indicator." + canonical="loading.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="loading-link"} + +
+
+
+

Loading

+

aria-busy="true" enable a loading indicator.

+
+
+ + +
+ +
<button aria-busy="true">Please wait…</button>
+<button aria-busy="true" class="secondary"></button>
+ +
+
+

It can be applied to any block:

+
+ 
<article aria-busy="true"></article>
+

Or any text element:

+ +
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/navs.html b/docs/src/navs.html new file mode 100644 index 00000000..555bea2e --- /dev/null +++ b/docs/src/navs.html @@ -0,0 +1,127 @@ + + + + ${require('./_head.html') + title="Navs" + description="The essential navbar component in pure semantic HTML." + canonical="navs.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="navs-link"} + +
+ + + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/progress.html b/docs/src/progress.html new file mode 100644 index 00000000..877f22b9 --- /dev/null +++ b/docs/src/progress.html @@ -0,0 +1,51 @@ + + + + ${require('./_head.html') + title="Progress" + description="Progress bar element in pure HTML, without JavaScript." + canonical="progress.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="progress-link"} + +
+
+
+

Progress

+

Progress bar element in pure HTML, without JavaScript.

+
+
+ +
+ +
<progress value="25" max="100"></progress>
+ +
+
+

You can change a progress bar to an indeterminate state by setting the indeterminate property to true

+
+ + +
+ +
<script>
+  document.getElementById('indeterminate-progress').indeterminate = true;
+</script>
+ +
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/rtl.html b/docs/src/rtl.html new file mode 100644 index 00000000..e798d2f5 --- /dev/null +++ b/docs/src/rtl.html @@ -0,0 +1,39 @@ + + + + ${require('./_head.html') + title="RTL (Right-To-Left)" + description="Support for right-to-left text in Pico with dir='rtl'" + canonical="rtl.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="rtl-link"} + +
+
+
+

RTL

+

Support for right-to-left text in Pico.

+
+

To enable RTL in Pico you need to set dir="rtl"on the <html> element.

+ +
<!doctype html>
+<html dir="rtl" lang="ar">
+  ...
+</html>
+ +

The RTL feature is still experimental and will probably evolve.

+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/scroller.html b/docs/src/scroller.html new file mode 100644 index 00000000..8cf16b28 --- /dev/null +++ b/docs/src/scroller.html @@ -0,0 +1,95 @@ + + + + ${require('./_head.html') + title="Horizontal scroller" + description="<figure> acts as a container to make any content scrollable horizontally." + canonical="scroller.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="scroller-link"} + +
+
+
+

Horizontal scroller

+

<figure> acts as a container to make any content scrollable horizontally.

+
+

Useful to have responsive <table>

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
+
+ +
<figure>
+  <table>
+    …
+  </table>
+</figure>
+ +
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/tables.html b/docs/src/tables.html new file mode 100644 index 00000000..6a1fe8b5 --- /dev/null +++ b/docs/src/tables.html @@ -0,0 +1,157 @@ + + + + ${require('./_head.html') + title="Tables" + description="Default styles for tables without .classes" + canonical="tables.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="tables-link"} + +
+
+
+

Tables

+

Default styles for tables without .classes

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
+
+ +
<table>
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+</table>
+ +

role="grid" enable striped rows.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
+
+ +
<table role="grid">
+  …
+</table>
+ +
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/themes.html b/docs/src/themes.html new file mode 100644 index 00000000..3af21027 --- /dev/null +++ b/docs/src/themes.html @@ -0,0 +1,66 @@ + + + + ${require('./_head.html') + title="Themes" + description="Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark')." + canonical="themes.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="themes-link"} + +
+
+
+

Themes

+

Pico is shipped with 2 consistent themes: Light & Dark.

+
+

The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme: dark

+
+ +
+

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">

+
+

Light theme

+
+ + + +
+
+ +
<article data-theme="light">
+  …
+</article>
+ +
+
+
+

Dark theme

+
+ + + +
+
+ +
<article data-theme="dark">
+  …
+</article>
+ +
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/tooltips.html b/docs/src/tooltips.html new file mode 100644 index 00000000..932f7115 --- /dev/null +++ b/docs/src/tooltips.html @@ -0,0 +1,43 @@ + + + + ${require('./_head.html') + title="Tooltips" + description="Enable tooltips everywhere in pure HTML, without JavaScript." + canonical="tooltips.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="tooltips-link"} + +
+
+
+

Tooltips

+

Enable tooltips everywhere in pure HTML, without JavaScript.

+
+
+

Tooltip on a link

+

Tooltip on inline element

+

+
+ +
<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
+<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
+<p><button data-tooltip="Tooltip">Tooltip on a button</button></p>
+ +
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/typography.html b/docs/src/typography.html new file mode 100644 index 00000000..6eb4cbef --- /dev/null +++ b/docs/src/typography.html @@ -0,0 +1,198 @@ + + + + ${require('./_head.html') + title="Typography" + description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports." + canonical="typography.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="typography-link"} + +
+
+
+

Typography

+

All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DeviceExtra smallSmallMediumLargeExtra large
Base font16px17px18px19px20px
<h1>32px34px36px38px40px
<h2>28px29px31.5px33.25px35px
<h3>24px25.5px27px28.5px30px
<h4>20px21.25px22.5px23.75px25px
<h5>18px19.125px20.25px21.375px22.5px
<h6>16px17px18px19px20px
<small>14px14.875px15.75px16.625px27.5px
+
+

Headings:

+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ +
<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+ +
+
+

Inside a <hgroup> all margin-bottom are collapsed and the :last-child is muted.

+
+
+

Heading 2

+

Subtitle for heading 2

+
+
+ +
<hgroup>
+  <h2>Heading 2</h2>
+  <h3>Subtitle for heading 2</h3>
+<hgroup>
+ +
+
+

Inline text elements:

+
+
+
+

Abbr. abbr

+

Bold strong b

+

Italic i em cite

+

Deleted del

+

Inserted ins

+

Ctrl + S kbd

+
+
+

Highlighted mark

+

Strikethrough s

+

Small small

+

Text Sub sub

+

Text Sup sup

+

Underline u

+
+
+
+

Links come with .secondary and .contrast styles.

+
+ Primary
+ Secondary
+ Contrast
+
+ +
<a href="#">Primary</a>
+<a href="#" class="secondary">Secondary</a>
+<a href="#" class="contrast">Contrast</a>
+ +
+
+

Blockquote:

+
+
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+
+ +
<blockquote>
+  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
+  <footer>
+    <cite>- Phasellus eget lacinia</cite>
+  </footer>
+</blockquote>
+ +
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/src/we-love-classes.html b/docs/src/we-love-classes.html new file mode 100644 index 00000000..8a91480a --- /dev/null +++ b/docs/src/we-love-classes.html @@ -0,0 +1,38 @@ + + + + ${require('./_head.html') + title="We love .classes" + description="As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers." + canonical="we-love-classes.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="we-love-classes-link"} + +
+
+

We love .classes

+

As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes

+

But of course, .classes are not a bad practice at all.

+

Feel free to use modifiers.

+
+ 
<button class="warning">Action</button>
+
+

Just try to keep your HTML clean and semantic to keep the Pico spirit.

+
+ 
<button class="button-red margin-large padding-medium">Action</button>
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/docs/tables.html b/docs/tables.html new file mode 100644 index 00000000..956fe24b --- /dev/null +++ b/docs/tables.html @@ -0,0 +1,40 @@ +Tables • Pico.css

Tables

Default styles for tables without .classes

#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
<table>
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+</table>

role="grid" enable striped rows.

#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
<table role="grid">
+  …
+</table>

Code licensed MIT

\ No newline at end of file diff --git a/docs/themes.html b/docs/themes.html new file mode 100644 index 00000000..699ad10b --- /dev/null +++ b/docs/themes.html @@ -0,0 +1,5 @@ +Themes • Pico.css

Themes

Pico is shipped with 2 consistent themes: Light & Dark.

The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme: dark

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">

Light theme

<article data-theme="light">
+  …
+</article>

Dark theme

<article data-theme="dark">
+  …
+</article>

Code licensed MIT

\ No newline at end of file diff --git a/docs/tooltips.html b/docs/tooltips.html new file mode 100644 index 00000000..5e5efd91 --- /dev/null +++ b/docs/tooltips.html @@ -0,0 +1,3 @@ +Tooltips • Pico.css

Tooltips

Enable tooltips everywhere in pure HTML, without JavaScript.

Tooltip on a link

Tooltip on inline element

<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
+<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
+<p><button data-tooltip="Tooltip">Tooltip on a button</button></p>

Code licensed MIT

\ No newline at end of file diff --git a/docs/typography.html b/docs/typography.html new file mode 100644 index 00000000..f39d6bf9 --- /dev/null +++ b/docs/typography.html @@ -0,0 +1,16 @@ +Typography • Pico.css

Typography

All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.

DeviceExtra smallSmallMediumLargeExtra large
Base font16px17px18px19px20px
<h1>32px34px36px38px40px
<h2>28px29px31.5px33.25px35px
<h3>24px25.5px27px28.5px30px
<h4>20px21.25px22.5px23.75px25px
<h5>18px19.125px20.25px21.375px22.5px
<h6>16px17px18px19px20px
<small>14px14.875px15.75px16.625px27.5px

Headings:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>

Inside a <hgroup> all margin-bottom are collapsed and the :last-child is muted.

Heading 2

Subtitle for heading 2

<hgroup>
+  <h2>Heading 2</h2>
+  <h3>Subtitle for heading 2</h3>
+<hgroup>

Inline text elements:

Abbr. abbr

Bold strong b

Italic i em cite

Deleted del

Inserted ins

Ctrl + S kbd

Highlighted mark

Strikethrough s

Small small

Text Sub sub

Text Sup sup

Underline u

Links come with .secondary and .contrast styles.

Primary
Secondary
Contrast
<a href="#">Primary</a>
+<a href="#" class="secondary">Secondary</a>
+<a href="#" class="contrast">Contrast</a>

Blockquote:

"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
- Phasellus eget lacinia
<blockquote>
+  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
+  <footer>
+    <cite>- Phasellus eget lacinia</cite>
+  </footer>
+</blockquote>

Code licensed MIT

\ No newline at end of file diff --git a/docs/we-love-classes.html b/docs/we-love-classes.html new file mode 100644 index 00000000..a4bdcd54 --- /dev/null +++ b/docs/we-love-classes.html @@ -0,0 +1 @@ +We love .classes • Pico.css

We love .classes

As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes

But of course, .classes are not a bad practice at all.

Feel free to use modifiers.

<button class="warning">Action</button>

Just try to keep your HTML clean and semantic to keep the Pico spirit.

<button class="button-red margin-large padding-medium">Action</button>

Code licensed MIT

\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1e17dea9..4fa9cdb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@babel/preset-env": "^7.16.0", "autoprefixer": "^10.4.0", "clean-css-cli": "^5.4.2", + "html-includes": "^4.4.1", "nodemon": "^2.0.14", "npm-run-all": "^4.1.5", "postcss": "^8.3.11", @@ -1703,6 +1704,15 @@ "node": ">= 8" } }, + "node_modules/array-back": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz", + "integrity": "sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/array-union": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz", @@ -1715,6 +1725,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/ast-types": { + "version": "0.9.6", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz", + "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/autoprefixer": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz", @@ -1796,6 +1815,15 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/big.js": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", + "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -1997,6 +2025,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/camel-case": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", + "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=", + "dev": true, + "dependencies": { + "no-case": "^2.2.0", + "upper-case": "^1.1.1" + } + }, "node_modules/camelcase": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz", @@ -2154,6 +2192,21 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "dev": true }, + "node_modules/command-line-args": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.0.tgz", + "integrity": "sha512-4zqtU1hYsSJzcJBOcNZIbW5Fbk9BkjCp1pZVhQKoRaWL5J7N4XphDLwo8aWwdQpTugxwu+jf9u2ZhkXiqp5Z6A==", + "dev": true, + "dependencies": { + "array-back": "^3.1.0", + "find-replace": "^3.0.0", + "lodash.camelcase": "^4.3.0", + "typical": "^4.0.0" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -2374,6 +2427,15 @@ "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "dev": true }, + "node_modules/emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -2443,6 +2505,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/es6-templates": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz", + "integrity": "sha1-XLmsn7He1usSOTQrgdeSu7QHjuQ=", + "dev": true, + "dependencies": { + "recast": "~0.11.12", + "through": "~2.3.6" + } + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -2470,6 +2542,19 @@ "node": ">=0.8.0" } }, + "node_modules/esprima": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", + "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=", + "dev": true, + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -2495,6 +2580,12 @@ "node": ">=8" } }, + "node_modules/fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "node_modules/fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -2516,6 +2607,18 @@ "node": ">=8" } }, + "node_modules/find-replace": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/find-replace/-/find-replace-3.0.0.tgz", + "integrity": "sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==", + "dev": true, + "dependencies": { + "array-back": "^3.0.1" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/fraction.js": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz", @@ -2829,12 +2932,203 @@ "node": ">=8" } }, + "node_modules/he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true, + "bin": { + "he": "bin/he" + } + }, "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, + "node_modules/html-includes": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/html-includes/-/html-includes-4.4.1.tgz", + "integrity": "sha512-R2WkgcQ7pHemrR7O5L+r43dEraL5m7lubh7BToYr4qit0o1VpZBpqhzuzVSGc+Kj16f2tzu7Q+ilAoXdPcjrtA==", + "dev": true, + "dependencies": { + "command-line-args": "^5.1.1", + "fs-extra": "^7.0.0", + "glob": "^7.1.2", + "html-loader": "^0.5.5", + "html-minifier": "^4.0.0", + "loader-utils": "^1.1.0", + "node-watch": "^0.6.2", + "shelljs": "^0.8.3" + }, + "bin": { + "html-includes": "bin/run.js" + } + }, + "node_modules/html-includes/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/html-includes/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "dev": true, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/html-includes/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/html-loader": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/html-loader/-/html-loader-0.5.5.tgz", + "integrity": "sha512-7hIW7YinOYUpo//kSYcPB6dCKoceKLmOwjEMmhIobHuWGDVl0Nwe4l68mdG/Ru0wcUxQjVMEoZpkalZ/SE7zog==", + "dev": true, + "dependencies": { + "es6-templates": "^0.2.3", + "fastparse": "^1.1.1", + "html-minifier": "^3.5.8", + "loader-utils": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "node_modules/html-loader/node_modules/clean-css": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", + "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "dev": true, + "dependencies": { + "source-map": "~0.6.0" + }, + "engines": { + "node": ">= 4.0" + } + }, + "node_modules/html-loader/node_modules/commander": { + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", + "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", + "dev": true + }, + "node_modules/html-loader/node_modules/html-minifier": { + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz", + "integrity": "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==", + "dev": true, + "dependencies": { + "camel-case": "3.0.x", + "clean-css": "4.2.x", + "commander": "2.17.x", + "he": "1.2.x", + "param-case": "2.1.x", + "relateurl": "0.2.x", + "uglify-js": "3.4.x" + }, + "bin": { + "html-minifier": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/html-loader/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/html-loader/node_modules/uglify-js": { + "version": "3.4.10", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", + "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==", + "dev": true, + "dependencies": { + "commander": "~2.19.0", + "source-map": "~0.6.1" + }, + "bin": { + "uglifyjs": "bin/uglifyjs" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/html-loader/node_modules/uglify-js/node_modules/commander": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz", + "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==", + "dev": true + }, + "node_modules/html-minifier": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz", + "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==", + "dev": true, + "dependencies": { + "camel-case": "^3.0.0", + "clean-css": "^4.2.1", + "commander": "^2.19.0", + "he": "^1.2.0", + "param-case": "^2.1.1", + "relateurl": "^0.2.7", + "uglify-js": "^3.5.1" + }, + "bin": { + "html-minifier": "cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/html-minifier/node_modules/clean-css": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", + "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "dev": true, + "dependencies": { + "source-map": "~0.6.0" + }, + "engines": { + "node": ">= 4.0" + } + }, + "node_modules/html-minifier/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "node_modules/html-minifier/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/http-cache-semantics": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", @@ -2937,6 +3231,15 @@ "node": ">= 0.4" } }, + "node_modules/interpret": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -3342,6 +3645,38 @@ "node": ">=4" } }, + "node_modules/loader-utils": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", + "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", + "dev": true, + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^1.0.1" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/loader-utils/node_modules/json5": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "dev": true, + "dependencies": { + "minimist": "^1.2.0" + }, + "bin": { + "json5": "lib/cli.js" + } + }, + "node_modules/lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", + "dev": true + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -3378,6 +3713,12 @@ "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", "dev": true }, + "node_modules/lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + }, "node_modules/lowercase-keys": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", @@ -3509,12 +3850,30 @@ "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", "dev": true }, + "node_modules/no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "dev": true, + "dependencies": { + "lower-case": "^1.1.1" + } + }, "node_modules/node-releases": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==", "dev": true }, + "node_modules/node-watch": { + "version": "0.6.4", + "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.6.4.tgz", + "integrity": "sha512-cI6CHzivIFESe8djiK3Wh90CtWQBxLwMem8x8S+2GSvCvFgoMuOKVlfJtQ/2v3Afg3wOnHl/+tXotEs8z5vOrg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/nodemon": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.14.tgz", @@ -3650,6 +4009,15 @@ "node": ">= 4" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz", @@ -3719,6 +4087,15 @@ "node": ">=8" } }, + "node_modules/param-case": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz", + "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=", + "dev": true, + "dependencies": { + "no-case": "^2.2.0" + } + }, "node_modules/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", @@ -3937,6 +4314,15 @@ "node": ">= 0.8" } }, + "node_modules/private": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", + "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/pstree.remy": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz", @@ -4071,6 +4457,33 @@ "node": ">=8.10.0" } }, + "node_modules/recast": { + "version": "0.11.23", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz", + "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=", + "dev": true, + "dependencies": { + "ast-types": "0.9.6", + "esprima": "~3.1.0", + "private": "~0.1.5", + "source-map": "~0.5.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/rechoir": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", + "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=", + "dev": true, + "dependencies": { + "resolve": "^1.1.6" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -4172,6 +4585,15 @@ "jsesc": "bin/jsesc" } }, + "node_modules/relateurl": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", + "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -4329,6 +4751,23 @@ "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==", "dev": true }, + "node_modules/shelljs": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz", + "integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==", + "dev": true, + "dependencies": { + "glob": "^7.0.0", + "interpret": "^1.0.0", + "rechoir": "^0.6.2" + }, + "bin": { + "shjs": "bin/shjs" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -4507,6 +4946,12 @@ "node": ">=4" } }, + "node_modules/through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", + "dev": true + }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -4570,6 +5015,15 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typical": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz", + "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/uglify-js": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.2.tgz", @@ -4777,6 +5231,12 @@ "node": ">=8" } }, + "node_modules/upper-case": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", + "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", + "dev": true + }, "node_modules/url-parse-lax": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", @@ -6141,12 +6601,24 @@ "picomatch": "^2.0.4" } }, + "array-back": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz", + "integrity": "sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==", + "dev": true + }, "array-union": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz", "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==", "dev": true }, + "ast-types": { + "version": "0.9.6", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz", + "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=", + "dev": true + }, "autoprefixer": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz", @@ -6206,6 +6678,12 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "big.js": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", + "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", + "dev": true + }, "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -6353,6 +6831,16 @@ "get-intrinsic": "^1.0.2" } }, + "camel-case": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", + "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=", + "dev": true, + "requires": { + "no-case": "^2.2.0", + "upper-case": "^1.1.1" + } + }, "camelcase": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz", @@ -6475,6 +6963,18 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "dev": true }, + "command-line-args": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.0.tgz", + "integrity": "sha512-4zqtU1hYsSJzcJBOcNZIbW5Fbk9BkjCp1pZVhQKoRaWL5J7N4XphDLwo8aWwdQpTugxwu+jf9u2ZhkXiqp5Z6A==", + "dev": true, + "requires": { + "array-back": "^3.1.0", + "find-replace": "^3.0.0", + "lodash.camelcase": "^4.3.0", + "typical": "^4.0.0" + } + }, "commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -6647,6 +7147,12 @@ "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "dev": true }, + "emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", + "dev": true + }, "end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -6704,6 +7210,16 @@ "is-symbol": "^1.0.2" } }, + "es6-templates": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz", + "integrity": "sha1-XLmsn7He1usSOTQrgdeSu7QHjuQ=", + "dev": true, + "requires": { + "recast": "~0.11.12", + "through": "~2.3.6" + } + }, "escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -6722,6 +7238,12 @@ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", "dev": true }, + "esprima": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", + "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=", + "dev": true + }, "esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -6741,6 +7263,12 @@ "micromatch": "^4.0.4" } }, + "fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -6759,6 +7287,15 @@ "to-regex-range": "^5.0.1" } }, + "find-replace": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/find-replace/-/find-replace-3.0.0.tgz", + "integrity": "sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==", + "dev": true, + "requires": { + "array-back": "^3.0.1" + } + }, "fraction.js": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz", @@ -6976,12 +7513,169 @@ "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==", "dev": true }, + "he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true + }, "hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, + "html-includes": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/html-includes/-/html-includes-4.4.1.tgz", + "integrity": "sha512-R2WkgcQ7pHemrR7O5L+r43dEraL5m7lubh7BToYr4qit0o1VpZBpqhzuzVSGc+Kj16f2tzu7Q+ilAoXdPcjrtA==", + "dev": true, + "requires": { + "command-line-args": "^5.1.1", + "fs-extra": "^7.0.0", + "glob": "^7.1.2", + "html-loader": "^0.5.5", + "html-minifier": "^4.0.0", + "loader-utils": "^1.1.0", + "node-watch": "^0.6.2", + "shelljs": "^0.8.3" + }, + "dependencies": { + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6" + } + }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true + } + } + }, + "html-loader": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/html-loader/-/html-loader-0.5.5.tgz", + "integrity": "sha512-7hIW7YinOYUpo//kSYcPB6dCKoceKLmOwjEMmhIobHuWGDVl0Nwe4l68mdG/Ru0wcUxQjVMEoZpkalZ/SE7zog==", + "dev": true, + "requires": { + "es6-templates": "^0.2.3", + "fastparse": "^1.1.1", + "html-minifier": "^3.5.8", + "loader-utils": "^1.1.0", + "object-assign": "^4.1.1" + }, + "dependencies": { + "clean-css": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", + "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "dev": true, + "requires": { + "source-map": "~0.6.0" + } + }, + "commander": { + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", + "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", + "dev": true + }, + "html-minifier": { + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz", + "integrity": "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==", + "dev": true, + "requires": { + "camel-case": "3.0.x", + "clean-css": "4.2.x", + "commander": "2.17.x", + "he": "1.2.x", + "param-case": "2.1.x", + "relateurl": "0.2.x", + "uglify-js": "3.4.x" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "uglify-js": { + "version": "3.4.10", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", + "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==", + "dev": true, + "requires": { + "commander": "~2.19.0", + "source-map": "~0.6.1" + }, + "dependencies": { + "commander": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz", + "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==", + "dev": true + } + } + } + } + }, + "html-minifier": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz", + "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==", + "dev": true, + "requires": { + "camel-case": "^3.0.0", + "clean-css": "^4.2.1", + "commander": "^2.19.0", + "he": "^1.2.0", + "param-case": "^2.1.1", + "relateurl": "^0.2.7", + "uglify-js": "^3.5.1" + }, + "dependencies": { + "clean-css": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", + "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "dev": true, + "requires": { + "source-map": "~0.6.0" + } + }, + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "http-cache-semantics": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", @@ -7063,6 +7757,12 @@ "side-channel": "^1.0.4" } }, + "interpret": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "dev": true + }, "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -7348,6 +8048,34 @@ } } }, + "loader-utils": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", + "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^1.0.1" + }, + "dependencies": { + "json5": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "dev": true, + "requires": { + "minimist": "^1.2.0" + } + } + } + }, + "lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", + "dev": true + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -7384,6 +8112,12 @@ "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", "dev": true }, + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + }, "lowercase-keys": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", @@ -7484,12 +8218,27 @@ "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", "dev": true }, + "no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "dev": true, + "requires": { + "lower-case": "^1.1.1" + } + }, "node-releases": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==", "dev": true }, + "node-watch": { + "version": "0.6.4", + "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.6.4.tgz", + "integrity": "sha512-cI6CHzivIFESe8djiK3Wh90CtWQBxLwMem8x8S+2GSvCvFgoMuOKVlfJtQ/2v3Afg3wOnHl/+tXotEs8z5vOrg==", + "dev": true + }, "nodemon": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.14.tgz", @@ -7589,6 +8338,12 @@ "string.prototype.padend": "^3.0.0" } }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + }, "object-inspect": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz", @@ -7640,6 +8395,15 @@ "semver": "^6.2.0" } }, + "param-case": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz", + "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=", + "dev": true, + "requires": { + "no-case": "^2.2.0" + } + }, "parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", @@ -7780,6 +8544,12 @@ "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", "dev": true }, + "private": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", + "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==", + "dev": true + }, "pstree.remy": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz", @@ -7885,6 +8655,27 @@ "picomatch": "^2.2.1" } }, + "recast": { + "version": "0.11.23", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz", + "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=", + "dev": true, + "requires": { + "ast-types": "0.9.6", + "esprima": "~3.1.0", + "private": "~0.1.5", + "source-map": "~0.5.0" + } + }, + "rechoir": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", + "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=", + "dev": true, + "requires": { + "resolve": "^1.1.6" + } + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -7970,6 +8761,12 @@ } } }, + "relateurl": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", + "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", + "dev": true + }, "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -8076,6 +8873,17 @@ "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==", "dev": true }, + "shelljs": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz", + "integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==", + "dev": true, + "requires": { + "glob": "^7.0.0", + "interpret": "^1.0.0", + "rechoir": "^0.6.2" + } + }, "side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -8215,6 +9023,12 @@ "has-flag": "^3.0.0" } }, + "through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -8260,6 +9074,12 @@ "is-typedarray": "^1.0.0" } }, + "typical": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz", + "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==", + "dev": true + }, "uglify-js": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.2.tgz", @@ -8409,6 +9229,12 @@ } } }, + "upper-case": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", + "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", + "dev": true + }, "url-parse-lax": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", diff --git a/package.json b/package.json index ff939461..60b41076 100644 --- a/package.json +++ b/package.json @@ -27,25 +27,43 @@ "url": "https://github.com/picocss/pico/issues" }, "scripts": { - "watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs", - "build": "npm-run-all build:css build:js info:postbuild", - "build:css": "npm-run-all info:build:css css:compile css:compile:docs css:prefix info:css:minify css:minify", - "build:js": "npm-run-all info:build:js js:bundle js:babel info:js:minify js:minify", - "css:compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/", + "watch": "npm-run-all --parallel watch:pico watch:docs:scss watch:docs:html watch:docs:js", + "build": "npm-run-all --parallel build:pico build:docs --silent", + "build:docs": "npm-run-all --parallel build:docs:css build:docs:js build:docs:html --silent", + "build:docs:css": "npm-run-all css:compile:docs css:prefix:docs css:minify:docs --silent", + "build:docs:html": "npm-run-all htmlincludes:docs --silent", + "build:docs:js": "npm-run-all js:bundle:docs:commons js:bundle:docs:customization js:bundle:docs:grid js:babel:docs:commons js:babel:docs:customization js:babel:docs:grid js:minify:docs:commons js:minify:docs:customization js:minify:docs:grid --silent", + "build:pico": "npm-run-all css:compile:pico css:prefix:pico css:minify:pico --silent", "css:compile:docs": "sass --style expanded --source-map --embed-sources --no-error-css docs/scss/:docs/css/", - "css:prefix": "postcss --config postcss.config.js --replace css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css", - "css:minify": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --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 --silent", - "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", - "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'", - "info:build:css": "echo '\\033[32m[picocss/pico] Compile .css files\\033[0m'", - "info:css:minify": "echo '\\033[32m[picocss/pico] Minify .css files\\033[0m'", - "info:build:js": "echo '\\033[32m[picocss/pico] Bundle .js files\\033[0m'", - "info:js:minify": "echo '\\033[32m[picocss/pico] Minify .js file\\033[0m'", - "info:postbuild": "echo '\\033[32m[picocss/pico] Done\\033[0m\n'" + "css:compile:pico": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/", + "css:minify:docs": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min docs/css/*.css !docs/css/*.min.css", + "css:minify:pico": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css", + "css:prefix:docs": "postcss --config postcss.config.js --replace docs/css/*.css !docs/css/*.min.css", + "css:prefix:pico": "postcss --config postcss.config.js --replace css/*.css css/*/*.css !css/*.min.css", + "htmlincludes:docs": "html-includes --src docs/src --dest docs --minify minifyJS=true --quiet", + "js:babel:docs:grid": "babel docs/js/grid.min.js --out-dir docs/js/ --presets=@babel/preset-env", + "js:babel:docs:commons": "babel docs/js/commons.min.js --out-dir docs/js/ --presets=@babel/preset-env", + "js:babel:docs:customization": "babel docs/js/customization.min.js --out-dir docs/js/ --presets=@babel/preset-env", + "js:bundle:docs:grid": "rollup docs/js/grid.js --file docs/js/grid.min.js --format iife --silent", + "js:bundle:docs:commons": "rollup docs/js/commons.js --file docs/js/commons.min.js --format iife --silent", + "js:bundle:docs:customization": "rollup docs/js/customization.js --file docs/js/customization.min.js --format iife --silent", + "js:minify:docs:grid": "uglifyjs docs/js/grid.min.js --compress --mangle --output docs/js/grid.min.js", + "js:minify:docs:commons": "uglifyjs docs/js/commons.min.js --compress --mangle --output docs/js/commons.min.js", + "js:minify:docs:customization": "uglifyjs docs/js/customization.min.js --compress --mangle --output docs/js/customization.min.js", + "postbuild:docs:css": "echo '\\x1b[94m[@picocss/pico] Documentation .css build done\\033[0m'", + "postbuild:docs:html": "echo '\\x1b[94m[@picocss/pico] Documentation pages done\\033[0m'", + "postbuild:docs:js": "echo '\\x1b[94m[@picocss/pico] Documentation .js build done\\033[0m'", + "postbuild:pico": "echo '\\x1b[94m[@picocss/pico] Pico library build done\\033[0m'", + "prebuild:docs:css": "echo '\\033[32m[@picocss/pico] Compile documentation .css file\\033[0m'", + "prebuild:docs:html": "echo '\\033[32m[@picocss/pico] Create documentation pages\\033[0m'", + "prebuild:docs:js": "echo '\\033[32m[@picocss/pico] Bundle and minify documentation .js files\\033[0m'", + "precss:compile:pico": "echo '\\033[32m[@picocss/pico] Compile Pico .css files\\033[0m'", + "precss:minify:docs": "echo '\\033[32m[@picocss/pico] Minify documentation .css file\\033[0m'", + "precss:minify:pico": "echo '\\033[32m[@picocss/pico] Minify Pico .css files\\033[0m'", + "watch:docs:html": "nodemon --watch docs/src/ --ext html --exec 'npm run build:docs:html'", + "watch:docs:js": "nodemon --watch docs/js/ --ext js --ignore *.min.js --exec 'npm run build:docs:js'", + "watch:docs:scss": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:docs:css'", + "watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'" }, "devDependencies": { "@babel/cli": "^7.16.0", @@ -53,8 +71,9 @@ "@babel/preset-env": "^7.16.0", "autoprefixer": "^10.4.0", "clean-css-cli": "^5.4.2", + "html-includes": "^4.4.1", "nodemon": "^2.0.14", - "npm-run-all": "^4.1.5", + "npm-run-all": "^4.1.5", "postcss": "^8.3.11", "postcss-cli": "^9.0.1", "rollup": "^2.58.3", From 5c2c0c48b351fd210314d3404b5f51bc4c176a00 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Mon, 1 Nov 2021 11:45:25 +0700 Subject: [PATCH 2/7] More silent scripts --- package.json | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 60b41076..d10e0705 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "url": "https://github.com/picocss/pico/issues" }, "scripts": { - "watch": "npm-run-all --parallel watch:pico watch:docs:scss watch:docs:html watch:docs:js", + "watch": "npm-run-all --parallel watch:pico watch:docs:scss watch:docs:html watch:docs:js --silent ", "build": "npm-run-all --parallel build:pico build:docs --silent", "build:docs": "npm-run-all --parallel build:docs:css build:docs:js build:docs:html --silent", "build:docs:css": "npm-run-all css:compile:docs css:prefix:docs css:minify:docs --silent", @@ -41,25 +41,25 @@ "css:prefix:docs": "postcss --config postcss.config.js --replace docs/css/*.css !docs/css/*.min.css", "css:prefix:pico": "postcss --config postcss.config.js --replace css/*.css css/*/*.css !css/*.min.css", "htmlincludes:docs": "html-includes --src docs/src --dest docs --minify minifyJS=true --quiet", - "js:babel:docs:grid": "babel docs/js/grid.min.js --out-dir docs/js/ --presets=@babel/preset-env", - "js:babel:docs:commons": "babel docs/js/commons.min.js --out-dir docs/js/ --presets=@babel/preset-env", - "js:babel:docs:customization": "babel docs/js/customization.min.js --out-dir docs/js/ --presets=@babel/preset-env", + "js:babel:docs:grid": "babel docs/js/grid.min.js --out-dir docs/js/ --presets=@babel/preset-env --quiet", + "js:babel:docs:commons": "babel docs/js/commons.min.js --out-dir docs/js/ --presets=@babel/preset-env --quiet", + "js:babel:docs:customization": "babel docs/js/customization.min.js --out-dir docs/js/ --presets=@babel/preset-env --quiet", "js:bundle:docs:grid": "rollup docs/js/grid.js --file docs/js/grid.min.js --format iife --silent", "js:bundle:docs:commons": "rollup docs/js/commons.js --file docs/js/commons.min.js --format iife --silent", "js:bundle:docs:customization": "rollup docs/js/customization.js --file docs/js/customization.min.js --format iife --silent", "js:minify:docs:grid": "uglifyjs docs/js/grid.min.js --compress --mangle --output docs/js/grid.min.js", "js:minify:docs:commons": "uglifyjs docs/js/commons.min.js --compress --mangle --output docs/js/commons.min.js", "js:minify:docs:customization": "uglifyjs docs/js/customization.min.js --compress --mangle --output docs/js/customization.min.js", - "postbuild:docs:css": "echo '\\x1b[94m[@picocss/pico] Documentation .css build done\\033[0m'", - "postbuild:docs:html": "echo '\\x1b[94m[@picocss/pico] Documentation pages done\\033[0m'", - "postbuild:docs:js": "echo '\\x1b[94m[@picocss/pico] Documentation .js build done\\033[0m'", - "postbuild:pico": "echo '\\x1b[94m[@picocss/pico] Pico library build done\\033[0m'", - "prebuild:docs:css": "echo '\\033[32m[@picocss/pico] Compile documentation .css file\\033[0m'", - "prebuild:docs:html": "echo '\\033[32m[@picocss/pico] Create documentation pages\\033[0m'", - "prebuild:docs:js": "echo '\\033[32m[@picocss/pico] Bundle and minify documentation .js files\\033[0m'", - "precss:compile:pico": "echo '\\033[32m[@picocss/pico] Compile Pico .css files\\033[0m'", - "precss:minify:docs": "echo '\\033[32m[@picocss/pico] Minify documentation .css file\\033[0m'", - "precss:minify:pico": "echo '\\033[32m[@picocss/pico] Minify Pico .css files\\033[0m'", + "postbuild:docs:css": "echo '\\033[32m[@picocss/pico] Documentation .css build done\\033[0m'", + "postbuild:docs:html": "echo '\\033[32m[@picocss/pico] Documentation pages done\\033[0m'", + "postbuild:docs:js": "echo '\\033[32m[@picocss/pico] Documentation .js build done\\033[0m'", + "postbuild:pico": "echo '\\033[32m[@picocss/pico] Pico library build done\\033[0m'", + "prebuild:docs:css": "echo '[@picocss/pico] Compile documentation .css file'", + "prebuild:docs:html": "echo '[@picocss/pico] Create documentation pages'", + "prebuild:docs:js": "echo '[@picocss/pico] Bundle and minify documentation .js files'", + "precss:compile:pico": "echo '[@picocss/pico] Compile Pico .css files'", + "precss:minify:docs": "echo '[@picocss/pico] Minify documentation .css file'", + "precss:minify:pico": "echo '[@picocss/pico] Minify Pico .css files'", "watch:docs:html": "nodemon --watch docs/src/ --ext html --exec 'npm run build:docs:html'", "watch:docs:js": "nodemon --watch docs/js/ --ext js --ignore *.min.js --exec 'npm run build:docs:js'", "watch:docs:scss": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:docs:css'", From 7e02e9f95928a6228e09a8e9169319abb6678f35 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Mon, 1 Nov 2021 11:45:29 +0700 Subject: [PATCH 3/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ce76f848..0ce59cab 100644 --- a/README.md +++ b/README.md @@ -168,7 +168,7 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e - [`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. -- 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`. +- 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`. ## Copyright and license From c71144455bfc968536a012c667e3eb218ea813a8 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Tue, 2 Nov 2021 00:20:55 +0700 Subject: [PATCH 4/7] Docs: Sidebar styles --- docs/accordions.html | 2 +- docs/buttons.html | 2 +- docs/cards.html | 2 +- docs/classless.html | 2 +- docs/containers.html | 2 +- docs/css/pico.docs.css | 83 ++++++++++++++++-------------- docs/css/pico.docs.css.map | 2 +- docs/css/pico.docs.min.css | 2 +- docs/css/pico.docs.min.css.map | 2 +- docs/customization.html | 2 +- docs/forms.html | 2 +- docs/grid.html | 2 +- docs/index.html | 2 +- docs/js/commons.js | 6 ++- docs/js/commons.min.js | 2 +- docs/js/src/color-picker.js | 1 + docs/js/src/grid.js | 1 + docs/js/src/theme-switcher.js | 1 + docs/js/src/toggle-navigation.js | 53 +++++++++++++++++++ docs/loading.html | 2 +- docs/navs.html | 2 +- docs/progress.html | 2 +- docs/rtl.html | 2 +- docs/scroller.html | 2 +- docs/scss/content/_typography.scss | 4 ++ docs/scss/layout/_aside.scss | 68 ++++++++++++++++++++---- docs/scss/layout/_main.scss | 38 +------------- docs/src/_sidebar.html | 29 +++++++---- docs/src/accordions.html | 4 +- docs/src/buttons.html | 4 +- docs/src/cards.html | 4 +- docs/src/classless.html | 4 +- docs/src/containers.html | 6 +-- docs/src/customization.html | 4 +- docs/src/forms.html | 4 +- docs/src/grid.html | 4 +- docs/src/index.html | 4 +- docs/src/loading.html | 4 +- docs/src/navs.html | 4 +- docs/src/progress.html | 4 +- docs/src/rtl.html | 4 +- docs/src/scroller.html | 4 +- docs/src/tables.html | 4 +- docs/src/themes.html | 4 +- docs/src/tooltips.html | 4 +- docs/src/typography.html | 4 +- docs/src/we-love-classes.html | 2 +- docs/tables.html | 2 +- docs/themes.html | 2 +- docs/tooltips.html | 2 +- docs/typography.html | 2 +- docs/we-love-classes.html | 2 +- 52 files changed, 247 insertions(+), 159 deletions(-) create mode 100644 docs/js/src/toggle-navigation.js diff --git a/docs/accordions.html b/docs/accordions.html index 72a15368..4a5345be 100644 --- a/docs/accordions.html +++ b/docs/accordions.html @@ -1,4 +1,4 @@ -Accordions • Pico.css

Accordions

Toggle sections of content in pure HTML, without JavaScript.

Collapsible elements 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

Collapsible elements 2
  • Vestibulum id elit quis massa interdum sodales.
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
  • Quisque sed eros non eros ornare elementum.
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.