diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
11 files changed, 133 insertions, 239 deletions
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index ee777820b81..3327f8da632 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -13,98 +13,6 @@ } } -@mixin mini-pipeline-graph-color( - $color-background-default, - $color-background-hover-focus, - $color-background-active, - $color-foreground-default, - $color-foreground-hover-focus, - $color-foreground-active -) { - background-color: $color-background-default; - border-color: $color-foreground-default; - - svg { - fill: $color-foreground-default; - } - - &:hover, - &:focus { - background-color: $color-background-hover-focus; - border-color: $color-foreground-hover-focus; - - svg { - fill: $color-foreground-hover-focus; - } - } - - &:active { - background-color: $color-background-active; - border-color: $color-foreground-active; - - svg { - fill: $color-foreground-active; - } - } - - &:focus { - box-shadow: 0 0 4px 1px $blue-300; - } -} - -@mixin mini-pipeline-item() { - border-radius: 100px; - background-color: var(--white, $white); - border-width: 1px; - border-style: solid; - width: $ci-action-icon-size; - height: $ci-action-icon-size; - margin: 0; - padding: 0; - position: relative; - vertical-align: middle; - - &:hover, - &:active, - &:focus { - outline: none; - border-width: 2px; - } - - // Dropdown button animation in mini pipeline graph - &.ci-status-icon-success { - @include mini-pipeline-graph-color(var(--white, $white), $green-100, $green-200, $green-500, $green-600, $green-700); - } - - &.ci-status-icon-failed { - @include mini-pipeline-graph-color(var(--white, $white), $red-100, $red-200, $red-500, $red-600, $red-700); - } - - &.ci-status-icon-pending, - &.ci-status-icon-waiting-for-resource, - &.ci-status-icon-success-with-warnings { - @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); - } - - &.ci-status-icon-running { - @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); - } - - &.ci-status-icon-canceled, - &.ci-status-icon-scheduled, - &.ci-status-icon-disabled, - &.ci-status-icon-manual { - @include mini-pipeline-graph-color(var(--white, $white), $gray-500, $gray-700, $gray-900, $gray-950, $black); - } - - &.ci-status-icon-preparing, - &.ci-status-icon-created, - &.ci-status-icon-not-found, - &.ci-status-icon-skipped { - @include mini-pipeline-graph-color(var(--white, $white), var(--gray-100, $gray-100), var(--gray-200, $gray-200), var(--gray-400, $gray-400), var(--gray-500, $gray-500), var(--gray-600, $gray-600)); - } -} - /** Action icons inside dropdowns: - mini graph in pipelines table diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index eecd4954e39..81d35b8bc7b 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -49,6 +49,7 @@ height: calc(100vh - #{$issue-board-list-difference-xs}); overflow-x: scroll; min-height: 200px; + border-left: 8px solid var(--gray-10, $white); @include media-breakpoint-only(sm) { height: calc(100vh - #{$issue-board-list-difference-sm}); @@ -131,8 +132,7 @@ .board-inner { font-size: $issue-boards-font-size; - background: var(--gray-10, $gray-10); - border: 1px solid var(--gray-100, $gray-100); + background: var(--gray-50, $gray-50); } // to highlight columns we have animated pulse of box-shadow @@ -169,33 +169,7 @@ } } -.board-header { - &.has-border::before { - border-top: 3px solid; - border-color: inherit; - border-top-left-radius: $border-radius-default; - border-top-right-radius: $border-radius-default; - content: ''; - position: absolute; - width: calc(100% + 2px); - top: 0; - left: 0; - margin-top: -1px; - margin-right: -1px; - margin-left: -1px; - padding-top: 1px; - padding-right: 1px; - padding-left: 1px; - - .board-title { - padding-top: ($gl-padding - 3px); - padding-bottom: $gl-padding; - } - } -} - .board-title { - border-bottom: 1px solid var(--gray-100, $gray-100); height: 3rem; .max-issue-size::before { @@ -218,8 +192,7 @@ } .board-card { - background: var(--white, $white); - border: 1px solid var(--gray-100, $gray-100); + background: var(--gray-10, $white); box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1); line-height: $gl-padding; list-style: none; @@ -239,6 +212,10 @@ background-color: var(--blue-50, $blue-50); } + &.sortable-chosen { + box-shadow: 0 2px 4px 0 rgba($black, 0.16); + } + .gl-label { margin-top: 4px; margin-right: 4px; diff --git a/app/assets/stylesheets/page_bundles/dashboard_projects.scss b/app/assets/stylesheets/page_bundles/dashboard_projects.scss index eb0e1701b7f..5eced37bed3 100644 --- a/app/assets/stylesheets/page_bundles/dashboard_projects.scss +++ b/app/assets/stylesheets/page_bundles/dashboard_projects.scss @@ -15,9 +15,9 @@ .blank-state-link { &:hover { - background-color: $gray-light; + background-color: var(--gray-50, $gray-10); + color: var(--gl-text-color, $gl-text-color); text-decoration: none; - color: $gl-text-color; } } diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss new file mode 100644 index 00000000000..9873a0121c0 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/issues_show.scss @@ -0,0 +1,67 @@ +@import 'mixins_and_variables_and_functions'; + +.description { + ul, + ol { + /* We're changing list-style-position to inside because the default of outside + * doesn't move the negative margin to the left of the bullet. */ + list-style-position: inside; + } + + li { + position: relative; + /* In the browser, the li element comes after (to the right of) the bullet point, so hovering + * over the left of the bullet point doesn't trigger a row hover. To trigger hovering on the + * left, we're applying negative margin here to shift the li element left. */ + margin-inline-start: -1rem; + padding-inline-start: 2.5rem; + + .drag-icon { + position: absolute; + inset-block-start: 0.3rem; + inset-inline-start: 1rem; + } + } + + ul.task-list { + > li.task-list-item { + /* We're using !important to override the same selector in typography.scss */ + margin-inline-start: -1rem !important; + padding-inline-start: 2.5rem; + + > input.task-list-item-checkbox { + position: static; + vertical-align: middle; + margin-block-start: -2px; + } + } + } +} + +.description.work-items-enabled { + ul.task-list { + > li.task-list-item { + .js-add-task { + svg { + visibility: hidden; + } + + &:focus svg { + visibility: visible; + } + } + + &:hover, + &:focus-within { + .js-add-task svg { + visibility: visible; + } + } + } + } +} + +.is-ghost { + opacity: 0.3; + pointer-events: none; +} diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 1c8fd7e2590..f153569f99b 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -17,6 +17,11 @@ @import '@gitlab/ui/src/components/base/table/table'; @import '@gitlab/ui/src/components/base/tooltip/tooltip'; @import '@gitlab/ui/src/components/base/search_box_by_type/search_box_by_type'; +@import '@gitlab/ui/src/components/base/form/form_input/form_input'; +@import '@gitlab/ui/src/components/base/form/form_radio/form_radio'; +@import '@gitlab/ui/src/components/base/form/form_radio_group/form_radio_group'; +@import '@gitlab/ui/src/components/base/form/form_checkbox/form_checkbox'; +@import '@gitlab/ui/src/components/base/form/form_group/form_group'; $header-height: 40px; @@ -39,9 +44,3 @@ $header-height: 40px; height: calc(100% - #{$header-height}); max-width: 1000px; } - -// needed for external_link -svg.s16 { - width: 16px; - height: 16px; -} diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 34a3d936a67..f04cdfba0e4 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -41,7 +41,7 @@ $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} + #{$mr-version-controls-height} + #{$diff-file-header-top}); + $top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); position: -webkit-sticky; position: sticky; @@ -121,10 +121,6 @@ $tabs-holder-z-index: 250; @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; } @@ -666,22 +662,19 @@ $tabs-holder-z-index: 250; margin-top: $gl-padding; position: relative; - &::before { + &:not(:last-child)::before { content: ''; border-left: 1px solid var(--gray-100, $gray-100); position: absolute; left: 28px; - top: -17px; + bottom: -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; @@ -703,45 +696,26 @@ $tabs-holder-z-index: 250; } .content-block { - padding: $gl-padding; + padding: $gl-padding-8 $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}); + margin: 0 $gl-spacing-scale-1; - .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}); - } + .dropdown-toggle.gl-button { + padding: $gl-spacing-scale-2 2px $gl-spacing-scale-2 $gl-spacing-scale-2; + font-weight: $gl-font-weight-bold; - .mr-version-menus-container { - flex-wrap: nowrap; + .gl-button-icon { + margin-left: $gl-spacing-scale-1; + } } + } - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height}); - } + .dropdown-title { + color: var(--gl-text-color, $gl-text-color); } } @@ -761,3 +735,11 @@ $tabs-holder-z-index: 250; .attention-request-sidebar-popover { z-index: 999; } + +.merge-request-overview { + @include media-breakpoint-up(md) { + display: grid; + grid-template-columns: 1fr 270px; + grid-gap: 5%; + } +} diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index aa582db10d2..c401f1a4902 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -167,7 +167,7 @@ $status-box-line-height: 26px; border-bottom: 1px solid var(--border-color, $border-color); } -@include media-breakpoint-down(xs) { +@include media-breakpoint-down(md) { .milestone-actions { @include clearfix(); padding-top: $gl-vert-padding; diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index cbb6d68bf35..e6afc70acbb 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: 170px; + width: 8rem; } .gl-linked-pipeline-padding { diff --git a/app/assets/stylesheets/page_bundles/pipeline_editor.scss b/app/assets/stylesheets/page_bundles/pipeline_editor.scss new file mode 100644 index 00000000000..e167052a3e1 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/pipeline_editor.scss @@ -0,0 +1,22 @@ +@import 'mixins_and_variables_and_functions'; + +.file-tree-container { + @include gl-w-full; + + @media (min-width: $breakpoint-md) { + width: 300px; + } +} + +.file-tree-container > div.gl-overflow-y-auto { + max-height: 220px; + + @media (min-width: $breakpoint-md) { + max-height: 700px; + } +} + +.file-tree-includes-link:hover > svg { + @include gl-display-block; + top: 2px; +} diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index 7b54be5c91f..a225a0f0061 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -73,36 +73,12 @@ // Mini Pipelines .stage-cell { - .mini-pipeline-graph-dropdown-toggle { - svg { - height: $ci-action-icon-size; - width: $ci-action-icon-size; - position: absolute; - top: -1px; - left: -1px; - z-index: 2; - overflow: visible; - } - - &:hover, - &:active, - &:focus { - svg { - top: -2px; - left: -2px; - } - } - } - .stage-container { - display: inline-block; - position: relative; - vertical-align: middle; - height: $ci-action-icon-size; - margin: 3px 0; + align-items: center; + display: inline-flex; + .stage-container { - margin-left: 6px; + margin-left: 4px; } // Hack to show a button tooltip inline @@ -118,44 +94,15 @@ &:not(:last-child) { &::after { content: ''; - width: 7px; + width: 4px; position: absolute; - right: -7px; - top: 11px; - border-bottom: 2px solid var(--border-color, $border-color); - } - } - - //delete when all pipelines are updated to new size - &.mr-widget-pipeline-stages { - + .stage-container { - margin-left: 4px; - } - - &:not(:last-child) { - &::after { - width: 4px; - right: -4px; - top: 11px; - } + right: -4px; + border-bottom: 2px solid $gray-200; } } } } -// Commit mini pipeline (HAML) -button.mini-pipeline-graph-dropdown-toggle, -// GlDropdown mini pipeline (Vue) -// As the `mini-pipeline-item` mixin specificity is lower -// than the toggle of dropdown with 'variant="link"' we add -// classes ".gl-button.btn-link" to make it more specific -// and avoid having the size overriden -// -// See https://gitlab.com/gitlab-org/gitlab/-/issues/320737 -button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle { - @include mini-pipeline-item(); -} - // Action icons inside dropdowns: // mini graph in pipelines table // mini graph in MR widget pipeline diff --git a/app/assets/stylesheets/page_bundles/terms.scss b/app/assets/stylesheets/page_bundles/terms.scss index 8eb66e58aed..9dff3e9c99c 100644 --- a/app/assets/stylesheets/page_bundles/terms.scss +++ b/app/assets/stylesheets/page_bundles/terms.scss @@ -22,14 +22,6 @@ justify-content: space-between; line-height: $line-height-base; - .logo-text { - width: 55px; - height: 24px; - display: flex; - flex-direction: column; - justify-content: center; - } - .navbar-collapse { padding-right: 0; flex-grow: 0; |