diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/merge_requests.scss')
-rw-r--r-- | app/assets/stylesheets/page_bundles/merge_requests.scss | 641 |
1 files changed, 638 insertions, 3 deletions
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 37ab2e2be2b..63e951be698 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -1,5 +1,10 @@ @import 'mixins_and_variables_and_functions'; +$mr-review-bar-height: calc(2rem + 13px); +$mr-widget-margin-left: 40px; +$mr-widget-min-height: 69px; +$tabs-holder-z-index: 250; + .compare-versions-container { min-width: 0; } @@ -45,11 +50,9 @@ top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px)); // stylelint-disable-next-line length-zero-no-unit max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); - z-index: 205; .drag-handle { bottom: 16px; - transform: translateX(10px); } } @@ -94,7 +97,7 @@ line-height: 0; } -@media (max-width: map-get($grid-breakpoints, md)-1) { +@media (max-width: map-get($grid-breakpoints, lg)-1) { .diffs .files { .diff-tree-list { position: relative; @@ -110,6 +113,638 @@ } } +.ci-widget-container { + justify-content: space-between; + flex: 1; + flex-direction: row; + + @include media-breakpoint-down(sm) { + flex-direction: column; + + .stage-cell .stage-container { + margin-top: 16px; + } + + .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu { + transform: initial; + } + } + + .coverage { + font-size: 12px; + color: var(--gray-500, $gray-500); + line-height: initial; + } +} + +.deploy-body { + display: flex; + align-items: center; + flex-wrap: wrap; + + @include media-breakpoint-up(xs) { + flex-wrap: nowrap; + white-space: nowrap; + } + + @include media-breakpoint-down(md) { + flex-direction: column; + align-items: flex-start; + + .deployment-info { + margin-bottom: $gl-padding; + } + } + + > *:not(:last-child) { + margin-right: 0.3em; + } + + svg { + vertical-align: text-top; + } + + .deployment-info { + flex: 1; + white-space: nowrap; + text-overflow: ellipsis; + min-width: 100px; + + @include media-breakpoint-up(xs) { + min-width: 0; + max-width: 100%; + } + } + + .dropdown-menu { + width: 400px; + } +} + +.deploy-heading, +.merge-train-position-indicator { + @include media-breakpoint-up(md) { + padding: $gl-padding-8 $gl-padding; + } + + .media-body { + min-width: 0; + font-size: 12px; + margin-left: 32px; + } + + &:not(:last-child) { + border-bottom: 1px solid var(--border-color, $border-color); + } +} + +.diff-file-row.is-active { + background-color: var(--gray-50, $gray-50); +} + +.mr-conflict-loader { + max-width: 334px; + + > svg { + vertical-align: middle; + } +} + +.mr-info-list { + clear: left; + position: relative; + padding-top: 4px; + + p { + margin: 0; + position: relative; + padding: 4px 0; + + &:last-child { + padding-bottom: 0; + } + } + + &.mr-memory-usage { + p { + float: left; + } + + .memory-graph-container { + float: left; + margin-left: 5px; + } + } +} + +.mr-memory-usage { + width: 100%; + + p.usage-info-loading .usage-info-load-spinner { + margin-right: 10px; + font-size: 16px; + } +} + +.mr-ready-to-merge-loader { + max-width: 418px; + + > svg { + vertical-align: middle; + } +} + +.mr-section-container { + border: 1px solid var(--border-color, $border-color); + border-radius: $border-radius-default; + background: var(--white, $white); + + > .mr-widget-border-top:first-of-type { + border-top: 0; + } +} + +.mr-source-target { + flex-wrap: wrap; + padding: $gl-padding; + background: var(--white, $white); + min-height: $mr-widget-min-height; + + @include media-breakpoint-up(md) { + align-items: center; + } + + .git-merge-container { + justify-content: space-between; + flex: 1; + flex-direction: row; + align-items: center; + + @include media-breakpoint-down(md) { + flex-direction: column; + align-items: stretch; + + .branch-actions { + margin-top: 16px; + } + } + + @include media-breakpoint-up(lg) { + .branch-actions { + align-self: center; + margin-left: $gl-padding; + white-space: nowrap; + } + } + } + + .diverged-commits-count { + color: var(--gray-500, $gl-text-color-secondary); + } +} + +.mr-state-widget { + color: var(--gl-text-color, $gl-text-color); + + .commit-message-edit { + border-radius: $border-radius-default; + } + + .mr-widget-section:not(:first-child) { + border-top: solid 1px var(--border-color, $border-color); + } + + .mr-widget-alert-container + .mr-widget-section { + border-top: 0; + } + + .mr-fast-forward-message { + padding-left: $gl-padding-50; + padding-bottom: $gl-padding; + } + + .commits-list { + > li { + padding: $gl-padding; + + @include media-breakpoint-up(md) { + margin-left: $gl-spacing-scale-7; + } + } + } + + .mr-commit-dropdown { + .dropdown-menu { + @include media-breakpoint-up(md) { + width: 150%; + } + } + } + + .mr-report { + padding: 0; + + > .media { + padding: $gl-padding; + } + } + + form { + margin-bottom: 0; + + .clearfix { + margin-bottom: 0; + } + } + + label { + margin-bottom: 0; + } + + .btn { + font-size: $gl-font-size; + } + + .accept-merge-holder { + .accept-action { + display: inline-block; + float: left; + } + } + + .ci-widget { + color: var(--gl-text-color, $gl-text-color); + display: flex; + align-items: center; + justify-content: space-between; + + @include media-breakpoint-down(xs) { + flex-wrap: wrap; + } + + .ci-widget-content { + display: flex; + align-items: center; + flex: 1; + } + } + + .mr-widget-icon { + font-size: 22px; + } + + .mr-loading-icon { + margin: 3px 0; + } + + .ci-status-icon svg { + margin: 3px 0; + position: relative; + overflow: visible; + display: block; + } + + .mr-widget-pipeline-graph { + .dropdown-menu { + z-index: $zindex-dropdown-menu; + } + } + + .normal { + flex: 1; + flex-basis: auto; + } + + .capitalize { + text-transform: capitalize; + } + + .label-branch { + @include gl-font-monospace; + font-size: 95%; + color: var(--gl-text-color, $gl-text-color); + font-weight: normal; + overflow: hidden; + word-break: break-all; + } + + .deploy-link, + .label-branch { + &.label-truncate { + // NOTE: This selector targets its children because some of the HTML comes from + // 'source_branch_link'. Once this external HTML is no longer used, we could + // simplify this. + > a, + > span { + display: inline-block; + max-width: 12.5em; + margin-bottom: -6px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + } + + .mr-widget-body { + &:not(.mr-widget-body-line-height-1) { + line-height: 28px; + } + + @include clearfix; + + .approve-btn { + margin-right: 5px; + } + + h4 { + float: left; + font-weight: $gl-font-weight-bold; + font-size: 14px; + line-height: inherit; + margin-top: 0; + margin-bottom: 0; + + time { + font-weight: $gl-font-weight-normal; + } + } + + .btn-grouped { + margin-left: 0; + margin-right: 7px; + } + + label { + font-weight: $gl-font-weight-normal; + } + + .spacing { + margin: 0 0 0 10px; + } + + .bold, + .gl-font-weight-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; + } + + .danger { + color: var(--red-500, $red-500); + } + + .spacing, + .bold, + .gl-font-weight-bold { + vertical-align: middle; + } + + .dropdown-menu { + li a { + padding: 5px; + } + + .merge-opt-icon { + line-height: 1.5; + } + + .merge-opt-title { + margin-left: 8px; + } + } + + .has-custom-error { + display: inline-block; + } + + @include media-breakpoint-down(xs) { + p { + font-size: 13px; + } + + .btn-grouped { + float: none; + margin-right: 0; + } + + .accept-action { + width: 100%; + text-align: center; + } + } + + .commit-message-editor { + label { + padding: 0; + } + } + + &.mr-widget-empty-state { + line-height: 20px; + padding: $gl-padding; + + .artwork { + + @include media-breakpoint-down(md) { + margin-bottom: $gl-padding; + } + } + + .text { + p { + margin-top: $gl-padding; + } + + .highlight { + margin: 0 0 $gl-padding; + font-weight: $gl-font-weight-bold; + } + } + } + + &.mr-pipeline-suggest { + border-radius: $border-radius-default; + line-height: 20px; + border: 1px solid var(--border-color, $border-color); + + .circle-icon-container { + color: var(--gray-100, $gl-text-color-quaternary); + } + } + } + + .ci-coverage { + float: right; + } + + .stop-env-container { + color: var(--gl-text-color, $gl-text-color); + float: right; + + a { + color: var(--gl-text-color, $gl-text-color); + } + } +} + +.mr-widget-alert-container { + $radius: $border-radius-default - 1px; + + border-radius: $radius $radius 0 0; + + .gl-alert:not(:last-child) { + margin-bottom: 1px; + } +} + +.mr-widget-body, +.mr-widget-content { + padding: $gl-padding; +} + +.mr-widget-border-top { + border-top: 1px solid var(--border-color, $border-color); +} + +.mr-widget-extension { + border-top: 1px solid var(--border-color, $border-color); + background-color: var(--gray-50, $gray-50); + + &.clickable:hover { + background-color: var(--gray-100, $gray-100); + cursor: pointer; + } +} + +.mr-widget-extension-icon::before { + @include gl-content-empty; + @include gl-absolute; + @include gl-left-0; + @include gl-top-0; + @include gl-opacity-3; + @include gl-border-solid; + @include gl-border-4; + @include gl-rounded-full; + + width: 24px; + height: 24px; +} + +.mr-widget-heading { + position: relative; + border: 1px solid var(--border-color, $border-color); + border-radius: $border-radius-default; + background: var(--white, $white); + + .gl-skeleton-loader { + display: block; + } +} + +.mr-widget-info { + padding-left: $gl-padding; + padding-right: $gl-padding; +} + +.mr-widget-margin-left { + margin-left: $mr-widget-margin-left; +} + +.mr-widget-section { + .code-text { + flex: 1; + } +} + +.mr-widget-workflow { + margin-top: $gl-padding; + position: relative; + + &::before { + content: ''; + border-left: 1px solid var(--gray-100, $gray-100); + position: absolute; + left: 28px; + top: -17px; + height: 16px; + } +} + +.mr-version-controls { + position: relative; + z-index: $tabs-holder-z-index + 10; + background: var(--white, $white); + color: var(--gl-text-color, $gl-text-color); + margin-top: -1px; + + .mr-version-menus-container { + display: flex; + align-items: center; + flex-wrap: wrap; + padding: 16px; + z-index: 199; + white-space: nowrap; + + .gl-dropdown-toggle { + width: auto; + max-width: 170px; + + svg { + top: 10px; + right: 8px; + } + } + } + + .content-block { + padding: $gl-padding; + border-bottom: 0; + } + + .mr-version-dropdown, + .mr-version-compare-dropdown { + margin: 0 0.5rem; + } + + .dropdown-title { + color: var(--gl-text-color, $gl-text-color); + } + + // Shortening button height by 1px to make compare-versions + // header 56px and fit into our 8px design grid + .btn { + height: 34px; + } + + @include media-breakpoint-up(md) { + position: -webkit-sticky; + position: sticky; + top: calc(#{$header-height} + #{$mr-tabs-height}); + + .with-system-header & { + top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height}); + } + + .with-system-header.with-performance-bar & { + top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height}); + } + + .mr-version-menus-container { + flex-wrap: nowrap; + } + + .with-performance-bar & { + top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height}); + } + } +} + // TODO: Move to GitLab UI .mr-extenson-scrim { background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1)); |