diff --git a/README.md b/README.md index c365cbde..82678526 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Pico uses simple native HTML tags as much as possible. Less than 10 .classes are No dependencies, package manager, external files, or JavaScript. **Responsive everything** -Elegant and consistent adaptative spacings and typography on all devices. +Elegant and consistent adaptive spacings and typography on all devices. **Light or Dark mode** Shipped with two beautiful color themes, automatically enabled according to the user preference. @@ -70,9 +70,9 @@ npm install @picocss/pico ## Class-less version -Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)). +Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)). -In this version, `header`, `main` and `footer` act as container. +In this version, `header`, `main` and `footer` act as containers. Use the default `.classless` version if you need centered viewports: @@ -184,4 +184,4 @@ Website and docs: Pico Library: - [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE)) - [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md)) -- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md)) \ No newline at end of file +- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md)) diff --git a/docs/containers.html b/docs/containers.html index f1610d9a..42a383bf 100644 --- a/docs/containers.html +++ b/docs/containers.html @@ -1,3 +1,3 @@ Containers • Pico.css

Containers

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

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

Pico uses the same breakpoints and viewports sizes as Bootstrap.

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

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

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

\ No newline at end of file +</body>

Pico uses the same breakpoints and viewports sizes as Bootstrap.

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

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

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

\ No newline at end of file diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index 9b9ad88e..5645b025 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -90,14 +90,13 @@ svg { */ main > aside nav { width: 100%; - margin-bottom: calc(var(--block-spacing-vertical) * 2); + padding-bottom: var(--block-spacing-vertical); } @media (min-width: 992px) { main > aside nav { position: fixed; width: 200px; max-height: calc(100vh - 5.5rem); - margin-bottom: 0; overflow-x: hidden; overflow-y: auto; } @@ -118,9 +117,6 @@ main > aside nav a#toggle-docs-navigation svg { display: none; } } -main > aside nav.closed-on-mobile { - margin-bottom: var(--block-spacing-vertical); -} main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse { display: none; } diff --git a/docs/css/pico.docs.css.map b/docs/css/pico.docs.css.map index 1f67910a..63d824f2 100644 --- a/docs/css/pico.docs.css.map +++ b/docs/css/pico.docs.css.map @@ -1 +1 @@ -{"version":3,"sources":["../scss/pico.docs.scss","../scss/themes/_docs.scss","../scss/themes/docs/_icons.scss","pico.docs.css","../scss/themes/docs/_light.scss","../scss/themes/docs/_dark.scss","../scss/layout/_document.scss","../scss/layout/_main.scss","../scss/layout/_aside.scss","../scss/layout/_documentation.scss","../scss/content/_typography.scss","../scss/content/_code.scss","../scss/components/_modal.scss","../scss/components/_nav.scss","../scss/components/_theme-switcher.scss"],"names":[],"mappings":"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","file":"pico.docs.css","sourcesContent":["/*!\n * Pico: Customs styles for Docs\n */\n\n// Config\n@import \"../../scss/variables\";\n\n// Theming\n@import \"themes/docs\";\n\n// Layout\n@import \"layout/document\";\n@import \"layout/main\";\n@import \"layout/aside\";\n@import \"layout/documentation\";\n\n// Content\n@import \"content/typography\";\n@import \"content/code\";\n\n// Components\n@import \"components/modal\";\n@import \"components/nav\";\n@import \"components/theme-switcher\";\n","/**\n * Theme: Additions for docs\n */\n\n@import \"../../../scss/themes/default/colors\";\n@import \"docs/icons\";\n\n// Light theme (Default)\n// Can be forced with data-theme=\"light\"\n@import \"docs/light\";\n\n// Dark theme (Auto)\n// Automatically enabled if user has Dark mode enabled\n@import \"docs/dark\";\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n @include dark;\n }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-theme=\"dark\"] {\n @include dark;\n}\n","// Icons\n// Source: https://feathericons.com/\n:root {\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --invalid-color: #c62828;\n --valid-color: #388e3c;\n --nav-background-color: rgba(255, 255, 255, 0.7);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #fff;\n --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n }\n}\n[data-theme=dark] {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 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\"]):not([role])::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-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 margin-bottom: calc(var(--block-spacing-vertical) * 2);\n}\n@media (min-width: 992px) {\n main > aside nav {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n }\n}\nmain > aside nav a#toggle-docs-navigation {\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 {\n margin-bottom: var(--block-spacing-vertical);\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 li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside li a {\n padding: 0.375rem 0.5rem;\n}\nmain > aside li a svg {\n vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n}\nmain > aside a.active,\nmain > aside a.active:hover {\n color: var(--primary);\n}\nmain > aside details {\n 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: calc(var(--spacing) * 0.75);\n}\nmain > aside details[open] > summary:not(: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#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\na[role=button] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n 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 -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 li:first-of-type a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n}\n@media (min-width: 992px) {\n body > nav ul:first-of-type li:nth-of-type(2) {\n display: inline;\n }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + 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\"]):not([role])::after\n{\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-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 margin-bottom: calc(var(--block-spacing-vertical) * 2);\n \n @media (min-width: map-get($breakpoints, \"lg\")) {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n a#toggle-docs-navigation {\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 margin-bottom: var(--block-spacing-vertical);\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\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n li a {\n padding: 0.375rem 0.5rem;\n\n svg {\n vertical-align: middle;\n }\n }\n\n a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n }\n\n a.active,\n a.active:hover {\n color: var(--primary);\n }\n\n details {\n 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: calc(var(--spacing) * 0.75);\n\n &:not(: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: 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\na[role=\"button\"] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=\"document\"] {\n section > h1,\n section > h2,\n section > h3 {\n line-height: 1;\n }\n}\n","/**\n * Docs: Code\n */\n\n// Code block inside article\narticle > footer.code {\n background: var(--article-code-background-color);\n}\narticle pre,\narticle pre code {\n 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 -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 li {\n // Brand\n &:first-of-type {\n a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n\n svg {\n height: 3.5rem;\n }\n }\n }\n\n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + 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 +{"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":"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","file":"pico.docs.css","sourcesContent":["/*!\n * Pico: Customs styles for Docs\n */\n\n// Config\n@import \"../../scss/variables\";\n\n// Theming\n@import \"themes/docs\";\n\n// Layout\n@import \"layout/document\";\n@import \"layout/main\";\n@import \"layout/aside\";\n@import \"layout/documentation\";\n\n// Content\n@import \"content/typography\";\n@import \"content/code\";\n\n// Components\n@import \"components/modal\";\n@import \"components/nav\";\n@import \"components/theme-switcher\";\n","/**\n * Theme: Additions for docs\n */\n\n@import \"../../../scss/themes/default/colors\";\n@import \"docs/icons\";\n\n// Light theme (Default)\n// Can be forced with data-theme=\"light\"\n@import \"docs/light\";\n\n// Dark theme (Auto)\n// Automatically enabled if user has Dark mode enabled\n@import \"docs/dark\";\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n @include dark;\n }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-theme=\"dark\"] {\n @include dark;\n}\n","// Icons\n// Source: https://feathericons.com/\n:root {\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --invalid-color: #c62828;\n --valid-color: #388e3c;\n --nav-background-color: rgba(255, 255, 255, 0.7);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #fff;\n --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n }\n}\n[data-theme=dark] {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 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\"]):not([role])::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-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 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 li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside li a {\n padding: 0.375rem 0.5rem;\n}\nmain > aside li a svg {\n vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n}\nmain > aside a.active,\nmain > aside a.active:hover {\n color: var(--primary);\n}\nmain > aside details {\n 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: calc(var(--spacing) * 0.75);\n}\nmain > aside details[open] > summary:not(: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#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\na[role=button] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n 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 -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 li:first-of-type a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n}\n@media (min-width: 992px) {\n body > nav ul:first-of-type li:nth-of-type(2) {\n display: inline;\n }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + 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\"]):not([role])::after\n{\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-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 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\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n li a {\n padding: 0.375rem 0.5rem;\n\n svg {\n vertical-align: middle;\n }\n }\n\n a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n }\n\n a.active,\n a.active:hover {\n color: var(--primary);\n }\n\n details {\n 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: calc(var(--spacing) * 0.75);\n\n &:not(: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: 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\na[role=\"button\"] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=\"document\"] {\n section > h1,\n section > h2,\n section > h3 {\n line-height: 1;\n }\n}\n","/**\n * Docs: Code\n */\n\n// Code block inside article\narticle > footer.code {\n background: var(--article-code-background-color);\n}\narticle pre,\narticle pre code {\n 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 -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 li {\n // Brand\n &:first-of-type {\n a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n\n svg {\n height: 3.5rem;\n }\n }\n }\n\n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + 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/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index b39370af..d75bcbda 100644 --- a/docs/css/pico.docs.min.css +++ b/docs/css/pico.docs.min.css @@ -1,4 +1,4 @@ /*! * Pico: Customs styles for Docs - */:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-check-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--invalid-color:#c62828;--valid-color:#388e3c;--nav-background-color:rgba(255, 255, 255, 0.7);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#fff;--article-code-background-color:#f9fafb}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0e1419;--article-code-background-color:var(--code-background-color)}}[data-theme=dark]{--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0e1419;--article-code-background-color:var(--code-background-color)}html{scroll-behavior:smooth}body>main{padding-top:calc(var(--block-spacing-vertical) + 3.5rem)}@media (min-width:992px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 1.75);grid-column-gap:calc(var(--block-spacing-horizontal) * 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"]):not([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%;margin-bottom:calc(var(--block-spacing-vertical) * 2)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}}main>aside nav a#toggle-docs-navigation{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{margin-bottom:var(--block-spacing-vertical)}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 li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:.375rem .5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{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:calc(var(--spacing) * .75)}main>aside details[open]>summary:not(: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}#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)}a[role=button]{margin-right:calc(var(--typography-spacing-vertical)/ 4);margin-bottom:var(--typography-spacing-vertical)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}article>footer.code{background:var(--article-code-background-color)}article pre,article pre code{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{-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 li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing) * -1);padding:0;background:var(--h1-color);color:var(--nav-logo-color)}body>nav ul:first-of-type li:first-of-type a svg{height:3.5rem}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing);color:var(--h1-color)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing)/ 2 + 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))}} + */:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-check-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--invalid-color:#c62828;--valid-color:#388e3c;--nav-background-color:rgba(255, 255, 255, 0.7);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#fff;--article-code-background-color:#f9fafb}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0e1419;--article-code-background-color:var(--code-background-color)}}[data-theme=dark]{--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0e1419;--article-code-background-color:var(--code-background-color)}html{scroll-behavior:smooth}body>main{padding-top:calc(var(--block-spacing-vertical) + 3.5rem)}@media (min-width:992px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 1.75);grid-column-gap:calc(var(--block-spacing-horizontal) * 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"]):not([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{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 li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:.375rem .5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{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:calc(var(--spacing) * .75)}main>aside details[open]>summary:not(: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}#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)}a[role=button]{margin-right:calc(var(--typography-spacing-vertical)/ 4);margin-bottom:var(--typography-spacing-vertical)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}article>footer.code{background:var(--article-code-background-color)}article pre,article pre code{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{-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 li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing) * -1);padding:0;background:var(--h1-color);color:var(--nav-logo-color)}body>nav ul:first-of-type li:first-of-type a svg{height:3.5rem}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing);color:var(--h1-color)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing)/ 2 + 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/docs/css/pico.docs.min.css.map b/docs/css/pico.docs.min.css.map index a7f594e8..cccf7dfb 100644 --- a/docs/css/pico.docs.min.css.map +++ b/docs/css/pico.docs.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["docs/scss/pico.docs.scss","docs/scss/themes/docs/_icons.scss","docs/css/pico.docs.css","docs/scss/themes/docs/_light.scss","docs/scss/themes/_docs.scss","docs/scss/themes/docs/_dark.scss","docs/scss/layout/_document.scss","docs/scss/layout/_main.scss","docs/scss/layout/_aside.scss","docs/scss/layout/_documentation.scss","docs/scss/content/_typography.scss","docs/scss/content/_code.scss","docs/scss/components/_modal.scss","docs/scss/components/_nav.scss","docs/scss/components/_theme-switcher.scss"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Pico: Customs styles for Docs\n */\n\n// Config\n@import \"../../scss/variables\";\n\n// Theming\n@import \"themes/docs\";\n\n// Layout\n@import \"layout/document\";\n@import \"layout/main\";\n@import \"layout/aside\";\n@import \"layout/documentation\";\n\n// Content\n@import \"content/typography\";\n@import \"content/code\";\n\n// Components\n@import \"components/modal\";\n@import \"components/nav\";\n@import \"components/theme-switcher\";\n","// Icons\n// Source: https://feathericons.com/\n:root {\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --invalid-color: #c62828;\n --valid-color: #388e3c;\n --nav-background-color: rgba(255, 255, 255, 0.7);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #fff;\n --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n }\n}\n[data-theme=dark] {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 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\"]):not([role])::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-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 margin-bottom: calc(var(--block-spacing-vertical) * 2);\n}\n@media (min-width: 992px) {\n main > aside nav {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n }\n}\nmain > aside nav a#toggle-docs-navigation {\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 {\n margin-bottom: var(--block-spacing-vertical);\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 li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside li a {\n padding: 0.375rem 0.5rem;\n}\nmain > aside li a svg {\n vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n}\nmain > aside a.active,\nmain > aside a.active:hover {\n color: var(--primary);\n}\nmain > aside details {\n 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: calc(var(--spacing) * 0.75);\n}\nmain > aside details[open] > summary:not(: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#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\na[role=button] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n 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 -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 li:first-of-type a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n}\n@media (min-width: 992px) {\n body > nav ul:first-of-type li:nth-of-type(2) {\n display: inline;\n }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + 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\"]):not([role])::after\n{\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-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 margin-bottom: calc(var(--block-spacing-vertical) * 2);\n \n @media (min-width: map-get($breakpoints, \"lg\")) {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n margin-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n a#toggle-docs-navigation {\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 margin-bottom: var(--block-spacing-vertical);\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\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n li a {\n padding: 0.375rem 0.5rem;\n\n svg {\n vertical-align: middle;\n }\n }\n\n a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n }\n\n a.active,\n a.active:hover {\n color: var(--primary);\n }\n\n details {\n 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: calc(var(--spacing) * 0.75);\n\n &:not(: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: 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\na[role=\"button\"] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=\"document\"] {\n section > h1,\n section > h2,\n section > h3 {\n line-height: 1;\n }\n}\n","/**\n * Docs: Code\n */\n\n// Code block inside article\narticle > footer.code {\n background: var(--article-code-background-color);\n}\narticle pre,\narticle pre code {\n 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 -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 li {\n // Brand\n &:first-of-type {\n a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n\n svg {\n height: 3.5rem;\n }\n }\n }\n\n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + 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 +{"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":"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","sourcesContent":["/*!\n * Pico: Customs styles for Docs\n */\n\n// Config\n@import \"../../scss/variables\";\n\n// Theming\n@import \"themes/docs\";\n\n// Layout\n@import \"layout/document\";\n@import \"layout/main\";\n@import \"layout/aside\";\n@import \"layout/documentation\";\n\n// Content\n@import \"content/typography\";\n@import \"content/code\";\n\n// Components\n@import \"components/modal\";\n@import \"components/nav\";\n@import \"components/theme-switcher\";\n","// Icons\n// Source: https://feathericons.com/\n:root {\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --invalid-color: #c62828;\n --valid-color: #388e3c;\n --nav-background-color: rgba(255, 255, 255, 0.7);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #fff;\n --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n }\n}\n[data-theme=dark] {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 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\"]):not([role])::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-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 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 li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside li a {\n padding: 0.375rem 0.5rem;\n}\nmain > aside li a svg {\n vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n}\nmain > aside a.active,\nmain > aside a.active:hover {\n color: var(--primary);\n}\nmain > aside details {\n 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: calc(var(--spacing) * 0.75);\n}\nmain > aside details[open] > summary:not(: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#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\na[role=button] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n 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 -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 li:first-of-type a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n}\n@media (min-width: 992px) {\n body > nav ul:first-of-type li:nth-of-type(2) {\n display: inline;\n }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + 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\"]):not([role])::after\n{\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-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 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\n li,\n summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n }\n\n li a {\n padding: 0.375rem 0.5rem;\n\n svg {\n vertical-align: middle;\n }\n }\n\n a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n }\n\n a.active,\n a.active:hover {\n color: var(--primary);\n }\n\n details {\n 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: calc(var(--spacing) * 0.75);\n\n &:not(: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: 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\na[role=\"button\"] {\n margin-right: calc(var(--typography-spacing-vertical) / 4);\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n[role=\"document\"] {\n section > h1,\n section > h2,\n section > h3 {\n line-height: 1;\n }\n}\n","/**\n * Docs: Code\n */\n\n// Code block inside article\narticle > footer.code {\n background: var(--article-code-background-color);\n}\narticle pre,\narticle pre code {\n 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 -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 li {\n // Brand\n &:first-of-type {\n a {\n width: 3.5rem;\n height: 3.5rem;\n margin-left: calc(var(--spacing) * -1);\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n\n svg {\n height: 3.5rem;\n }\n }\n }\n\n // Title\n &:nth-of-type(2) {\n display: none;\n margin-left: var(--spacing);\n color: var(--h1-color);\n\n @media (min-width: map-get($breakpoints, \"lg\")) {\n display: inline;\n }\n }\n }\n}\n","/**\n * Docs: Theme switcher\n */\n\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + 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/docs/scss/layout/_aside.scss b/docs/scss/layout/_aside.scss index f413e856..ea4d2fc4 100644 --- a/docs/scss/layout/_aside.scss +++ b/docs/scss/layout/_aside.scss @@ -6,13 +6,12 @@ main > aside { nav { width: 100%; - margin-bottom: calc(var(--block-spacing-vertical) * 2); + padding-bottom: var(--block-spacing-vertical); @media (min-width: map-get($breakpoints, "lg")) { position: fixed; width: 200px; max-height: calc(100vh - 5.5rem); - margin-bottom: 0; overflow-x: hidden; overflow-y: auto; } @@ -35,7 +34,6 @@ main > aside { } &.closed-on-mobile { - margin-bottom: var(--block-spacing-vertical); a#toggle-docs-navigation { svg.collapse { diff --git a/docs/src/containers.html b/docs/src/containers.html index fde62594..cd1f1ef5 100644 --- a/docs/src/containers.html +++ b/docs/src/containers.html @@ -62,7 +62,7 @@

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

-

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

+

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

${require('./_footer.html')}