| .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); |
| } |
| } |
| |
| @media screen and (min-width: 1025px) { |
| .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; |
| padding: 0; |
| } |
| |
| @media screen and (max-width: 1024px) { |
| .nav-category { |
| margin-left: 1rem; |
| } |
| } |
| |
| .nav { |
| background: var(--nav-background); |
| position: relative; |
| top: var(--toolbar-height); |
| height: var(--nav-height); |
| } |
| |
| @media screen and (min-width: 769px) { |
| .nav { |
| box-shadow: 0.5px 0 3px var(--nav-border-color); |
| } |
| } |
| |
| @media screen and (min-width: 1025px) { |
| .nav { |
| top: var(--navbar-height); |
| box-shadow: none; |
| position: sticky; |
| height: var(--nav-height--desktop); |
| } |
| } |
| |
| .nav .panels { |
| display: flex; |
| flex-direction: column; |
| height: inherit; |
| } |
| |
| html.is-clipped--nav { |
| overflow-y: hidden; |
| } |
| |
| .nav-panel-menu { |
| display: flex; |
| flex-direction: column; |
| height: var(--nav-panel-height); |
| } |
| |
| @media screen and (min-width: 1025px) { |
| .nav-panel-menu { |
| height: var(--nav-panel-height--desktop); |
| } |
| } |
| |
| @media screen and (max-width: 1024px) { |
| .nav-panel-menu { |
| margin-top: var(--navbar-height); |
| } |
| } |
| |
| .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-panel-menu input.search { |
| position: absolute; |
| width: 100%; |
| border: 1px solid var(--nav-background); |
| padding: 0.6rem 1.23rem 0.5rem 1.7rem; |
| margin: 0; |
| background: var(--nav-background) no-repeat 0.3rem/1.2rem url(../img/search.svg); |
| z-index: var(--z-index-nav-search); |
| font-size: calc(17 / var(--rem-base) * 1rem); |
| font-family: var(--body-font-family); |
| caret-color: var(--color-camel-orange); |
| transition: border-color 0.2s linear; |
| outline: none; |
| } |
| |
| .nav-panel-menu input.search:focus { |
| border-bottom-color: var(--nav-panel-divider-color); |
| } |
| |
| .nav-menu { |
| top: 2.5rem; |
| min-height: 0; |
| width: 100%; |
| padding: 0.5rem 0.75rem; |
| margin-bottom: var(--drawer-height); |
| line-height: var(--nav-line-height); |
| position: relative; |
| word-break: break-word; |
| overflow-y: auto; |
| } |
| |
| .nav-menu::-webkit-scrollbar { |
| width: var(--scrollbar-thickness); |
| } |
| |
| .nav-menu::-webkit-scrollbar-track { |
| background: var(--scrollbar-track-color); |
| border-radius: var(--scrollbar-radius); |
| } |
| |
| .nav-menu::-webkit-scrollbar-thumb { |
| background: var(--scrollbar-thumb-color); |
| border-radius: var(--scrollbar-radius); |
| } |
| |
| .nav-menu::-webkit-scrollbar-thumb:hover, |
| .nav-menu::-webkit-scrollbar-thumb:active { |
| background: var(--scrollbar-thumb-active-color); |
| } |
| |
| @media screen and (max-width: 1024px) { |
| .nav-menu::-webkit-scrollbar { |
| width: 0; |
| background: transparent; |
| } |
| } |
| |
| .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-menu a { |
| color: inherit; |
| } |
| |
| .nav-list { |
| margin: 0 0 0 0.75rem; |
| padding: 0; |
| } |
| |
| .nav-menu > .nav-list { |
| margin-bottom: 0.5rem; |
| } |
| |
| .nav-item { |
| list-style: none; |
| margin-top: 0.5em; |
| } |
| |
| /* 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; |
| position: absolute; |
| height: calc(var(--nav-line-height) * 1em); |
| width: calc(var(--nav-line-height) * 1em); |
| margin-top: -0.05em; |
| margin-left: calc(var(--nav-line-height) * -1em); |
| } |
| |
| .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); |
| } |
| |
| .nav-link .image > img, |
| .breadcrumbs li .image > img { |
| width: 1em; |
| } |
| |
| .nav-panel-explore { |
| background: var(--nav-background); |
| display: flex; |
| flex-direction: column; |
| position: absolute; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| max-height: calc(50% + var(--drawer-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.25rem 0 0.5rem; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| cursor: pointer; |
| line-height: 1; |
| height: var(--drawer-height); |
| } |
| |
| .nav-panel-explore .context .version { |
| background-image: url(../img/chevron.svg); |
| background-repeat: no-repeat; |
| background-position: right 0.5rem top 50%; |
| background-size: auto 0.75em; |
| padding: 0 1.5rem 0 0; |
| } |
| |
| .nav-panel-explore .components { |
| line-height: var(--doc-line-height); |
| box-shadow: inset 0 1px 5px var(--nav-panel-divider-color); |
| background: var(--nav-secondary-background); |
| padding: 0.5rem 0.75rem 0 0.75rem; |
| margin: 0; |
| overflow-y: auto; |
| max-height: 100%; |
| display: block; |
| } |
| |
| .nav-panel-explore:not(.is-active) .components { |
| display: none; |
| } |
| |
| .nav-panel-explore .component { |
| display: block; |
| } |
| |
| .nav-panel-explore .component + .component { |
| margin-top: 0.5rem; |
| } |
| |
| .nav-panel-explore .component:last-child { |
| margin-bottom: 0.75rem; |
| } |
| |
| .nav-panel-explore .component .title { |
| font-weight: var(--body-font-weight-bold); |
| } |
| |
| .nav-panel-explore .versions { |
| display: flex; |
| flex-wrap: wrap; |
| list-style: none; |
| padding-left: 0; |
| margin-top: -0.25rem; |
| line-height: 1; |
| } |
| |
| .nav-panel-explore .component .version { |
| display: block; |
| margin: 0.375rem 0.375rem 0 0; |
| } |
| |
| .nav-panel-explore .component .version a { |
| border: 1px solid var(--nav-border-color); |
| border-radius: 0.25rem; |
| color: inherit; |
| opacity: 0.75; |
| white-space: nowrap; |
| padding: 0.125em 0.25em; |
| display: inherit; |
| } |
| |
| .nav-panel-explore .component .is-current a { |
| border-color: currentColor; |
| opacity: 0.9; |
| font-weight: var(--body-font-weight-bold); |
| } |
| |
| /* |
| .nav-panel-explore .component .is-latest a::after { |
| content: " (latest)"; |
| } |
| */ |
| |
| .nav-logo { |
| background-image: url('../img/logo-camel-medium.png'); |
| background-repeat: no-repeat; |
| background-size: 9.5rem; |
| background-position-x: 10px; |
| background-position-y: 10px; |
| width: 4rem; |
| order: 1; |
| } |