diff options
author | Evan Read <eread@gitlab.com> | 2021-02-08 04:30:38 +0300 |
---|---|---|
committer | Evan Read <eread@gitlab.com> | 2021-02-08 04:30:38 +0300 |
commit | b89adfcf9554f054762883639b19d877e6e895b0 (patch) | |
tree | a82402d5c7f3241a431e02ea7d086c28e141e5e8 /content | |
parent | 3ecea1b074e323360663c27f0493472f2c574507 (diff) |
Revert "Merge branch 'header-redo' into 'master'"
This reverts merge request !1486
Diffstat (limited to 'content')
-rw-r--r-- | content/assets/stylesheets/_variables.scss | 1 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 370 | ||||
-rw-r--r-- | content/assets/stylesheets/toc.scss | 8 | ||||
-rw-r--r-- | content/frontend/header/index.js | 3 |
4 files changed, 282 insertions, 100 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index 0e60d2410..31490ca48 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -29,7 +29,6 @@ $sidebar-padding: 7px; // Heights $page-header-height: 40px; $banner-height: 31px; -$header-height: 48px; // Width $sidebar-width: 16.66667%; diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index b9819725b..615c8e192 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -1,5 +1,5 @@ --- -version: 96 +version: 95 --- @import "variables"; @@ -18,7 +18,6 @@ body { font-family: $sans-font-family; font-size: $body-font-size; color: $body-color; - overflow-x: hidden; >.wrapper { min-height: 100vh; @media(max-width: $md-width) { @@ -284,7 +283,7 @@ h6 { } .main { - padding: 0 5%; + padding: $page-header-height 5%; background: $main-background-color; z-index: 1; &:not(.has-toc) { @@ -454,10 +453,11 @@ h6 { flex-direction: column; position: fixed; width: 50px; - height: calc(100% - 46px); + height: 100%; transition: all .3s; border-right: 1px solid $gds-gray-200; z-index: 2; + top: 0; &.active { width: $sidebar-width; .nav-toggle { @@ -526,6 +526,8 @@ h6 { } } @media(max-width: $md-width) { + position: fixed; + top: 0; width: 0; .nav-toggle { @@ -533,6 +535,8 @@ h6 { } &.active { + position: fixed; + top: 0; width: $sidebar-mobile-width; .nav-toggle { @@ -555,7 +559,7 @@ h6 { } } .global-nav-content { - margin-top: 85px; + margin-top: 120px; margin-bottom: 70px; } a { @@ -614,82 +618,85 @@ h6 { } } } +} - .global-nav-block { - font-weight: 600; - padding-left: 10px; - } +.global-nav-block { + font-weight: 600; + padding-left: 10px; +} - .global-nav-link, - .nav-link { - text-decoration: none; - &:hover { - color: $link-color-nav-hover; - } +// scss-lint:disable QualifyingElement +a.global-nav-link, +.nav-link { + text-decoration: none; + &:hover { + color: $link-color-nav-hover; } +} - .global-nav-link { - line-height: 1.25; - font-size: 14px; - width: 100%; - } +a.global-nav-link { + line-height: 1.25; + font-size: 14px; + width: 100%; +} - .nav-link { - padding: 0; - display: flex; - justify-content: space-between; - } +.nav-link { + padding: 0; + display: flex; + justify-content: space-between; +} - .nav-link:hover { - background-color: $link-color-bg-active; - } +.nav-link:hover { + background-color: $link-color-bg-active; +} - .global-nav-block-top { - font-weight: 600; - margin-bottom: 3px; - margin-top: 3px; - a { - text-decoration: none; - text-shadow: 3px 3px 5px $link-color-bg-active; - } +// scss-lint:enable QualifyingElement +.global-nav-block-top { + font-weight: 600; + margin-bottom: 3px; + margin-top: 3px; + a { + text-decoration: none; + text-shadow: 3px 3px 5px $link-color-bg-active; } +} - .level-0 { +// use these classes to add color and padding-left to the nav links +.level-0 { + color: $global-nav-link-level0; + padding-left: 18px; + &:visited { color: $global-nav-link-level0; - padding-left: 18px; - &:visited { - color: $global-nav-link-level0; - } } +} - .level-1 { +.level-1 { + color: $global-nav-link-level1; + padding-left: 35px; + &:visited { color: $global-nav-link-level1; - padding-left: 35px; - &:visited { - color: $global-nav-link-level1; - } } +} - .level-2 { +.level-2 { + color: $global-nav-link-level2; + padding-left: 53px; + &:visited { color: $global-nav-link-level2; - padding-left: 53px; - &:visited { - color: $global-nav-link-level2; - } - } - - .global-nav-badges { - fill: $gds-gray-700; } +} - .last-updated { - color: $color-light-gray; - font-size: 13px; - padding-bottom: 10px; - text-align: right; - } +.global-nav-badges { + fill: $gds-gray-700; } +//end of global-nav +.last-updated { + color: $color-light-gray; + font-size: 13px; + padding-bottom: 10px; + text-align: right; +} .btn-tanuki { &:hover { @@ -931,48 +938,206 @@ h6 { } } -// Main header CSS -.navbar { - min-height: $header-height; - background-color: $header-background-color; - - .navbar-brand { - font-size: 1.25rem; - - strong { - font-size: 1.15rem; +// End of banner alert box +.header { + z-index: 10; + background: $header-background-color; + color: $header-font-color; + position: fixed; + width: 100%; + height: $page-header-height; + text-align: left; + display: flex; + justify-content: space-between; + white-space: nowrap; + .logo-container { + margin-right: 32px; + @media (max-width: $lg-width) { + margin-right: 16px; } } - - .btn { - line-height: 1rem; - font-size: .875rem; + @media all and (max-width: $lg-width) { + height: auto; } - - .nav-link { - color: $gds-indigo-100; + img { + height: 24px; + margin-right: 10px; } - - .form-inline { - .fa-search { - z-index: 1; + p { + font-size: 16px; + color: $white; + display: inline-block; + margin: 0 0 0 4px; + } + .header-company-name { + @media (max-width: $lg-width) { + display: none; } - - .docsearch { - font-size: 1rem; - height: 28px; - min-width: 320px; - text-indent: 1rem; + } + ul { + text-align: right; + list-style-type: none; + @media all and (max-width: $lg-width) { + display: none; } } - - .dropdown-toggle { - background-color: $help-indigo-500; + .nav-item { + a { + color: $header-font-color; + } + .btn-nav-cta { + background-color: $button-cta-background; + color: $gds-white; + font-weight: 700; + padding-left: 10px; + padding-right: 10px; + padding-top: 1px; + padding-bottom: 1px; + } + .btn-nav-cta:hover { + background-color: $button-cta-background-hover; + } } - - @media all and (max-width: $md-width) { - .btn { - width: 100%; + @media all and (max-width: $lg-width) { + &.active { + display: block; + .nav { + display: block; + text-align: left; + padding: 0; + width: 100%; + } + .nav-item { + margin: 10px; + } + } + } + &:not(.active) { + height: $page-header-height; + } + .dropdown { + display: flex; + align-items: center; + } + .dropdown-menu { + li { + display: block; + } + } + .choose-version { + font-size: 14px; + } + .btn-versions { + display: flex; + align-items: center; + font-size: 14px; + font-weight: bold; + line-height: inherit; + color: $header-font-color; + margin-left: 4px; + border: 0; + &:active { + box-shadow: none; + } + } + .versions-menu { + padding: 0; + li { + display: block; + margin: 5px 0; + text-align: left; + a { + color: $versions-link-color; + padding: 3px 20px; + font-size: 14px; + display: block; + line-height: 1.4; + &:hover { + color: $versions-link-color-hover; + background-color: $versions-link-color-bg-hover; + text-decoration: none; + } + &.active { + background-color: $versions-active-bg-color; + font-weight: 600; + color: $link-color-nav; + } + } + &.divider { + margin: 0; + } + i { + padding-left: 5px; + opacity: .5; + &:hover { + opacity: 1; + } + } + } + } + input { + box-sizing: content-box; + border-radius: $border-radius; + -webkit-appearance: none; + border: 0; + padding: 4px 12px; + width: 140px; + color: $search-input-font-color; + background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 140px 9px / 14px no-repeat; + outline: 0; + @media(min-width: $lg-width) { + width: 355px; + background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 355px 9px / 14px no-repeat; + } + } + input::placeholder { + color: $search-placeholder-font-color; + } + input:focus { + border: 0; + } + input:visited { + outline: 0; + border: 0; + } + .nav-container { + margin: auto 0; + } + .nav-toggle { + display: none; + @media all and (max-width: $lg-width) { + display: flex; + height: $page-header-height; + align-items: center; + position: absolute; + padding: 0 15px; + cursor: pointer; + top: 0; + right: 0; + color: $link-color-nav; + } + } + .nav { + >li { + margin: 0; + padding-right: 10px; + @media(min-width: $lg-width) { + padding-right: 25px; + } + } + // Override bootstrap + >a { + text-decoration: none; + font-size: 14px; + font-weight: bold; + color: $header-font-color; + } + // Override bootstrap + >a:focus, + >a:hover { + text-decoration: none; + background-color: transparent; + opacity: .8; } } } @@ -998,6 +1163,21 @@ h6 { fill: $help-indigo-500; } } + .header { + a:hover, + a:visited:hover { + &:not(.dropdown-menu a) { + color: $header-font-color; + } + } + p { + color: $white; + } + } + .container-fluid { + padding-top: 40px; + background-color: $white; + } .content { max-width: $page-content-width; } diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss index 7fb7f22b0..86d88db1a 100644 --- a/content/assets/stylesheets/toc.scss +++ b/content/assets/stylesheets/toc.scss @@ -1,5 +1,5 @@ --- -version: 19 +version: 18 --- @import "variables"; @@ -12,7 +12,7 @@ $nav-link-font-size: 14px; // ToC styles .table-of-contents { padding: 16px 0; - margin-top: 35px; + margin-top: 60px; li { list-style: none; @@ -64,8 +64,8 @@ $nav-link-font-size: 14px; @for $i from 0 to 10 { .nav-link.toc-level-#{$i} { padding-left: $base-nav-link-padding * ($i + .75); - padding-top: 0; - line-height: 1rem; + padding-top: .25rem; + line-height: 1.25rem; } } diff --git a/content/frontend/header/index.js b/content/frontend/header/index.js index b6fe67d4e..12a67f8af 100644 --- a/content/frontend/header/index.js +++ b/content/frontend/header/index.js @@ -1,6 +1,9 @@ document.addEventListener('DOMContentLoaded', () => { + const navBar = document.querySelector('.header'); + const navToggle = document.querySelector('.nav-toggle'); const mobileToggle = document.querySelector('.mobile-nav-toggle'); const classes = [document.querySelector('.main'), document.querySelector('.nav-wrapper')]; + navToggle.addEventListener('click', () => navBar.classList.toggle('active')); if (!mobileToggle) { return; } |