diff options
author | Evan Read <eread@gitlab.com> | 2021-02-09 01:58:07 +0300 |
---|---|---|
committer | Evan Read <eread@gitlab.com> | 2021-02-09 01:58:07 +0300 |
commit | 93218b2a362bbb8dc54fab3fba93b44990e6519b (patch) | |
tree | 10f640134f210348dd07953550d82cccd76bb0e0 /content | |
parent | a9d610fb682c3a6c0172d20874670f883ea664a1 (diff) | |
parent | 6f48c3965c70cd0ce64433264e6bcc7db7eef706 (diff) |
Merge branch 'header-redo' into 'master'
Feat: Update header component to use bootstrap
See merge request gitlab-org/gitlab-docs!1508
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 | ||||
-rw-r--r-- | content/index.erb | 4 |
5 files changed, 102 insertions, 284 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index 31490ca4..0e60d241 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -29,6 +29,7 @@ $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 615c8e19..b9819725 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -1,5 +1,5 @@ --- -version: 95 +version: 96 --- @import "variables"; @@ -18,6 +18,7 @@ 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) { @@ -283,7 +284,7 @@ h6 { } .main { - padding: $page-header-height 5%; + padding: 0 5%; background: $main-background-color; z-index: 1; &:not(.has-toc) { @@ -453,11 +454,10 @@ h6 { flex-direction: column; position: fixed; width: 50px; - height: 100%; + height: calc(100% - 46px); transition: all .3s; border-right: 1px solid $gds-gray-200; z-index: 2; - top: 0; &.active { width: $sidebar-width; .nav-toggle { @@ -526,8 +526,6 @@ h6 { } } @media(max-width: $md-width) { - position: fixed; - top: 0; width: 0; .nav-toggle { @@ -535,8 +533,6 @@ h6 { } &.active { - position: fixed; - top: 0; width: $sidebar-mobile-width; .nav-toggle { @@ -559,7 +555,7 @@ h6 { } } .global-nav-content { - margin-top: 120px; + margin-top: 85px; margin-bottom: 70px; } a { @@ -618,86 +614,83 @@ h6 { } } } -} -.global-nav-block { - font-weight: 600; - padding-left: 10px; -} + .global-nav-block { + font-weight: 600; + padding-left: 10px; + } -// scss-lint:disable QualifyingElement -a.global-nav-link, -.nav-link { - text-decoration: none; - &:hover { - color: $link-color-nav-hover; + .global-nav-link, + .nav-link { + text-decoration: none; + &:hover { + color: $link-color-nav-hover; + } } -} -a.global-nav-link { - line-height: 1.25; - font-size: 14px; - width: 100%; -} + .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; + } -// 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; + .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; + } } -} -// use these classes to add color and padding-left to the nav links -.level-0 { - color: $global-nav-link-level0; - padding-left: 18px; - &:visited { + .level-0 { color: $global-nav-link-level0; + padding-left: 18px; + &:visited { + color: $global-nav-link-level0; + } } -} -.level-1 { - color: $global-nav-link-level1; - padding-left: 35px; - &:visited { + .level-1 { color: $global-nav-link-level1; + padding-left: 35px; + &:visited { + color: $global-nav-link-level1; + } } -} -.level-2 { - color: $global-nav-link-level2; - padding-left: 53px; - &:visited { + .level-2 { color: $global-nav-link-level2; + padding-left: 53px; + &:visited { + color: $global-nav-link-level2; + } } -} -.global-nav-badges { - fill: $gds-gray-700; -} + .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; + .last-updated { + color: $color-light-gray; + font-size: 13px; + padding-bottom: 10px; + text-align: right; + } } + .btn-tanuki { &:hover { background-color: $color-btn-tanuki; @@ -938,206 +931,48 @@ a.global-nav-link { } } -// 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; - } - } - @media all and (max-width: $lg-width) { - height: auto; - } - img { - height: 24px; - margin-right: 10px; - } - p { - font-size: 16px; - color: $white; - display: inline-block; - margin: 0 0 0 4px; - } - .header-company-name { - @media (max-width: $lg-width) { - display: none; - } - } - ul { - text-align: right; - list-style-type: none; - @media all and (max-width: $lg-width) { - display: none; - } - } - .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: $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; +// Main header CSS +.navbar { + min-height: $header-height; + background-color: $header-background-color; + + .navbar-brand { + font-size: 1.25rem; + + strong { + font-size: 1.15rem; } } - .choose-version { - font-size: 14px; + + .btn { + line-height: 1rem; + font-size: .875rem; } - .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; - } + + .nav-link { + color: $gds-indigo-100; } - .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; - } - } + + .form-inline { + .fa-search { + z-index: 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; + + .docsearch { + font-size: 1rem; + height: 28px; + min-width: 320px; + text-indent: 1rem; } } - 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; - } + + .dropdown-toggle { + background-color: $help-indigo-500; } - .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; + + @media all and (max-width: $md-width) { + .btn { + width: 100%; } } } @@ -1163,21 +998,6 @@ a.global-nav-link { 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 86d88db1..7fb7f22b 100644 --- a/content/assets/stylesheets/toc.scss +++ b/content/assets/stylesheets/toc.scss @@ -1,5 +1,5 @@ --- -version: 18 +version: 19 --- @import "variables"; @@ -12,7 +12,7 @@ $nav-link-font-size: 14px; // ToC styles .table-of-contents { padding: 16px 0; - margin-top: 60px; + margin-top: 35px; 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: .25rem; - line-height: 1.25rem; + padding-top: 0; + line-height: 1rem; } } diff --git a/content/frontend/header/index.js b/content/frontend/header/index.js index 12a67f8a..b6fe67d4 100644 --- a/content/frontend/header/index.js +++ b/content/frontend/header/index.js @@ -1,9 +1,6 @@ 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; } diff --git a/content/index.erb b/content/index.erb index 35556d35..e56c1359 100644 --- a/content/index.erb +++ b/content/index.erb @@ -2,7 +2,7 @@ title: GitLab Documentation --- <section class="container-fluid px-0 d-flex"> - <nav class="sidebar-left d-none d-md-block border-right p-0"> + <nav class="sidebar-left d-none d-md-block border-right px-0 pt-5"> <div class="list-group list-group-flush pt-5"> <a href="/" class="list-group-item list-group-item-action active border-bottom-0 border-top-0 d-flex align-items-center text-decoration-none"> <%= icon('home', nil, 'menu-icon') %><span class="pl-1">Home</span></a> @@ -21,7 +21,7 @@ title: GitLab Documentation <% end %> </div> </nav> - <main class="content"> + <main class="content pt-5"> <div class="row px-5 ml-0 ml-md-5 pt-4"> <div class="col-12"> <%= render '/banner.*' %> |