// Site Nav // ——– .site-nav {
// Position position: fixed; top: 0; z-index: $mobile-navigation-z-index; // Sidebar content could be too long for the page // The scrolling should be limited to the chapter selection area overflow: visible; display: flex; box-sizing: border-box; // hide this background div height: 0; flex-direction: column; // Mobile has the sidebar hidden by default // Tablets and above have it showing by default // On larger screens the content stays in place and we move the sidebar in transition-duration: $site-nav-collapse-duration; transition-timing-function: $site-nav-collapse-timing; transition-property: left, width; width: 100vw; @include desktop-screen { height: 100%; z-index: $desktop-navigation-z-index; width: $site-nav-width; max-width: $max-site-nav-width; top: $site-header-height; left: 0; body.menu-toggled & { left: -#{$site-nav-width}; box-shadow: none; } } @include large-screen { body.menu-toggled & { left: -#{$max-site-nav-width}; box-shadow: none; } } .back-to-documents { min-height: calc(100vh - #{$doc-header-height}); width: $back-to-docs-width; border-right: $divider-color 1px solid; white-space: nowrap; box-sizing: border-box; cursor: pointer; p { height: $back-to-docs-width; width: calc(100vh - 128px); line-height: $back-to-docs-width; text-transform: uppercase; color: $header-text-color; font-size: 14px; letter-spacing: 1px; // calc in translate not supported in IE transform: rotate(-90deg) translateY(128px) translateY(-100vh); transform-origin: right 0; margin: 0; display: flex; justify-content: flex-end; align-items: center; user-select: none; overflow: hidden; img { height: 30px; padding-left: 40px; padding-right: $large-spacing; } } @include mobile-screen { width: $mobile-back-to-docs-width; p { height: $mobile-back-to-docs-width; line-height: $mobile-back-to-docs-width; } } } @mixin hover-state-bg { background-color: $nav-background-hover-color; } @mixin hover-state-text { color: $header-text-color; } .navigation { display: flex; flex-direction: row; &.hidden { display: none; } ul.table-of-directories { list-style: none; padding-left: 0; padding-top: 0; margin-left: 0; margin-top: 0; min-width: 100%; max-width: 100%; transition: margin-left $site-nav-collapse-duration; max-height: calc(100vh - #{$site-doc-header-height}); overflow: auto; @include mobile-screen { max-height: calc(100vh - #{$mobile-site-doc-header-height}); } &.hidden { margin-left: -100%; } li { display: flex; width: 100%; padding: 0; margin: 0; .tod-container { flex: 1; padding-left: $site-padding; &:hover { @include hover-state-bg; text-decoration: none; .directory-item { @include hover-state-text; } } } // TOD directory item .directory-item { color: $nav-text-color; border-bottom: 1px inset $border-color; padding: $med-spacing 0; font-size: $nav-font-size; padding-right: $small-spacing; line-height: 1.5; } &:last-child { margin-bottom: $large-spacing; .directory-item { border-bottom: none; } } } } } .contents { box-sizing: border-box; width: 100%; ul.table-of-contents { margin: 0; padding: 0; max-height: calc(100vh - #{$site-doc-header-height}); overflow: auto; @include mobile-screen { max-height: calc(100vh - #{$mobile-site-header-height}); } } ul, li { padding: 0; list-style: none; margin: 0; display: block; } } // If there is only one document .contents.lonely { .nav-branch { .nav-link { padding-left: $site-padding; } & .nav-branch { margin-left: $site-padding; // Align expanded sublinks to logo padding-left: calc(#{$back-to-docs-width} - #{$site-padding} - 1px); } } } .nav-branch { position: relative; display: flex; // Hide margin bottom for last child &:last-child { border-bottom: none; margin-bottom: $large-spacing; } // Show sublinks if only page &:only-child { .nav-branch { display: block; } } .nav-link { font-size: $nav-font-size; padding-left: $large-spacing; color: $nav-text-color; display: block; &:hover { @include hover-state-text; @include hover-state-bg; } // TOC directory item .directory-item { border-bottom: 1px solid $well-background-color; padding: $spacing $large-spacing $spacing 0; display: inline-block; width: calc(100% - #{$large-spacing}); line-height: 1.5; } } // Sub links & .nav-branch { display: none; margin-left: $large-spacing; padding-left: $large-spacing; .nav-link { border-left: 2px solid $well-background-color; border-bottom: 1px solid $well-background-color; &:hover, &.selected { font-weight: normal; color: $primary-brand-color; } &.selected { border-left: 2px solid $primary-brand-color; } .directory-item { border-bottom: none; } } &:last-child { border-bottom: 1px solid $well-background-color; margin-bottom: 0; .nav-link { border-bottom: none; } } } // Expanded main links &.expanded { & > .nav-link { font-weight: bold; color: $header-text-color; } & .nav-branch { display: block; } } } .nav-header { height: $mobile-site-header-height; background-color: $search-box-background-color; display: flex; align-items: center; justify-content: center; width: calc(100% - #{$mobile-site-header-height}); // Splitting up header and main position: fixed; left: 100vw; transition-duration: $site-nav-collapse-duration; transition-timing-function: $site-nav-collapse-timing; transition-property: left; z-index: 1; body.search-toggled &, body.menu-toggled & { left: 0; } @include desktop-screen { border-bottom: 1px solid $divider-color; width: 100%; position: static; height: $doc-header-height; } .search-filter { border-radius: $base-border-radius; background: $header-text-color; color: white; font-size: 9px; flex: 0 0 auto; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: $small-spacing; padding: 5px; cursor: pointer; &.hidden { display: none; } &:empty { display: none; } } // Children .search-box { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; font-size: $nav-font-size; box-shadow: $site-nav-shadow-inset; .search-icon-container { background-color: $primary-brand-color; height: 100%; width: $back-to-docs-width; min-width: $back-to-docs-width; display: flex; align-items: center; justify-content: center; .search-icon, .close-icon { height: 24px; width: auto; display: none; @include mobile-only(); } .search-icon:not(.mobile) { height: 30px; @include desktop-only(); } @include mobile-screen { cursor: pointer; width: $mobile-site-header-height; min-width: $mobile-site-header-height; background-color: transparent; body.menu-toggled & { cursor: default; .close-icon { display: none; } } body.search-toggled:not(.menu-toggled) & { .close-icon { display: block; } .search-icon { display: none; } } } } .clear-button { height: 27px; width: 27px; min-width: 27px; display: none; align-items: center; justify-content: center; margin-right: $med-spacing; background-color: $well-background-color; border-radius: 50%; .clear-icon { display: block; height: 13px; width: 13px; opacity: 0.5; path { fill: $header-text-color; } } &:hover { background-color: $divider-color; .clear-icon { opacity: 1; } } } &.focused { background: white; } &.filled { background: rgba(255, 255, 255, 0.75); .clear-button { display: flex; cursor: pointer; } .search-input-container input { opacity: 1; } } .search-input-container { display: flex; flex-direction: column; justify-content: center; margin: 0; padding-left: $large-spacing; padding-right: $small-spacing; flex: 1 1 0; min-width: 0; overflow: visible; @include mobile-screen { padding-left: 0; } .search-header { font-size: 9px; letter-spacing: 1.1px; color: $header-text-color; opacity: 0.7; margin: 0; margin-bottom: 2px; text-transform: uppercase; @include desktop-only(); } input { display: block; min-width: 0; border: none; outline: none; color: $primary-text-color; opacity: 0.5; padding: 0; margin: 0; // -webkit-font-smoothing: antialiased; } // Do not show the in-built X in IE input::-ms-clear { display: none; } input::placeholder { color: $header-text-color; opacity: 0.5; } input:disabled ~ .search-icon { display: none; } } } } .nav-main { height: calc(100% - #{$mobile-site-header-height}); overflow: hidden; // prevent double scroll bar background-color: $base-background-color; overscroll-behavior: contain; // Splitting up header and main position: fixed; bottom: 0; left: 100vw; transition-duration: $site-nav-collapse-duration; transition-timing-function: $site-nav-collapse-timing; transition-property: left; @include mobile-screen { width: 100%; body.menu-toggled & { left: 0; } } @include desktop-screen { position: static; height: calc(100% - #{$doc-header-height}); border-right: 1px solid $divider-color; box-shadow: $site-nav-shadow-inset; } } // Search Results .search-results { background: white; position: absolute; left: $back-to-docs-width; top: $doc-header-height; width: calc(100% - #{$back-to-docs-width} - 2px); // account for border width height: auto; max-height: calc(100vh - #{$site-doc-header-height}); overflow: auto; z-index: $search-results-z-index; box-shadow: -5px 6px 10px 3px rgba(0, 0, 0, 0.15); display: none; border: 1px solid $divider-color; border-top: none; @include mobile-screen { max-height: calc(100vh - #{$mobile-site-header-height}); top: $mobile-site-header-height; left: 0; width: 100vw; } &.visible { display: block; } //not-found search results{ .not-found { margin: $spacing; } .search-link { border-bottom: 1px solid $divider-color; display: flex; padding: $med-spacing; cursor: pointer; user-select: none; font-size: $base-font-size; &.selected { background-color: $well-background-color; } &:hover { text-decoration: none; background-color: $well-background-color; } &:last-child { border-bottom: none; margin-bottom: $large-spacing * 2; } p { margin: 0; } .search-title { font-size: 14px; font-weight: bold; margin-bottom: $spacing; color: $header-text-color; } .search-subtitle { font-size: 13px; margin-bottom: 5px; color: $header-text-color; } .search-content { font-size: 13px; color: $secondary-text-color; } } }
}