From bd5a00c61b355c857b5c99323592ca432dea5d0a Mon Sep 17 00:00:00 2001 From: Mitchell Riedstra Date: Fri, 5 Jan 2024 23:18:49 -0500 Subject: wip --- htmx/static/pico-1.5.11/docs/accordions.html | 30 ++ htmx/static/pico-1.5.11/docs/buttons.html | 6 + htmx/static/pico-1.5.11/docs/cards.html | 5 + htmx/static/pico-1.5.11/docs/classless.html | 29 ++ htmx/static/pico-1.5.11/docs/containers.html | 3 + htmx/static/pico-1.5.11/docs/css/pico.docs.css | 508 +++++++++++++++++++++ htmx/static/pico-1.5.11/docs/css/pico.docs.css.map | 1 + htmx/static/pico-1.5.11/docs/css/pico.docs.min.css | 4 + .../pico-1.5.11/docs/css/pico.docs.min.css.map | 1 + htmx/static/pico-1.5.11/docs/customization.html | 59 +++ htmx/static/pico-1.5.11/docs/dropdowns.html | 157 +++++++ htmx/static/pico-1.5.11/docs/forms.html | 108 +++++ htmx/static/pico-1.5.11/docs/grid.html | 6 + htmx/static/pico-1.5.11/docs/index.html | 14 + htmx/static/pico-1.5.11/docs/js/commons.js | 21 + htmx/static/pico-1.5.11/docs/js/commons.min.js | 1 + htmx/static/pico-1.5.11/docs/js/customization.js | 14 + .../pico-1.5.11/docs/js/customization.min.js | 43 ++ htmx/static/pico-1.5.11/docs/js/grid.js | 100 ++++ htmx/static/pico-1.5.11/docs/js/grid.min.js | 15 + htmx/static/pico-1.5.11/docs/js/modal.js | 95 ++++ htmx/static/pico-1.5.11/docs/js/modal.min.js | 1 + .../static/pico-1.5.11/docs/js/src/color-picker.js | 173 +++++++ .../docs/js/src/material-design-colors.js | 303 ++++++++++++ .../pico-1.5.11/docs/js/src/theme-switcher.js | 95 ++++ .../pico-1.5.11/docs/js/src/toggle-navigation.js | 42 ++ htmx/static/pico-1.5.11/docs/loading.html | 2 + htmx/static/pico-1.5.11/docs/modal.html | 87 ++++ htmx/static/pico-1.5.11/docs/navs.html | 34 ++ htmx/static/pico-1.5.11/docs/progress.html | 1 + htmx/static/pico-1.5.11/docs/rtl.html | 4 + htmx/static/pico-1.5.11/docs/scroller.html | 5 + .../pico-1.5.11/docs/scss/components/_modal.scss | 34 ++ .../pico-1.5.11/docs/scss/components/_nav.scss | 66 +++ .../docs/scss/components/_theme-switcher.scss | 71 +++ .../pico-1.5.11/docs/scss/content/_code.scss | 69 +++ .../pico-1.5.11/docs/scss/content/_typography.scss | 19 + .../pico-1.5.11/docs/scss/layout/_aside.scss | 131 ++++++ .../pico-1.5.11/docs/scss/layout/_document.scss | 7 + .../docs/scss/layout/_documentation.scss | 137 ++++++ .../static/pico-1.5.11/docs/scss/layout/_main.scss | 49 ++ htmx/static/pico-1.5.11/docs/scss/pico.docs.scss | 24 + .../static/pico-1.5.11/docs/scss/themes/_docs.scss | 25 + .../pico-1.5.11/docs/scss/themes/docs/_dark.scss | 9 + .../pico-1.5.11/docs/scss/themes/docs/_icons.scss | 9 + .../pico-1.5.11/docs/scss/themes/docs/_light.scss | 11 + htmx/static/pico-1.5.11/docs/src/_footer.html | 4 + htmx/static/pico-1.5.11/docs/src/_head.html | 8 + htmx/static/pico-1.5.11/docs/src/_nav.html | 23 + htmx/static/pico-1.5.11/docs/src/_sidebar.html | 74 +++ htmx/static/pico-1.5.11/docs/src/accordions.html | 98 ++++ htmx/static/pico-1.5.11/docs/src/buttons.html | 77 ++++ htmx/static/pico-1.5.11/docs/src/cards.html | 48 ++ htmx/static/pico-1.5.11/docs/src/classless.html | 84 ++++ htmx/static/pico-1.5.11/docs/src/containers.html | 74 +++ .../static/pico-1.5.11/docs/src/customization.html | 131 ++++++ htmx/static/pico-1.5.11/docs/src/dropdowns.html | 379 +++++++++++++++ htmx/static/pico-1.5.11/docs/src/forms.html | 272 +++++++++++ htmx/static/pico-1.5.11/docs/src/grid.html | 67 +++ htmx/static/pico-1.5.11/docs/src/index.html | 59 +++ htmx/static/pico-1.5.11/docs/src/loading.html | 51 +++ htmx/static/pico-1.5.11/docs/src/modal.html | 206 +++++++++ htmx/static/pico-1.5.11/docs/src/navs.html | 157 +++++++ htmx/static/pico-1.5.11/docs/src/progress.html | 48 ++ htmx/static/pico-1.5.11/docs/src/rtl.html | 39 ++ htmx/static/pico-1.5.11/docs/src/scroller.html | 95 ++++ htmx/static/pico-1.5.11/docs/src/tables.html | 177 +++++++ htmx/static/pico-1.5.11/docs/src/themes.html | 66 +++ htmx/static/pico-1.5.11/docs/src/tooltips.html | 65 +++ htmx/static/pico-1.5.11/docs/src/typography.html | 208 +++++++++ .../pico-1.5.11/docs/src/we-love-classes.html | 38 ++ htmx/static/pico-1.5.11/docs/tables.html | 50 ++ htmx/static/pico-1.5.11/docs/themes.html | 5 + htmx/static/pico-1.5.11/docs/tooltips.html | 8 + htmx/static/pico-1.5.11/docs/typography.html | 17 + htmx/static/pico-1.5.11/docs/we-love-classes.html | 1 + 76 files changed, 5257 insertions(+) create mode 100644 htmx/static/pico-1.5.11/docs/accordions.html create mode 100644 htmx/static/pico-1.5.11/docs/buttons.html create mode 100644 htmx/static/pico-1.5.11/docs/cards.html create mode 100644 htmx/static/pico-1.5.11/docs/classless.html create mode 100644 htmx/static/pico-1.5.11/docs/containers.html create mode 100644 htmx/static/pico-1.5.11/docs/css/pico.docs.css create mode 100644 htmx/static/pico-1.5.11/docs/css/pico.docs.css.map create mode 100644 htmx/static/pico-1.5.11/docs/css/pico.docs.min.css create mode 100644 htmx/static/pico-1.5.11/docs/css/pico.docs.min.css.map create mode 100644 htmx/static/pico-1.5.11/docs/customization.html create mode 100644 htmx/static/pico-1.5.11/docs/dropdowns.html create mode 100644 htmx/static/pico-1.5.11/docs/forms.html create mode 100644 htmx/static/pico-1.5.11/docs/grid.html create mode 100644 htmx/static/pico-1.5.11/docs/index.html create mode 100644 htmx/static/pico-1.5.11/docs/js/commons.js create mode 100644 htmx/static/pico-1.5.11/docs/js/commons.min.js create mode 100644 htmx/static/pico-1.5.11/docs/js/customization.js create mode 100644 htmx/static/pico-1.5.11/docs/js/customization.min.js create mode 100644 htmx/static/pico-1.5.11/docs/js/grid.js create mode 100644 htmx/static/pico-1.5.11/docs/js/grid.min.js create mode 100644 htmx/static/pico-1.5.11/docs/js/modal.js create mode 100644 htmx/static/pico-1.5.11/docs/js/modal.min.js create mode 100644 htmx/static/pico-1.5.11/docs/js/src/color-picker.js create mode 100644 htmx/static/pico-1.5.11/docs/js/src/material-design-colors.js create mode 100644 htmx/static/pico-1.5.11/docs/js/src/theme-switcher.js create mode 100644 htmx/static/pico-1.5.11/docs/js/src/toggle-navigation.js create mode 100644 htmx/static/pico-1.5.11/docs/loading.html create mode 100644 htmx/static/pico-1.5.11/docs/modal.html create mode 100644 htmx/static/pico-1.5.11/docs/navs.html create mode 100644 htmx/static/pico-1.5.11/docs/progress.html create mode 100644 htmx/static/pico-1.5.11/docs/rtl.html create mode 100644 htmx/static/pico-1.5.11/docs/scroller.html create mode 100644 htmx/static/pico-1.5.11/docs/scss/components/_modal.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/components/_nav.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/components/_theme-switcher.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/content/_code.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/content/_typography.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/layout/_aside.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/layout/_document.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/layout/_documentation.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/layout/_main.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/pico.docs.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/themes/_docs.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/themes/docs/_dark.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/themes/docs/_icons.scss create mode 100644 htmx/static/pico-1.5.11/docs/scss/themes/docs/_light.scss create mode 100644 htmx/static/pico-1.5.11/docs/src/_footer.html create mode 100644 htmx/static/pico-1.5.11/docs/src/_head.html create mode 100644 htmx/static/pico-1.5.11/docs/src/_nav.html create mode 100644 htmx/static/pico-1.5.11/docs/src/_sidebar.html create mode 100644 htmx/static/pico-1.5.11/docs/src/accordions.html create mode 100644 htmx/static/pico-1.5.11/docs/src/buttons.html create mode 100644 htmx/static/pico-1.5.11/docs/src/cards.html create mode 100644 htmx/static/pico-1.5.11/docs/src/classless.html create mode 100644 htmx/static/pico-1.5.11/docs/src/containers.html create mode 100644 htmx/static/pico-1.5.11/docs/src/customization.html create mode 100644 htmx/static/pico-1.5.11/docs/src/dropdowns.html create mode 100644 htmx/static/pico-1.5.11/docs/src/forms.html create mode 100644 htmx/static/pico-1.5.11/docs/src/grid.html create mode 100644 htmx/static/pico-1.5.11/docs/src/index.html create mode 100644 htmx/static/pico-1.5.11/docs/src/loading.html create mode 100644 htmx/static/pico-1.5.11/docs/src/modal.html create mode 100644 htmx/static/pico-1.5.11/docs/src/navs.html create mode 100644 htmx/static/pico-1.5.11/docs/src/progress.html create mode 100644 htmx/static/pico-1.5.11/docs/src/rtl.html create mode 100644 htmx/static/pico-1.5.11/docs/src/scroller.html create mode 100644 htmx/static/pico-1.5.11/docs/src/tables.html create mode 100644 htmx/static/pico-1.5.11/docs/src/themes.html create mode 100644 htmx/static/pico-1.5.11/docs/src/tooltips.html create mode 100644 htmx/static/pico-1.5.11/docs/src/typography.html create mode 100644 htmx/static/pico-1.5.11/docs/src/we-love-classes.html create mode 100644 htmx/static/pico-1.5.11/docs/tables.html create mode 100644 htmx/static/pico-1.5.11/docs/themes.html create mode 100644 htmx/static/pico-1.5.11/docs/tooltips.html create mode 100644 htmx/static/pico-1.5.11/docs/typography.html create mode 100644 htmx/static/pico-1.5.11/docs/we-love-classes.html (limited to 'htmx/static/pico-1.5.11/docs') diff --git a/htmx/static/pico-1.5.11/docs/accordions.html b/htmx/static/pico-1.5.11/docs/accordions.html new file mode 100644 index 0000000..720edd1 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/accordions.html @@ -0,0 +1,30 @@ +Accordions • Pico CSS

Accordions

Toggle sections of content in pure HTML, without JavaScript.

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

Accordion 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>Accordion 1</summary>
+  <p>…</p>
+</details>
+
+<details open>
+  <summary>Accordion 2</summary>
+  <ul>
+    <li>…</li>
+    <li>…</li>
+  </ul>
+</details>

role="button" can be used to turn <summary> into a button.

Accordion 1

Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.

Accordion 2

Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.

Accordion 3

Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.

<!-- Primary -->
+<details>
+  <summary role="button">Accordion 1</summary>
+  <p>…</p>
+</details>
+
+<!-- Secondary -->
+<details>
+  <summary role="button" class="secondary">Accordion 2</summary>
+  <p>…</p>
+</details>
+
+<!-- Contrast -->
+<details>
+  <summary role="button" class="contrast">Accordion 3</summary>
+  <p>…</p>
+</details>
+
+

Code licensed MIT

\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/buttons.html b/htmx/static/pico-1.5.11/docs/buttons.html new file mode 100644 index 0000000..475ce83 --- /dev/null +++ b/htmx/static/pico-1.5.11/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 role="button" on an inline element if you need an inline button.

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

Buttons come with .secondary and .contrast styles.

ℹ️ These classes are not available in the class-less version.

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/htmx/static/pico-1.5.11/docs/cards.html b/htmx/static/pico-1.5.11/docs/cards.html new file mode 100644 index 0000000..fef1434 --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/classless.html b/htmx/static/pico-1.5.11/docs/classless.html new file mode 100644 index 0000000..b70c07c --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/classless.html @@ -0,0 +1,29 @@ +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.

// Containers
+body > header,
+body > main,
+body > footer {
+  …
+}
+

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 jsDelivr CDN:

// Centered viewport
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css">
+
// Fluid viewport
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css">
+

If you need to customize the default parent (<body>) for <header>, <main>, and <footer>, you can recompile Pico by defining another CSS selector.

Useful for React, Gatsby or Next.js.

/* Custom Class-less version for React */
+
+// Set the root element
+$semantic-root-element: "#root";
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: true;
+
+// Enable .classes
+$enable-classes: false;
+
+// Import Pico
+@import "@picocss/pico/scss/pico";

The code above will compile Pico with the containers defined like this:

// Containers
+#root > header,
+#root > main,
+#root > footer {
+  …
+}
+

Code licensed MIT

\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/containers.html b/htmx/static/pico-1.5.11/docs/containers.html new file mode 100644 index 0000000..31a13dc --- /dev/null +++ b/htmx/static/pico-1.5.11/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 children of <body> provide a responsive vertical padding

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

Code licensed MIT

\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/css/pico.docs.css b/htmx/static/pico-1.5.11/docs/css/pico.docs.css new file mode 100644 index 0000000..598575a --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/css/pico.docs.css @@ -0,0 +1,508 @@ +/*! + * Pico: Customs styles for Docs + */ +/** + * Theme: Additions for docs + */ +:root { + --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' 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='rgb(255, 255, 255)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); +} + +[data-theme=light], +:root:not([data-theme=dark]) { + --invalid-color: #c62828; + --valid-color: #388e3c; + --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); +} + +/** + * Docs: Document + */ +html { + scroll-behavior: smooth; +} + +/** + * Docs: Main (Grid) + */ +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) * 3); + display: grid; + grid-template-columns: 200px auto; + } +} +@media (min-width: 1200px) { + body > main { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} +body > main > aside, +body > main div[role=document] { + min-width: 0; +} + +div[role=document] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after { + display: inline-block; + width: 1rem; + height: 1rem; + background-image: var(--icon-external); + background-position: top center; + background-size: 0.66rem auto; + background-repeat: no-repeat; + content: ""; +} + +svg { + height: 1rem; +} + +/** + * Docs: Aside + */ +main > aside nav { + width: 100%; + padding-bottom: var(--block-spacing-vertical); +} +@media (min-width: 992px) { + main > aside nav { + position: fixed; + width: 200px; + max-height: calc(100vh - 5.5rem); + overflow-x: hidden; + overflow-y: auto; + } +} +main > aside nav a#toggle-docs-navigation { + display: block; + margin: 0; + margin-bottom: var(--spacing); + padding: 0; + padding-bottom: var(--spacing); + border-bottom: var(--border-width) solid var(--accordion-border-color); +} +main > aside nav a#toggle-docs-navigation svg { + margin-right: calc(var(--spacing) * 0.5); + vertical-align: -3px; +} +@media (min-width: 992px) { + main > aside nav a#toggle-docs-navigation { + display: none; + } +} +main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse { + display: none; +} +main > aside nav.closed-on-mobile details { + display: none; +} +@media (min-width: 992px) { + main > aside nav.closed-on-mobile details { + display: block; + } + main > aside nav.closed-on-mobile > a#toggle-docs-navigation { + display: none; + } +} +main > aside nav.open a#toggle-docs-navigation svg.expand { + display: none; +} +main > aside details { + padding-bottom: 0; +} +main > aside details summary { + padding-bottom: 0.5rem; +} +main > aside li, +main > aside summary { + padding-top: 0; + padding-bottom: 0; + font-size: 16px; +} +main > aside ul { + padding-left: 0.25rem; +} +main > aside li a { + --nav-link-spacing-vertical: 0.25rem; + --nav-link-spacing-horizontal: 0.75rem; +} +main > aside li a svg { + vertical-align: middle; +} +main > aside a.secondary:focus { + background-color: transparent; + color: var(--primary-hover); +} +main > aside a[aria-current], +main > aside a[aria-current]:hover { + color: var(--primary); +} +main > aside details { + border-bottom: none; +} +main > aside details summary { + color: var(--h1-color); + font-weight: 300; + font-size: 14px; + text-transform: uppercase; +} +main > aside details summary::after { + display: none; +} +main > aside details[open] > summary { + margin-bottom: 0; +} +main > aside details[open] > summary:not([role=button], :focus) { + color: var(--h1-color); +} + +/** + * Docs: Documentation + */ +#themes button.theme-switcher:first-of-type { + --font-weight: bold; +} +#themes button.theme-switcher i { + font-style: normal; +} + +#customization figure { + display: grid; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(9, 1fr); + margin-bottom: 0; + overflow: hidden; +} +@media (min-width: 576px) { + #customization figure { + grid-template-rows: 1fr; + grid-template-columns: repeat(18, 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-size: 0.66rem auto; + background-repeat: no-repeat; + box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25); +} +#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked { + 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: 0.5rem; + } +} +#grid button svg { + stroke: var(--secondary); + margin-right: 0.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; +} + +#buttons a[role=button] { + margin-right: calc(var(--spacing) * 0.5); +} + +#forms div.grid { + grid-row-gap: 0; +} + +#modal button { + --font-weight: bold; +} + +/** + * Docs: Typography + */ +h1 { + margin-top: -0.25em; +} + +section > hgroup { + margin-bottom: calc(var(--typography-spacing-vertical) * 2); +} + +[role=document] section > h1, +[role=document] section > h2, +[role=document] section > h3 { + line-height: 1; +} + +/** + * Docs: Code + */ +article > footer.code { + background: var(--article-code-background-color); +} + +article pre, +article pre code { + margin-bottom: 0; + background: transparent; +} + +section > pre { + margin: var(--block-spacing-vertical) 0; + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background: var(--article-code-background-color); + 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: 0.375rem 0.75rem; + border-radius: 0; + color: var(--primary-inverse); + font-size: 14px; + line-height: 1; +} +@media (min-width: 992px) { + [data-theme=invalid]:before, + [data-theme=valid]:before { + top: var(--spacing); + right: var(--spacing); + } +} +[data-theme=invalid] code, +[data-theme=valid] code { + padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal); +} + +[data-theme=invalid]:before { + background: var(--invalid-color); + content: "Not so great"; +} + +[data-theme=valid]:before { + background: var(--valid-color); + content: "Great"; +} + +/** + * Docs: Modal + */ +dialog.example { + display: block; + z-index: inherit; + position: relative; + top: inherit; + right: inherit; + bottom: inherit; + left: inherit; + align-items: inherit; + justify-content: inherit; + width: inherit; + min-width: inherit; + height: inherit; + min-height: inherit; + padding: 0; + background-color: inherit; +} +dialog.example article { + max-width: inherit; +} +dialog.example:not([open]), dialog.example[open=false] { + display: none; +} + +.dialog-is-open body > button { + filter: blur(0.125rem); +} + +/** + * Docs: Navs + */ +body > nav { + --nav-link-spacing-vertical: 1rem; + -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: 0px 1px 0 var(--nav-border-color); +} +body > nav.container-fluid { + padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px)); +} +body > nav a { + border-radius: 0; +} +body > nav svg { + vertical-align: text-bottom; +} +body > nav ul:first-of-type { + margin-left: calc(var(--spacing) * -1); +} +body > nav ul:first-of-type li { + padding: 0; +} +body > nav ul:first-of-type li:first-of-type a { + display: block; + margin: 0; + padding: 0; + background: var(--h1-color); + color: var(--nav-logo-color); +} +body > nav ul:first-of-type li:first-of-type a svg { + display: block; + width: 3.5rem; + height: 3.5rem; +} +body > nav ul:first-of-type li:nth-of-type(2) { + display: none; + margin-left: calc(var(--spacing) * 1.5); + color: var(--h1-color); +} +@media (min-width: 992px) { + body > nav ul:first-of-type li:nth-of-type(2) { + display: inline; + } +} + +/** + * Docs: Theme switcher + */ +.switcher { + position: fixed; + right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px)); + bottom: var(--spacing); + width: auto; + margin-bottom: 0; + padding: 0.75rem; + border-radius: 2rem; + box-shadow: var(--card-box-shadow); + line-height: 1; + text-align: right; +} +.switcher::after { + display: inline-block; + width: 1rem; + height: 1rem; + border: 0.15rem solid currentColor; + border-radius: 50%; + background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%); + content: ""; + vertical-align: bottom; + transition: transform var(--transition); +} +.switcher i { + display: inline-block; + max-width: 0; + padding: 0; + overflow: hidden; + font-style: normal; + font-size: 0.875rem; + white-space: nowrap; +} +.switcher:hover, .switcher:focus { + max-width: 100%; + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); +} +.switcher:hover::after { + transform: rotate(180deg); +} +.switcher:hover i { + max-width: 100%; + padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4); + transition: max-width var(--transition), padding var(--transition); +} +.switcher:focus { + box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus); +} +@media (min-width: 576px) { + .switcher { + right: calc(var(--spacing) + var(--scrollbar-width, 0px)); + } +} + +/*# sourceMappingURL=pico.docs.css.map */ \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/css/pico.docs.css.map b/htmx/static/pico-1.5.11/docs/css/pico.docs.css.map new file mode 100644 index 0000000..b1162d6 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/css/pico.docs.css.map @@ -0,0 +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/_modal.scss","../scss/components/_nav.scss","../scss/components/_theme-switcher.scss"],"names":[],"mappings":"AAAA;;EAAA;ACAA;;EAAA;ACIA;EACE,8bAAA;EACA,sSAAA;EACA,4SAAA;ACGF;;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;EAEE,qBAAA;EACA,WAAA;EACA,YAAA;EACA,sCAAA;EACA,+BAAA;EACA,6BAAA;EACA,4BAAA;EACA,WAAA;AJuCF;;AInCA;EACE,YAAA;AJsCF;;AKrFA;;EAAA;AAME;EACE,WAAA;EACA,6CAAA;ALqFJ;AKnFI;EAJF;IAKI,eAAA;IACA,YAAA;IACA,gCAAA;IACA,kBAAA;IACA,gBAAA;ELsFJ;AACF;AKpFI;EACE,cAAA;EACA,SAAA;EACA,6BAAA;EACA,UAAA;EACA,8BAAA;EACA,sEAAA;ALsFN;AKpFM;EACE,wCAAA;EACA,oBAAA;ALsFR;AKnFM;EAbF;IAcI,aAAA;ELsFN;AACF;AKhFQ;EACE,aAAA;ALkFV;AK9EM;EACE,aAAA;ALgFR;AK7EM;EACE;IACE,cAAA;EL+ER;EK5EM;IACE,aAAA;EL8ER;AACF;AKxEQ;EACE,aAAA;AL0EV;AKpEE;EACE,iBAAA;ALsEJ;AKpEI;EACE,sBAAA;ALsEN;AKlEE;;EAEE,cAAA;EACA,iBAAA;EACA,eAAA;ALoEJ;AKjEE;EACE,qBAAA;ALmEJ;AKhEE;EACE,oCAAA;EACA,sCAAA;ALkEJ;AKhEI;EACE,sBAAA;ALkEN;AK9DE;EACE,6BAAA;EACA,2BAAA;ALgEJ;AK7DE;;EAEE,qBAAA;AL+DJ;AK5DE;EACE,mBAAA;AL8DJ;AK5DI;EACE,sBAAA;EACA,gBAAA;EACA,eAAA;EACA,yBAAA;AL8DN;AK5DM;EACE,aAAA;AL8DR;AKzDM;EACE,gBAAA;AL2DR;AKzDQ;EACE,sBAAA;AL2DV;;AMxLA;;EAAA;AAOI;EACE,mBAAA;ANuLN;AMpLI;EACE,kBAAA;ANsLN;;AM/KE;EACE,aAAA;EACA,kCAAA;EACA,qCAAA;EACA,gBAAA;EACA,gBAAA;ANkLJ;AMhLI;EAPF;IAQI,uBAAA;IACA,sCAAA;IACA,6CAAA;IACA,4CAAA;ENmLJ;AACF;AMjLI;EACE,aAAA;EACA,0BAAA;EACA,yBAAA;ANmLN;AMhLI;EACE,gBAAA;EACA,UAAA;EACA,iBAAA;EACA,YAAA;EACA,gBAAA;ANkLN;AMhLM;EACE,gBAAA;ANkLR;AM/KM;EACE,mCAAA;EACA,2BAAA;EACA,6BAAA;EACA,4BAAA;EACA,gDAAA;ANiLR;AM5KQ;EACE,wCAAA;AN8KV;AMxKE;EACE,mCAAA;AN0KJ;AMvKE;EACE,4BAAA;ANyKJ;;AMpKA;EACE,6BAAA;ANuKF;AMrKE;EACE,cAAA;EACA,WAAA;EACA,6BAAA;ANuKJ;AMrKI;EALF;IAMI,qBAAA;IACA,WAAA;IACA,oBAAA;ENwKJ;AACF;AMtKI;EACE,wBAAA;EACA,oBAAA;EACA,8BAAA;EACA,mBAAA;EACA,wBAAA;ANwKN;AMnKI;EACE,mCAAA;EACA,mCAAA;EACA,wCAAA;EACA,gBAAA;EACA,kBAAA;ANqKN;AMjKE;EACE,wDAAA;ANmKJ;AMjKI;EACE,sBAAA;ANmKN;;AM5JE;EACE,wCAAA;AN+JJ;;AM1JA;EACE,eAAA;AN6JF;;AMxJE;EACE,mBAAA;AN2JJ;;AOjSA;;EAAA;AAIA;EACE,mBAAA;APmSF;;AOhSA;EACE,2DAAA;APmSF;;AO/RE;;;EAGE,cAAA;APkSJ;;AQlTA;;EAAA;AAKA;EACE,gDAAA;ARmTF;;AQjTA;;EAEE,gBAAA;EACA,uBAAA;ARoTF;;AQ/SA;EACE,uCAAA;EACA,kFAAA;EAEA,gDAAA;EACA,kCAAA;ARiTF;;AQ7SA;;EAEE,kBAAA;EACA,2BAAA;ARgTF;AQ7SE;;EACE,cAAA;EACA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,yBAAA;EACA,gBAAA;EACA,6BAAA;EACA,eAAA;EACA,cAAA;ARgTJ;AQ9SI;EAXF;;IAYI,mBAAA;IACA,qBAAA;ERkTJ;AACF;AQ9SE;;EACE,mGAAA;ARiTJ;;AQ1SE;EACE,gCAAA;EACA,uBAAA;AR6SJ;;AQxSE;EACE,8BAAA;EACA,gBAAA;AR2SJ;;AS7WA;;EAAA;AAIA;EACE,cAAA;EACA,gBAAA;EACA,kBAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,aAAA;EACA,oBAAA;EACA,wBAAA;EACA,cAAA;EACA,kBAAA;EACA,eAAA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AT+WF;AS7WE;EACE,kBAAA;AT+WJ;AS5WE;EAEE,aAAA;AT6WJ;;ASzWA;EACE,sBAAA;AT4WF;;AU5YA;;EAAA;AAIA;EACE,iCAAA;EAEA,kDAAA;EACA,WAAA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,OAAA;EACA,0CAAA;EACA,6CAAA;EACA,6CAAA;AV6YF;AU3YE;EACE,iEAAA;AV6YJ;AU1YE;EACE,gBAAA;AV4YJ;AUzYE;EACE,2BAAA;AV2YJ;AUvYE;EACE,sCAAA;AVyYJ;AUvYI;EACE,UAAA;AVyYN;AUrYQ;EACE,cAAA;EACA,SAAA;EACA,UAAA;EACA,2BAAA;EACA,4BAAA;AVuYV;AUrYU;EACE,cAAA;EACA,aAAA;EACA,cAAA;AVuYZ;AUjYM;EACE,aAAA;EACA,uCAAA;EACA,sBAAA;AVmYR;AUjYQ;EALF;IAMI,eAAA;EVoYR;AACF;;AWjcA;;EAAA;AAIA;EACE,eAAA;EACA,6DAAA;EACA,sBAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,kCAAA;EACA,cAAA;EACA,iBAAA;AXmcF;AWjcE;EACE,qBAAA;EACA,WAAA;EACA,YAAA;EACA,kCAAA;EACA,kBAAA;EACA,yFAAA;EAMA,WAAA;EACA,sBAAA;EACA,uCAAA;AX8bJ;AW3bE;EACE,qBAAA;EACA,YAAA;EACA,UAAA;EACA,gBAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;AX6bJ;AW1bE;EAEE,eAAA;EACA,qIAAA;AX2bJ;AWrbI;EACE,yBAAA;AXubN;AWpbI;EACE,eAAA;EACA,8DAAA;EACA,kEAAA;AXsbN;AWlbE;EACE,uEAAA;AXobJ;AWjbE;EA/DF;IAgEI,yDAAA;EXobF;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/modal\";\n@import \"components/nav\";\n@import \"components/theme-switcher\";","/**\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","@import \"../../../../scss/functions\";\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='#{to-rgb($grey-500)}' 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='#{to-rgb($white)}' 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($black, 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='rgb(115, 130, 140)' 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='rgb(255, 255, 255)' 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) * 3);\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 a[href*=\"//\"]:not([href*=\"https://picocss.com\"], [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-size: 0.66rem auto;\n background-repeat: no-repeat;\n content: \"\";\n}\n\nsvg {\n height: 1rem;\n}\n\n/**\n * Docs: Aside\n */\nmain > aside nav {\n width: 100%;\n padding-bottom: var(--block-spacing-vertical);\n}\n@media (min-width: 992px) {\n main > aside nav {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n overflow-x: hidden;\n overflow-y: auto;\n }\n}\nmain > aside nav a#toggle-docs-navigation {\n display: block;\n margin: 0;\n margin-bottom: var(--spacing);\n padding: 0;\n padding-bottom: var(--spacing);\n border-bottom: var(--border-width) solid var(--accordion-border-color);\n}\nmain > aside nav a#toggle-docs-navigation svg {\n margin-right: calc(var(--spacing) * 0.5);\n vertical-align: -3px;\n}\n@media (min-width: 992px) {\n main > aside nav a#toggle-docs-navigation {\n display: none;\n }\n}\nmain > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {\n display: none;\n}\nmain > aside nav.closed-on-mobile details {\n display: none;\n}\n@media (min-width: 992px) {\n main > aside nav.closed-on-mobile details {\n display: block;\n }\n main > aside nav.closed-on-mobile > a#toggle-docs-navigation {\n display: none;\n }\n}\nmain > aside nav.open a#toggle-docs-navigation svg.expand {\n display: none;\n}\nmain > aside details {\n padding-bottom: 0;\n}\nmain > aside details summary {\n padding-bottom: 0.5rem;\n}\nmain > aside li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside ul {\n padding-left: 0.25rem;\n}\nmain > aside li a {\n --nav-link-spacing-vertical: 0.25rem;\n --nav-link-spacing-horizontal: 0.75rem;\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[aria-current],\nmain > aside a[aria-current]:hover {\n color: var(--primary);\n}\nmain > aside details {\n border-bottom: none;\n}\nmain > aside details summary {\n color: var(--h1-color);\n font-weight: 300;\n font-size: 14px;\n text-transform: uppercase;\n}\nmain > aside details summary::after {\n display: none;\n}\nmain > aside details[open] > summary {\n margin-bottom: 0;\n}\nmain > aside details[open] > summary:not([role=button], :focus) {\n color: var(--h1-color);\n}\n\n/**\n * Docs: Documentation\n */\n#themes button.theme-switcher:first-of-type {\n --font-weight: bold;\n}\n#themes button.theme-switcher i {\n font-style: normal;\n}\n\n#customization figure {\n display: grid;\n grid-template-rows: repeat(2, 1fr);\n grid-template-columns: repeat(9, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n}\n@media (min-width: 576px) {\n #customization figure {\n grid-template-rows: 1fr;\n grid-template-columns: repeat(18, 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-size: 0.66rem auto;\n background-repeat: no-repeat;\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#buttons a[role=button] {\n margin-right: calc(var(--spacing) * 0.5);\n}\n\n#forms div.grid {\n grid-row-gap: 0;\n}\n\n#modal button {\n --font-weight: bold;\n}\n\n/**\n * Docs: Typography\n */\nh1 {\n margin-top: -0.25em;\n}\n\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\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 margin-bottom: 0;\n background: transparent;\n}\n\nsection > pre {\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);\n background: var(--article-code-background-color);\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: Modal\n */\ndialog.example {\n display: block;\n z-index: inherit;\n position: relative;\n top: inherit;\n right: inherit;\n bottom: inherit;\n left: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: inherit;\n min-width: inherit;\n height: inherit;\n min-height: inherit;\n padding: 0;\n background-color: inherit;\n}\ndialog.example article {\n max-width: inherit;\n}\ndialog.example:not([open]), dialog.example[open=false] {\n display: none;\n}\n\n.dialog-is-open body > button {\n filter: blur(0.125rem);\n}\n\n/**\n * Docs: Navs\n */\nbody > nav {\n --nav-link-spacing-vertical: 1rem;\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.container-fluid {\n padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));\n}\nbody > nav a {\n border-radius: 0;\n}\nbody > nav svg {\n vertical-align: text-bottom;\n}\nbody > nav ul:first-of-type {\n margin-left: calc(var(--spacing) * -1);\n}\nbody > nav ul:first-of-type li {\n padding: 0;\n}\nbody > nav ul:first-of-type li:first-of-type a {\n display: block;\n margin: 0;\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 display: block;\n width: 3.5rem;\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: calc(var(--spacing) * 1.5);\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 + var(--scrollbar-width, 0px));\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 content: \"\";\n vertical-align: bottom;\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-style: normal;\n font-size: 0.875rem;\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: calc(var(--spacing) + var(--scrollbar-width, 0px));\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) * 3);\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// External links\ndiv[role=\"document\"] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"], [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-size: 0.66rem auto;\n background-repeat: no-repeat;\n content: \"\";\n}\n\n// Embedded SVG\nsvg {\n height: 1rem;\n}\n","/**\n * Docs: Aside\n */\n\nmain > aside {\n\n nav {\n width: 100%;\n padding-bottom: var(--block-spacing-vertical);\n \n @media (min-width: map-get($breakpoints, \"lg\")) {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n a#toggle-docs-navigation {\n display: block;\n margin: 0;\n margin-bottom: var(--spacing);\n padding: 0;\n padding-bottom: var(--spacing);\n border-bottom: var(--border-width) solid var(--accordion-border-color);\n\n svg {\n margin-right: calc(var(--spacing) * 0.5);\n vertical-align: -3px;\n }\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: none;\n }\n }\n\n &.closed-on-mobile {\n\n a#toggle-docs-navigation {\n svg.collapse {\n display: none;\n }\n }\n\n details {\n display: none;\n } \n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n details {\n display: block;\n }\n\n > a#toggle-docs-navigation {\n display: none;\n }\n }\n }\n\n &.open {\n a#toggle-docs-navigation {\n svg.expand {\n display: none;\n }\n }\n }\n }\n\n details {\n padding-bottom: 0;\n\n summary {\n padding-bottom: 0.5rem;\n }\n }\n\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n ul {\n padding-left: 0.25rem;\n }\n\n li a {\n --nav-link-spacing-vertical: 0.25rem;\n --nav-link-spacing-horizontal: 0.75rem;\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[aria-current],\n a[aria-current]:hover {\n color: var(--primary);\n }\n\n details {\n border-bottom: none;\n\n summary {\n color: var(--h1-color);\n font-weight: 300;\n font-size: 14px;\n text-transform: uppercase;\n\n &::after {\n display: none;\n }\n }\n\n &[open] {\n > summary {\n margin-bottom: 0;\n\n &:not([role=button], :focus) {\n color: var(--h1-color);\n }\n }\n }\n }\n}\n","/**\n * Docs: Documentation\n */\n\n// Docs: Themes\n#themes {\n button.theme-switcher {\n &:first-of-type {\n --font-weight: bold;\n }\n \n i {\n font-style: normal;\n }\n }\n}\n\n// Docs: Customization\n#customization {\n figure {\n display: grid;\n grid-template-rows: repeat(2, 1fr);\n grid-template-columns: repeat(9, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n grid-template-rows: 1fr;\n grid-template-columns: repeat(18, 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-size: 0.66rem auto;\n background-repeat: no-repeat;\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: Buttons\n#buttons {\n a[role=\"button\"] {\n margin-right: calc(var(--spacing) * 0.5);\n }\n}\n\n// Docs: Forms\n#forms div.grid {\n grid-row-gap: 0;\n}\n\n// Docs: Modal\n#modal {\n button {\n --font-weight: bold;\n }\n}\n","/**\n * Docs: Typography\n */\n\nh1 {\n margin-top: -0.25em;\n}\n\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\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 margin-bottom: 0;\n background: transparent;\n}\n\n// Code block outside article\n// Horizontally aligned with
content\nsection > pre {\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5)\n var(--block-spacing-horizontal);\n background: var(--article-code-background-color);\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: Modal\n */\n\ndialog.example {\n display: block;\n z-index: inherit;\n position: relative;\n top: inherit;\n right: inherit;\n bottom: inherit;\n left: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: inherit;\n min-width: inherit;\n height: inherit;\n min-height: inherit;\n padding: 0;\n background-color:inherit;\n\n article {\n max-width: inherit;\n }\n\n &:not([open]),\n &[open=false] {\n display: none;\n }\n}\n\n.dialog-is-open body > button {\n filter: blur(0.125rem);\n}","/**\n * Docs: Navs\n */\n\nbody > nav {\n --nav-link-spacing-vertical: 1rem;\n\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 &.container-fluid {\n padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));\n }\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 {\n margin-left: calc(var(--spacing) * -1);\n\n li {\n padding: 0;\n \n // Brand\n &:first-of-type {\n a {\n display: block;\n margin: 0;\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n \n svg {\n display: block;\n width: 3.5rem;\n height: 3.5rem;\n }\n }\n }\n \n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: calc(var(--spacing) * 1.5);\n color: var(--h1-color);\n \n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));\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 content: \"\";\n vertical-align: bottom;\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-style: normal;\n font-size: 0.875rem;\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: calc(var(--spacing) + var(--scrollbar-width, 0px));\n }\n}\n"]} \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/css/pico.docs.min.css b/htmx/static/pico-1.5.11/docs/css/pico.docs.min.css new file mode 100644 index 0000000..2a8a5c5 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/css/pico.docs.min.css @@ -0,0 +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='rgb(115, 130, 140)' 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='rgb(255, 255, 255)' 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) * 3);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 a[href*="//"]:not([href*="https://picocss.com"],[role])::after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-size:.66rem auto;background-repeat:no-repeat;content:""}svg{height:1rem}main>aside nav{width:100%;padding-bottom:var(--block-spacing-vertical)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);overflow-x:hidden;overflow-y:auto}}main>aside nav a#toggle-docs-navigation{display:block;margin:0;margin-bottom:var(--spacing);padding:0;padding-bottom:var(--spacing);border-bottom:var(--border-width) solid var(--accordion-border-color)}main>aside nav a#toggle-docs-navigation svg{margin-right:calc(var(--spacing) * .5);vertical-align:-3px}@media (min-width:992px){main>aside nav a#toggle-docs-navigation{display:none}}main>aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse{display:none}main>aside nav.closed-on-mobile details{display:none}@media (min-width:992px){main>aside nav.closed-on-mobile details{display:block}main>aside nav.closed-on-mobile>a#toggle-docs-navigation{display:none}}main>aside nav.open a#toggle-docs-navigation svg.expand{display:none}main>aside details{padding-bottom:0}main>aside details summary{padding-bottom:.5rem}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside ul{padding-left:.25rem}main>aside li a{--nav-link-spacing-vertical:0.25rem;--nav-link-spacing-horizontal:0.75rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a[aria-current],main>aside a[aria-current]:hover{color:var(--primary)}main>aside details{border-bottom:none}main>aside details summary{color:var(--h1-color);font-weight:300;font-size:14px;text-transform:uppercase}main>aside details summary::after{display:none}main>aside details[open]>summary{margin-bottom:0}main>aside details[open]>summary:not([role=button],:focus){color:var(--h1-color)}#themes button.theme-switcher:first-of-type{--font-weight:bold}#themes button.theme-switcher i{font-style:normal}#customization figure{display:grid;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(9,1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-rows:1fr;grid-template-columns:repeat(18,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-size:.66rem auto;background-repeat:no-repeat;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}#buttons a[role=button]{margin-right:calc(var(--spacing) * .5)}#forms div.grid{grid-row-gap:0}#modal button{--font-weight:bold}h1{margin-top:-.25em}section>hgroup{margin-bottom:calc(var(--typography-spacing-vertical) * 2)}[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{margin-bottom:0;background:0 0}section>pre{margin:var(--block-spacing-vertical) 0;padding:calc(var(--block-spacing-vertical)/ 1.5) var(--block-spacing-horizontal);background:var(--article-code-background-color);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"}dialog.example{display:block;z-index:inherit;position:relative;top:inherit;right:inherit;bottom:inherit;left:inherit;align-items:inherit;justify-content:inherit;width:inherit;min-width:inherit;height:inherit;min-height:inherit;padding:0;background-color:inherit}dialog.example article{max-width:inherit}dialog.example:not([open]),dialog.example[open=false]{display:none}.dialog-is-open body>button{filter:blur(.125rem)}body>nav{--nav-link-spacing-vertical:1rem;-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.container-fluid{padding-right:calc(var(--spacing) + var(--scrollbar-width,0px))}body>nav a{border-radius:0}body>nav svg{vertical-align:text-bottom}body>nav ul:first-of-type{margin-left:calc(var(--spacing) * -1)}body>nav ul:first-of-type li{padding:0}body>nav ul:first-of-type li:first-of-type a{display:block;margin:0;padding:0;background:var(--h1-color);color:var(--nav-logo-color)}body>nav ul:first-of-type li:first-of-type a svg{display:block;width:3.5rem;height:3.5rem}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:calc(var(--spacing) * 1.5);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 + var(--scrollbar-width,0px));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%);content:"";vertical-align:bottom;transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-style:normal;font-size:.875rem;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:calc(var(--spacing) + var(--scrollbar-width,0px))}} +/*# sourceMappingURL=pico.docs.min.css.map */ \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/css/pico.docs.min.css.map b/htmx/static/pico-1.5.11/docs/css/pico.docs.min.css.map new file mode 100644 index 0000000..dfac7b2 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/css/pico.docs.min.css.map @@ -0,0 +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/_modal.scss","docs/scss/components/_nav.scss","docs/scss/components/_theme-switcher.scss"],"names":[],"mappings":"AAAA;;ACIA,MACE,gBAAA,8aACA,aAAA,yRACA,kBAAA,0RCMF,6BCXA,mBAEE,gBAAA,QACA,cAAA,QACA,uBAAA,yBACA,mBAAA,yBACA,iBAAA,KACA,gCAAA,QCKF,mDACE,8BCbA,gBAAA,uBACA,cAAA,uBACA,uBAAA,sBACA,mBAAA,yBACA,iBAAA,QACA,gCAAA,8BDeF,kBCpBE,gBAAA,uBACA,cAAA,uBACA,uBAAA,sBACA,mBAAA,yBACA,iBAAA,QACA,gCAAA,6BCHF,KACE,gBAAA,OCGF,UACE,YAAA,6CAGE,yBAJJ,UAKM,2BAAA,4BACA,gBAAA,0CACA,QAAA,KACA,sBAAA,MAAA,MAKF,0BAbJ,UAcM,2BAAA,0BL8CN,6BK1CE,gBAEE,UAAA,EAKJ,0FAEE,QAAA,aACA,MAAA,KACA,OAAA,KACA,iBAAA,qBACA,oBAAA,IAAA,OACA,gBAAA,OAAA,KACA,kBAAA,UACA,QAAA,GAIF,IACE,OAAA,KCzCA,eACE,MAAA,KACA,eAAA,8BAEA,yBAJF,eAKI,SAAA,MACA,MAAA,MACA,WAAA,qBACA,WAAA,OACA,WAAA,MAGF,wCACE,QAAA,MACA,OAAA,EACA,cAAA,eACA,QAAA,EACA,eAAA,eACA,cAAA,oBAAA,MAAA,8BAEA,4CACE,aAAA,0BACA,eAAA,KAGF,yBAbF,wCAcI,QAAA,MAOA,sEACE,QAAA,KAIJ,wCACE,QAAA,KAGF,yBACE,wCACE,QAAA,MAGF,yDACE,QAAA,MAOF,wDACE,QAAA,KAMR,mBACE,eAAA,EAEA,2BACE,eAAA,MAIJ,cNoEF,mBMlEI,YAAA,EACA,eAAA,EACA,UAAA,KAGF,cACE,aAAA,OAGF,gBACE,4BAAA,QACA,8BAAA,QAEA,oBACE,eAAA,OAIJ,6BACE,iBAAA,YACA,MAAA,qBAGF,2BN+DF,iCM7DI,MAAA,eAGF,mBACE,cAAA,KAEA,2BACE,MAAA,gBACA,YAAA,IACA,UAAA,KACA,eAAA,UAEA,kCACE,QAAA,KAKF,iCACE,cAAA,EAEA,2DACE,MAAA,gBCtHN,4CACE,cAAA,KAGF,gCACE,WAAA,OAOJ,sBACE,QAAA,KACA,mBAAA,cACA,sBAAA,cACA,cAAA,EACA,SAAA,OAEA,yBAPF,sBAQI,mBAAA,IACA,sBAAA,eACA,wBAAA,qBACA,uBAAA,sBAGF,8BACE,WAAA,EACA,wBAAA,EACA,uBAAA,EAGF,6BACE,cAAA,EACA,QAAA,EACA,YAAA,KACA,OAAA,KACA,cAAA,EAEA,mCACE,WAAA,KAGF,oCACE,iBAAA,kBACA,oBAAA,OACA,gBAAA,OAAA,KACA,kBAAA,UACA,WAAA,MAAA,EAAA,EAAA,KAAA,EAAA,gBAKA,sDAAA,qDAAA,uDACE,iBAAA,uBAMR,kBACE,WAAA,MAAA,kBAGF,yCACE,aAAA,eAKJ,MACE,wBAAA,KAEA,aACE,QAAA,MACA,MAAA,KACA,cAAA,eAEA,yBALF,aAMI,QAAA,aACA,MAAA,KACA,aAAA,OAGF,iBACE,OAAA,iBACA,aAAA,MACA,OAAA,IAAA,MAAA,aACA,cAAA,KACA,WAAA,aAKF,cACE,QAAA,wBAAA,EACA,cAAA,qBACA,WAAA,6BACA,UAAA,MACA,WAAA,OAIJ,cACE,WAAA,6CAEA,kBACE,eAAA,OAOJ,wBACE,aAAA,0BAKJ,gBACE,aAAA,EAKA,cACE,cAAA,KClIJ,GACE,WAAA,OAGF,eACE,cAAA,6CAIA,2BRkSF,2BACA,2BQhSI,YAAA,ECXJ,oBACE,WAAA,qCAEF,YToTA,iBSlTE,cAAA,EACA,WAAA,IAKF,YACE,OAAA,8BAAA,EACA,QAAA,yCAAA,gCAEA,WAAA,qCACA,WAAA,uBAIF,qBTgTA,mBS9SE,SAAA,SACA,cAAA,YAGA,4BT+SF,0BS9SI,QAAA,MACA,SAAA,SACA,IAAA,EACA,MAAA,EACA,QAAA,QAAA,OACA,cAAA,EACA,MAAA,uBACA,UAAA,KACA,YAAA,EAEA,yBAXF,4BT4TA,0BShTI,IAAA,eACA,MAAA,gBAKJ,0BTgTF,wBS/SI,QAAA,yDAAA,gCAOF,4BACE,WAAA,qBACA,QAAA,eAKF,0BACE,WAAA,mBACA,QAAA,QC9DJ,eACE,QAAA,MACA,QAAA,QACA,SAAA,SACA,IAAA,QACA,MAAA,QACA,OAAA,QACA,KAAA,QACA,YAAA,QACA,gBAAA,QACA,MAAA,QACA,UAAA,QACA,OAAA,QACA,WAAA,QACA,QAAA,EACA,iBAAA,QAEA,uBACE,UAAA,QAGF,2BAAA,2BAEE,QAAA,KAIJ,4BACE,OAAA,cC5BF,SACE,4BAAA,KAEA,wBAAA,eAAA,WACA,QAAA,GACA,SAAA,MACA,IAAA,EACA,MAAA,EACA,KAAA,EACA,gBAAA,eAAA,WACA,iBAAA,4BACA,WAAA,EAAA,IAAA,EAAA,wBAEA,yBACE,cAAA,kDAGF,WACE,cAAA,EAGF,aACE,eAAA,YAIF,0BACE,YAAA,0BAEA,6BACE,QAAA,EAIE,6CACE,QAAA,MACA,OAAA,EACA,QAAA,EACA,WAAA,gBACA,MAAA,sBAEA,iDACE,QAAA,MACA,MAAA,OACA,OAAA,OAMN,4CACE,QAAA,KACA,YAAA,2BACA,MAAA,gBAEA,yBALF,4CAMI,QAAA,QCxDV,UACE,SAAA,MACA,MAAA,qDACA,OAAA,eACA,MAAA,KACA,cAAA,EACA,QAAA,OACA,cAAA,KACA,WAAA,uBACA,YAAA,EACA,WAAA,MAEA,iBACE,QAAA,aACA,MAAA,KACA,OAAA,KACA,OAAA,OAAA,MAAA,aACA,cAAA,IACA,WAAA,0EAMA,QAAA,GACA,eAAA,OACA,WAAA,UAAA,kBAGF,YACE,QAAA,aACA,UAAA,EACA,QAAA,EACA,SAAA,OACA,WAAA,OACA,UAAA,QACA,YAAA,OAGF,gBAAA,gBAEE,UAAA,KACA,WAAA,iBAAA,iBAAA,CAAA,aAAA,iBAAA,CAAA,MAAA,iBAAA,CAAA,WAAA,kBAMA,uBACE,UAAA,eAGF,kBACE,UAAA,KACA,QAAA,EAAA,wBAAA,EAAA,wBACA,WAAA,UAAA,iBAAA,CAAA,QAAA,kBAIJ,gBACE,WAAA,sBAAA,CAAA,EAAA,EAAA,EAAA,MAAA,uBAGF,yBA/DF,UAgEI,MAAA","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/modal\";\n@import \"components/nav\";\n@import \"components/theme-switcher\";","@import \"../../../../scss/functions\";\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='#{to-rgb($grey-500)}' 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='#{to-rgb($white)}' 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($black, 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='rgb(115, 130, 140)' 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='rgb(255, 255, 255)' 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) * 3);\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 a[href*=\"//\"]:not([href*=\"https://picocss.com\"], [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-size: 0.66rem auto;\n background-repeat: no-repeat;\n content: \"\";\n}\n\nsvg {\n height: 1rem;\n}\n\n/**\n * Docs: Aside\n */\nmain > aside nav {\n width: 100%;\n padding-bottom: var(--block-spacing-vertical);\n}\n@media (min-width: 992px) {\n main > aside nav {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n overflow-x: hidden;\n overflow-y: auto;\n }\n}\nmain > aside nav a#toggle-docs-navigation {\n display: block;\n margin: 0;\n margin-bottom: var(--spacing);\n padding: 0;\n padding-bottom: var(--spacing);\n border-bottom: var(--border-width) solid var(--accordion-border-color);\n}\nmain > aside nav a#toggle-docs-navigation svg {\n margin-right: calc(var(--spacing) * 0.5);\n vertical-align: -3px;\n}\n@media (min-width: 992px) {\n main > aside nav a#toggle-docs-navigation {\n display: none;\n }\n}\nmain > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {\n display: none;\n}\nmain > aside nav.closed-on-mobile details {\n display: none;\n}\n@media (min-width: 992px) {\n main > aside nav.closed-on-mobile details {\n display: block;\n }\n main > aside nav.closed-on-mobile > a#toggle-docs-navigation {\n display: none;\n }\n}\nmain > aside nav.open a#toggle-docs-navigation svg.expand {\n display: none;\n}\nmain > aside details {\n padding-bottom: 0;\n}\nmain > aside details summary {\n padding-bottom: 0.5rem;\n}\nmain > aside li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside ul {\n padding-left: 0.25rem;\n}\nmain > aside li a {\n --nav-link-spacing-vertical: 0.25rem;\n --nav-link-spacing-horizontal: 0.75rem;\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[aria-current],\nmain > aside a[aria-current]:hover {\n color: var(--primary);\n}\nmain > aside details {\n border-bottom: none;\n}\nmain > aside details summary {\n color: var(--h1-color);\n font-weight: 300;\n font-size: 14px;\n text-transform: uppercase;\n}\nmain > aside details summary::after {\n display: none;\n}\nmain > aside details[open] > summary {\n margin-bottom: 0;\n}\nmain > aside details[open] > summary:not([role=button], :focus) {\n color: var(--h1-color);\n}\n\n/**\n * Docs: Documentation\n */\n#themes button.theme-switcher:first-of-type {\n --font-weight: bold;\n}\n#themes button.theme-switcher i {\n font-style: normal;\n}\n\n#customization figure {\n display: grid;\n grid-template-rows: repeat(2, 1fr);\n grid-template-columns: repeat(9, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n}\n@media (min-width: 576px) {\n #customization figure {\n grid-template-rows: 1fr;\n grid-template-columns: repeat(18, 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-size: 0.66rem auto;\n background-repeat: no-repeat;\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#buttons a[role=button] {\n margin-right: calc(var(--spacing) * 0.5);\n}\n\n#forms div.grid {\n grid-row-gap: 0;\n}\n\n#modal button {\n --font-weight: bold;\n}\n\n/**\n * Docs: Typography\n */\nh1 {\n margin-top: -0.25em;\n}\n\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\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 margin-bottom: 0;\n background: transparent;\n}\n\nsection > pre {\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);\n background: var(--article-code-background-color);\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: Modal\n */\ndialog.example {\n display: block;\n z-index: inherit;\n position: relative;\n top: inherit;\n right: inherit;\n bottom: inherit;\n left: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: inherit;\n min-width: inherit;\n height: inherit;\n min-height: inherit;\n padding: 0;\n background-color: inherit;\n}\ndialog.example article {\n max-width: inherit;\n}\ndialog.example:not([open]), dialog.example[open=false] {\n display: none;\n}\n\n.dialog-is-open body > button {\n filter: blur(0.125rem);\n}\n\n/**\n * Docs: Navs\n */\nbody > nav {\n --nav-link-spacing-vertical: 1rem;\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.container-fluid {\n padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));\n}\nbody > nav a {\n border-radius: 0;\n}\nbody > nav svg {\n vertical-align: text-bottom;\n}\nbody > nav ul:first-of-type {\n margin-left: calc(var(--spacing) * -1);\n}\nbody > nav ul:first-of-type li {\n padding: 0;\n}\nbody > nav ul:first-of-type li:first-of-type a {\n display: block;\n margin: 0;\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 display: block;\n width: 3.5rem;\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: calc(var(--spacing) * 1.5);\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 + var(--scrollbar-width, 0px));\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 content: \"\";\n vertical-align: bottom;\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-style: normal;\n font-size: 0.875rem;\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: calc(var(--spacing) + var(--scrollbar-width, 0px));\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) * 3);\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// External links\ndiv[role=\"document\"] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"], [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-size: 0.66rem auto;\n background-repeat: no-repeat;\n content: \"\";\n}\n\n// Embedded SVG\nsvg {\n height: 1rem;\n}\n","/**\n * Docs: Aside\n */\n\nmain > aside {\n\n nav {\n width: 100%;\n padding-bottom: var(--block-spacing-vertical);\n \n @media (min-width: map-get($breakpoints, \"lg\")) {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n a#toggle-docs-navigation {\n display: block;\n margin: 0;\n margin-bottom: var(--spacing);\n padding: 0;\n padding-bottom: var(--spacing);\n border-bottom: var(--border-width) solid var(--accordion-border-color);\n\n svg {\n margin-right: calc(var(--spacing) * 0.5);\n vertical-align: -3px;\n }\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: none;\n }\n }\n\n &.closed-on-mobile {\n\n a#toggle-docs-navigation {\n svg.collapse {\n display: none;\n }\n }\n\n details {\n display: none;\n } \n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n details {\n display: block;\n }\n\n > a#toggle-docs-navigation {\n display: none;\n }\n }\n }\n\n &.open {\n a#toggle-docs-navigation {\n svg.expand {\n display: none;\n }\n }\n }\n }\n\n details {\n padding-bottom: 0;\n\n summary {\n padding-bottom: 0.5rem;\n }\n }\n\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n ul {\n padding-left: 0.25rem;\n }\n\n li a {\n --nav-link-spacing-vertical: 0.25rem;\n --nav-link-spacing-horizontal: 0.75rem;\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[aria-current],\n a[aria-current]:hover {\n color: var(--primary);\n }\n\n details {\n border-bottom: none;\n\n summary {\n color: var(--h1-color);\n font-weight: 300;\n font-size: 14px;\n text-transform: uppercase;\n\n &::after {\n display: none;\n }\n }\n\n &[open] {\n > summary {\n margin-bottom: 0;\n\n &:not([role=button], :focus) {\n color: var(--h1-color);\n }\n }\n }\n }\n}\n","/**\n * Docs: Documentation\n */\n\n// Docs: Themes\n#themes {\n button.theme-switcher {\n &:first-of-type {\n --font-weight: bold;\n }\n \n i {\n font-style: normal;\n }\n }\n}\n\n// Docs: Customization\n#customization {\n figure {\n display: grid;\n grid-template-rows: repeat(2, 1fr);\n grid-template-columns: repeat(9, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n\n @media (min-width: map-get($breakpoints, \"sm\")) {\n grid-template-rows: 1fr;\n grid-template-columns: repeat(18, 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-size: 0.66rem auto;\n background-repeat: no-repeat;\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: Buttons\n#buttons {\n a[role=\"button\"] {\n margin-right: calc(var(--spacing) * 0.5);\n }\n}\n\n// Docs: Forms\n#forms div.grid {\n grid-row-gap: 0;\n}\n\n// Docs: Modal\n#modal {\n button {\n --font-weight: bold;\n }\n}\n","/**\n * Docs: Typography\n */\n\nh1 {\n margin-top: -0.25em;\n}\n\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\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 margin-bottom: 0;\n background: transparent;\n}\n\n// Code block outside article\n// Horizontally aligned with
content\nsection > pre {\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5)\n var(--block-spacing-horizontal);\n background: var(--article-code-background-color);\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: Modal\n */\n\ndialog.example {\n display: block;\n z-index: inherit;\n position: relative;\n top: inherit;\n right: inherit;\n bottom: inherit;\n left: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: inherit;\n min-width: inherit;\n height: inherit;\n min-height: inherit;\n padding: 0;\n background-color:inherit;\n\n article {\n max-width: inherit;\n }\n\n &:not([open]),\n &[open=false] {\n display: none;\n }\n}\n\n.dialog-is-open body > button {\n filter: blur(0.125rem);\n}","/**\n * Docs: Navs\n */\n\nbody > nav {\n --nav-link-spacing-vertical: 1rem;\n\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 &.container-fluid {\n padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));\n }\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 {\n margin-left: calc(var(--spacing) * -1);\n\n li {\n padding: 0;\n \n // Brand\n &:first-of-type {\n a {\n display: block;\n margin: 0;\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n \n svg {\n display: block;\n width: 3.5rem;\n height: 3.5rem;\n }\n }\n }\n \n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: calc(var(--spacing) * 1.5);\n color: var(--h1-color);\n \n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));\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 content: \"\";\n vertical-align: bottom;\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-style: normal;\n font-size: 0.875rem;\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: calc(var(--spacing) + var(--scrollbar-width, 0px));\n }\n}\n"]} \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/customization.html b/htmx/static/pico-1.5.11/docs/customization.html new file mode 100644 index 0000000..9c83d19 --- /dev/null +++ b/htmx/static/pico-1.5.11/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]) {
+    --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 Pico
+@import "@picocss/pico/scss/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 "@picocss/pico/scss/pico/layout/document";
+@import "@picocss/pico/scss/pico/layout/sectioning";
+…
+

Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.

Code licensed MIT

\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/dropdowns.html b/htmx/static/pico-1.5.11/docs/dropdowns.html new file mode 100644 index 0000000..f754fab --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/dropdowns.html @@ -0,0 +1,157 @@ +Dropdowns • Pico CSS

Code licensed MIT

\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/forms.html b/htmx/static/pico-1.5.11/docs/forms.html new file mode 100644 index 0000000..6f4b140 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/forms.html @@ -0,0 +1,108 @@ +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 native 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>
+  <label for="extralarge">
+    <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
+    Extra Large
+  </label>
+</fieldset>
+
+<!-- Checkboxes -->
+<fieldset>
+  <label for="terms">
+    <input type="checkbox" id="terms" name="terms">
+    I agree to the Terms and Conditions
+  </label>
+  <label for="terms_sharing">
+    <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
+    I agree to share my information with partners
+  </label>
+</fieldset>
+
+<!-- Switches -->
+<fieldset>
+  <label for="switch">
+    <input type="checkbox" id="switch" name="switch" role="switch">
+    Publish on my profile
+  </label>
+  <label for="switch_disabled">
+    <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch_disabled" disabled checked>
+    User must change password at next logon
+  </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:

<!-- Search -->
+<input type="search" id="search" name="search" placeholder="Search">
+
+<!-- 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/htmx/static/pico-1.5.11/docs/grid.html b/htmx/static/pico-1.5.11/docs/grid.html new file mode 100644 index 0000000..13bf018 --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/index.html b/htmx/static/pico-1.5.11/docs/index.html new file mode 100644 index 0000000..5c9482f --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/index.html @@ -0,0 +1,14 @@ +Documentation • Pico CSS

Usage

Works without package manager or dependencies 🙂!

There are 4 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 jsDelivr CDN to link pico.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

Install with NPM

npm install @picocss/pico

Install with Composer

composer require 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>

Code licensed MIT

\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/js/commons.js b/htmx/static/pico-1.5.11/docs/js/commons.js new file mode 100644 index 0000000..408e186 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/commons.js @@ -0,0 +1,21 @@ +/* + * Add some magic to Pico docs + * + * Pico.css - https://picocss.com + * Copyright 2019-2023 - Licensed under MIT + */ + +// Imports +import themeSwitcher from './src/theme-switcher.js'; +import toggleNavigation from './src/toggle-navigation'; + +// Theme switcher +themeSwitcher.addButton({ + tag: 'BUTTON', + class: 'contrast switcher theme-switcher', + target: 'body', +}); +themeSwitcher.init(); + +// Toggle navigation +toggleNavigation.init(); \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/js/commons.min.js b/htmx/static/pico-1.5.11/docs/js/commons.min.js new file mode 100644 index 0000000..81a0129 --- /dev/null +++ b/htmx/static/pico-1.5.11/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",localStorageKey:"picoPreferredColorScheme",init(){this.scheme=this.schemeFromLocalStorage,this.initSwitchers()},get schemeFromLocalStorage(){return void 0!==window.localStorage&&null!==window.localStorage.getItem(this.localStorageKey)?window.localStorage.getItem(this.localStorageKey):this._scheme},get preferredColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers(){document.querySelectorAll(this.buttonsTarget).forEach(e=>{e.addEventListener("click",()=>{"dark"==this.scheme?this.scheme="light":this.scheme="dark"},!1)})},addButton(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferredColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme(),this.schemeToLocalStorage()},get scheme(){return this._scheme},applyScheme(){document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(e=>{var t="dark"==this.scheme?this.change.dark:this.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})},schemeToLocalStorage(){void 0!==window.localStorage&&window.localStorage.setItem(this.localStorageKey,this.scheme)}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init(){this.onToggleClick()},onToggleClick(){this.toggleLink.addEventListener("click",e=>{e.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}(); \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/js/customization.js b/htmx/static/pico-1.5.11/docs/js/customization.js new file mode 100644 index 0000000..4e95ebc --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/customization.js @@ -0,0 +1,14 @@ +/* + * Customization + * + * Pico.css - https://picocss.com + * Copyright 2019-2023 - 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/htmx/static/pico-1.5.11/docs/js/customization.min.js b/htmx/static/pico-1.5.11/docs/js/customization.min.js new file mode 100644 index 0000000..3a08b11 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/customization.min.js @@ -0,0 +1,43 @@ +"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(){this.generateButtons(),this.setActiveButton("pink"),this.generateTheme("pink")},generateButtons(){let e="",a="";for(const t in this.colors)e+=``,a+=` + button[data-color="${t}"] { + background-color: ${this.colors[t][600]}; + } + [data-theme="light"] button[data-color="${t}"]:hover, + [data-theme="light"] button[data-color="${t}"]:active, + [data-theme="light"] button[data-color="${t}"]:focus { + background-color: ${this.colors[t][700]}; ' + } + [data-theme="dark"] button[data-color="${t}"]:hover, + [data-theme="dark"] button[data-color="${t}"]:active, + [data-theme="dark"] button[data-color="${t}"]:focus { + background-color: ${this.colors[t][500]}; + }`;var f=document.createElement("FIGURE"),f=(f.innerHTML=e,document.querySelector(this.buttonsTarget).before(f),this.buttons=document.querySelectorAll(this.selectorButton),this.buttons.forEach(e=>{e.addEventListener("click",e=>{e=e.target.getAttribute("data-color");this.setActiveButton(e),this.generateTheme(e)},!1)}),document.createElement("STYLE"));f.setAttribute("title","color-picker"),this.generatedStyles=this.minifyCSS(a),f.innerHTML=this.generatedStyles,document.querySelector("head").appendChild(f)},setActiveButton(e){this.buttons.forEach(e=>{e.removeAttribute("class")}),document.querySelector(this.selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")},generateTheme(e){var a=e,e=this.colors[e];let 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(a=>{document.querySelectorAll(this.selectorSection+" "+a).forEach(e=>{e.innerHTML=f[a]})});a=` + [data-theme="generated"] { + --h4-color: ${e[700]}; + --primary: ${e[600]}; + --primary-hover: ${e[700]}; + --primary-focus: ${this.hexToRgbA(e[600],.125)}; + --primary-inverse: ${e.inverse}; + } + @media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) [data-theme="generated"] { + --h4-color: ${e[400]}; + --primary: ${e[600]}; + --primary-hover: ${e[500]}; + --primary-focus: ${this.hexToRgbA(e[600],.25)}; + --primary-inverse: ${e.inverse}; + } + } + [data-theme="dark"] [data-theme="generated"] { + --h4-color: ${e[500]}; + --primary: ${e[600]}; + --primary-hover: ${e[500]}; + --primary-focus: ${this.hexToRgbA(e[600],.25)}; + --primary-inverse: ${e.inverse}; + } + [data-theme="generated"] { + --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); + }`;document.querySelector('style[title="color-picker"]').innerHTML=this.generatedStyles+this.minifyCSS(a)},minifyCSS(e){return e.replace(/^ +/gm,"")},hexToRgbA(e,a){let f;if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return"rgba("+[(f="0x"+(f=3==(f=e.substring(1).split("")).length?[f[0],f[0],f[1],f[1],f[2],f[2]]:f).join(""))>>16&255,f>>8&255,255&f].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/htmx/static/pico-1.5.11/docs/js/grid.js b/htmx/static/pico-1.5.11/docs/js/grid.js new file mode 100644 index 0000000..c170d5b --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/grid.js @@ -0,0 +1,100 @@ +/* + * Grid + * + * Pico.css - https://picocss.com + * Copyright 2019-2023 - Licensed under MIT + */ + +const grid = { + + // Config + 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 + init() { + this.addButtons(); + this.generateGrid(); + }, + + // Add buttons + addButtons() { + // Insert buttons + let buttons = document.createElement('P'); + buttons.innerHTML = ` + + + `; + document.querySelector(this.buttons.target).before(buttons); + + // Add button listener + document.querySelector('#grid button.add').addEventListener('click', () => { + this.addColumn(); + }, false); + + // Remove button listener + document.querySelector('#grid button.remove').addEventListener('click', () => { + this.removeColumn(); + }, false); + }, + + // Generate grid + generateGrid() { + // Config + let htmlInner = ''; + let codeInner = '<div class="grid">\n'; + + // Build + for (let col = 0; col < this.grid.current; col++) { + htmlInner += '
' + (col + 1) + '
'; + codeInner += ' <div>' + (col + 1) + '</div>\n'; + } + + // Display + codeInner += '</div>'; + document.querySelector(this.grid.gridTarget).innerHTML = htmlInner; + document.querySelector(this.grid.codeTarget).innerHTML = codeInner; + }, + + // Add column + addColumn() { + if (this.grid.current < this.grid.max) { + this.grid.current++; + this.generateGrid(); + } + }, + + // Remove column + removeColumn() { + if (this.grid.current > this.grid.min) { + this.grid.current--; + this.generateGrid(); + } + }, +}; + +// Init +grid.init(); \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/js/grid.min.js b/htmx/static/pico-1.5.11/docs/js/grid.min.js new file mode 100644 index 0000000..08aef03 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/grid.min.js @@ -0,0 +1,15 @@ +"use strict";const grid={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(){this.addButtons(),this.generateGrid()},addButtons(){var t=document.createElement("P");t.innerHTML=` + + + `,document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",()=>{this.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",()=>{this.removeColumn()},!1)},generateGrid(){let e="",r='<div class="grid">\n';for(let t=0;t"+(t+1)+"",r+=" <div>"+(t+1)+"</div>\n";r+="</div>",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=r},addColumn(){this.grid.currentthis.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init(); \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/js/modal.js b/htmx/static/pico-1.5.11/docs/js/modal.js new file mode 100644 index 0000000..beb98a2 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/modal.js @@ -0,0 +1,95 @@ +/* + * Modal + * + * Pico.css - https://picocss.com + * Copyright 2019-2023 - Licensed under MIT + */ + +// Config +const isOpenClass = 'modal-is-open'; +const openingClass = 'modal-is-opening'; +const closingClass = 'modal-is-closing'; +const animationDuration = 400; // ms +let visibleModal = null; + + +// Toggle modal +const toggleModal = event => { + event.preventDefault(); + const modal = document.getElementById(event.currentTarget.getAttribute('data-target')); + (typeof(modal) != 'undefined' && modal != null) + && isModalOpen(modal) ? closeModal(modal) : openModal(modal) +} + +// Is modal open +const isModalOpen = modal => { + return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false; +} + +// Open modal +const openModal = modal => { + if (isScrollbarVisible()) { + document.documentElement.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`); + } + document.documentElement.classList.add(isOpenClass, openingClass); + setTimeout(() => { + visibleModal = modal; + document.documentElement.classList.remove(openingClass); + }, animationDuration); + modal.setAttribute('open', true); +} + +// Close modal +const closeModal = modal => { + visibleModal = null; + document.documentElement.classList.add(closingClass); + setTimeout(() => { + document.documentElement.classList.remove(closingClass, isOpenClass); + document.documentElement.style.removeProperty('--scrollbar-width'); + modal.removeAttribute('open'); + }, animationDuration); +} + +// Close with a click outside +document.addEventListener('click', event => { + if (visibleModal != null) { + const modalContent = visibleModal.querySelector('article'); + const isClickInside = modalContent.contains(event.target); + !isClickInside && closeModal(visibleModal); + } +}); + +// Close with Esc key +document.addEventListener('keydown', event => { + if (event.key === 'Escape' && visibleModal != null) { + closeModal(visibleModal); + } +}); + +// Get scrollbar width +const getScrollbarWidth = () => { + + // Creating invisible container + const outer = document.createElement('div'); + outer.style.visibility = 'hidden'; + outer.style.overflow = 'scroll'; // forcing scrollbar to appear + outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps + document.body.appendChild(outer); + + // Creating inner element and placing it in the container + const inner = document.createElement('div'); + outer.appendChild(inner); + + // Calculating difference between container's full width and the child width + const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth); + + // Removing temporary elements from the DOM + outer.parentNode.removeChild(outer); + + return scrollbarWidth; +} + +// Is scrollbar visible +const isScrollbarVisible = () => { + return document.body.scrollHeight > screen.height; +} diff --git a/htmx/static/pico-1.5.11/docs/js/modal.min.js b/htmx/static/pico-1.5.11/docs/js/modal.min.js new file mode 100644 index 0000000..0f9f52c --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/modal.min.js @@ -0,0 +1 @@ +"use strict";const isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400;let visibleModal=null;const toggleModal=e=>{e.preventDefault();e=document.getElementById(e.currentTarget.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=e=>!(!e.hasAttribute("open")||"false"==e.getAttribute("open")),openModal=e=>{isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width",getScrollbarWidth()+"px"),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(()=>{visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=e=>{visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(()=>{document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)},getScrollbarWidth=(document.addEventListener("click",e=>{null==visibleModal||visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal)}),document.addEventListener("keydown",e=>{"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}),()=>{var e=document.createElement("div"),t=(e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e),document.createElement("div")),t=(e.appendChild(t),e.offsetWidth-t.offsetWidth);return e.parentNode.removeChild(e),t}),isScrollbarVisible=()=>document.body.scrollHeight>screen.height; \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/js/src/color-picker.js b/htmx/static/pico-1.5.11/docs/js/src/color-picker.js new file mode 100644 index 0000000..4a8fb86 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/src/color-picker.js @@ -0,0 +1,173 @@ +/* + * Color Picker + * + * Pico.css - https://picocss.com + * Copyright 2019-2023 - Licensed under MIT + */ + +export const colorPicker = { + + // Config + colors: null, + buttonsTarget: '#customization article[data-theme="generated"]', + selectorButton: '#customization button[data-color]', + selectorSection: '#customization', + buttons: null, + generatedStyles: null, + + // Init + init() { + this.generateButtons(); + this.setActiveButton('pink'); + this.generateTheme('pink'); + }, + + // Generate Buttons + generateButtons() { + // Init + let innerButtons = ''; + let innerStyles = ''; + + // Loop colors + for (const color in this.colors) { + // Buttons + innerButtons += ``; + + // Styles + innerStyles += ` + button[data-color="${color}"] { + background-color: ${this.colors[color]['600']}; + } + [data-theme="light"] button[data-color="${color}"]:hover, + [data-theme="light"] button[data-color="${color}"]:active, + [data-theme="light"] button[data-color="${color}"]:focus { + background-color: ${this.colors[color]['700']}; ' + } + [data-theme="dark"] button[data-color="${color}"]:hover, + [data-theme="dark"] button[data-color="${color}"]:active, + [data-theme="dark"] button[data-color="${color}"]:focus { + background-color: ${this.colors[color]['500']}; + }`; + } + + // Insert buttons + let containerButtons = document.createElement('FIGURE'); + containerButtons.innerHTML = innerButtons; + document.querySelector(this.buttonsTarget).before(containerButtons); + + // Buttons listeners + this.buttons = document.querySelectorAll(this.selectorButton); + this.buttons.forEach( button => { + button.addEventListener('click', event => { + let color = event.target.getAttribute('data-color'); + this.setActiveButton(color); + this.generateTheme(color); + }, false); + }); + + // Insert CSS Styles + let containerStyles = document.createElement('STYLE'); + containerStyles.setAttribute('title', 'color-picker'); + this.generatedStyles = this.minifyCSS(innerStyles); + containerStyles.innerHTML = this.generatedStyles; + document.querySelector('head').appendChild(containerStyles); + }, + + // Set active button + setActiveButton(color) { + // Remove all active states + this.buttons.forEach( button => { + button.removeAttribute('class'); + }); + + // Set active state + let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]'); + buttonPicked.setAttribute('class', 'picked'); + }, + + // Set active button + generateTheme(color) { + let name = color; + let data = this.colors[color]; + + // 1. Update name and colors in demo code + let swaps = { + '.name': name.charAt(0).toUpperCase() + name.substring(1) + ' ', + '.c500': data[500], + '.c600': data[600], + '.c700': data[700], + '.c600-outline-light': this.hexToRgbA(data[600], 0.125), + '.c600-outline-dark': this.hexToRgbA(data[600], 0.25), + '.inverse': data['inverse'], + }; + + Object.keys(swaps).forEach( swap => { + let targets = document.querySelectorAll(this.selectorSection + ' ' + swap); + targets.forEach( target => { + target.innerHTML = swaps[swap]; + }); + }); + + // 2. Update CSS Styles + const innerStyles = ` + [data-theme="generated"] { + --h4-color: ${data[700]}; + --primary: ${data[600]}; + --primary-hover: ${data[700]}; + --primary-focus: ${this.hexToRgbA(data[600], 0.125)}; + --primary-inverse: ${data['inverse']}; + } + @media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) [data-theme="generated"] { + --h4-color: ${data[400]}; + --primary: ${data[600]}; + --primary-hover: ${data[500]}; + --primary-focus: ${this.hexToRgbA(data[600], 0.25)}; + --primary-inverse: ${data['inverse']}; + } + } + [data-theme="dark"] [data-theme="generated"] { + --h4-color: ${data[500]}; + --primary: ${data[600]}; + --primary-hover: ${data[500]}; + --primary-focus: ${this.hexToRgbA(data[600], 0.25)}; + --primary-inverse: ${data['inverse']}; + } + [data-theme="generated"] { + --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); + }`; + + document.querySelector('style[title="color-picker"]').innerHTML = + this.generatedStyles + this.minifyCSS(innerStyles); + }, + + // Minify CSS + minifyCSS(css) { + return css.replace(/^ +/gm, ''); + }, + + // Hexadecimal to Rgba + hexToRgbA(hex, alpha) { + let c; + if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { + c = hex.substring(1).split(''); + if (c.length == 3) { + c = [c[0], c[0], c[1], c[1], c[2], c[2]]; + } + c = '0x' + c.join(''); + return ( + 'rgba(' + + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') + + ', ' + + alpha + + ')' + ); + } + throw new Error('Bad Hex'); + }, +}; + +export default colorPicker; diff --git a/htmx/static/pico-1.5.11/docs/js/src/material-design-colors.js b/htmx/static/pico-1.5.11/docs/js/src/material-design-colors.js new file mode 100644 index 0000000..7cb8e50 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/src/material-design-colors.js @@ -0,0 +1,303 @@ +// Source: https://material.io/design/color/the-color-system.html +export const materialDesignColors = { + red: { + 50: '#ffebee', + 100: '#ffcdd2', + 200: '#ef9a9a', + 300: '#e57373', + 400: '#ef5350', + 500: '#f44336', + 600: '#e53935', + 700: '#d32f2f', + 800: '#c62828', + 900: '#b71c1c', + a100: '#ff8a80', + a200: '#ff5252', + a400: '#ff1744', + a700: '#d50000', + inverse: '#FFF', + }, + 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', + }, +}; + +export default materialDesignColors; diff --git a/htmx/static/pico-1.5.11/docs/js/src/theme-switcher.js b/htmx/static/pico-1.5.11/docs/js/src/theme-switcher.js new file mode 100644 index 0000000..ed12aae --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/src/theme-switcher.js @@ -0,0 +1,95 @@ +/* + * Theme switcher + * + * Pico.css - https://picocss.com + * Copyright 2019-2023 - Licensed under MIT + */ + +export const themeSwitcher = { + + // Config + _scheme: 'auto', + change: { + light: 'Turn on dark mode', + dark: 'Turn off dark mode', + }, + buttonsTarget: '.theme-switcher', + localStorageKey: 'picoPreferredColorScheme', + + // Init + init() { + this.scheme = this.schemeFromLocalStorage; + this.initSwitchers(); + }, + + // Get color scheme from local storage + get schemeFromLocalStorage() { + if (typeof window.localStorage !== 'undefined') { + if (window.localStorage.getItem(this.localStorageKey) !== null) { + return window.localStorage.getItem(this.localStorageKey); + } + } + return this._scheme; + }, + + // Preferred color scheme + get preferredColorScheme() { + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + }, + + // Init switchers + initSwitchers() { + const buttons = document.querySelectorAll(this.buttonsTarget); + buttons.forEach(button => { + button.addEventListener('click', () => { + this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark'; + }, false); + }); + }, + + // Add new button + addButton(config) { + let button = document.createElement(config.tag); + button.className = config.class; + document.querySelector(config.target).appendChild(button); + }, + + // Set scheme + set scheme(scheme) { + if (scheme == 'auto') { + this.preferredColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light'; + } + else if (scheme == 'dark' || scheme == 'light') { + this._scheme = scheme; + } + this.applyScheme(); + this.schemeToLocalStorage(); + }, + + // Get scheme + get scheme() { + return this._scheme; + }, + + // Apply scheme + applyScheme() { + document.querySelector('html').setAttribute('data-theme', this.scheme); + const buttons = document.querySelectorAll(this.buttonsTarget); + buttons.forEach( + button => { + const text = this.scheme == 'dark' ? this.change.dark : this.change.light; + button.innerHTML = text; + button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, '')); + } + ); + }, + + // Store scheme to local storage + schemeToLocalStorage() { + if (typeof window.localStorage !== 'undefined') { + window.localStorage.setItem(this.localStorageKey, this.scheme); + } + }, +}; + +export default themeSwitcher; diff --git a/htmx/static/pico-1.5.11/docs/js/src/toggle-navigation.js b/htmx/static/pico-1.5.11/docs/js/src/toggle-navigation.js new file mode 100644 index 0000000..9734191 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/js/src/toggle-navigation.js @@ -0,0 +1,42 @@ +/* + * Toggle navigation + * + * Pico.css - https://picocss.com + * Copyright 2019-2023 - Licensed under MIT + */ + +export const toggleNavigation = { + + // Config + _state: 'closed-on-mobile', + toggleLink: document.getElementById('toggle-docs-navigation'), + nav: document.querySelector('main > aside > nav'), + + // Init + init() { + this.onToggleClick() + }, + + onToggleClick() { + this.toggleLink.addEventListener('click', event => { + event.preventDefault(); + this.state == 'closed-on-mobile' + ? this.state = 'open' + : this.state = 'closed-on-mobile'; + this.nav.removeAttribute('class'); + this.nav.classList.add(this.state); + }, false); + }, + + // Get state + get state() { + return this._state; + }, + + // Set state + set state(state) { + this._state = state; + }, +}; + +export default toggleNavigation; \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/loading.html b/htmx/static/pico-1.5.11/docs/loading.html new file mode 100644 index 0000000..eaea7cd --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/modal.html b/htmx/static/pico-1.5.11/docs/modal.html new file mode 100644 index 0000000..868fa66 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/modal.html @@ -0,0 +1,87 @@ +Modal • Pico CSS

Code licensed MIT

Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

 \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/navs.html b/htmx/static/pico-1.5.11/docs/navs.html new file mode 100644 index 0000000..2ffb4bf --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/navs.html @@ -0,0 +1,34 @@ +Navs • Pico CSS

Code licensed MIT

\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/progress.html b/htmx/static/pico-1.5.11/docs/progress.html new file mode 100644 index 0000000..5b922b1 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/progress.html @@ -0,0 +1 @@ +Progress • Pico CSS

Progress

Progress bar element in pure HTML, without JavaScript.

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

A progress bar without a value attribute is indeterminate.

<progress></progress>

Code licensed MIT

\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/rtl.html b/htmx/static/pico-1.5.11/docs/rtl.html new file mode 100644 index 0000000..0fc8238 --- /dev/null +++ b/htmx/static/pico-1.5.11/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 (example).

<!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/htmx/static/pico-1.5.11/docs/scroller.html b/htmx/static/pico-1.5.11/docs/scroller.html new file mode 100644 index 0000000..7ed1958 --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/scss/components/_modal.scss b/htmx/static/pico-1.5.11/docs/scss/components/_modal.scss new file mode 100644 index 0000000..f39ce7c --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/components/_modal.scss @@ -0,0 +1,34 @@ +/** + * Docs: Modal + */ + +dialog.example { + display: block; + z-index: inherit; + position: relative; + top: inherit; + right: inherit; + bottom: inherit; + left: inherit; + align-items: inherit; + justify-content: inherit; + width: inherit; + min-width: inherit; + height: inherit; + min-height: inherit; + padding: 0; + background-color:inherit; + + article { + max-width: inherit; + } + + &:not([open]), + &[open=false] { + display: none; + } +} + +.dialog-is-open body > button { + filter: blur(0.125rem); +} \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/scss/components/_nav.scss b/htmx/static/pico-1.5.11/docs/scss/components/_nav.scss new file mode 100644 index 0000000..9c7f20e --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/components/_nav.scss @@ -0,0 +1,66 @@ +/** + * Docs: Navs + */ + +body > nav { + --nav-link-spacing-vertical: 1rem; + + -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: 0px 1px 0 var(--nav-border-color); + + &.container-fluid { + padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px)); + } + + a { + border-radius: 0; + } + + svg { + vertical-align: text-bottom; + } + + // Band & Title + ul:first-of-type { + margin-left: calc(var(--spacing) * -1); + + li { + padding: 0; + + // Brand + &:first-of-type { + a { + display: block; + margin: 0; + padding: 0; + background: var(--h1-color); + color: var(--nav-logo-color); + + svg { + display: block; + width: 3.5rem; + height: 3.5rem; + } + } + } + + // Title + &:nth-of-type(2) { + display: none; + margin-left: calc(var(--spacing) * 1.5); + color: var(--h1-color); + + @media (min-width: map-get($breakpoints, "lg")) { + display: inline; + } + } + } + } +} diff --git a/htmx/static/pico-1.5.11/docs/scss/components/_theme-switcher.scss b/htmx/static/pico-1.5.11/docs/scss/components/_theme-switcher.scss new file mode 100644 index 0000000..bcc59d2 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/components/_theme-switcher.scss @@ -0,0 +1,71 @@ +/** + * Docs: Theme switcher + */ + +.switcher { + position: fixed; + right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px)); + bottom: var(--spacing); + width: auto; + margin-bottom: 0; + padding: 0.75rem; + border-radius: 2rem; + box-shadow: var(--card-box-shadow); + line-height: 1; + text-align: right; + + &::after { + display: inline-block; + width: 1rem; + height: 1rem; + border: 0.15rem solid currentColor; + border-radius: 50%; + background: linear-gradient( + to right, + currentColor 0%, + currentColor 50%, + transparent 50% + ); + content: ""; + vertical-align: bottom; + transition: transform var(--transition); + } + + i { + display: inline-block; + max-width: 0; + padding: 0; + overflow: hidden; + font-style: normal; + font-size: 0.875rem; + white-space: nowrap; + } + + &:hover, + &:focus { + max-width: 100%; + transition: background-color var(--transition), + border-color var(--transition), color var(--transition), + box-shadow var(--transition); + } + + &:hover { + &::after { + transform: rotate(180deg); + } + + i { + max-width: 100%; + padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4); + transition: max-width var(--transition), padding var(--transition); + } + } + + &:focus { + box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus); + } + + @media (min-width: map-get($breakpoints, "sm")) { + right: calc(var(--spacing) + var(--scrollbar-width, 0px)); + } +} diff --git a/htmx/static/pico-1.5.11/docs/scss/content/_code.scss b/htmx/static/pico-1.5.11/docs/scss/content/_code.scss new file mode 100644 index 0000000..1b83735 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/content/_code.scss @@ -0,0 +1,69 @@ +/** + * Docs: Code + */ + +// Code block inside article +article > footer.code { + background: var(--article-code-background-color); +} +article pre, +article pre code { + margin-bottom: 0; + background: transparent; +} + +// Code block outside article +// Horizontally aligned with
content +section > pre { + margin: var(--block-spacing-vertical) 0; + padding: calc(var(--block-spacing-vertical) / 1.5) + var(--block-spacing-horizontal); + background: var(--article-code-background-color); + box-shadow: var(--card-box-shadow); +} + +// Badge for Valid & Invalid code +[data-theme="invalid"], +[data-theme="valid"] { + position: relative; + margin-bottom: 0 !important; + + // Label + &:before { + display: block; + position: absolute; + top: 0; + right: 0; + padding: 0.375rem 0.75rem; + border-radius: 0; + color: var(--primary-inverse); + font-size: 14px; + line-height: 1; + + @media (min-width: map-get($breakpoints, "lg")) { + top: var(--spacing); + right: var(--spacing); + } + } + + // Spacing for Valid & Invalid badge + code { + padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) + var(--block-spacing-horizontal); + } +} + +// Color for Valid & Invalid code +[data-theme="invalid"] { + &:before { + background: var(--invalid-color); + content: "Not so great"; + } +} + +[data-theme="valid"] { + &:before { + background: var(--valid-color); + content: "Great"; + } +} diff --git a/htmx/static/pico-1.5.11/docs/scss/content/_typography.scss b/htmx/static/pico-1.5.11/docs/scss/content/_typography.scss new file mode 100644 index 0000000..4a31094 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/content/_typography.scss @@ -0,0 +1,19 @@ +/** + * Docs: Typography + */ + +h1 { + margin-top: -0.25em; +} + +section > hgroup { + margin-bottom: calc(var(--typography-spacing-vertical) * 2); +} + +[role="document"] { + section > h1, + section > h2, + section > h3 { + line-height: 1; + } +} diff --git a/htmx/static/pico-1.5.11/docs/scss/layout/_aside.scss b/htmx/static/pico-1.5.11/docs/scss/layout/_aside.scss new file mode 100644 index 0000000..635dba7 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/layout/_aside.scss @@ -0,0 +1,131 @@ +/** + * Docs: Aside + */ + +main > aside { + + nav { + width: 100%; + padding-bottom: var(--block-spacing-vertical); + + @media (min-width: map-get($breakpoints, "lg")) { + position: fixed; + width: 200px; + max-height: calc(100vh - 5.5rem); + overflow-x: hidden; + overflow-y: auto; + } + + a#toggle-docs-navigation { + display: block; + margin: 0; + margin-bottom: var(--spacing); + padding: 0; + padding-bottom: var(--spacing); + border-bottom: var(--border-width) solid var(--accordion-border-color); + + svg { + margin-right: calc(var(--spacing) * 0.5); + vertical-align: -3px; + } + + @media (min-width: map-get($breakpoints, "lg")) { + display: none; + } + } + + &.closed-on-mobile { + + a#toggle-docs-navigation { + svg.collapse { + display: none; + } + } + + details { + display: none; + } + + @media (min-width: map-get($breakpoints, "lg")) { + details { + display: block; + } + + > a#toggle-docs-navigation { + display: none; + } + } + } + + &.open { + a#toggle-docs-navigation { + svg.expand { + display: none; + } + } + } + } + + details { + padding-bottom: 0; + + summary { + padding-bottom: 0.5rem; + } + } + + li, + summary { + padding-top: 0; + padding-bottom: 0; + font-size: 16px; + } + + ul { + padding-left: 0.25rem; + } + + li a { + --nav-link-spacing-vertical: 0.25rem; + --nav-link-spacing-horizontal: 0.75rem; + + svg { + vertical-align: middle; + } + } + + a.secondary:focus { + background-color: transparent; + color: var(--primary-hover); + } + + a[aria-current], + a[aria-current]:hover { + color: var(--primary); + } + + details { + border-bottom: none; + + summary { + color: var(--h1-color); + font-weight: 300; + font-size: 14px; + text-transform: uppercase; + + &::after { + display: none; + } + } + + &[open] { + > summary { + margin-bottom: 0; + + &:not([role=button], :focus) { + color: var(--h1-color); + } + } + } + } +} diff --git a/htmx/static/pico-1.5.11/docs/scss/layout/_document.scss b/htmx/static/pico-1.5.11/docs/scss/layout/_document.scss new file mode 100644 index 0000000..5f5fa72 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/layout/_document.scss @@ -0,0 +1,7 @@ +/** + * Docs: Document + */ + +html { + scroll-behavior: smooth; +} diff --git a/htmx/static/pico-1.5.11/docs/scss/layout/_documentation.scss b/htmx/static/pico-1.5.11/docs/scss/layout/_documentation.scss new file mode 100644 index 0000000..7bc4866 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/layout/_documentation.scss @@ -0,0 +1,137 @@ +/** + * Docs: Documentation + */ + +// Docs: Themes +#themes { + button.theme-switcher { + &:first-of-type { + --font-weight: bold; + } + + i { + font-style: normal; + } + } +} + +// Docs: Customization +#customization { + figure { + display: grid; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(9, 1fr); + margin-bottom: 0; + overflow: hidden; + + @media (min-width: map-get($breakpoints, "sm")) { + grid-template-rows: 1fr; + grid-template-columns: repeat(18, 1fr); + border-top-right-radius: var(--border-radius); + border-top-left-radius: var(--border-radius); + } + + ~ article { + margin-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + button { + margin-bottom: 0; + padding: 0; + padding-top: 100%; + border: none; + border-radius: 0; + + &:focus { + box-shadow: none; + } + + &.picked { + background-image: var(--icon-check); + background-position: center; + background-size: 0.66rem auto; + background-repeat: no-repeat; + box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25); + } + &[data-color="lime"], + &[data-color="yellow"], + &[data-color="amber"] { + &.picked { + background-image: var(--icon-check-dark); + } + } + } + } + + h4 { + transition: color var(--transition); + } + + pre[data-theme="generated"] { + border-color: var(--primary); + } +} + +// Docs: Grid +#grid { + --grid-spacing-vertical: 1rem; + + button { + display: block; + width: 100%; + margin-bottom: var(--spacing); + + @media (min-width: map-get($breakpoints, "sm")) { + display: inline-block; + width: auto; + margin-right: 0.5rem; + } + + svg { + stroke: var(--secondary); + margin-right: 0.5rem; + border: 2px solid currentColor; + border-radius: 1rem; + background: currentColor; + } + } + + .grid { + > * { + padding: calc(var(--spacing) / 2) 0; + border-radius: var(--border-radius); + background: var(--code-background-color); + font-size: 87.5%; + text-align: center; + } + } + + details { + margin-top: calc(var(--typography-spacing-vertical) * 2); + + svg { + vertical-align: bottom; + } + } +} + +// Docs: Buttons +#buttons { + a[role="button"] { + margin-right: calc(var(--spacing) * 0.5); + } +} + +// Docs: Forms +#forms div.grid { + grid-row-gap: 0; +} + +// Docs: Modal +#modal { + button { + --font-weight: bold; + } +} diff --git a/htmx/static/pico-1.5.11/docs/scss/layout/_main.scss b/htmx/static/pico-1.5.11/docs/scss/layout/_main.scss new file mode 100644 index 0000000..83187b5 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/layout/_main.scss @@ -0,0 +1,49 @@ +/** + * Docs: Main (Grid) + */ + +// Config +$navHeight: 3.5rem; + +// Main grid +body > main { + padding-top: calc(var(--block-spacing-vertical) + #{$navHeight}); + + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + grid-column-gap: calc(var(--block-spacing-horizontal) * 3); + display: grid; + grid-template-columns: 200px auto; + } + } + + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } + } + + > aside, + div[role="document"] { + min-width: 0; + } +} + +// External links +div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after +{ + display: inline-block; + width: 1rem; + height: 1rem; + background-image: var(--icon-external); + background-position: top center; + background-size: 0.66rem auto; + background-repeat: no-repeat; + content: ""; +} + +// Embedded SVG +svg { + height: 1rem; +} diff --git a/htmx/static/pico-1.5.11/docs/scss/pico.docs.scss b/htmx/static/pico-1.5.11/docs/scss/pico.docs.scss new file mode 100644 index 0000000..fb5fe80 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/pico.docs.scss @@ -0,0 +1,24 @@ +/*! + * Pico: Customs styles for Docs + */ + +// Config +@import "../../scss/variables"; + +// Theming +@import "themes/docs"; + +// Layout +@import "layout/document"; +@import "layout/main"; +@import "layout/aside"; +@import "layout/documentation"; + +// Content +@import "content/typography"; +@import "content/code"; + +// Components +@import "components/modal"; +@import "components/nav"; +@import "components/theme-switcher"; \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/scss/themes/_docs.scss b/htmx/static/pico-1.5.11/docs/scss/themes/_docs.scss new file mode 100644 index 0000000..5fe0b76 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/themes/_docs.scss @@ -0,0 +1,25 @@ +/** + * Theme: Additions for docs + */ + +@import "../../../scss/themes/default/colors"; +@import "docs/icons"; + +// Light theme (Default) +// Can be forced with data-theme="light" +@import "docs/light"; + +// Dark theme (Auto) +// Automatically enabled if user has Dark mode enabled +@import "docs/dark"; +@media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + @include dark; + } +} + +// Dark theme (Forced) +// Enabled if forced with data-theme="dark" +[data-theme="dark"] { + @include dark; +} diff --git a/htmx/static/pico-1.5.11/docs/scss/themes/docs/_dark.scss b/htmx/static/pico-1.5.11/docs/scss/themes/docs/_dark.scss new file mode 100644 index 0000000..3715a47 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/themes/docs/_dark.scss @@ -0,0 +1,9 @@ +// Dark theme [Additions for docs] +@mixin dark { + --invalid-color: #{rgba($red-900, 0.5)}; + --valid-color: #{rgba($green-800, 0.5)}; + --nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)}; + --nav-border-color: #{rgba($grey-500, 0.2)}; + --nav-logo-color: #{mix($black, $grey-900)}; + --article-code-background-color: var(--code-background-color); +} diff --git a/htmx/static/pico-1.5.11/docs/scss/themes/docs/_icons.scss b/htmx/static/pico-1.5.11/docs/scss/themes/docs/_icons.scss new file mode 100644 index 0000000..d59b143 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/themes/docs/_icons.scss @@ -0,0 +1,9 @@ +@import "../../../../scss/functions"; + +// Icons +// Source: https://feathericons.com/ +:root { + --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' 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='#{to-rgb($white)}' 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($black, 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"); +} diff --git a/htmx/static/pico-1.5.11/docs/scss/themes/docs/_light.scss b/htmx/static/pico-1.5.11/docs/scss/themes/docs/_light.scss new file mode 100644 index 0000000..43a5596 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/scss/themes/docs/_light.scss @@ -0,0 +1,11 @@ +// Light theme (Default) [Additions for docs] +// Can be forced with data-theme="light" +[data-theme="light"], +:root:not([data-theme="dark"]) { + --invalid-color: #{$red-800}; + --valid-color: #{$green-700}; + --nav-background-color: #{rgba($white, 0.7)}; + --nav-border-color: #{rgba($grey-500, 0.2)}; + --nav-logo-color: #{$white}; + --article-code-background-color: #{mix($grey-50, $white, 33%)}; +} diff --git a/htmx/static/pico-1.5.11/docs/src/_footer.html b/htmx/static/pico-1.5.11/docs/src/_footer.html new file mode 100644 index 0000000..12d3be1 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/_footer.html @@ -0,0 +1,4 @@ +
+
+

Code licensed MIT

+
\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/src/_head.html b/htmx/static/pico-1.5.11/docs/src/_head.html new file mode 100644 index 0000000..a600454 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/_head.html @@ -0,0 +1,8 @@ + + +${props.title} • Pico CSS + + + + + \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/src/_nav.html b/htmx/static/pico-1.5.11/docs/src/_nav.html new file mode 100644 index 0000000..04e4b49 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/_nav.html @@ -0,0 +1,23 @@ + \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/src/_sidebar.html b/htmx/static/pico-1.5.11/docs/src/_sidebar.html new file mode 100644 index 0000000..dfdf439 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/_sidebar.html @@ -0,0 +1,74 @@ + diff --git a/htmx/static/pico-1.5.11/docs/src/accordions.html b/htmx/static/pico-1.5.11/docs/src/accordions.html new file mode 100644 index 0000000..48dc49b --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/accordions.html @@ -0,0 +1,98 @@ + + + + ${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.

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

+
+
+ Accordion 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>Accordion 1</summary>
+  <p>…</p>
+</details>
+
+<details open>
+  <summary>Accordion 2</summary>
+  <ul>
+    <li>…</li>
+    <li>…</li>
+  </ul>
+</details>
+ +
+
+

role="button" can be used to turn <summary> into a button.

+
+
+ Accordion 1 +

Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.

+
+
+ Accordion 2 +

Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.

+
+
+ Accordion 3 +

Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.

+
+
+ +
<!-- Primary -->
+<details>
+  <summary role="button">Accordion 1</summary>
+  <p>…</p>
+</details>
+
+<!-- Secondary -->
+<details>
+  <summary role="button" class="secondary">Accordion 2</summary>
+  <p>…</p>
+</details>
+
+<!-- Contrast -->
+<details>
+  <summary role="button" class="contrast">Accordion 3</summary>
+  <p>…</p>
+</details>
+
+
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/htmx/static/pico-1.5.11/docs/src/buttons.html b/htmx/static/pico-1.5.11/docs/src/buttons.html new file mode 100644 index 0000000..7b37c18 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/buttons.html @@ -0,0 +1,77 @@ + + + + ${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 role="button" on an inline element if you need an inline button.

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

Buttons come with .secondary and .contrast styles.

+

ℹ️ These classes are not available in the class-less version.

+
+ 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/htmx/static/pico-1.5.11/docs/src/cards.html b/htmx/static/pico-1.5.11/docs/src/cards.html new file mode 100644 index 0000000..d3861b7 --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/src/classless.html b/htmx/static/pico-1.5.11/docs/src/classless.html new file mode 100644 index 0000000..6321a1a --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/classless.html @@ -0,0 +1,84 @@ + + + + ${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.

+ +
// Containers
+body > header,
+body > main,
+body > footer {
+  …
+}
+
+ +

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 jsDelivr CDN:

+ +
// Centered viewport
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css">
+
+ +
// Fluid viewport
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css">
+
+ +

If you need to customize the default parent (<body>) for <header>, <main>, and <footer>, you can recompile Pico by defining another CSS selector.

+

Useful for React, Gatsby or Next.js.

+ +
/* Custom Class-less version for React */
+
+// Set the root element
+$semantic-root-element: "#root";
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: true;
+
+// Enable .classes
+$enable-classes: false;
+
+// Import Pico
+@import "@picocss/pico/scss/pico";
+ +

The code above will compile Pico with the containers defined like this:

+ +
// Containers
+#root > header,
+#root > main,
+#root > footer {
+  …
+}
+
+ +
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/htmx/static/pico-1.5.11/docs/src/containers.html b/htmx/static/pico-1.5.11/docs/src/containers.html new file mode 100644 index 0000000..63dd3b7 --- /dev/null +++ b/htmx/static/pico-1.5.11/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 children of <body> provide a responsive vertical padding

+

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

+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/htmx/static/pico-1.5.11/docs/src/customization.html b/htmx/static/pico-1.5.11/docs/src/customization.html new file mode 100644 index 0000000..c56913d --- /dev/null +++ b/htmx/static/pico-1.5.11/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]) {
+    --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 Pico
+@import "@picocss/pico/scss/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 "@picocss/pico/scss/pico/layout/document";
+@import "@picocss/pico/scss/pico/layout/sectioning";
+…
+
+ +

Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.

+
+ + ${require('./_footer.html')} + +
+
+ + + + diff --git a/htmx/static/pico-1.5.11/docs/src/dropdowns.html b/htmx/static/pico-1.5.11/docs/src/dropdowns.html new file mode 100644 index 0000000..9b9146c --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/dropdowns.html @@ -0,0 +1,379 @@ + + + + ${require('./_head.html') + title=`Dropdowns` + description=`Dropdown menus and custom selects without JavaScript.` + canonical=`dropdowns.html` + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active=`dropdowns-link`} + +
+ + + ${require('./_footer.html')} + +
+
+ + + diff --git a/htmx/static/pico-1.5.11/docs/src/forms.html b/htmx/static/pico-1.5.11/docs/src/forms.html new file mode 100644 index 0000000..7f6f41b --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/forms.html @@ -0,0 +1,272 @@ + + + + ${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 native 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>
+  <label for="extralarge">
+    <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
+    Extra Large
+  </label>
+</fieldset>
+
+<!-- Checkboxes -->
+<fieldset>
+  <label for="terms">
+    <input type="checkbox" id="terms" name="terms">
+    I agree to the Terms and Conditions
+  </label>
+  <label for="terms_sharing">
+    <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
+    I agree to share my information with partners
+  </label>
+</fieldset>
+
+<!-- Switches -->
+<fieldset>
+  <label for="switch">
+    <input type="checkbox" id="switch" name="switch" role="switch">
+    Publish on my profile
+  </label>
+  <label for="switch_disabled">
+    <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch_disabled" disabled checked>
+    User must change password at next logon
+  </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:

+
+ + + + + + +
+ +
<!-- Search -->
+<input type="search" id="search" name="search" placeholder="Search">
+
+<!-- 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/htmx/static/pico-1.5.11/docs/src/grid.html b/htmx/static/pico-1.5.11/docs/src/grid.html new file mode 100644 index 0000000..6083516 --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/src/index.html b/htmx/static/pico-1.5.11/docs/src/index.html new file mode 100644 index 0000000..5c52c54 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/index.html @@ -0,0 +1,59 @@ + + + + ${require('./_head.html') + title=`Documentation` + description=`Pico works without package manager or dependencies! There are 4 ways to get started with Pico CSS: manually, from a CDN, with NPM, or with Composer.` + canonical=`` + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active=`start-link`} + +
+
+
+

Usage

+

Works without package manager or dependencies 🙂!

+
+

There are 4 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 jsDelivr CDN to link pico.css

+ 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
+

Install with NPM

+ 
npm install @picocss/pico
+

Install with Composer

+ 
composer require 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/htmx/static/pico-1.5.11/docs/src/loading.html b/htmx/static/pico-1.5.11/docs/src/loading.html new file mode 100644 index 0000000..b2fe190 --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/src/modal.html b/htmx/static/pico-1.5.11/docs/src/modal.html new file mode 100644 index 0000000..5feb1ce --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/modal.html @@ -0,0 +1,206 @@ + + + + ${require('./_head.html') + title=`Modal` + description=`A flexible container with graceful spacings across devices and viewports.` + canonical=`modal.html` + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active=`modal-link`} + +
+ + + ${require('./_footer.html')} + +
+
+ + +
+ +

Confirm your action!

+

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

+ +
+ + + + + + + + \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/src/navs.html b/htmx/static/pico-1.5.11/docs/src/navs.html new file mode 100644 index 0000000..f109deb --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/navs.html @@ -0,0 +1,157 @@ + + + + ${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')} + +
+
+ + + + \ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/src/progress.html b/htmx/static/pico-1.5.11/docs/src/progress.html new file mode 100644 index 0000000..e5ce1e2 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/progress.html @@ -0,0 +1,48 @@ + + + + ${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>
+ +
+
+

A progress bar without a value attribute is indeterminate.

+
+ +
+ +
<progress></progress>
+ +
+
+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/htmx/static/pico-1.5.11/docs/src/rtl.html b/htmx/static/pico-1.5.11/docs/src/rtl.html new file mode 100644 index 0000000..479a307 --- /dev/null +++ b/htmx/static/pico-1.5.11/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 (example).

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

ℹ️ The RTL feature is still experimental and will probably evolve.

+
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/htmx/static/pico-1.5.11/docs/src/scroller.html b/htmx/static/pico-1.5.11/docs/src/scroller.html new file mode 100644 index 0000000..bea1ab4 --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/src/tables.html b/htmx/static/pico-1.5.11/docs/src/tables.html new file mode 100644 index 0000000..d097f00 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/tables.html @@ -0,0 +1,177 @@ + + + + ${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
#TotalTotalTotalTotalTotal
+
+ +
<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>
+  <tfoot>
+    <tr>
+      <th scope="col">#</th>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+    </tr>
+  </tfoot>
+</table>
+ +

role="grid" enable striped rows.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
+
+ +
<table role="grid">
+  …
+</table>
+ +
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/htmx/static/pico-1.5.11/docs/src/themes.html b/htmx/static/pico-1.5.11/docs/src/themes.html new file mode 100644 index 0000000..1f6cb99 --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/src/tooltips.html b/htmx/static/pico-1.5.11/docs/src/tooltips.html new file mode 100644 index 0000000..be225a3 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/tooltips.html @@ -0,0 +1,65 @@ + + + + ${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>
+
+ +
+
+ +

data-placement with the values top, right, bottom or left is used to control the position of the tooltip.

+ +
+
+
+
+
+
+
+
+ +
<button data-tooltip="Top" data-placement="top">Top</button>
+<button data-tooltip="Right" data-placement="right">Right</button>
+<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
+<button data-tooltip="Left" data-placement="left">Left</button>
+
+ +
+
+ +
+ + ${require('./_footer.html')} + +
+
+ + + diff --git a/htmx/static/pico-1.5.11/docs/src/typography.html b/htmx/static/pico-1.5.11/docs/src/typography.html new file mode 100644 index 0000000..55cdc1f --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/typography.html @@ -0,0 +1,208 @@ + + + + ${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.625px17.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> or a + <div class="headings"> all + margin-bottom are collapsed and the + :last-child is muted. +

+
+
+

Heading 2

+

Subtitle for heading 2

+
+
+ 
<hgroup>
+  <h2>Heading 2</h2>
+  <p>Subtitle for heading 2</p>
+</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.

+

ℹ️ These classes are not available in the class-less version.

+
+ 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/htmx/static/pico-1.5.11/docs/src/we-love-classes.html b/htmx/static/pico-1.5.11/docs/src/we-love-classes.html new file mode 100644 index 0000000..e3718df --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/tables.html b/htmx/static/pico-1.5.11/docs/tables.html new file mode 100644 index 0000000..869c8c4 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/tables.html @@ -0,0 +1,50 @@ +Tables • Pico CSS

Tables

Default styles for tables without .classes

#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
#TotalTotalTotalTotalTotal
<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>
+  <tfoot>
+    <tr>
+      <th scope="col">#</th>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+    </tr>
+  </tfoot>
+</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/htmx/static/pico-1.5.11/docs/themes.html b/htmx/static/pico-1.5.11/docs/themes.html new file mode 100644 index 0000000..9c8c911 --- /dev/null +++ b/htmx/static/pico-1.5.11/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/htmx/static/pico-1.5.11/docs/tooltips.html b/htmx/static/pico-1.5.11/docs/tooltips.html new file mode 100644 index 0000000..107c757 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/tooltips.html @@ -0,0 +1,8 @@ +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>
+

data-placement with the values top, right, bottom or left is used to control the position of the tooltip.

<button data-tooltip="Top" data-placement="top">Top</button>
+<button data-tooltip="Right" data-placement="right">Right</button>
+<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
+<button data-tooltip="Left" data-placement="left">Left</button>
+

Code licensed MIT

\ No newline at end of file diff --git a/htmx/static/pico-1.5.11/docs/typography.html b/htmx/static/pico-1.5.11/docs/typography.html new file mode 100644 index 0000000..3401918 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/typography.html @@ -0,0 +1,17 @@ +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.625px17.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> or a <div class="headings"> all margin-bottom are collapsed and the :last-child is muted.

Heading 2

Subtitle for heading 2

<hgroup>
+  <h2>Heading 2</h2>
+  <p>Subtitle for heading 2</p>
+</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.

ℹ️ These classes are not available in the class-less version.

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/htmx/static/pico-1.5.11/docs/we-love-classes.html b/htmx/static/pico-1.5.11/docs/we-love-classes.html new file mode 100644 index 0000000..2e0944e --- /dev/null +++ b/htmx/static/pico-1.5.11/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 -- cgit v1.2.3