mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 16:46:14 -04:00
1 line
No EOL
32 KiB
Text
1 line
No EOL
32 KiB
Text
{"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":["/*!\r\n * Pico: Customs styles for Docs\r\n */\r\n\r\n// Config\r\n@import \"../../scss/variables\";\r\n\r\n// Theming\r\n@import \"themes/docs\";\r\n\r\n// Layout\r\n@import \"layout/document\";\r\n@import \"layout/main\";\r\n@import \"layout/aside\";\r\n@import \"layout/documentation\";\r\n\r\n// Content\r\n@import \"content/typography\";\r\n@import \"content/code\";\r\n\r\n// Components\r\n@import \"components/modal\";\r\n@import \"components/nav\";\r\n@import \"components/theme-switcher\";","@import \"../../../../scss/functions\";\r\n\r\n// Icons\r\n// Source: https://feathericons.com/\r\n:root {\r\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\r\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\r\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($black, 0.75)}' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\r\n}\r\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n --icon-external: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\");\n --icon-check: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n --icon-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --invalid-color: #c62828;\n --valid-color: #388e3c;\n --nav-background-color: rgba(255, 255, 255, 0.7);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #fff;\n --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n }\n}\n[data-theme=dark] {\n --invalid-color: rgba(183, 28, 28, 0.5);\n --valid-color: rgba(46, 125, 50, 0.5);\n --nav-background-color: rgba(16, 24, 30, 0.8);\n --nav-border-color: rgba(115, 130, 140, 0.2);\n --nav-logo-color: #0e1419;\n --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n grid-column-gap: calc(var(--block-spacing-horizontal) * 3);\n display: grid;\n grid-template-columns: 200px auto;\n }\n}\n@media (min-width: 1200px) {\n body > main {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n}\nbody > main > aside,\nbody > main div[role=document] {\n min-width: 0;\n}\n\ndiv[role=document] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"], [role])::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n background-image: var(--icon-external);\n background-position: top center;\n background-size: 0.66rem auto;\n background-repeat: no-repeat;\n content: \"\";\n}\n\nsvg {\n height: 1rem;\n}\n\n/**\n * Docs: Aside\n */\nmain > aside nav {\n width: 100%;\n padding-bottom: var(--block-spacing-vertical);\n}\n@media (min-width: 992px) {\n main > aside nav {\n position: fixed;\n width: 200px;\n max-height: calc(100vh - 5.5rem);\n overflow-x: hidden;\n overflow-y: auto;\n }\n}\nmain > aside nav a#toggle-docs-navigation {\n display: block;\n margin: 0;\n margin-bottom: var(--spacing);\n padding: 0;\n padding-bottom: var(--spacing);\n border-bottom: var(--border-width) solid var(--accordion-border-color);\n}\nmain > aside nav a#toggle-docs-navigation svg {\n margin-right: calc(var(--spacing) * 0.5);\n vertical-align: -3px;\n}\n@media (min-width: 992px) {\n main > aside nav a#toggle-docs-navigation {\n display: none;\n }\n}\nmain > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {\n display: none;\n}\nmain > aside nav.closed-on-mobile details {\n display: none;\n}\n@media (min-width: 992px) {\n main > aside nav.closed-on-mobile details {\n display: block;\n }\n main > aside nav.closed-on-mobile > a#toggle-docs-navigation {\n display: none;\n }\n}\nmain > aside nav.open a#toggle-docs-navigation svg.expand {\n display: none;\n}\nmain > aside details {\n padding-bottom: 0;\n}\nmain > aside details summary {\n padding-bottom: 0.5rem;\n}\nmain > aside li,\nmain > aside summary {\n padding-top: 0;\n padding-bottom: 0;\n font-size: 16px;\n}\nmain > aside ul {\n padding-left: 0.25rem;\n}\nmain > aside li a {\n --nav-link-spacing-vertical: 0.25rem;\n --nav-link-spacing-horizontal: 0.75rem;\n}\nmain > aside li a svg {\n vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n background-color: transparent;\n color: var(--primary-hover);\n}\nmain > aside a[aria-current],\nmain > aside a[aria-current]:hover {\n color: var(--primary);\n}\nmain > aside details {\n border-bottom: none;\n}\nmain > aside details summary {\n color: var(--h1-color);\n font-weight: 300;\n font-size: 14px;\n text-transform: uppercase;\n}\nmain > aside details summary::after {\n display: none;\n}\nmain > aside details[open] > summary {\n margin-bottom: 0;\n}\nmain > aside details[open] > summary:not([role=button], :focus) {\n color: var(--h1-color);\n}\n\n/**\n * Docs: Documentation\n */\n#themes button.theme-switcher:first-of-type {\n --font-weight: bold;\n}\n#themes button.theme-switcher i {\n font-style: normal;\n}\n\n#customization figure {\n display: grid;\n grid-template-rows: repeat(2, 1fr);\n grid-template-columns: repeat(9, 1fr);\n margin-bottom: 0;\n overflow: hidden;\n}\n@media (min-width: 576px) {\n #customization figure {\n grid-template-rows: 1fr;\n grid-template-columns: repeat(18, 1fr);\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n}\n#customization figure ~ article {\n margin-top: 0;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n}\n#customization figure button {\n margin-bottom: 0;\n padding: 0;\n padding-top: 100%;\n border: none;\n border-radius: 0;\n}\n#customization figure button:focus {\n box-shadow: none;\n}\n#customization figure button.picked {\n background-image: var(--icon-check);\n background-position: center;\n background-size: 0.66rem auto;\n background-repeat: no-repeat;\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n}\n#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {\n background-image: var(--icon-check-dark);\n}\n#customization h4 {\n transition: color var(--transition);\n}\n#customization pre[data-theme=generated] {\n border-color: var(--primary);\n}\n\n#grid {\n --grid-spacing-vertical: 1rem;\n}\n#grid button {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n}\n@media (min-width: 576px) {\n #grid button {\n display: inline-block;\n width: auto;\n margin-right: 0.5rem;\n }\n}\n#grid button svg {\n stroke: var(--secondary);\n margin-right: 0.5rem;\n border: 2px solid currentColor;\n border-radius: 1rem;\n background: currentColor;\n}\n#grid .grid > * {\n padding: calc(var(--spacing) / 2) 0;\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n font-size: 87.5%;\n text-align: center;\n}\n#grid details {\n margin-top: calc(var(--typography-spacing-vertical) * 2);\n}\n#grid details svg {\n vertical-align: bottom;\n}\n\n#buttons a[role=button] {\n margin-right: calc(var(--spacing) * 0.5);\n}\n\n#forms div.grid {\n grid-row-gap: 0;\n}\n\n#modal button {\n --font-weight: bold;\n}\n\n/**\n * Docs: Typography\n */\nh1 {\n margin-top: -0.25em;\n}\n\nsection > hgroup {\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n margin-bottom: 0;\n background: transparent;\n}\n\nsection > pre {\n margin: var(--block-spacing-vertical) 0;\n padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);\n background: var(--article-code-background-color);\n box-shadow: var(--card-box-shadow);\n}\n\n[data-theme=invalid],\n[data-theme=valid] {\n position: relative;\n margin-bottom: 0 !important;\n}\n[data-theme=invalid]:before,\n[data-theme=valid]:before {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.375rem 0.75rem;\n border-radius: 0;\n color: var(--primary-inverse);\n font-size: 14px;\n line-height: 1;\n}\n@media (min-width: 992px) {\n [data-theme=invalid]:before,\n [data-theme=valid]:before {\n top: var(--spacing);\n right: var(--spacing);\n }\n}\n[data-theme=invalid] code,\n[data-theme=valid] code {\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);\n}\n\n[data-theme=invalid]:before {\n background: var(--invalid-color);\n content: \"Not so great\";\n}\n\n[data-theme=valid]:before {\n background: var(--valid-color);\n content: \"Great\";\n}\n\n/**\n * Docs: Modal\n */\ndialog.example {\n display: block;\n z-index: inherit;\n position: relative;\n top: inherit;\n right: inherit;\n bottom: inherit;\n left: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: inherit;\n min-width: inherit;\n height: inherit;\n min-height: inherit;\n padding: 0;\n background-color: inherit;\n}\ndialog.example article {\n max-width: inherit;\n}\ndialog.example:not([open]), dialog.example[open=false] {\n display: none;\n}\n\n.dialog-is-open body > button {\n filter: blur(0.125rem);\n}\n\n/**\n * Docs: Navs\n */\nbody > nav {\n --nav-link-spacing-vertical: 1rem;\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n z-index: 99;\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: var(--nav-background-color);\n box-shadow: 0px 1px 0 var(--nav-border-color);\n}\nbody > nav.container-fluid {\n padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));\n}\nbody > nav a {\n border-radius: 0;\n}\nbody > nav svg {\n vertical-align: text-bottom;\n}\nbody > nav ul:first-of-type {\n margin-left: calc(var(--spacing) * -1);\n}\nbody > nav ul:first-of-type li {\n padding: 0;\n}\nbody > nav ul:first-of-type li:first-of-type a {\n display: block;\n margin: 0;\n padding: 0;\n background: var(--h1-color);\n color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n display: block;\n width: 3.5rem;\n height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n display: none;\n margin-left: calc(var(--spacing) * 1.5);\n color: var(--h1-color);\n}\n@media (min-width: 992px) {\n body > nav ul:first-of-type li:nth-of-type(2) {\n display: inline;\n }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n position: fixed;\n right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));\n bottom: var(--spacing);\n width: auto;\n margin-bottom: 0;\n padding: 0.75rem;\n border-radius: 2rem;\n box-shadow: var(--card-box-shadow);\n line-height: 1;\n text-align: right;\n}\n.switcher::after {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 0.15rem solid currentColor;\n border-radius: 50%;\n background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);\n content: \"\";\n vertical-align: bottom;\n transition: transform var(--transition);\n}\n.switcher i {\n display: inline-block;\n max-width: 0;\n padding: 0;\n overflow: hidden;\n font-style: normal;\n font-size: 0.875rem;\n white-space: nowrap;\n}\n.switcher:hover, .switcher:focus {\n max-width: 100%;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n.switcher:hover::after {\n transform: rotate(180deg);\n}\n.switcher:hover i {\n max-width: 100%;\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n transition: max-width var(--transition), padding var(--transition);\n}\n.switcher:focus {\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n}\n@media (min-width: 576px) {\n .switcher {\n right: calc(var(--spacing) + var(--scrollbar-width, 0px));\n }\n}\n\n/*# sourceMappingURL=pico.docs.css.map */","// Light theme (Default) [Additions for docs]\r\n// Can be forced with data-theme=\"light\"\r\n[data-theme=\"light\"],\r\n:root:not([data-theme=\"dark\"]) {\r\n --invalid-color: #{$red-800};\r\n --valid-color: #{$green-700};\r\n --nav-background-color: #{rgba($white, 0.7)};\r\n --nav-border-color: #{rgba($grey-500, 0.2)};\r\n --nav-logo-color: #{$white};\r\n --article-code-background-color: #{mix($grey-50, $white, 33%)};\r\n}\r\n","/**\r\n * Theme: Additions for docs\r\n */\r\n\r\n@import \"../../../scss/themes/default/colors\";\r\n@import \"docs/icons\";\r\n\r\n// Light theme (Default)\r\n// Can be forced with data-theme=\"light\"\r\n@import \"docs/light\";\r\n\r\n// Dark theme (Auto)\r\n// Automatically enabled if user has Dark mode enabled\r\n@import \"docs/dark\";\r\n@media only screen and (prefers-color-scheme: dark) {\r\n :root:not([data-theme=\"light\"]) {\r\n @include dark;\r\n }\r\n}\r\n\r\n// Dark theme (Forced)\r\n// Enabled if forced with data-theme=\"dark\"\r\n[data-theme=\"dark\"] {\r\n @include dark;\r\n}\r\n","// Dark theme [Additions for docs]\r\n@mixin dark {\r\n --invalid-color: #{rgba($red-900, 0.5)};\r\n --valid-color: #{rgba($green-800, 0.5)};\r\n --nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};\r\n --nav-border-color: #{rgba($grey-500, 0.2)};\r\n --nav-logo-color: #{mix($black, $grey-900)};\r\n --article-code-background-color: var(--code-background-color);\r\n}\r\n","/**\r\n * Docs: Document\r\n */\r\n\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n","/**\r\n * Docs: Main (Grid)\r\n */\r\n\r\n// Config\r\n$navHeight: 3.5rem;\r\n\r\n// Main grid\r\nbody > main {\r\n padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});\r\n\r\n @if map-get($breakpoints, \"lg\") {\r\n @media (min-width: map-get($breakpoints, \"lg\")) {\r\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\r\n grid-column-gap: calc(var(--block-spacing-horizontal) * 3);\r\n display: grid;\r\n grid-template-columns: 200px auto;\r\n }\r\n }\r\n\r\n @if map-get($breakpoints, \"xl\") {\r\n @media (min-width: map-get($breakpoints, \"xl\")) {\r\n --block-spacing-horizontal: calc(var(--spacing) * 2);\r\n }\r\n }\r\n\r\n > aside,\r\n div[role=\"document\"] {\r\n min-width: 0;\r\n }\r\n}\r\n\r\n// External links\r\ndiv[role=\"document\"] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"], [role])::after\r\n{\r\n display: inline-block;\r\n width: 1rem;\r\n height: 1rem;\r\n background-image: var(--icon-external);\r\n background-position: top center;\r\n background-size: 0.66rem auto;\r\n background-repeat: no-repeat;\r\n content: \"\";\r\n}\r\n\r\n// Embedded SVG\r\nsvg {\r\n height: 1rem;\r\n}\r\n","/**\r\n * Docs: Aside\r\n */\r\n\r\nmain > aside {\r\n\r\n nav {\r\n width: 100%;\r\n padding-bottom: var(--block-spacing-vertical);\r\n \r\n @media (min-width: map-get($breakpoints, \"lg\")) {\r\n position: fixed;\r\n width: 200px;\r\n max-height: calc(100vh - 5.5rem);\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n }\r\n\r\n a#toggle-docs-navigation {\r\n display: block;\r\n margin: 0;\r\n margin-bottom: var(--spacing);\r\n padding: 0;\r\n padding-bottom: var(--spacing);\r\n border-bottom: var(--border-width) solid var(--accordion-border-color);\r\n\r\n svg {\r\n margin-right: calc(var(--spacing) * 0.5);\r\n vertical-align: -3px;\r\n }\r\n\r\n @media (min-width: map-get($breakpoints, \"lg\")) {\r\n display: none;\r\n }\r\n }\r\n\r\n &.closed-on-mobile {\r\n\r\n a#toggle-docs-navigation {\r\n svg.collapse {\r\n display: none;\r\n }\r\n }\r\n\r\n details {\r\n display: none;\r\n } \r\n\r\n @media (min-width: map-get($breakpoints, \"lg\")) {\r\n details {\r\n display: block;\r\n }\r\n\r\n > a#toggle-docs-navigation {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &.open {\r\n a#toggle-docs-navigation {\r\n svg.expand {\r\n display: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n details {\r\n padding-bottom: 0;\r\n\r\n summary {\r\n padding-bottom: 0.5rem;\r\n }\r\n }\r\n\r\n li,\r\n summary {\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n font-size: 16px;\r\n }\r\n\r\n ul {\r\n padding-left: 0.25rem;\r\n }\r\n\r\n li a {\r\n --nav-link-spacing-vertical: 0.25rem;\r\n --nav-link-spacing-horizontal: 0.75rem;\r\n\r\n svg {\r\n vertical-align: middle;\r\n }\r\n }\r\n\r\n a.secondary:focus {\r\n background-color: transparent;\r\n color: var(--primary-hover);\r\n }\r\n\r\n a[aria-current],\r\n a[aria-current]:hover {\r\n color: var(--primary);\r\n }\r\n\r\n details {\r\n border-bottom: none;\r\n\r\n summary {\r\n color: var(--h1-color);\r\n font-weight: 300;\r\n font-size: 14px;\r\n text-transform: uppercase;\r\n\r\n &::after {\r\n display: none;\r\n }\r\n }\r\n\r\n &[open] {\r\n > summary {\r\n margin-bottom: 0;\r\n\r\n &:not([role=button], :focus) {\r\n color: var(--h1-color);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n","/**\r\n * Docs: Documentation\r\n */\r\n\r\n// Docs: Themes\r\n#themes {\r\n button.theme-switcher {\r\n &:first-of-type {\r\n --font-weight: bold;\r\n }\r\n \r\n i {\r\n font-style: normal;\r\n }\r\n }\r\n}\r\n\r\n// Docs: Customization\r\n#customization {\r\n figure {\r\n display: grid;\r\n grid-template-rows: repeat(2, 1fr);\r\n grid-template-columns: repeat(9, 1fr);\r\n margin-bottom: 0;\r\n overflow: hidden;\r\n\r\n @media (min-width: map-get($breakpoints, \"sm\")) {\r\n grid-template-rows: 1fr;\r\n grid-template-columns: repeat(18, 1fr);\r\n border-top-right-radius: var(--border-radius);\r\n border-top-left-radius: var(--border-radius);\r\n }\r\n\r\n ~ article {\r\n margin-top: 0;\r\n border-top-right-radius: 0;\r\n border-top-left-radius: 0;\r\n }\r\n\r\n button {\r\n margin-bottom: 0;\r\n padding: 0;\r\n padding-top: 100%;\r\n border: none;\r\n border-radius: 0;\r\n\r\n &:focus {\r\n box-shadow: none;\r\n }\r\n\r\n &.picked {\r\n background-image: var(--icon-check);\r\n background-position: center;\r\n background-size: 0.66rem auto;\r\n background-repeat: no-repeat;\r\n box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\r\n }\r\n &[data-color=\"lime\"],\r\n &[data-color=\"yellow\"],\r\n &[data-color=\"amber\"] {\r\n &.picked {\r\n background-image: var(--icon-check-dark);\r\n }\r\n }\r\n }\r\n }\r\n\r\n h4 {\r\n transition: color var(--transition);\r\n }\r\n\r\n pre[data-theme=\"generated\"] {\r\n border-color: var(--primary);\r\n }\r\n}\r\n\r\n// Docs: Grid\r\n#grid {\r\n --grid-spacing-vertical: 1rem;\r\n\r\n button {\r\n display: block;\r\n width: 100%;\r\n margin-bottom: var(--spacing);\r\n\r\n @media (min-width: map-get($breakpoints, \"sm\")) {\r\n display: inline-block;\r\n width: auto;\r\n margin-right: 0.5rem;\r\n }\r\n\r\n svg {\r\n stroke: var(--secondary);\r\n margin-right: 0.5rem;\r\n border: 2px solid currentColor;\r\n border-radius: 1rem;\r\n background: currentColor;\r\n }\r\n }\r\n\r\n .grid {\r\n > * {\r\n padding: calc(var(--spacing) / 2) 0;\r\n border-radius: var(--border-radius);\r\n background: var(--code-background-color);\r\n font-size: 87.5%;\r\n text-align: center;\r\n }\r\n }\r\n\r\n details {\r\n margin-top: calc(var(--typography-spacing-vertical) * 2);\r\n\r\n svg {\r\n vertical-align: bottom;\r\n }\r\n }\r\n}\r\n\r\n// Docs: Buttons\r\n#buttons {\r\n a[role=\"button\"] {\r\n margin-right: calc(var(--spacing) * 0.5);\r\n }\r\n}\r\n\r\n// Docs: Forms\r\n#forms div.grid {\r\n grid-row-gap: 0;\r\n}\r\n\r\n// Docs: Modal\r\n#modal {\r\n button {\r\n --font-weight: bold;\r\n }\r\n}\r\n","/**\r\n * Docs: Typography\r\n */\r\n\r\nh1 {\r\n margin-top: -0.25em;\r\n}\r\n\r\nsection > hgroup {\r\n margin-bottom: calc(var(--typography-spacing-vertical) * 2);\r\n}\r\n\r\n[role=\"document\"] {\r\n section > h1,\r\n section > h2,\r\n section > h3 {\r\n line-height: 1;\r\n }\r\n}\r\n","/**\r\n * Docs: Code\r\n */\r\n\r\n// Code block inside article\r\narticle > footer.code {\r\n background: var(--article-code-background-color);\r\n}\r\narticle pre,\r\narticle pre code {\r\n margin-bottom: 0;\r\n background: transparent;\r\n}\r\n\r\n// Code block outside article\r\n// Horizontally aligned with <article> content\r\nsection > pre {\r\n margin: var(--block-spacing-vertical) 0;\r\n padding: calc(var(--block-spacing-vertical) / 1.5)\r\n var(--block-spacing-horizontal);\r\n background: var(--article-code-background-color);\r\n box-shadow: var(--card-box-shadow);\r\n}\r\n\r\n// Badge for Valid & Invalid code\r\n[data-theme=\"invalid\"],\r\n[data-theme=\"valid\"] {\r\n position: relative;\r\n margin-bottom: 0 !important;\r\n\r\n // Label\r\n &:before {\r\n display: block;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n padding: 0.375rem 0.75rem;\r\n border-radius: 0;\r\n color: var(--primary-inverse);\r\n font-size: 14px;\r\n line-height: 1;\r\n\r\n @media (min-width: map-get($breakpoints, \"lg\")) {\r\n top: var(--spacing);\r\n right: var(--spacing);\r\n }\r\n }\r\n\r\n // Spacing for Valid & Invalid badge\r\n code {\r\n padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)\r\n var(--block-spacing-horizontal);\r\n }\r\n}\r\n\r\n// Color for Valid & Invalid code\r\n[data-theme=\"invalid\"] {\r\n &:before {\r\n background: var(--invalid-color);\r\n content: \"Not so great\";\r\n }\r\n}\r\n\r\n[data-theme=\"valid\"] {\r\n &:before {\r\n background: var(--valid-color);\r\n content: \"Great\";\r\n }\r\n}\r\n","/**\r\n * Docs: Modal\r\n */\r\n\r\ndialog.example {\r\n display: block;\r\n z-index: inherit;\r\n position: relative;\r\n top: inherit;\r\n right: inherit;\r\n bottom: inherit;\r\n left: inherit;\r\n align-items: inherit;\r\n justify-content: inherit;\r\n width: inherit;\r\n min-width: inherit;\r\n height: inherit;\r\n min-height: inherit;\r\n padding: 0;\r\n background-color:inherit;\r\n\r\n article {\r\n max-width: inherit;\r\n }\r\n\r\n &:not([open]),\r\n &[open=false] {\r\n display: none;\r\n }\r\n}\r\n\r\n.dialog-is-open body > button {\r\n filter: blur(0.125rem);\r\n}","/**\r\n * Docs: Navs\r\n */\r\n\r\nbody > nav {\r\n --nav-link-spacing-vertical: 1rem;\r\n\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n z-index: 99;\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n left: 0;\r\n backdrop-filter: saturate(180%) blur(20px);\r\n background-color: var(--nav-background-color);\r\n box-shadow: 0px 1px 0 var(--nav-border-color);\r\n\r\n &.container-fluid {\r\n padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));\r\n }\r\n\r\n a {\r\n border-radius: 0;\r\n }\r\n\r\n svg {\r\n vertical-align: text-bottom;\r\n }\r\n\r\n // Band & Title\r\n ul:first-of-type {\r\n margin-left: calc(var(--spacing) * -1);\r\n\r\n li {\r\n padding: 0;\r\n \r\n // Brand\r\n &:first-of-type {\r\n a {\r\n display: block;\r\n margin: 0;\r\n padding: 0;\r\n background: var(--h1-color);\r\n color: var(--nav-logo-color);\r\n \r\n svg {\r\n display: block;\r\n width: 3.5rem;\r\n height: 3.5rem;\r\n }\r\n }\r\n }\r\n \r\n // Title\r\n &:nth-of-type(2) {\r\n display: none;\r\n margin-left: calc(var(--spacing) * 1.5);\r\n color: var(--h1-color);\r\n \r\n @media (min-width: map-get($breakpoints, \"lg\")) {\r\n display: inline;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n","/**\r\n * Docs: Theme switcher\r\n */\r\n\r\n.switcher {\r\n position: fixed;\r\n right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));\r\n bottom: var(--spacing);\r\n width: auto;\r\n margin-bottom: 0;\r\n padding: 0.75rem;\r\n border-radius: 2rem;\r\n box-shadow: var(--card-box-shadow);\r\n line-height: 1;\r\n text-align: right;\r\n\r\n &::after {\r\n display: inline-block;\r\n width: 1rem;\r\n height: 1rem;\r\n border: 0.15rem solid currentColor;\r\n border-radius: 50%;\r\n background: linear-gradient(\r\n to right,\r\n currentColor 0%,\r\n currentColor 50%,\r\n transparent 50%\r\n );\r\n content: \"\";\r\n vertical-align: bottom;\r\n transition: transform var(--transition);\r\n }\r\n\r\n i {\r\n display: inline-block;\r\n max-width: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n font-style: normal;\r\n font-size: 0.875rem;\r\n white-space: nowrap;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n max-width: 100%;\r\n transition: background-color var(--transition),\r\n border-color var(--transition), color var(--transition),\r\n box-shadow var(--transition);\r\n }\r\n\r\n &:hover {\r\n &::after {\r\n transform: rotate(180deg);\r\n }\r\n\r\n i {\r\n max-width: 100%;\r\n padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\r\n transition: max-width var(--transition), padding var(--transition);\r\n }\r\n }\r\n\r\n &:focus {\r\n box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\r\n }\r\n\r\n @media (min-width: map-get($breakpoints, \"sm\")) {\r\n right: calc(var(--spacing) + var(--scrollbar-width, 0px));\r\n }\r\n}\r\n"]} |