diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/merge_requests.scss')
-rw-r--r-- | app/assets/stylesheets/page_bundles/merge_requests.scss | 87 |
1 files changed, 46 insertions, 41 deletions
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index b7a75884425..463c8f74342 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -41,17 +41,21 @@ $tabs-holder-z-index: 250; // If they don't match, the file tree and the diff files stick // to the top at different heights, which is a bad-looking defect $diff-file-header-top: 11px; - $top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); + --initial-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); + --top-pos: var(--initial-pos); position: -webkit-sticky; position: sticky; - // Unitless zero values are not allowed in calculations - top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px)); - max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); + top: var(--top-pos); + max-height: calc(100vh - var(--top-pos) - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); .drag-handle { bottom: 16px; } + + &.is-sidebar-moved { + --top-pos: calc(var(--initial-pos) + 26px); + } } .tree-list-holder { @@ -196,12 +200,8 @@ $tabs-holder-z-index: 250; background-color: var(--gray-50, $gray-50); } -.mr-conflict-loader { - max-width: 334px; - - > svg { - vertical-align: middle; - } +.mr-widget-body-loading svg { + vertical-align: middle; } .mr-info-list { @@ -398,12 +398,6 @@ $tabs-holder-z-index: 250; display: block; } - .mr-widget-pipeline-graph { - .dropdown-menu { - z-index: $zindex-dropdown-menu; - } - } - .normal { flex: 1; flex-basis: auto; @@ -440,7 +434,7 @@ $tabs-holder-z-index: 250; .mr-widget-body { &:not(.mr-widget-body-line-height-1) { - line-height: 28px; + line-height: 24px; } @include clearfix; @@ -475,12 +469,6 @@ $tabs-holder-z-index: 250; margin: 0 0 0 10px; } - .bold { - font-weight: $gl-font-weight-bold; - color: var(--gray-600, $gray-600); - margin-left: 10px; - } - .state-label { font-weight: $gl-font-weight-bold; padding-right: 10px; @@ -490,11 +478,6 @@ $tabs-holder-z-index: 250; color: var(--red-500, $red-500); } - .spacing, - .bold { - vertical-align: middle; - } - .dropdown-menu { li a { padding: 5px; @@ -621,8 +604,8 @@ $tabs-holder-z-index: 250; .mr-widget-extension-icon::before { @include gl-content-empty; @include gl-absolute; - @include gl-left-0; - @include gl-top-0; + @include gl-left-50p; + @include gl-top-half; @include gl-opacity-3; @include gl-border-solid; @include gl-border-4; @@ -630,24 +613,20 @@ $tabs-holder-z-index: 250; width: 24px; height: 24px; + transform: translate(-50%, -50%); } .mr-widget-extension-icon::after { @include gl-content-empty; @include gl-absolute; @include gl-rounded-full; + @include gl-left-50p; + @include gl-top-half; - top: 4px; - left: 4px; width: 16px; height: 16px; - border: 4px solid currentColor; -} - -.mr-widget-extension-icon svg { - position: relative; - top: 2px; - left: 2px; + border: 4px solid; + transform: translate(-50%, -50%); } .mr-widget-heading { @@ -777,6 +756,7 @@ $tabs-holder-z-index: 250; &.show .dropdown-menu { width: calc(100vw - 20px); max-width: 650px; + max-height: calc(100vh - 50px); .gl-new-dropdown-inner { max-height: none !important; @@ -818,8 +798,7 @@ $tabs-holder-z-index: 250; } .md-preview-holder { - max-height: 180px; - height: 180px; + max-height: 172px; } } @@ -840,3 +819,29 @@ $tabs-holder-z-index: 250; } } } + +.merge-request-sticky-header { + z-index: 204; + box-shadow: 0 1px 2px $issue-boards-card-shadow; + --width: calc(100% - #{$contextual-sidebar-width}); + + @include media-breakpoint-down(lg) { + --width: calc(100% - #{$contextual-sidebar-collapsed-width}); + } +} + +.detail-page-header-actions { + .gl-toggle { + @include gl-ml-auto; + } +} + +.page-with-icon-sidebar .issue-sticky-header { + --width: calc(100% - #{$contextual-sidebar-collapsed-width}); +} + +.merge-request-notification-toggle { + .gl-toggle-label { + @include gl-font-weight-normal; + } +} |