mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
1 line
31 KiB
Plaintext
1 line
31 KiB
Plaintext
{"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":["/*!\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\";\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","// 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='#{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\");\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='%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\");\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(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\");\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='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]\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","// 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\"]):not([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 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\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 li a {\r\n padding: 0.375rem 0.5rem;\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.active,\r\n a.active: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: calc(var(--spacing) * 0.75);\r\n\r\n &:not(: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: 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\na[role=\"button\"] {\r\n margin-right: calc(var(--typography-spacing-vertical) / 4);\r\n margin-bottom: var(--typography-spacing-vertical);\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 -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 li {\r\n // Brand\r\n &:first-of-type {\r\n a {\r\n width: 3.5rem;\r\n height: 3.5rem;\r\n margin-left: calc(var(--spacing) * -1);\r\n padding: 0;\r\n background: var(--h1-color);\r\n color: var(--nav-logo-color);\r\n\r\n svg {\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: var(--spacing);\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 * 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"]} |