diff options
author | Sam Bigelow <sbigelow@gitlab.com> | 2019-03-28 17:37:06 -0400 |
---|---|---|
committer | Sam Bigelow <sbigelow@gitlab.com> | 2019-04-05 08:05:29 -0400 |
commit | 1d01e164ec7bbf0b30ba21753604227eaa469216 (patch) | |
tree | a9630346063afe46d90af60707e9532814dfbb1b /app/assets/stylesheets/pages/merge_requests.scss | |
parent | cde8456cd433c258e9100fe33f10f62a3b32ee4e (diff) | |
download | gitlab-ce-1d01e164ec7bbf0b30ba21753604227eaa469216.tar.gz |
Improve diff navigation header57364-improve-diff-nav-header
- Compare versions header is full width except in the unified diff mode
with no tree sidebar
- Bar is always full width, but the content within stays centered when
unified and no tree sidebar
- File header is the same height as the "Compare versions header"
- aligns with the design system grid guidelines => 56px
- Diff file headers use a button group, switch icon order to open file
externally being the last option, all buttons will become icon buttons
(icon delivery by @dimitrieh)
- If a file header becomes sticky no rounded corner/double border
problem is visible anymore
Diffstat (limited to 'app/assets/stylesheets/pages/merge_requests.scss')
-rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 16 |
1 files changed, 9 insertions, 7 deletions
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 7f8b8ea8100..d241978ce45 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -737,7 +737,6 @@ background: $gray-light; color: $gl-text-color; margin-top: -1px; - border-top: 1px solid $border-color; .mr-version-menus-container { display: flex; @@ -760,6 +759,7 @@ .content-block { padding: $gl-padding-top $gl-padding; + border-bottom: 0; } .comments-disabled-notif { @@ -784,16 +784,18 @@ padding-right: 5px; } + // Shortening button height by 1px to make compare-versions + // header 56px and fit into our 8px design grid + button { + height: 34px; + } + @include media-breakpoint-up(md) { position: -webkit-sticky; position: sticky; top: $header-height + $mr-tabs-height; - width: 100%; - - &.is-fileTreeOpen { - margin-left: -16px; - width: calc(100% + 32px); - } + margin-left: -16px; + width: calc(100% + 32px); .mr-version-menus-container { flex-wrap: nowrap; |