diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-04 21:17:50 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-04 21:17:50 +0300 |
commit | 17a58755f31fcca5f6f42a4f7de1bbf1934dd038 (patch) | |
tree | 42b09381de05e0a8b046242f109d451ddf5cfff5 /app/assets | |
parent | 1b723130416e59bdaef5d662a33f22ac1d3ce953 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
10 files changed, 697 insertions, 756 deletions
diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue index 977da12e8a9..36b9b647af7 100644 --- a/app/assets/javascripts/environments/components/empty_state.vue +++ b/app/assets/javascripts/environments/components/empty_state.vue @@ -12,10 +12,10 @@ export default { <template> <div class="empty-state"> <div class="text-content"> - <h4 class="blank-state-title js-blank-state-title"> + <h4 class="js-blank-state-title"> {{ s__("Environments|You don't have any environments right now") }} </h4> - <p class="blank-state-text"> + <p> {{ s__(`Environments|Environments are places where code gets deployed, such as staging or production.`) diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue index 184bda4410f..e7bac11a27e 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue @@ -199,6 +199,7 @@ export default { requestAccessEnabled: true, highlightChangesClass: false, emailsDisabled: false, + showDiffPreviewInEmail: true, cveIdRequestEnabled: true, featureAccessLevelEveryone, featureAccessLevelMembers, @@ -762,6 +763,24 @@ export default { </project-setting-row> <project-setting-row class="mb-3"> <input + :value="showDiffPreviewInEmail" + type="hidden" + name="project[project_setting_attributes][show_diff_preview_in_email]" + /> + <gl-form-checkbox + v-model="showDiffPreviewInEmail" + name="project[project_setting_attributes][show_diff_preview_in_email]" + > + {{ s__('ProjectSettings|Include diff preview in merge request notification emails') }} + <template #help>{{ + s__( + 'ProjectSettings|Include the code diff preview on comment threads in merge request notification emails.', + ) + }}</template> + </gl-form-checkbox> + </project-setting-row> + <project-setting-row class="mb-3"> + <input :value="showDefaultAwardEmojis" type="hidden" name="project[project_setting_attributes][show_default_award_emojis]" diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js index bc83844b8b9..b003302ec8e 100644 --- a/app/assets/javascripts/persistent_user_callout.js +++ b/app/assets/javascripts/persistent_user_callout.js @@ -7,10 +7,11 @@ const DEFERRED_LINK_CLASS = 'deferred-link'; export default class PersistentUserCallout { constructor(container, options = container.dataset) { - const { dismissEndpoint, featureId, deferLinks } = options; + const { dismissEndpoint, featureId, groupId, deferLinks } = options; this.container = container; this.dismissEndpoint = dismissEndpoint; this.featureId = featureId; + this.groupId = groupId; this.deferLinks = parseBoolean(deferLinks); this.init(); @@ -52,6 +53,7 @@ export default class PersistentUserCallout { axios .post(this.dismissEndpoint, { feature_name: this.featureId, + group_id: this.groupId, }) .then(() => { this.container.remove(); diff --git a/app/assets/javascripts/persistent_user_callouts.js b/app/assets/javascripts/persistent_user_callouts.js index a7f8704b559..337c204c36a 100644 --- a/app/assets/javascripts/persistent_user_callouts.js +++ b/app/assets/javascripts/persistent_user_callouts.js @@ -10,6 +10,7 @@ const PERSISTENT_USER_CALLOUTS = [ '.js-new-user-signups-cap-reached', '.js-eoa-bronze-plan-banner', '.js-security-newsletter-callout', + '.js-approaching-seats-count-threshold', ]; const initCallouts = () => { diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index c1c8bfffff7..8e43a9b1b0d 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -46,7 +46,6 @@ @import 'framework/toggle'; @import 'framework/typography'; @import 'framework/zen'; -@import 'framework/blank'; @import 'framework/wells'; @import 'framework/page_header'; @import 'framework/page_title'; diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss deleted file mode 100644 index 7dd7ab339dd..00000000000 --- a/app/assets/stylesheets/framework/blank.scss +++ /dev/null @@ -1,118 +0,0 @@ -.blank-state-parent-container { - .section-container { - padding: 10px; - } - - .section-body { - width: 100%; - height: 100%; - padding-bottom: 25px; - border-radius: $border-radius-default; - } -} - -.blank-state-row { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} - -.blank-state-welcome { - text-align: center; - padding: $gl-padding 0 ($gl-padding * 2); - - .blank-state-welcome-title { - font-size: 24px; - } - - .blank-state-text { - margin-bottom: 0; - } -} - -.blank-state-link { - color: $gl-text-color; - margin-bottom: 15px; - - &:hover { - background-color: $gray-light; - text-decoration: none; - color: $gl-text-color; - } -} - -.blank-state-center { - padding-top: 20px; - padding-bottom: 20px; - text-align: center; -} - -.blank-state { - display: flex; - align-items: center; - padding: 20px 50px; - border: 1px solid $border-color; - border-radius: $border-radius-default; - min-height: 240px; - margin-bottom: $gl-padding; - width: calc(50% - #{$gl-padding-8}); - - @include media-breakpoint-down(sm) { - width: 100%; - flex-direction: column; - justify-content: center; - padding: 50px 20px; - - .column-small & { - width: 100%; - } - - } -} - -.blank-state, -.blank-state-center { - .blank-state-icon { - svg { - display: block; - margin: auto; - } - } - - .blank-state-title { - margin-top: 0; - font-size: 18px; - } - - .blank-state-body { - @include media-breakpoint-down(sm) { - text-align: center; - margin-top: 20px; - } - - @include media-breakpoint-up(sm) { - padding-left: 20px; - } - } -} - -@include media-breakpoint-up(lg) { - .column-large { - flex: 2; - } - - .column-small { - flex: 1; - margin-bottom: 15px; - - .blank-state { - max-width: 400px; - flex-wrap: wrap; - margin-left: 15px; - } - - .blank-state-icon { - margin-bottom: 30px; - } - } -} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index f9b0f4f3118..9cf435af726 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -929,8 +929,6 @@ Merge requests */ $mr-tabs-height: 48px; $mr-version-controls-height: 56px; -$mr-widget-margin-left: 40px; -$mr-review-bar-height: calc(2rem + 13px); /* Compare Branches diff --git a/app/assets/stylesheets/page_bundles/dashboard_projects.scss b/app/assets/stylesheets/page_bundles/dashboard_projects.scss new file mode 100644 index 00000000000..eb0e1701b7f --- /dev/null +++ b/app/assets/stylesheets/page_bundles/dashboard_projects.scss @@ -0,0 +1,35 @@ +@import 'mixins_and_variables_and_functions'; + +.blank-state { + padding: 20px 50px; + min-height: 240px; + width: calc(50% - #{$gl-padding-8}); + + @include media-breakpoint-down(sm) { + width: 100%; + flex-direction: column; + justify-content: center; + padding: 50px 20px; + } +} + +.blank-state-link { + &:hover { + background-color: $gray-light; + text-decoration: none; + color: $gl-text-color; + } +} + +.blank-state-icon { + svg { + display: block; + } +} + +.blank-state-body { + @include media-breakpoint-down(sm) { + text-align: center; + margin-top: 20px; + } +} diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 75b953df791..1ee154f9aeb 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; } @@ -108,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: $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 $border-color; + } +} + +.diff-file-row.is-active { + background-color: $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 $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: $gl-text-color-secondary; + } +} + +.mr-state-widget { + color: $gl-text-color; + + .commit-message-edit { + border-radius: $border-radius-default; + } + + .mr-widget-section:not(:first-child) { + 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-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: $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: -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: $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-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 $border-color; +} + +.mr-widget-extension { + border-top: 1px solid $border-color; + background-color: $gray-50; + + &.clickable:hover { + background-color: $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 $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 $gray-100; + position: absolute; + left: 28px; + top: -17px; + height: 16px; + } +} + +.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}); + } + } +} + // TODO: Move to GitLab UI .mr-extenson-scrim { background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1)); diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index b858d457969..dc01aea7681 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,226 +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: -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: $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, @@ -477,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; @@ -639,75 +214,6 @@ $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; @@ -833,80 +339,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 @@ -924,30 +360,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; @@ -963,47 +375,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; -} |