/* page layout */ body.documentation { width: 100%; min-height: 100vh; position: relative; padding: 0; margin: 0; overflow-x: hidden; } @media screen and (min-width: 600px) { body.documentation { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; } body.documentation > header { /* implicit banner role */ grid-column: 1 / span 2; } body.documentation > aside { grid-column: 1 / span 1; grid-row: 2 / span 1; box-shadow: -1px 0 0 0 var(--color-grey-100) inset; padding: 0 0 var(--space-3x); } body.documentation > main { grid-column: 2 / span 1; } body.documentation > footer { /* contentinfo */ grid-column: 1 / span 2; } } .colors-bg-container + * { margin-top: var(--space-3x); } .colors-bg-container > div { display: flex; flex-wrap: wrap; } .colors-bg-container > div > div { flex: 1; min-width: calc(var(--space) * 9); height: calc(var(--space) * 18); margin: 0; padding: 0; display: flex; font-size: var(--font-size-30); align-items: flex-end; justify-content: center; text-align: center; border: 0; } .colors-bg-container > div > div > header { background: var(--color-grey-00); width: 100%; } .colors-bg-container--primary { border: 4px solid var(--color-grey-500); } .colors-bg-container--shadow { background: var(--color-grey-700); } .colors-bg-container--bg { background :var(--color-grey-00); } .colors-bg-container--body { background: var(--color-grey-500); } .guidelines { background-color: var(--color-grey-00); background-image: linear-gradient( var(--color-grey-100) 1px, transparent 1px ); background-size: 100% var(--space); } .guidelines main > section { background: transparent; } .guidelines main > aside * { box-shadow: none; } /* Banner max 1 banner / page (unless iframes, then 1 labeled banner/document aria-label="") we can style the banner layout here. */ body.documentation > header { /* role is implicit and unnecessary for

at the level */ box-shadow: 0 1px 0 0 var(--color-grey-100); display: grid; place-items: stretch; align-content: start; justify-content: stretch; grid-template-columns: 1fr 1fr2; grid-template-columns: auto auto; padding: var(--space-2x) var(--space-3x); width: 100%; z-index: 10; align-items: center; } body > header.documentation .logo { display: flex; align-items: center; color: var(--color-primary); font-family: var(--font-serif); font-size: var(--font-size-50); font-weight: 400; text-decoration: none; } body > header.documentation .logo svg { height: var(--base-line-height); width: var(--base-line-height); fill: currentColor; stroke-width: 0; } body > header.documentation .logo:hover { color: var(--color-primary-highlight); } body > header.documentation nav[aria-label="site"] { margin: var(--base-line-height) 0 0; grid-row: 2 / span 1; grid-column: 1 / span 2; height: var(--base-line-height); line-height: var(--base-line-height); display: flex; } body > header.documentation nav[aria-label="links"] { text-align: right; } @media screen and (min-width: 680px) { body > header.documentation { grid-template-columns: auto auto 1fr; gap: var(--space-2x); } body > header.documentation nav[aria-label="site"] { margin: 0; grid-row: 1 / span 1; grid-column: 2 / span 1; } body > header.documentation nav[aria-label="links"] { grid-column: 3 / span 1; } } /* aside, [role="complementary"] { ... } aside implicit role complementary */ body > aside nav { margin-top: var(--space-3x); } /* site footer only one per page max implicit role contentinfo */ body > footer { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-2x) var(--space-3x) var(--space-2x); box-shadow: 0 1px 0 0 var(--color-grey-100) inset; background-color: var(--color-grey-700); color: var(--color-grey-300); } body > footer p { color: inherit; } body > footer button, body > footer input[type="submit"], body > footer input[type="button"], body > footer input[type="reset"], body > footer [role="button"], body > footer a[role="button"] { margin-bottom: 0; } body > footer * { margin-bottom: 0; } body > footer a:any-link { text-decoration: none; color: var(--color-grey-100); } body > footer a:any-link:hover { color: var(--color-grey-100); text-decoration: underline; } body > footer nav { margin: 0 0 0 auto; display: flex; align-items: center; } body > footer nav > * { margin: 0 0 0 var(--space-2x); } /* main */ .documentation main { width: 100%; padding: 0 var(--space-3x); } /* main header */ main > header { position: relative; margin: 0; padding: var(--space-6x) 0; } .documentation main > header picture { /* landing hero picture */ position: relative; display: block; width: 176px; float: right; margin: 0 0 var(--space-3x) var(--space-3x); padding: var(--space-3x); } .documentation main > header picture:before { content: ""; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: conic-gradient( var(--color-primary), var(--color-secondary), var(--color-primary-highlight) ); -webkit-filter: blur(var(--space-6x)); filter: blur(var(--space-6x)); z-index: -1; border-radius: 50%; } .documentation main > header picture svg { padding: var(--space-3x); fill: var(--color-grey-100); } .documentation main > header > [role="button"] { margin-top: var(--space-3x) !important; } /* main section */ .documentation main > section { display: flex; flex-wrap: wrap; margin-left: calc(var(--space-3x) * -1); margin-right: calc(var(--space-3x) * -1); padding: 0; background: var(--color-bg); border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--color-grey-100); } .documentation main > section > header { margin: 0; width: 100%; padding: var(--space-6x) 0; color: var(--color-grey-700); font-weight: 700; display: flex; align-items: center; min-height: var(--space-6x); width: calc(100% + var(--space-6x)); height: auto; box-shadow: 0 1px 0 0 var(--color-grey-100); color: var(--color-grey-500); font-family: var(--font-sans); font-size: var(--font-size-50); line-height: var(--line-height-50); padding: calc(var(--space) + var(--font-offset-50)) var(--space-3x) calc(var(--space-2x) - var(--font-offset-50)); } .documentation main > section > aside { flex: 2; background: var(--color-grey-100); font-size: var(--font-size-40); overflow: hidden; min-width: 300px; padding: var(--space-6x) var(--space-3x); } .documentation main > section > aside code[class*="language-"], .documentation main > section > aside pre[class*="language-"] { background: transparent; padding: 8px 0 16px; } .documentation main > section > div { flex: 3; position: relative; padding: var(--space-3x) var(--space-3x); min-width: 300px; } .documentation main > section + section { margin-top: 0; } .documentation main > section.is-demo { position: -webkit-sticky; position: sticky; top: 0; background: var(--color-grey-00); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 100; overflow: visible; text-align: center; } .documentation main > section.is-demo > div { padding-top: var(--space-2x); padding-bottom: var(--space-2x); } @media screen and (min-width: 900px) { .documentation main { padding: 0 var(--space-6x); } .documentation main > header { padding: var(--space-6x) 0 var(--space-9x); } .documentation main > header picture { width: 320px; height: 320px; padding: var(--space-6x); } .documentation main > section { margin-left: calc(var(--space-6x) * -1); margin-right: calc(var(--space-6x) * -1); } .documentation main > section > header { padding: calc(var(--space) + var(--font-offset-50)) var(--space-6x) calc(var(--space-2x) - var(--font-offset-50)); } .documentation main > section > div { padding: var(--space-6x) var(--space-6x); } .documentation main > section > aside { padding: var(--space-6x); } } /* components/switch.css */ .switch { position: relative; display: flex; width: auto; line-height: 40px; text-align: center; padding: 0 8px; background: transparent; color: var(--color-grey-700); box-shadow: 0 0 0 1px var(--color-grey-200) inset; } .switch[aria-pressed="true"] { background: transparent; color: var(--color-grey-700); box-shadow: 0 0 0 1px var(--color-grey-200) inset; } .switch:hover { background: transparent; color: var(--color-grey-700); box-shadow: 0 0 0 1px var(--color-grey-200) inset; } .switch:focus { color: var(--color-grey-700); outline: 2px solid var(--color-grey-200); } .switch[aria-pressed="true"] .slider { background: var(--color-grey-100); box-shadow: 0 0 0 1px var(--color-grey-200); } .switch[aria-pressed="true"] .slider:before { -webkit-transform: translateX(var(--space-2x)); -ms-transform: translateX(var(--space-2x)); transform: translateX(var(--space-2x)); background-color: var(--color-grey-500); } /* The slider */ .slider { position: relative; cursor: pointer; display: inline-block; width: calc(var(--space-4x) - 2px); height: calc(var(--space-2x) - 2px); background-color: var(--color-grey-00); box-shadow: 0 0 0 1px var(--color-grey-200); border-radius: var(--space); -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 8px; width: 8px; border-radius: 4px; left: 3px; bottom: 3px; background-color: var(--color-grey-200); -webkit-transition: .4s; transition: .4s; } /* PRISM OVERWRITE */ /** * prism.js default theme for JavaScript, CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou */ code[class*="language-"], pre[class*="language-"] { color: var(--color-grey-500); background: var(--color-grey-100); text-shadow: none; font-family: var(--font-mono); font-size: var(--font-size-30); line-height: var(--space-3x); text-align: left; white-space: pre-wrap; word-spacing: normal; word-wrap: normal; word-break: break-word; overflow: hidden; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { text-shadow: none; background: var(--color-grey-200); } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { text-shadow: none; background: var(--color-grey-200); } @media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } } /* Code blocks */ pre[class*="language-"] { padding: calc(var(--space) * 1 - 1px) 0 calc(var(--space) * 2 + 1px); margin: 0; overflow: auto; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: var(--color-grey-100); padding: var(--space-3x); } /* Inline code */ :not(pre) > code[class*="language-"] { padding: 0 var(--space-1-2, 0); border-radius: var(--border-radius-m, 0); white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--color-grey-300); font-style: italic; opacity: 1; } .token.punctuation { color: var(--color-grey-300); } .token.namespace { opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: var(--color-danger-500); text-transform: none; letter-spacing: 0; } .token.constant { color: var(--color-grey-500); } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--color-grey-500); } .token.attr-name { color: var(--color-grey-500); font-style: italic; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--color-info-500); background: transparent; } .token.operator { color: var(--color-success-500); } .token.atrule, .token.keyword { color: var(--color-grey-500); } .token.attr-value { color: var(--color-info-500); } .token.function, .token.class-name { color: var(--color-grey-500); } .token.regex, .token.important, .token.variable { color: var(--color-grey-500); } .token.important, .token.bold { font-weight: var(--font-weight-700); } .token.italic { font-style: italic; } .token.entity { cursor: help; }