diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
8 files changed, 831 insertions, 27 deletions
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/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index d37171bc75e..6c270852e53 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -630,7 +630,6 @@ $ide-commit-header-height: 48px; width: 1px; background: var(--ide-highlight-background, $white); } - } &.is-right { @@ -642,17 +641,6 @@ $ide-commit-header-height: 48px; left: -1px; } } - - .ide-commit-badge { - background-color: var(--ide-highlight-accent, $almost-black) !important; - color: var(--ide-highlight-background, $white) !important; - position: absolute; - left: 38px; - top: $gl-padding-8; - font-size: $gl-font-size-12; - padding: 2px $gl-padding-4; - font-weight: $gl-font-weight-bold !important; - } } .ide-activity-bar { diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 9fe0490571e..1c8fd7e2590 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -40,10 +40,6 @@ $header-height: 40px; max-width: 1000px; } -.jira-connect-app-body { - max-width: 768px; -} - // needed for external_link svg.s16 { width: 16px; 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)); diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index 08d9d24d246..989219552a6 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -42,12 +42,6 @@ $status-box-line-height: 26px; } .milestone-content { - .issues-count { - margin-right: 17px; - float: right; - width: 105px; - } - .issuable-row { span { a { diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index a9d353a0444..cbb6d68bf35 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -139,7 +139,7 @@ } .gl-downstream-pipeline-job-width { - width: 240px; + width: 170px; } .gl-linked-pipeline-padding { diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss index 7f044f081d4..0bc3cc6678c 100644 --- a/app/assets/stylesheets/page_bundles/project.scss +++ b/app/assets/stylesheets/page_bundles/project.scss @@ -49,7 +49,7 @@ .project-repo-buttons { .btn { svg { - fill: $gray-500; + fill: var(--gray-500, $gray-500); } } @@ -80,3 +80,134 @@ margin-top: $gl-padding-8; } } + +.project-stats, +.project-buttons { + .scrolling-tabs-container { + .scrolling-tabs { + margin-top: $gl-padding-8; + margin-bottom: $gl-padding-8 - $browser-scrollbar-size; + padding-bottom: $browser-scrollbar-size; + flex-wrap: wrap; + border-bottom: 0; + } + + .fade-left, + .fade-right { + top: 0; + height: calc(100% - #{$browser-scrollbar-size}); + + svg { + top: 50%; + margin-top: -$gl-padding-8; + } + } + + .nav { + flex-basis: 100%; + + + .nav { + margin: $gl-padding-8 0; + } + } + + @include media-breakpoint-down(md) { + flex-direction: column; + + .nav { + flex-wrap: nowrap; + } + + .nav:first-child { + margin-right: $gl-padding-8; + } + } + } + + .nav { + > li { + display: inline-block; + + &:not(:last-child) { + margin-right: $gl-padding; + } + + &.right { + vertical-align: top; + margin-top: 0; + + @include media-breakpoint-up(lg) { + float: right; + } + } + } + + .stat-text, + .stat-link { + padding: $gl-btn-vert-padding 0; + background-color: transparent; + font-size: $gl-font-size; + line-height: $gl-btn-line-height; + color: var(--gray-500, $gl-text-color-secondary); + white-space: pre-wrap; + } + + .stat-link { + border-bottom: 0; + color: var(--black, $black); + + &:hover, + &:focus { + text-decoration: underline; + border-bottom: 0; + } + + .project-stat-value { + color: var(--gl-text-color, $gl-text-color); + } + + .icon { + color: var(--gray-500, $gl-text-color-secondary); + } + + .add-license-link { + &, + .icon { + color: var(--blue-600, $blue-600); + } + } + } + + .btn { + margin-bottom: $gl-padding-8; + padding: $gl-btn-vert-padding $gl-btn-padding; + line-height: $gl-btn-line-height; + + .icon { + top: 0; + } + } + } +} + +.project-buttons { + .nav > li:not(:last-child) { + margin-right: $gl-padding-8; + } +} + +.git-empty { + margin-bottom: 7px; + + h5 { + color: var(--gl-text-color, $gl-text-color); + } + + .light-well { + border-radius: 2px; + + color: var(--gray-600, $well-light-text-color); + font-size: 13px; + line-height: 1.6em; + } +} diff --git a/app/assets/stylesheets/page_bundles/projects_edit.scss b/app/assets/stylesheets/page_bundles/projects_edit.scss new file mode 100644 index 00000000000..9a8b4ffcdd7 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/projects_edit.scss @@ -0,0 +1,25 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.project-repo-select { + transition: background 2s ease-out; + + &:disabled { + opacity: 0.5; + pointer-events: none; + } + + .highlight-changes & { + background: var(--green-50, $highlight-changes-color); + transition: none; + } +} + +.project-feature-controls { + max-width: 432px; +} + +.project-feature-setting-group { + .project-feature-controls { + max-width: 400px; + } +} |