diff options
author | Ezekiel Kigbo <ekigbo@gitlab.com> | 2019-03-04 19:23:55 +1100 |
---|---|---|
committer | Ezekiel Kigbo <ekigbo@gitlab.com> | 2019-03-05 00:58:23 +1100 |
commit | ed29dd5293896aa3848d799420bb63991c55af49 (patch) | |
tree | c987fb45b1932d0bf7655497a3dd16b9a8eda1b7 /app/assets/stylesheets/framework/contextual_sidebar.scss | |
parent | e4f9c3f63ad7e8147acecd2324de90b63ffcd940 (diff) | |
download | gitlab-ce-ed29dd5293896aa3848d799420bb63991c55af49.tar.gz |
Align nav-sidebar with design.gitlab.com docs
Updated nav-sidebar to reflect the documented
behaviour from the design.gitlab.com docs:
https://design.gitlab.com/regions/navigation#contextual-navigation
Updated rspec tests to reflect the expected behaviour
Diffstat (limited to 'app/assets/stylesheets/framework/contextual_sidebar.scss')
-rw-r--r-- | app/assets/stylesheets/framework/contextual_sidebar.scss | 50 |
1 files changed, 20 insertions, 30 deletions
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 58adda3a40b..3238b01c6c0 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -1,12 +1,10 @@ .page-with-contextual-sidebar { transition: padding-left $sidebar-transition-duration; - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { padding-left: $contextual-sidebar-collapsed-width; } - // At 1200px nav sidebar should not overlap the content - // https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/24555#note_134136110 @include media-breakpoint-up(xl) { padding-left: $contextual-sidebar-width; } @@ -17,7 +15,7 @@ } .page-with-icon-sidebar { - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { padding-left: $contextual-sidebar-collapsed-width; } } @@ -194,7 +192,7 @@ } } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { left: (-$contextual-sidebar-width); } @@ -212,7 +210,7 @@ width: 16px; } - @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, xl) - 1px) { + @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) { &:not(.sidebar-expanded-mobile) { @include collapse-contextual-sidebar; @include collapse-contextual-sidebar-content; @@ -224,10 +222,6 @@ height: 100%; width: 100%; overflow: auto; - - @include media-breakpoint-up(sm) { - overflow: hidden; - } } .with-performance-bar .nav-sidebar { @@ -397,12 +391,6 @@ } } -.toggle-sidebar-button { - @include media-breakpoint-down(xs) { - display: none; - } -} - .collapse-text { white-space: nowrap; overflow: hidden; @@ -445,16 +433,14 @@ color: $gl-text-color-secondary; } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { display: flex; align-items: center; i { font-size: 18px; } - } - @include media-breakpoint-down(xs) { + .breadcrumbs-links { padding-left: $gl-padding; border-left: 1px solid $gl-text-color-quaternary; @@ -462,21 +448,25 @@ } } -@include media-breakpoint-down(xs) { +@include media-breakpoint-down(sm) { .close-nav-button { display: flex; } -} -.mobile-overlay { - display: none; + .toggle-sidebar-button { + display: none; + } - &.mobile-nav-open { - display: block; - position: fixed; - background-color: $black-transparent; - height: 100%; - width: 100%; - z-index: 300; + .mobile-overlay { + display: none; + + &.mobile-nav-open { + display: block; + position: fixed; + background-color: $black-transparent; + height: 100%; + width: 100%; + z-index: 300; + } } } |