| html.is-clipped--navbar { |
| overflow-y: hidden; |
| } |
| |
| body { |
| padding-top: var(--navbar-height); |
| } |
| |
| @media screen and (max-width: 1024px) { |
| body { |
| padding-top: var(--navbar-mobile-height); |
| } |
| } |
| |
| .navbar { |
| background: var(--navbar-background); |
| color: var(--navbar-font-color); |
| font-size: calc(16 / var(--rem-base) * 1rem); |
| height: var(--navbar-height); |
| position: fixed; |
| top: 0; |
| width: 100%; |
| word-wrap: break-word; |
| z-index: var(--z-index-navbar); |
| box-shadow: none; |
| } |
| |
| html:not([data-scroll='0']) .navbar { |
| box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1); |
| } |
| |
| .navbar a { |
| text-decoration: none; |
| } |
| |
| .navbar-brand .separator { |
| padding: 0 0.375rem; |
| } |
| |
| @media screen and (min-width: 1025px) { |
| .navbar-end > .navbar-item { |
| color: var(--navbar-font-color); |
| text-transform: uppercase; |
| } |
| |
| .navbar-end > .navbar-item::after { |
| transition: all ease-in-out 0.2s; |
| content: ''; |
| position: absolute; |
| height: 2px; |
| width: 0; |
| background-color: var(--color-asf-dark-blue); |
| } |
| |
| .navbar-end > .navbar-item:hover::after { |
| width: calc(100% - 2rem); |
| } |
| |
| .navbar-item img { |
| display: none; |
| } |
| } |
| |
| .navbar-brand { |
| align-items: stretch; |
| display: flex; |
| flex-grow: 1; |
| height: var(--navbar-height); |
| } |
| |
| .navbar-burger { |
| color: var(--navbar-font-color); |
| background: none; |
| border: none; |
| outline: none; |
| line-height: 1; |
| height: var(--navbar-burger-height); |
| position: relative; |
| /* width: var(--navbar-height); */ |
| width: 2rem; |
| top: 0.75rem; |
| padding: 0; |
| order: 8; |
| } |
| |
| .navbar-burger:focus { |
| outline: none; |
| } |
| |
| .navbar-burger span { |
| background: var(--navbar-font-color); |
| display: block; |
| height: 1px; |
| left: 50%; |
| margin-left: -7px; |
| position: absolute; |
| top: 60%; |
| width: 25px; |
| } |
| |
| .navbar-burger span:nth-child(1) { |
| margin-top: -10px; |
| } |
| |
| .navbar-burger span:nth-child(2) { |
| margin-top: -3px; |
| } |
| |
| .navbar-burger span:nth-child(3) { |
| margin-top: 4px; |
| } |
| |
| .navbar-burger.is-active span:nth-child(1) { |
| transform: rotate(45deg); |
| transform-origin: left top; |
| margin-top: -0.75rem; |
| } |
| |
| .navbar-burger.is-active span:nth-child(2) { |
| opacity: 0; |
| } |
| |
| .navbar-burger.is-active span:nth-child(3) { |
| transform: rotate(-45deg); |
| transform-origin: left bottom; |
| } |
| |
| .navbar-menu { |
| display: none; |
| order: 2; |
| } |
| |
| .navbar-item { |
| color: var(--navbar-menu-font-color); |
| display: block; |
| line-height: var(--doc-line-height); |
| position: relative; |
| } |
| |
| @media screen and (max-width: 1024px) { |
| .navbar-menu.is-active { |
| display: block; |
| position: absolute; |
| height: calc(100vh - 8rem); |
| box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1); |
| overflow-y: auto; |
| top: 8rem; |
| left: 0; |
| right: 0; |
| padding: 1rem; |
| } |
| |
| .navbar-item { |
| width: calc(50% - 1rem); |
| height: 10rem; |
| background: var(--color-camel-orange); |
| border-radius: 15px; |
| margin: 0.5rem; |
| font-weight: bold; |
| flex: none; |
| } |
| |
| .navbar-item img { |
| display: block; |
| margin-left: calc(50% - 2.5rem); |
| margin-top: 1.5rem; |
| margin-bottom: 1rem; |
| height: 5rem; |
| width: 5rem; |
| } |
| |
| .navbar-item.navbar-topics { |
| text-align: center; |
| color: var(--navbar-background); |
| text-transform: uppercase; |
| font-size: 1.25rem; |
| } |
| |
| @media screen and (min-width: 480px) and (max-width: 626px) { |
| .navbar-item.navbar-topics { |
| font-size: 1.125rem; |
| } |
| } |
| |
| @media screen and (max-width: 480px) { |
| .navbar-item.navbar-topics { |
| font-size: 0.9rem; |
| } |
| } |
| |
| @media screen and (max-width: 375px) { |
| .navbar-item.navbar-topics { |
| font-size: 0.85rem; |
| } |
| } |
| |
| a.navbar-item.navbar-topics:hover { |
| text-decoration: underline; |
| text-decoration-color: var(--navbar-hover-font-color); |
| } |
| |
| .navbar-menu { |
| background: var(--navbar-menu-background); |
| padding: 0.5rem 0; |
| } |
| } |
| |
| @media screen and (min-width: 1025px) { |
| .navbar, |
| .navbar-menu, |
| .navbar-end { |
| align-items: stretch; |
| display: flex; |
| } |
| |
| .navbar-burger { |
| display: none; |
| } |
| |
| .navbar-item { |
| align-items: flex-end; |
| display: flex; |
| font-weight: bold; |
| padding: 1.5rem 1rem 1rem 1rem; |
| text-transform: uppercase; |
| } |
| |
| .navbar-end { |
| justify-content: flex-end; |
| margin-left: 1rem; |
| } |
| } |
| |
| .navbar .button { |
| display: inline-flex; |
| align-items: center; |
| background: var(--navbar-button-background); |
| border: 1px solid var(--navbar-button-border-color); |
| border-radius: 0.15rem; |
| height: 1.75rem; |
| color: var(--navbar-button-font-color); |
| padding: 0 0.75em; |
| white-space: nowrap; |
| } |
| |
| .navbar-fill { |
| flex-grow: 1; |
| order: 3; |
| } |
| |
| .break-row { |
| display: none; |
| flex-basis: 100%; |
| height: 0; |
| } |
| |
| .navbar-search { |
| padding: 0.5rem; |
| text-align: right; |
| order: 4; |
| } |
| |
| .navbar-search input { |
| border: 1px solid var(--nav-panel-divider-color); |
| border-radius: 4px 4px; |
| width: 14rem; |
| margin-top: 0.5rem; |
| padding: 0.4rem 1.5rem 0.4rem 1.9rem; |
| font-family: Open Sans, sans-serif; |
| font-size: 1rem; |
| caret-color: #ed8225; |
| background: no-repeat 0.4rem/1rem url(../img/search.svg); |
| background-color: var(--color-smoke-50); |
| outline: 0; |
| } |
| |
| .navbar-search input:focus-within { |
| background-color: var(--navbar-background); |
| border-color: #eaeaec; |
| outline: 0; |
| |
| @media screen and (prefers-reduced-motion: reduce) { |
| box-shadow: none; |
| transform: none; |
| } |
| } |
| |
| #search-cancel { |
| position: relative; |
| bottom: calc(50% + 0.1rem); |
| left: calc(100% - 1.25rem); |
| height: 1rem; |
| display: none; |
| cursor: pointer; |
| } |
| |
| #search_results { |
| top: 3.38rem; |
| background: var(--navbar-background); |
| text-align: left; |
| box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); |
| position: absolute; |
| margin-right: 10px; |
| overflow-y: auto; |
| max-height: 80vh; |
| scrollbar-width: thin; /* Firefox */ |
| } |
| |
| #search_results::-webkit-scrollbar { |
| width: var(--scrollbar-thickness); |
| } |
| |
| #search_results::-webkit-scrollbar-track { |
| background: var(--scrollbar-track-color); |
| border-radius: var(--scrollbar-radius); |
| } |
| |
| #search_results::-webkit-scrollbar-thumb { |
| background: var(--scrollbar-thumb-color); |
| border-radius: var(--scrollbar-radius); |
| } |
| |
| #search_results::-webkit-scrollbar-thumb:hover, |
| #search_results::-webkit-scrollbar-thumb:active { |
| background: var(--scrollbar-thumb-active-color); |
| } |
| |
| .result_header { |
| font-weight: 600; |
| color: var(--color-asf-dark-blue); |
| padding-right: 0.5rem; |
| } |
| |
| #search_results div.result { |
| padding: 0.25rem; |
| pointer-events: none; |
| } |
| |
| #search_results div.result:hover { |
| background: var(--color-smoke-50); |
| } |
| |
| #search_results div.heading { |
| display: flex; |
| flex-wrap: wrap; |
| } |
| |
| #search_results dt { |
| padding: 0.5rem 0 0.5rem 0.5rem; |
| color: var(--color-camel-orange); |
| text-transform: uppercase; |
| font-weight: 700; |
| flex-grow: 1; |
| } |
| |
| #search_results dt.version { |
| height: 1.75rem; |
| padding: 0.3rem; |
| border: 2px solid var(--color-camel-orange); |
| border-radius: 25px; |
| text-align: center; |
| flex-grow: 0; |
| } |
| |
| #search_results dd { |
| margin-right: 2rem; |
| word-break: break-word; |
| } |
| |
| #search_results a { |
| pointer-events: auto; |
| padding: 0.5rem; |
| } |
| |
| #search_results a:hover { |
| text-decoration: underline; |
| text-decoration-color: var(--color-gray-10); |
| } |
| |
| .result_summary { |
| color: var(--color-jet-50); |
| padding-top: 0.3rem; |
| } |
| |
| #search_results div.footer-search { |
| display: inline-flex; |
| width: 100%; |
| padding: 0.75rem; |
| } |
| |
| div.footer-search h4 { |
| color: var(--color-asf-dark-blue); |
| width: 5rem; |
| } |
| |
| .no_search_results { |
| padding: 1rem; |
| font-weight: bold; |
| color: var(--color-asf-dark-blue); |
| border-bottom: 2px solid var(--color-smoke-50); |
| } |
| |
| .algolia-docsearch-suggestion--highlight { |
| font-weight: bold; |
| color: var(--color-jet-50); |
| } |
| |
| .results-hidden #search_results { |
| display: none; |
| } |
| |
| .navbar-tools { |
| display: flex; |
| align-items: flex-end; |
| justify-content: flex-end; |
| line-height: 1.6; |
| padding: 0.5rem; |
| font-weight: bold; |
| order: 5; |
| } |
| |
| .navbar-tools .brand-icon { |
| height: 1.5em; |
| width: 1.5em; |
| margin: 0.35rem; |
| fill: var(--navbar-font-color); |
| } |
| |
| /* Styling for mobile use */ |
| @media (max-width: 1024px) { |
| .navbar { |
| height: var(--navbar-mobile-height); |
| } |
| |
| .navbar-end { |
| display: flex; |
| flex-wrap: wrap; |
| } |
| |
| .navbar-brand { |
| flex-wrap: wrap; |
| } |
| |
| .break-row { |
| display: block; |
| order: 6; |
| } |
| |
| .navbar-tools { |
| display: flex; |
| align-items: flex-end; |
| justify-content: flex-end; |
| padding: 0.3 0.5rem; |
| order: 5; |
| } |
| |
| .navbar-tools .brand-icon { |
| height: 2rem; |
| width: 1.75rem; |
| margin: 0.75rem 0.35rem -0.5rem; |
| } |
| |
| .navbar-search { |
| order: 7; |
| } |
| |
| .navbar-search input { |
| width: calc(100vw - 4rem); |
| } |
| |
| .navbar-burger { |
| display: block; |
| } |
| |
| #search-cancel { |
| margin-top: 0.75rem; |
| } |
| |
| #search_results { |
| left: 0; |
| width: 100vw; |
| top: var(--navbar-mobile-height); |
| } |
| } |