diff options
Diffstat (limited to 'app/assets/stylesheets/pages/merge_requests.scss')
| -rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 637 |
1 files changed, 4 insertions, 633 deletions
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 10026e290e8..f95cff012d0 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -2,8 +2,6 @@ * MR -> show: Automerge widget * */ - -$mr-widget-min-height: 69px; $tabs-holder-z-index: 250; .space-children { @@ -18,12 +16,6 @@ $tabs-holder-z-index: 250; } } -.mr-widget-border-top { - border-top: 1px solid $border-color; -} - -.mr-widget-margin-left { margin-left: $mr-widget-margin-left; } - .media-section { @include media-breakpoint-down(md) { align-items: flex-start; @@ -42,140 +34,9 @@ $tabs-holder-z-index: 250; } } -.mr-widget-section { - .code-text { - flex: 1; - } -} - -.mr-widget-heading { - position: relative; - border: 1px solid $border-color; - border-radius: $border-radius-default; - background: var(--white, $white); - - .gl-skeleton-loader { - display: block; - } -} - -.mr-widget-extension { - border-top: 1px solid $border-color; - background-color: $gray-50; - - &.clickable:hover { - background-color: $gray-100; - cursor: pointer; - } -} - -.mr-widget-workflow { - margin-top: $gl-padding; - position: relative; - - &::before { - content: ''; - border-left: 1px solid $gray-100; - position: absolute; - left: 28px; - top: -17px; - height: 16px; - } -} - -.mr-section-container { - border: 1px solid $border-color; - border-radius: $border-radius-default; - background: var(--white, $white); - - > .mr-widget-border-top:first-of-type { - border-top: 0; - } -} - -.mr-widget-body, -.mr-widget-content, -.mr-widget-footer { - padding: $gl-padding; -} - -.mr-widget-info { - padding-left: $gl-padding; - padding-right: $gl-padding; -} - .mr-state-widget { - color: $gl-text-color; - - .commit-message-edit { - border-radius: $border-radius-default; - } - - .mr-widget-section:not(:first-child), - .mr-widget-footer { - border-top: solid 1px $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-widget-footer { - padding: 0; - } - - .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; - .accept-merge-request { &.ci-preparing, &.ci-pending, @@ -192,227 +53,6 @@ $tabs-holder-z-index: 250; } } } - - .ci-widget { - 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: $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: -3px; - white-space: nowrap; - text-overflow: ellipsis; - line-height: 14px; - 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: $gray-600; - margin-left: 10px; - } - - .state-label { - font-weight: $gl-font-weight-bold; - padding-right: 10px; - } - - .danger { - color: $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 $border-color; - - .circle-icon-container { - color: $gl-text-color-quaternary; - } - } - } - - .ci-coverage { - float: right; - } - - .stop-env-container { - color: $gl-text-color; - float: right; - - a { - color: $gl-text-color; - } - } } .mr_source_commit, @@ -478,72 +118,6 @@ $tabs-holder-z-index: 250; } } -.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-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: $gl-text-color-secondary; - } -} - .card-new-merge-request { .card-header { padding: 5px 10px; @@ -640,79 +214,14 @@ $tabs-holder-z-index: 250; } } -.mr-version-controls { - position: relative; - z-index: $tabs-holder-z-index + 10; - background: $white; - 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: $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}); - } - } -} - .merge-request-tabs-holder, .epic-tabs-holder { top: $header-height; z-index: $tabs-holder-z-index; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + padding-left: $gl-padding; + padding-right: $gl-padding; background-color: $body-bg; border-bottom: 1px solid $border-color; @@ -834,80 +343,10 @@ $tabs-holder-z-index: 250; } } -.mr-memory-usage { - width: 100%; - - p.usage-info-loading .usage-info-load-spinner { - margin-right: 10px; - font-size: 16px; - } -} - .fork-sprite { margin-right: -5px; } -.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 $border-color; - } -} - -.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; - } -} - // Hack alert: we've rewritten `btn` class in a way that // we've broken it and it is not possible to use with `btn-link` // which causes a blank button when it's disabled and hovering @@ -925,30 +364,6 @@ $tabs-holder-z-index: 250; } } -.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: $gray-500; - line-height: initial; - } -} - .merge-request-details .file-finder-overlay.diff-file-finder { position: fixed; z-index: 99999; @@ -964,47 +379,3 @@ $tabs-holder-z-index: 250; } } } - -.diff-file-row.is-active { - background-color: $gray-50; -} - -.mr-conflict-loader { - max-width: 334px; - - > svg { - vertical-align: middle; - } -} - -.mr-ready-to-merge-loader { - max-width: 418px; - - > svg { - vertical-align: middle; - } -} - -.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-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; -} |