@media screen and (max-width: 1023.5px) { html.is-clipped--nav { overflow-y: hidden; } } .nav-container { position: fixed; top: var(--navbar-height); left: 0; width: 100%; font-size: calc(17 / var(--rem-base) * 1rem); z-index: var(--z-index-nav); visibility: hidden; } @media screen and (min-width: 769px) { .nav-container { /* width: var(--nav-width); */ width: 20.125rem; } } @media screen and (min-width: 1024px) { .nav-container { font-size: calc(15.5 / var(--rem-base) * 1rem); flex: none; position: static; top: 0; visibility: visible; } } .nav-container.is-active { visibility: visible; } .nav { /* background: var(--nav-background); */ background: var(--color-white); position: relative; /* top: var(--toolbar-height); */ top: 0; /* height: var(--nav-height); */ height: 100vh; border-right: 1px solid var(--color-blue-30); } @media screen and (min-width: 769px) { .nav { box-shadow: 0.5px 0 3px var(--nav-border-color); } } @media screen and (min-width: 1024px) { .nav { top: var(--navbar-height); box-shadow: none; position: sticky; height: var(--nav-height--desktop); } } .nav a { color: inherit; } .nav .panels { display: flex; flex-direction: column; height: inherit; } .nav-panel-menu { overflow-y: scroll; overscroll-behavior: none; height: var(--nav-panel-menu-height); padding: 0 1.25em; padding-top: 0; } .nav-panel-menu:not(.is-active) .nav-menu { opacity: 0.75; } .nav-panel-menu:not(.is-active)::after { content: ""; background: rgba(0, 0, 0, 0.5); display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .nav-menu { min-height: 100%; position: relative; padding: 0.5rem 0.5rem 0.5rem 0.65rem; line-height: 1.375; } .nav-menu-toggle { background: transparent url(../img/octicons-16.svg#view-unfold) no-repeat center / 100% 100%; border: none; float: right; height: 1em; margin-right: -0.5rem; opacity: 0.75; outline: none; padding: 0; position: sticky; top: calc((var(--nav-line-height) - 1 + 0.5) * 1rem); visibility: hidden; width: 1em; } .nav-menu-toggle.is-active { background-image: url(../img/octicons-16.svg#view-fold); } .nav-panel-menu.is-active:hover .nav-menu-toggle { visibility: visible; } .nav-menu h3.title { color: var(--nav-heading-font-color); font-size: inherit; font-weight: var(--body-font-weight-bold); margin: 0; padding: 0.25em 0 0.125em; } .nav-list { list-style: none; margin: 0 0 0 0.75rem; padding: 0; } .nav-menu > .nav-list + .nav-list { margin-top: 0.5rem; } .nav-item { margin-top: 0.5em; } .nav-link { margin-left: 0.25rem; padding: 0.5rem 0 0.35rem 0.25rem; display: block; border-bottom: 1px solid transparent; border-radius: 3px; } .nav-link:hover { border-bottom: 1px solid var(--color-bwg-main); border-radius: 0; } /* adds some breathing room below a nested list */ .nav-item-toggle ~ .nav-list { padding-bottom: 0.125rem; } /* matches list without a title */ .nav-item[data-depth="0"] > .nav-list:first-child { display: block; margin: 0; } .nav-item:not(.is-active) > .nav-list { display: none; } .nav-item-toggle { background: transparent url(../img/caret.svg) no-repeat center / 50%; border: none; outline: none; line-height: inherit; padding: 0; position: absolute; height: calc(var(--nav-line-height) * 1em); width: calc(var(--nav-line-height) * 1em); /* margin-top: -0.05em; */ margin-top: 0.55em; margin-left: calc(var(--nav-line-height) * -1em); } .nav-item-toggle:hover { border-radius: 50%; background-color: var(--color-blue-50); } .nav-item.is-active > .nav-item-toggle { transform: rotate(90deg); } .is-current-page > .nav-link, .is-current-page > .nav-text { font-weight: var(--body-font-weight-bold); color: var(--color-bwg-main); } .nav-panel-explore { position: relative; display: flex; align-items: center; justify-content: space-between; line-height: 1; height: var(--toolbar-height); margin: 1rem 0.7rem; padding: 0 1.25em; } .nav-panel-explore .backdrop { display: none; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 2; } .backdrop.is-active { display: block; } .nav-panel-explore h2.title { color: var(--nav-heading-font-color); font-size: inherit; font-weight: var(--body-font-weight-bold); margin: 0; /* padding: 0.25em 0 0.125em 0.75em; */ } .nav-panel-explore .version-menu-toggle { color: var(--color-bwg-main); font-weight: 600; background: url(../img/chevron.svg) no-repeat; background-position: right 0.5rem top 50%; background-size: auto 0.75em; outline: none; line-height: inherit; padding: 0.5rem 2rem 0.5rem 1rem; position: relative; border-radius: 0.5rem; border: 2px solid var(--color-smoke-90); z-index: var(--z-index-page-version-menu); } .nav-panel-explore .version-menu-toggle:hover { border: 2px solid var(--color-bwg-main); } .nav-panel-explore .version-menu { display: none; min-width: 85px; flex-direction: column; /* background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat; */ background-color: white; padding: 0; position: absolute; top: 35px; right: 20px; white-space: nowrap; z-index: var(--z-index-page-version-menu); box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); border-radius: 0.5rem; align-items: center; } .nav-panel-explore .version-menu.is-active { display: flex; } .nav-panel-explore:not(:first-child) { top: auto; max-height: var(--nav-panel-explore-height); } /* .nav-panel-explore .context { font-size: calc(15 / var(--rem-base) * 1rem); flex-shrink: 0; color: var(--nav-muted-color); box-shadow: 0 -1px 0 var(--nav-panel-divider-color); padding: 0 0.5rem; display: flex; align-items: center; justify-content: space-between; line-height: 1; height: var(--drawer-height); } */ .nav-panel-explore:not(:first-child) .context { cursor: pointer; } /* .nav-panel-explore .context .version { display: flex; align-items: inherit; } .nav-panel-explore .context .version::after { content: ""; background: url(../img/chevron.svg) no-repeat center right / auto 100%; width: 1.25em; height: 0.75em; } .nav-panel-explore .components { line-height: var(--nav-line-height); flex-grow: 1; box-shadow: inset 0 1px 5px var(--nav-panel-divider-color); background: var(--nav-secondary-background); padding: 0.75rem 0.75rem 0 0.75rem; margin: 0; overflow-y: scroll; overscroll-behavior: none; max-height: 100%; display: block; } */ .nav-panel-explore:not(.is-active) .components { display: none; } .nav-panel-explore .component { display: block; width: 100%; } /* .nav-panel-explore .component + .component { margin-top: 0.75rem; } .nav-panel-explore .component:last-child { margin-bottom: 0.75rem; } */ /* .nav-panel-explore .component .title { font-weight: var(--body-font-weight-bold); text-indent: 0.375rem hanging; } */ .nav-panel-explore .version-menu .versions { display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; padding-left: 0; line-height: 1; list-style: none; width: 100%; } .nav-panel-explore .component .version { /* margin: 0.375rem 0.375rem 0 0; */ width: 100%; display: flex; justify-content: center; border-radius: 0.5rem; } .nav-panel-explore .component .version:hover { background-color: var(--color-blue-10); } .nav-panel-explore .component .version a { width: 100%; text-align: center; white-space: nowrap; /* padding: 0.25em 0.5em; */ /* opacity: 0.75; */ color: var(--color-gray-50); display: block; padding: 0.5rem 0; border-radius: 0.5rem; } .nav-panel-explore .component .is-current a { background: var(--color-bwg-main); color: var(--nav-secondary-background); font-weight: var(--body-font-weight-bold); opacity: 1; }