| // Copyright (C) 2020 The Android Open Source Project |
| // |
| // Licensed under the Apache License, Version 2.0 (the "License"); |
| // you may not use this file except in compliance with the License. |
| // You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, software |
| // distributed under the License is distributed on an "AS IS" BASIS, |
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| // See the License for the specific language governing permissions and |
| // limitations under the License. |
| // ----------------------------------------------------------------------------- |
| // Common + CSS reset |
| // ----------------------------------------------------------------------------- |
| :root { |
| --site-header-height: 50px; |
| --home-highlights-height: 128px; |
| --content-max-width: 1100px; |
| --anim-ease: cubic-bezier(0.4, 0.0, 0.2, 1); |
| |
| // This is set to 1 by JS after onload. This is to prevent flickering on |
| // page load on the nav bar and other entries while transitioning in their |
| // initial state. |
| --anim-enabled: 0; |
| |
| --anim-time: calc(0.15s * var(--anim-enabled)); |
| } |
| |
| $wide: "(max-width: 1100px)"; |
| $mobile: "(max-width: 768px)"; |
| |
| @mixin minimal-scrollbar { |
| &::-webkit-scrollbar { |
| width: 8px; |
| background-color: transparent; |
| } |
| &::-webkit-scrollbar-thumb { |
| background-color: #ccc; |
| border-radius: 8px; |
| } |
| } |
| |
| @media (max-aspect-ratio: 1/1) { |
| :root { |
| --home-highlights-height: 256px; |
| } |
| } |
| |
| * { |
| box-sizing: border-box; |
| -webkit-tap-highlight-color: none; |
| } |
| |
| html { |
| font-family: Roboto, sans-serif; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| html, |
| body { |
| padding: 0; |
| margin: 0; |
| } |
| |
| h1, |
| h2, |
| h3 { |
| font-family: inherit; |
| font-size: inherit; |
| font-weight: inherit; |
| padding: 0; |
| margin: 0; |
| } |
| |
| // ----------------------------------------------------------------------------- |
| // Site header |
| // ----------------------------------------------------------------------------- |
| .site-header { |
| background-color: hsl(210, 30%, 16%); |
| color: hsl(210, 17%, 98%); |
| position: sticky; // Sticky so the .docs element below doesn't start @ 0. |
| top: 0; |
| width: 100%; |
| --sh-padding-y: 5px; |
| max-height: var(--site-header-height); |
| padding: var(--sh-padding-y) 30px; |
| box-shadow: rgba(0, 0, 0, 0.3) 0 3px 3px 0; |
| overflow: hidden; |
| display: flex; |
| z-index: 10; |
| transition: max-height var(--anim-ease) var(--anim-time); |
| &.expanded { |
| max-height: 100vh; |
| } |
| .brand { |
| img { |
| height: 40px; |
| vertical-align: bottom; |
| } |
| font-weight: 200; |
| font-size: 28px; |
| flex-grow: 1; |
| .brand-docs { |
| text-transform: uppercase; |
| font-size: 14px; |
| color: #ecba2a; |
| vertical-align: bottom; |
| line-height: 30px; |
| font-weight: 400; |
| } |
| } |
| >*:not(:first-child) { |
| line-height: calc(var(--site-header-height) - var(--sh-padding-y) * 2); |
| font-family: 'Source Sans Pro', sans-serif; |
| font-weight: 400; |
| font-size: 1.1rem; |
| margin: 0 20px; |
| color: hsl(210, 17%, 85%); |
| } |
| a { |
| text-decoration: none; |
| &:hover { |
| color: hsl(210, 17%, 100%); |
| } |
| } |
| .menu { |
| visibility: hidden; |
| font-family: 'Material Icons Round'; |
| font-size: 24px; |
| text-align: center; |
| position: absolute; |
| right: 0; |
| top: 0; |
| line-height: var(--site-header-height); |
| } |
| |
| @media #{$mobile} { |
| flex-direction: column; |
| >*:not(:first-child) { |
| margin-left: 40px; |
| } |
| .menu { |
| visibility: visible; |
| } |
| } |
| } |
| |
| |
| #search { |
| position: relative; |
| flex-grow: 0; |
| transition: flex-grow cubic-bezier(1, 0.01, 1, 1) var(--anim-time), background-color ease var(--anim-time); |
| padding: 0; |
| &::before { |
| visibility: hidden; |
| user-select: none; |
| content: ''; |
| position: fixed; |
| left: 0; |
| right: 0; |
| top: var(--site-header-height); |
| bottom: 0; |
| z-index: -100; |
| background-color: rgba(255, 255, 255, 0.8); |
| backdrop-filter: blur(3px); |
| opacity: 0; |
| transition: opacity ease var(--anim-time), visibility 0s; |
| |
| } |
| &:focus-within { |
| flex-grow: 1000; |
| &::before { |
| display: block; |
| opacity: 1; |
| visibility: visible; |
| } |
| #search-res { |
| display: block; |
| } |
| |
| } |
| |
| @media #{$mobile} { |
| display: none; |
| } |
| |
| #search-box { |
| width: 100%; |
| height: 32px; |
| font-size: 1rem;; |
| color: #333; |
| background-color: rgba(255, 255, 255, 0.9); |
| border: 1px solid #eee; |
| border-radius: 2px; |
| background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z"/></svg>'); |
| background-repeat: no-repeat; |
| background-size: contain; |
| padding-left: 40px; |
| outline: none; |
| &:hover, &:focus { |
| background-color: rgba(255, 255, 255, 0.95); |
| } |
| } |
| |
| #search-res { |
| display: none; |
| background-color: rgba(255, 255, 255, 1.0); |
| border: 1px solid #eee; |
| box-shadow: #aaa 0px 1px 5px; |
| color: #333; |
| line-height: initial; |
| margin-top: -4px; |
| overflow-x: auto; |
| position: fixed; |
| top: var(--site-header-height); |
| max-height: calc(100vh - var(--site-header-height)); |
| z-index: 10; |
| >div { |
| padding: 10px; |
| margin: 0; |
| &:hover { |
| background-color: #f0f0f0; |
| } |
| } |
| .sr-title { |
| color: #333; |
| font-weight: bold; |
| } |
| .sr-snippet { |
| color: #444; |
| font-size: 0.9rem; |
| } |
| |
| a { text-decoration: none; } |
| a:hover { color: initial }; |
| |
| &:empty { |
| visibility: hidden; |
| } |
| } |
| |
| } |
| |
| |
| // ----------------------------------------------------------------------------- |
| // Site footer |
| // ----------------------------------------------------------------------------- |
| |
| // Footer in the index page. |
| .site-footer { |
| background-color: hsl(210, 30%, 16%); |
| padding: 1em 0; |
| font-size: 14px; |
| color: #fff; |
| text-align: center; |
| ul { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| li { |
| display: inline; |
| padding: 0 10px; |
| &:not(:last-child) { |
| border-right: solid 1px #fff; |
| } |
| } |
| } |
| a, |
| a:visited { |
| text-decoration: none; |
| color: inherit; |
| } |
| .docs-footer-notice { display: none; } |
| } |
| |
| // Footer overrides for the /docs/ page. |
| .docs .site-footer { |
| grid-area: footer; |
| background: transparent; |
| color: #666; |
| text-align: left; |
| margin: 0 20px; |
| padding: 12px 0; |
| |
| .docs-footer-notice { |
| padding: 0; |
| margin: 0; |
| display: block; |
| } |
| |
| ul { display: none; } |
| } |
| |
| // ----------------------------------------------------------------------------- |
| // Site content |
| // ----------------------------------------------------------------------------- |
| .site-content { |
| .section-wrapper { |
| border-bottom: solid 1px #eee; |
| &:nth-child(2n+1) { |
| background-color: hsl(210, 17%, 98%); |
| } |
| } |
| section { |
| display: block; |
| position: relative; |
| overflow: hidden; |
| padding: 0 20px; |
| margin: 0 auto; |
| max-width: calc(var(--content-max-width) + 2 * 20px); |
| } |
| |
| .banner { |
| height: calc(100vh - var(--home-highlights-height) - var(--site-header-height)); |
| @media (max-height: 639px) { |
| // If the screen is too short (e.g. smartphone in landscape mode) |
| // move the highlights sections (the four tiles) out of the visible |
| // viewport. |
| height: calc(100vh - var(--site-header-height)); |
| } |
| min-height: 25vw; |
| display: grid; |
| grid-template-columns: 1fr; |
| grid-template-rows: 1fr 1fr 5fr; |
| h1, |
| h2 { |
| margin: auto; |
| font-family: 'Source Sans Pro', sans-serif; |
| text-align: center; |
| color: hsl(0, 0, 35%); |
| span { |
| white-space: nowrap; |
| } |
| } |
| h1 { |
| font-size: 2.5rem; |
| font-size: calc(min(4rem, 8vw, 6vh)); |
| font-weight: 400; |
| padding-top: calc(max(1rem, 2vh)); |
| } |
| h2 { |
| font-size: 1.25rem; |
| font-size: calc(min(2rem, 6vw, 4vh)); |
| font-weight: 200; |
| padding-top: 10px; |
| } |
| .home-img { |
| padding: 1rem 0; |
| overflow: hidden; |
| position: relative; |
| display: flex; |
| img { |
| max-height: 100%; |
| max-width: 100%; |
| margin: auto; |
| display: block; |
| } |
| } |
| } |
| |
| |
| .home-highlights { |
| &:before { |
| border-top: 1px solid hsl(210, 17%, 90%); |
| } |
| height: var(--home-highlights-height); |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| grid-template-rows: 1fr; |
| background-color: #fff; |
| z-index: 2; |
| @media (max-aspect-ratio: 1/1) { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| >a { |
| color: hsl(0, 0, 20%); |
| font-size: 22px; |
| font-weight: 400; |
| text-align: center; |
| padding: 20px 0; |
| font-family: 'Source Sans Pro', sans-serif; |
| text-decoration: none; |
| .icon { |
| background-image: url('/assets/sprite.png'); |
| background-repeat: no-repeat; |
| width: 64px; |
| height: 64px; |
| margin: auto; |
| background-size: 256px 128px; |
| filter: grayscale(1); |
| transition: filter ease var(--anim-time); |
| } |
| &:nth-child(1) .icon { |
| background-position: 0 -64px; |
| } |
| &:nth-child(2) .icon { |
| background-position: -64px -64px; |
| } |
| &:nth-child(3) .icon { |
| background-position: -128px -64px; |
| } |
| &:nth-child(4) .icon { |
| background-position: -192px -64px; |
| } |
| &:hover { |
| background-color: hsl(210, 17%, 90%); |
| .icon { |
| filter: grayscale(0); |
| } |
| } |
| } |
| } |
| .home-section { |
| min-height: calc(min(100vh - var(--site-header-height), 800px)); |
| padding: 5% 20px; |
| display: grid; |
| grid-template-rows: 1fr; |
| grid-column-gap: 4vw; |
| >img { |
| grid-area: img; |
| max-width: 100%; |
| max-height: 55vh; |
| margin: auto; |
| margin-top: 40px; |
| } |
| h2, |
| >div { |
| grid-area: content; |
| } |
| h2 { |
| font-family: 'Source Sans Pro', sans-serif; |
| font-weight: 600; |
| font-size: 2.5rem; |
| color: #333; |
| text-align: center; |
| } |
| &:nth-child(2n) { |
| grid-template-columns: 5fr 4fr; |
| grid-template-areas: "content img"; |
| h2 { |
| padding: 0 0 0 50px; |
| text-align: left; |
| } |
| } |
| &:nth-child(2n+1) { |
| grid-template-columns: 4fr 5fr; |
| grid-template-areas: "img content"; |
| h2 { |
| padding: 0 50px 0 0; |
| text-align: left; |
| } |
| } |
| @media (max-aspect-ratio: 1/1) { |
| padding: 5vh 20px; |
| &:nth-child(n) { |
| grid-template-rows: auto auto; |
| grid-template-columns: 1fr; |
| grid-template-areas: "img" "content"; |
| grid-row-gap: 30px; |
| h2 { |
| padding: 0; |
| text-align: center; |
| } |
| } |
| >img { |
| padding: 0 10vw; |
| } |
| } |
| div { |
| grid-area: content; |
| .button { |
| display: inline-block; |
| background: #337ab7; |
| font-weight: 500; |
| color: #fff; |
| border-radius: 6px; |
| font-size: 18px; |
| padding: 10px 16px; |
| transition: background-color ease var(--anim-time); |
| text-decoration: none; |
| &:hover { |
| background: #286090; |
| } |
| } |
| } |
| .home-item { |
| display: grid; |
| grid-template-rows: auto auto; |
| grid-template-columns: 50px auto; |
| grid-template-areas: "img title" "img label"; |
| grid-column-gap: 20px; |
| padding: 20px 30px; |
| margin: 10px 0; |
| // border: 1px solid #eee; |
| font-family: 'Source Sans Pro', sans-serif; |
| color: #111111; |
| transition: filter var(--anim-ease) var(--anim-time), background-color var(--anim-ease) var(--anim-time), transform var(--anim-ease) var(--anim-time), box-shadow linear var(--anim-time); |
| border-radius: 6px; |
| filter: opacity(0.6); |
| &:hover { |
| background-color: hsla(0, 0, 0, 0.02); |
| filter: opacity(1); |
| transform: scale(1.01); |
| } |
| >img, |
| >i { |
| grid-area: img; |
| margin: auto; |
| font-size: 50px; |
| } |
| >h3 { |
| grid-area: title; |
| font-size: 1.25rem; |
| line-height: 20px; |
| font-weight: 600; |
| } |
| >p { |
| grid-area: label; |
| font-size: 1rem; |
| font-weight: 400; |
| margin: 1em 0; |
| } |
| } |
| } |
| } |
| |
| // ----------------------------------------------------------------------------- |
| // Docs |
| // ----------------------------------------------------------------------------- |
| .docs { |
| min-height: 100vh; |
| display: grid; |
| --nav-width: 240px; |
| --toc-width: 180px; |
| |
| // 1665px is the clientWidth on a macbook pro. Adjust the layout so that |
| // the max-width of the central .doc fits precisely when the browser is |
| // full-screen on a macbook. |
| --max-doc-width: calc(1665px - var(--toc-width) - var(--nav-width)); |
| |
| grid-template-columns: var(--nav-width) minmax(auto, var(--max-doc-width)) var(--toc-width); |
| grid-template-rows: 1fr max-content; |
| grid-template-areas: "nav doc toc" "nav footer toc"; |
| |
| background-color: hsl(210, 10%, 97%); |
| .nav { |
| grid-area: nav; |
| border-right: 1px solid hsl(210, 30%, 90%); |
| background-color: #fefefe; |
| padding: 20px 0; |
| padding-right: 16px; |
| |
| position: sticky; |
| top: var(--site-header-height); |
| height: calc(100vh - var(--site-header-height)); |
| overflow-y: auto; |
| @include minimal-scrollbar; |
| |
| a { |
| color: inherit; |
| text-decoration: none; |
| line-height: 24px; |
| display: flex; |
| transition: background-color var(--anim-ease) var(--anim-time), |
| visibility linear var(--anim-time); |
| border-radius: 0 10px 10px 0; |
| -webkit-tap-highlight-color: transparent; |
| &[href] { |
| &:hover { |
| color: #000; |
| background-color: #f1f3f4; |
| } |
| &.selected { |
| background-color: #ecba2a; |
| } |
| } |
| } |
| |
| ul { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| overflow: hidden; |
| li { |
| font-size: 1rem; |
| font-weight: 400; |
| font-family: 'Source Sans Pro', sans-serif; |
| color: #4a4a4a; |
| max-width: 100%; |
| margin: 3px 0; |
| } |
| p { margin: 0; } |
| } |
| |
| // Applies only to outer-level submenus. |
| >ul { |
| position: static; // Otherwise gets v-centered in the middle. |
| > li { |
| padding-bottom: 10px; |
| margin-bottom: 10px; |
| font-weight: 600; |
| color: #111; |
| |
| &:not(:last-child) { |
| border-bottom: 1px solid #eee; |
| } |
| |
| &.compressible { |
| > p > a::after { |
| content: 'keyboard_arrow_up'; |
| font-family: 'Material Icons Round'; |
| font-size: 24px; |
| width: 24px; |
| transition: transform var(--anim-ease) var(--anim-time); |
| margin: 0 0 0 auto; |
| font-weight: 200; |
| color: #666; |
| } |
| > ul { |
| transition: max-height var(--anim-ease) var(--anim-time), |
| opacity var(--anim-ease) var(--anim-time); |
| opacity: 1; |
| } |
| &.compressed { |
| // The JS will compute and set the maxHeight on each |
| // element depending on the size of their children. |
| // !important is needed to override the element-inline |
| // max-height property set by JS, which is prioritary. |
| > ul { |
| max-height: 0 !important; |
| visibility: hidden; |
| opacity: 0; |
| } |
| > p > a::after { |
| transform: scaleY(-1); |
| } |
| } |
| } // .compressible |
| |
| } |
| } |
| |
| li a { |
| padding-left: 16px; |
| } |
| li li a { |
| padding-left: 30px; |
| } |
| li li li a { |
| padding-left: 44px; |
| } |
| .expanded a::after { |
| transform: rotate(180deg); |
| } |
| } |
| .doc { |
| grid-area: doc; |
| background-color: #fff; |
| margin: 20px; |
| padding: 30px 40px; |
| font-family: Roboto, sans-serif; |
| font-size: 1rem; |
| font-weight: 400; |
| line-height: 24px; |
| -webkit-font-smoothing: antialiased; |
| color: #4a4a4a; |
| position: relative; |
| box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .1), 0 1px 3px 1px rgba(60, 64, 67, .15); |
| overflow: hidden; |
| |
| a { |
| text-decoration: none; |
| &:link { color: #007b83; } |
| &:visited { color: #8e3317; } |
| &:hover { color: #009da8; } |
| &[href^="http"] { |
| // External link. |
| &:after { |
| content: 'open_in_new'; |
| font-family: 'Material Icons Round'; |
| color: #666; |
| text-decoration: none; |
| margin-left: 2px; |
| margin-right: 4px; |
| vertical-align: bottom; |
| } |
| } |
| } |
| |
| h1, |
| h2, |
| h3 { |
| margin: 10px 0; |
| padding: 0; |
| padding-top: 30px; |
| } |
| h1 { |
| font-size: 2.25rem; |
| line-height: 2.25rem; |
| margin: 0; |
| padding: 0; |
| margin-bottom: 1.5rem; |
| font-family: 'Source Sans Pro', sans-serif; |
| } |
| h2 { |
| font-size: 1.5rem; |
| border-bottom: 1px solid #e8eaed; |
| padding-bottom: 6px; |
| } |
| h3 { |
| font-size: 1.25rem; |
| } |
| * { |
| max-width: 100%; |
| } |
| |
| img[alt$="screenshot"] { |
| box-shadow: 0 0 10px 2px #eee; |
| } |
| |
| code:not(.code-block) { |
| background: hsla(210, 17%, 90%, 0.2); |
| border: 1px solid #E8EAED; |
| border-radius: 6px; |
| padding: 1px 4px; |
| } |
| .code-block { |
| overflow-x: auto; |
| white-space: pre; |
| border-radius: 6px; |
| box-shadow: 1px 1px 6px #999; |
| border-top: 5px solid #8BC34A; |
| } |
| // Hide mermaid graphs until they are rendered, this is to avoid showing |
| // the mermaid source while the renderer generates the SVG. |
| .mermaid { |
| transition: opacity var(--anim-ease) var(--anim-time); |
| &:not(.rendered) { |
| opacity: 0; |
| } |
| } |
| .anchor { |
| margin-left: -29px; |
| padding-right: 5px; |
| text-decoration: none; |
| position: absolute; |
| padding-top: var(--site-header-height); |
| margin-top: calc(-1 * var(--site-header-height)); |
| outline: none; |
| opacity: 0; |
| transition: opacity var(--anim-ease) var(--anim-time); |
| &::before { |
| content: 'insert_link'; |
| font-family: 'Material Icons Round'; |
| color: #333; |
| font-size: 24px; |
| } |
| } |
| *:hover .anchor { |
| opacity: 1; |
| } |
| code { |
| font-family: 'Roboto Mono', monospace; |
| font-size: 14px; |
| } |
| table { |
| width: 100%; |
| font-size: 14px; |
| border-spacing: 0; |
| border-collapse: collapse; |
| th, td { |
| padding: 8px; |
| border: 0 solid #dadce0; |
| border-top-width: 1px; |
| border-bottom-width: 1px; |
| |
| } |
| tr { |
| height: 20px; |
| } |
| tr:target { |
| background-color: #ecba2a; |
| } |
| thead { |
| text-align: left; |
| background-color: #e8eaed; |
| color: #202124; |
| } |
| } |
| |
| &[data-md-file^="/docs/reference/"] { |
| h1, h2, h3 { |
| code { |
| margin-left: 20px; |
| color: #666; |
| } |
| } |
| table { |
| width: 100%; |
| font-size: 14px; |
| border-spacing: 0; |
| border-collapse: collapse; |
| th, td { |
| padding: 8px; |
| border: 0 solid #dadce0; |
| border-top-width: 1px; |
| border-bottom-width: 1px; |
| |
| } |
| tr { |
| height: 20px; |
| } |
| thead { |
| text-align: left; |
| background-color: #e8eaed; |
| color: #202124; |
| } |
| td { |
| &:first-child { background: #f7f7f7; } |
| |
| /* Not really 100% but makes sure that the description |
| * column takes most of the width */ |
| &:last-child { width: 80%; } |
| } |
| } |
| } |
| |
| .callout { |
| padding: .5rem .5rem .5rem 2rem; |
| border: none; |
| border-radius: 2px; |
| margin-left: auto; |
| margin-right: auto; |
| width: 90%; |
| border-left: 3px solid transparent; |
| box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,.05), 0 0 0.05rem rgba(0,0,0,.1); |
| |
| &:before { |
| font-family: 'Material Icons Round'; |
| position: absolute; |
| font-size: 1.5rem; |
| margin-left: -1.75rem; |
| margin-top: -2px; |
| } |
| |
| &.note { |
| background-color: #E8F0FE; |
| border-color: #1967D2; |
| color: #1967D2; |
| &:before { content: 'bookmark'; } |
| } |
| |
| &.summary { |
| background-color: #E4F7FB; |
| border-color: #129EAF; |
| color: #129EAF; |
| &:before { content: 'sms'; } |
| } |
| |
| &.tip { |
| background-color: #E6F4EA; |
| border-color: #188038; |
| color: #188038; |
| &:before { content: 'star'; } |
| } |
| |
| &.todo { |
| background-color: #F1F3F4; |
| border-color: #5F6368; |
| color: #5F6368; |
| &:before { content: 'error'; } |
| } |
| |
| &.warning { |
| background-color: #FCE8E6; |
| border-color: #C5221F; |
| color: #C5221F; |
| &:before { content: 'warning'; } |
| } |
| } |
| } |
| .toc { |
| grid-area: toc; |
| padding: 20px 16px 20px 0; |
| |
| position: sticky; |
| top: var(--site-header-height); |
| height: calc(100vh - var(--site-header-height)); |
| overflow-y: auto; |
| @include minimal-scrollbar; |
| |
| font-family: 'Source Sans Pro', sans-serif; |
| word-break: break-word; |
| a { |
| text-decoration: none; |
| } |
| a, |
| a:visited { |
| color: #333; |
| } |
| a.highlighted { |
| font-weight: 500; |
| color: hsl(45, 100%, 40%); |
| } |
| font-size: 0.875rem; |
| ul { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| li { |
| margin: 5px 0; |
| /* This make it so that a single word gets elided but if there |
| * are multiple words they span across lines. */ |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: break-spaces; |
| word-break: normal; |
| } |
| } |
| >ul { |
| border-left: 4px solid #ecba2a; |
| padding-left: 10px; |
| position: static; // Otherwise gets v-centered in the middle. |
| top: calc(var(--site-header-height) + 25px); |
| } |
| } |
| |
| @media #{$wide} { |
| grid-template-columns: var(--nav-width) auto 0; |
| .toc { display: none; } |
| } |
| @media #{$mobile} { |
| display: block; |
| .doc { |
| margin: 0; |
| padding: 20px; |
| } |
| .nav { |
| // JS will persistently toggle to .after_first_click. This is to |
| // avoid spurious transitions on page load. |
| display: none; |
| |
| --nav-width-mobile: calc(min(90vw, 360px)); |
| width: var(--nav-width-mobile); |
| position: fixed; |
| z-index: 2; |
| height: 100vh; |
| overflow-y: auto; |
| top: var(--site-header-height); |
| transition: transform var(--anim-ease) var(--anim-time), |
| box-shadow var(--anim-ease) var(--anim-time), |
| visibility ease var(--anim-time); |
| transform: translateX(calc(-1 * var(--nav-width-mobile))); |
| visibility: hidden; |
| >ul { |
| position: static; |
| top: 0; |
| } |
| &.after_first_click { |
| display: block; |
| } |
| &.expanded { |
| visibility: visible; |
| transform: translateX(0); |
| box-shadow: 0 1px 0 100vw rgba(0,0,0,0.4); |
| } |
| } |
| } |
| } |
