diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 07:08:36 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 07:08:36 +0000 |
commit | 48aff82709769b098321c738f3444b9bdaa694c6 (patch) | |
tree | e00c7c43e2d9b603a5a6af576b1685e400410dee /app/assets/stylesheets/page_bundles | |
parent | 879f5329ee916a948223f8f43d77fba4da6cd028 (diff) | |
download | gitlab-ce-48aff82709769b098321c738f3444b9bdaa694c6.tar.gz |
Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
22 files changed, 3617 insertions, 20 deletions
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 1e239877428..d1f7c2e9865 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -6,9 +6,10 @@ $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25); a:not(.btn), - .btn-link:hover, - .btn-link:focus, - .btn-link:active { + .gl-button.btn-link, + .gl-button.btn-link:hover, + .gl-button.btn-link:focus, + .gl-button.btn-link:active { color: var(--ide-link-color, $blue-600); } @@ -225,20 +226,20 @@ @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border})); } - .btn:not(.btn-link):not([disabled]):hover { + .btn:not(.gl-button):not(.btn-link):not([disabled]):hover { border-width: var(--ide-btn-hover-border-width, 1px); padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px); } - .btn:not([disabled]).btn-sm:hover { + .btn:not(.gl-button):not([disabled]).btn-sm:hover { padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px); } - .btn:not([disabled]).btn-block:hover { + .btn:not(.gl-button):not([disabled]).btn-block:hover { padding: calc-btn-hover-padding(6px) 0; } - .btn-default, + .btn-default:not(.gl-button), .dropdown, .dropdown-menu-toggle { background-color: var(--ide-input-background, $white) !important; @@ -257,7 +258,7 @@ } // In IDE, the only inverted buttons are `.btn-remove` - .btn-inverted.btn-remove { + .btn-inverted.btn-remove:not(.gl-button) { color: var(--ide-input-color, $red-500) !important; background-color: var(--ide-input-background, $white) !important; border-color: var(--ide-btn-default-border, $red-500); @@ -276,17 +277,21 @@ } } - .btn-default { + // todo: remove this block after all default buttons have been migrated to gl-button + .btn-default:not(.gl-button) { + background-color: var(--ide-btn-default-background, $white) !important; + border-color: var(--ide-btn-default-border, $border-color); + &:hover, &:focus { border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; - background-color: var(--ide-input-background, $white-normal) !important; + background-color: var(--ide-btn-default-background, $white-normal) !important; } &:active, .active { border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; - background-color: var(--ide-input-background, $white-dark) !important; + background-color: var(--ide-btn-default-background, $white-dark) !important; } } @@ -320,8 +325,9 @@ border-color: var(--ide-dropdown-hover-background, $gray-100) !important; } - .btn-primary, - .btn-info { + // todo: remove this block after all primary/info buttons have been migrated to gl-button + .btn-primary:not(.gl-button), + .btn-info:not(.gl-button) { background-color: var(--ide-btn-primary-background, $blue-500); border-color: var(--ide-btn-primary-border, $blue-600) !important; @@ -338,7 +344,8 @@ } } - .btn-success { + // todo: remove this block after all success buttons have been migrated to gl-button + .btn-success:not(.gl-button) { background-color: var(--ide-btn-success-background, $green-500); border-color: var(--ide-btn-success-border, $green-600) !important; @@ -355,12 +362,70 @@ } } - .btn[disabled] { + // todo: remove this block after all disabled buttons have been migrated to gl-button + .btn[disabled]:not(.gl-button) { background-color: var(--ide-btn-default-background, $gray-light) !important; border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important; color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important; } + @function ide-btn-var($btn-type, $var-type, $value) { + @return var(--ide-btn-#{$btn-type}-#{$var-type}, $value); + } + + @mixin ide-gl-button($btn-type, $bg-normal, $bg-hover, $bg-active, $border-normal, $border-hover, $border-focus, $border-active, $border-width-hover: 2px, $box-shadow-hover: $t-gray-a-08, $box-shadow-focus: 0 0 0 4px rgba($blue-500, 0.25)) { + background-color: ide-btn-var($btn-type, background, $bg-normal); + box-shadow: inset 0 0 0 1px ide-btn-var($btn-type, border, $border-normal); + + &:hover, + &:focus { + background-color: ide-btn-var($btn-type, background, $bg-hover); + } + + &:hover { + box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-hover), + 0 2px 2px 0 $box-shadow-hover; + } + + &:focus { + box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-focus), + ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus); + } + + &:active:focus { + background-color: ide-btn-var($btn-type, background, $bg-active); + box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-active), + ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus); + } + } + + .btn-default.gl-button.gl-button { + color: var(--ide-input-color, $gl-text-color); + + @include ide-gl-button(default, $white, $gray-50, $gray-100, $gray-200, $gray-300, $gray-300, $gray-400); + } + + .btn-success.gl-button.gl-button { + @include ide-gl-button(success, $green-500, $green-600, $green-800, $green-600, $green-800, $green-800, $green-900); + } + + .btn-info.gl-button.gl-button, + .btn-primary.gl-button.gl-button { + @include ide-gl-button(primary, $blue-500, $blue-600, $blue-800, $blue-600, $blue-800, $blue-800, $blue-900); + } + + .btn-danger.btn-danger-secondary.gl-button.gl-button { + color: var(--ide-input-color, $red-500); + + @include ide-gl-button(danger-secondary, $white, $red-50, $red-100, $red-500, $red-600, $red-600, $red-700); + } + + .btn[disabled].gl-button.gl-button { + color: var(--ide-btn-disabled-color, $gl-text-color-disabled); + + @include ide-gl-button(disabled, $gray-10, $gray-10, $gray-10, $gray-100, $gray-100, $gray-100, $gray-100, 1px, transparent, transparent); + } + .md table:not(.code) tbody { background-color: var(--ide-border-color, $white); } diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss new file mode 100644 index 00000000000..499394ad960 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -0,0 +1,233 @@ +@mixin flat-connector-before($length: 44px) { + &::before { + content: ''; + position: absolute; + top: 48%; + left: -$length; + border-top: 2px solid $border-color; + width: $length; + height: 1px; + } +} + +@mixin build-content($border-radius: 30px) { + display: inline-block; + padding: 8px 10px 9px; + width: 100%; + border: 1px solid $border-color; + border-radius: $border-radius; + background-color: $white; + + &:hover { + background-color: $gray-darker; + border: 1px solid $dropdown-toggle-active-border-color; + color: $gl-text-color; + } +} + +@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: $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($white, $green-100, $green-200, $green-500, $green-600, $green-700); + } + + &.ci-status-icon-failed { + @include mini-pipeline-graph-color($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($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); + } + + &.ci-status-icon-preparing, + &.ci-status-icon-running { + @include mini-pipeline-graph-color($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-not-found, + &.ci-status-icon-manual { + @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black); + } + + &.ci-status-icon-created, + &.ci-status-icon-skipped { + @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500); + } +} + +/** + Action icons inside dropdowns: + - mini graph in pipelines table + - dropdown in big graph + - mini graph in MR widget pipeline + - mini graph in Commit widget pipeline +*/ +@mixin pipeline-graph-dropdown-menu() { + width: 240px; + max-width: 240px; + + // override dropdown.scss + &.dropdown-menu li button, + &.dropdown-menu li a.ci-action-icon-container { + padding: 0; + text-align: center; + } + + .ci-action-icon-container { + position: absolute; + right: 8px; + top: 8px; + + &.ci-action-icon-wrapper { + height: $ci-action-dropdown-button-size; + width: $ci-action-dropdown-button-size; + border-radius: 50%; + display: block; + + &:hover { + box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color; + background-color: $gray-darker; + + svg { + fill: $gl-text-color; + } + } + + .spinner, + svg { + width: $ci-action-dropdown-svg-size; + height: $ci-action-dropdown-svg-size; + fill: $gl-text-color-secondary; + position: relative; + top: 1px; + vertical-align: initial; + } + } + } + + // SVGs in the commit widget and mr widget + a.ci-action-icon-container.ci-action-icon-wrapper svg { + top: 5px; + } + + .scrollable-menu { + padding: 0; + max-height: 245px; + overflow: auto; + } + + li { + position: relative; + + // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered + &:hover > .mini-pipeline-graph-dropdown-item, + &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item { + @extend .mini-pipeline-graph-dropdown-item:hover; + } + + // link to the build + .mini-pipeline-graph-dropdown-item { + align-items: center; + clear: both; + display: flex; + font-weight: normal; + line-height: $line-height-base; + white-space: nowrap; + + // Match dropdown.scss for all `a` tags + &.non-details-job-component { + padding: $gl-padding-8 $gl-btn-horz-padding; + } + + .ci-job-name-component { + align-items: center; + display: flex; + flex: 1; + } + + .ci-status-icon { + @include gl-mr-3; + + position: relative; + + > svg { + width: $pipeline-dropdown-status-icon-size; + height: $pipeline-dropdown-status-icon-size; + margin: 3px 0; + position: relative; + overflow: visible; + display: block; + } + } + + &:hover, + &:focus { + outline: none; + text-decoration: none; + background-color: $gray-darker; + } + } + } +} diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss new file mode 100644 index 00000000000..e908e3622ed --- /dev/null +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -0,0 +1,613 @@ +@import 'mixins_and_variables_and_functions'; + +.user-can-drag { + cursor: grab; +} + +.is-ghost { + opacity: 0.3; + pointer-events: none; +} + +.dropdown-projects { + .dropdown-content { + max-height: 200px; + } +} + +.dropdown-menu-issues-board-new { + width: 320px; + + .dropdown-content { + max-height: 140px; + } +} + +.issue-board-dropdown-content { + margin: 0; + padding: $gl-padding-4 $gl-padding $gl-padding; + border-bottom: 0; + color: var(--gray-500, $gray-500); +} + +.issue-boards-page { + .content-wrapper { + padding-bottom: 0; + } +} + +.boards-app { + @include media-breakpoint-up(sm) { + transition: width $sidebar-transition-duration; + width: 100%; + + &.is-compact { + width: calc(100% - #{$gutter-width}); + } + } +} + +.boards-list, +.board-swimlanes { + height: calc(100vh - #{$issue-board-list-difference-xs}); + overflow-x: scroll; + min-height: 200px; + + @include media-breakpoint-only(sm) { + height: calc(100vh - #{$issue-board-list-difference-sm}); + } + + @include media-breakpoint-up(md) { + height: calc(100vh - #{$issue-board-list-difference-md}); + } + + @include media-breakpoint-up(lg) { + height: calc(100vh - #{$issue-board-list-difference-lg}); + } + + .with-performance-bar & { + height: calc(100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height}); + + @include media-breakpoint-only(sm) { + height: calc(100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height}); + } + + @include media-breakpoint-up(md) { + height: calc(100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height}); + } + + @include media-breakpoint-up(lg) { + height: calc(100vh - #{$issue-board-list-difference-lg} - #{$performance-bar-height}); + } + } +} + +.board { + // the next line cannot be replaced with .d-inline-block because it breaks display: none of SortableJS + // see https://gitlab.com/gitlab-org/gitlab-foss/issues/64828 + display: inline-block; + width: calc(85vw - 15px); + + @include media-breakpoint-up(sm) { + width: 400px; + } + + .board-title-caret { + border-radius: $border-radius-default; + line-height: $gl-spacing-scale-5; + height: $gl-spacing-scale-5; + + &.btn svg { + top: 0; + } + + &:hover { + background-color: var(--gray-50, $gray-50); + transition: background-color 0.1s linear; + } + } + + &:not(.is-collapsed) { + .board-title-caret { + margin-right: $gl-padding-4; + } + } + + &.is-collapsed { + width: 50px; + + .board-title { + flex-direction: column; + } + + .board-title-caret { + margin-top: 1px; + } + + .user-avatar-link, + .milestone-icon { + margin-top: $gl-padding-8; + transform: rotate(90deg); + } + + .board-title-text { + flex-grow: 0; + margin: $gl-padding-8 0; + + .board-title-main-text { + display: block; + } + + .board-title-sub-text { + display: none; + } + } + + .issue-count-badge { + border: 0; + white-space: nowrap; + padding: 0; + } + + .board-title-text > span, + .issue-count-badge > span { + height: 16px; + + // Force the height to be equal to the parent's width while centering the contents. + // The contents *should* be about 16 px. + // We do this because the flow of elements isn't affected by the rotate transform, so we must ensure that a + // rotated element has square dimensions so it won't overlap with its siblings. + margin: calc(50% - 8px) 0; + + transform: rotate(90deg); + transform-origin: center; + } + } +} + +.board-inner { + font-size: $issue-boards-font-size; + background: var(--gray-10, $gray-10); + border: 1px solid var(--gray-100, $gray-100); +} + +.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 { + align-items: center; + font-size: 1em; + border-bottom: 1px solid var(--gray-100, $gray-100); + padding: 0 $gl-spacing-scale-3; + height: 3rem; + + .js-max-issue-size::before { + content: '/'; + } +} + +.board-title-text { + flex-grow: 1; +} + +.board-delete.gl-button { + background-color: transparent; + outline: 0; + + &:hover { + color: var(--blue-600, $blue-600); + box-shadow: none; + } +} + +.board-blank-state, +.board-promotion-state { + background-color: var(--white, $white); + flex: 1; + overflow-y: auto; + overflow-x: hidden; +} + +.board-blank-state-list { + > li:not(:last-child) { + margin-bottom: 8px; + } + + .label-color { + top: 2px; + width: 16px; + height: 16px; + margin-right: 3px; + } +} + +.board-list-component { + min-height: 0; // firefox fix +} + +.board-list { + overflow-y: auto; + overflow-x: hidden; +} + +.board-list-loading { + margin-top: 10px; + font-size: (26px / $issue-boards-font-size) * 1em; +} + +.board-card { + background: var(--white, $white); + border: 1px solid var(--gray-100, $gray-100); + box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1); + line-height: $gl-padding; + list-style: none; + position: relative; + + &:not(:last-child) { + margin-bottom: $gl-padding-8; + } + + &.is-active, + &.is-active .board-card-assignee:hover a { + background-color: var(--blue-50, $blue-50); + } + + &.multi-select { + border-color: var(--blue-200, $blue-200); + background-color: var(--blue-50, $blue-50); + } + + .gl-label { + margin-top: 4px; + margin-right: 4px; + } + + .confidential-icon { + color: var(--orange-500, $orange-500); + cursor: help; + } + + .issue-blocked-icon { + color: var(--red-500, $red-500); + } + + @include media-breakpoint-down(md) { + padding: $gl-padding-8; + } +} + +.board-card-title { + @include overflow-break-word(); + font-size: 1em; + + a { + color: var(--gray-900, $gray-900); + } + + @include media-breakpoint-down(md) { + font-size: $label-font-size; + } +} + +.board-card-header { + text-align: initial; +} + +.board-card-assignee { + margin-top: -$gl-padding-4; + margin-bottom: -$gl-padding-4; + + .avatar-counter { + vertical-align: middle; + line-height: $gl-padding-24; + min-width: $gl-padding-24; + height: $gl-padding-24; + border-radius: $gl-padding-24; + background-color: var(--gray-400, $gray-400); + font-size: $gl-font-size-xs; + cursor: help; + font-weight: $gl-font-weight-bold; + margin-left: -$gl-padding-4; + border: 0; + padding: 0 $gl-padding-4; + + @include media-breakpoint-down(md) { + min-width: auto; + height: $gl-padding; + border-radius: $gl-padding; + line-height: $gl-padding; + } + } + + img { + vertical-align: top; + } + + .user-avatar-link:not(:only-child) { + margin-left: -$gl-padding-4; + + &:nth-of-type(1) { + z-index: 2; + } + + &:nth-of-type(2) { + z-index: 1; + } + } + + .avatar { + @include media-breakpoint-down(md) { + width: $gl-padding; + height: $gl-padding; + } + } + + @include media-breakpoint-down(md) { + margin-top: 0; + margin-bottom: 0; + } +} + +.board-card-number { + font-size: $gl-font-size-xs; + color: var(--gray-500, $gray-500); + + @include media-breakpoint-up(md) { + font-size: $label-font-size; + } +} + +.board-list-count { + padding: 10px 0; + color: var(--gray-500, $gray-500); + font-size: 13px; +} + +.board-new-issue-form { + z-index: 4; + margin: 5px; +} + +.right-sidebar.issue-boards-sidebar { + .gutter-toggle { + bottom: 15px; + width: 22px; + padding-left: $gl-padding-32; + + svg { + position: absolute; + top: 50%; + right: 0; + margin-top: (-11px / 2); + height: $gl-font-size-12; + width: $gl-font-size-12; + } + } + + .issuable-header-text { + @include overflow-break-word(); + padding-right: 35px; + } +} + +.right-sidebar.right-sidebar-expanded { + &.boards-sidebar-slide-enter-active, + &.boards-sidebar-slide-leave-active { + transition: width $sidebar-transition-duration, padding $sidebar-transition-duration; + } + + &.boards-sidebar-slide-enter, + &.boards-sidebar-slide-leave-active { + width: 0; + padding-left: 0; + padding-right: 0; + } +} + +.add-issues-modal { + background-color: rgba($black, 0.3); + z-index: 9999; +} + +.add-issues-container { + width: 90vw; + height: 85vh; + max-width: 1100px; + min-height: 500px; + padding: 25px 15px 0; + background-color: var(--white, $white); + box-shadow: 0 2px 12px rgba(var(--black, $black), 0.5); + + .empty-state { + &.add-issues-empty-state-filter { + flex-direction: column; + justify-content: center; + } + + .svg-content { + margin-top: -40px; + } + } +} + +.add-issues-header { + margin: -25px -15px -5px; + border-bottom: 1px solid $border-color; + border-top-right-radius: $border-radius-default; + border-top-left-radius: $border-radius-default; + + > h2 { + font-size: 18px; + } +} + +.add-issues-list-column { + width: 100%; + + @include media-breakpoint-up(sm) { + width: 50%; + } + + @include media-breakpoint-up(md) { + width: (100% / 3); + } +} + +.add-issues-list { + padding-top: 3px; + margin-left: -$gl-vert-padding; + margin-right: -$gl-vert-padding; + overflow-y: scroll; + + .board-card-parent { + padding: 0 5px 5px; + } + + .board-card { + border: 1px solid var(--gray-900, $gray-900); + box-shadow: 0 1px 2px rgba(var(--black, $black), 0.4); + cursor: pointer; + } +} + +.add-issues-footer { + margin: auto -15px 0; + padding-left: 15px; + padding-right: 15px; + border-bottom-right-radius: $border-radius-default; + border-bottom-left-radius: $border-radius-default; +} + +.add-issues-footer-to-list { + padding-left: $gl-vert-padding; + padding-right: $gl-vert-padding; + line-height: $input-height; +} + +.issue-card-selected { + position: absolute; + right: -3px; + top: -3px; + width: 17px; + background-color: var(--blue-500, $blue-500); + color: $white; + border: 1px solid var(--blue-600, $blue-600); + font-size: 9px; + line-height: 15px; + border-radius: 50%; +} + +.board-card-info { + color: var(--gray-500, $gray-500); + white-space: nowrap; + margin-right: $gl-padding-8; + + &:not(.board-card-weight) { + cursor: help; + } + + &.board-card-weight { + color: var(--gray-500, $gray-500); + cursor: pointer; + + &:hover { + color: initial; + text-decoration: underline; + } + } + + .board-card-info-icon { + color: var(--gray-500, $gray-500); + margin-right: $gl-padding-4; + vertical-align: text-top; + } + + @include media-breakpoint-down(md) { + font-size: $label-font-size; + } +} + +.board-issue-path.js-show-tooltip { + cursor: help; +} + +.board-labels-toggle-wrapper, +.board-swimlanes-toggle-wrapper { + /** + * Make the wrapper the same height as a button so it aligns properly when the + * filtered-search-box input element increases in size on Linux smaller breakpoints + */ + height: $input-height; +} + +.issue-boards-content.is-focused { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: var(--white, $white); + z-index: 9000; + + @include media-breakpoint-down(sm) { + padding-top: 10px; + } + + .boards-list { + height: calc(100vh - #{$issue-boards-filter-height}); + overflow-x: scroll; + } + + .issue-boards-sidebar { + height: 100%; + top: 0; + } +} + +.board-swimlanes { + overflow-x: auto; +} + +.board-header-collapsed-info-icon:hover { + color: var(--gray-900, $gray-900); +} + +$epic-icons-spacing: 40px; + +.board-epic-lane { + max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing}); + + .page-with-icon-sidebar & { + max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing}); + } + + .page-with-icon-sidebar .is-compact & { + max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing}); + } + + .is-compact & { + max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing}); + } +} diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss new file mode 100644 index 00000000000..3a5e2e4159d --- /dev/null +++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss @@ -0,0 +1,355 @@ +@import 'mixins_and_variables_and_functions'; + +#cycle-analytics, +.cycle-analytics { + margin: 24px auto 0; + position: relative; + + .landing { + margin-top: 0; + + .inner-content { + white-space: normal; + + h4, + p { + margin: 7px 0 0; + max-width: 480px; + padding: 0 $gl-padding; + + @include media-breakpoint-down(sm) { + margin: 0 auto; + } + } + } + + .svg-container svg { + width: 136px; + height: 136px; + } + } + + .col-headers { + ul { + @include clearfix; + margin: 0; + padding: 0; + } + + li { + display: inline-block; + float: left; + line-height: 50px; + width: 20%; + } + + .stage-header { + width: 20.5%; + } + + .median-header { + width: 19.5%; + } + + .event-header { + width: 45%; + } + + .total-time-header { + width: 15%; + } + } + + .card { + .content-block { + padding: 24px 0; + border-bottom: 0; + position: relative; + + @include media-breakpoint-down(xs) { + padding: 6px 0 24px; + } + } + + .column { + text-align: center; + + @include media-breakpoint-down(xs) { + padding: 15px 0; + } + + .header { + font-size: 30px; + line-height: 38px; + font-weight: $gl-font-weight-normal; + margin: 0; + } + + .text { + color: var(--gray-500, $gray-500); + margin: 0; + } + + &:last-child { + @include media-breakpoint-down(xs) { + text-align: center; + } + } + } + } + + .stage-panel-body { + display: flex; + flex-wrap: wrap; + } + + .stage-nav, + .stage-entries { + display: flex; + vertical-align: top; + font-size: $gl-font-size; + } + + .stage-nav { + width: 40%; + margin-bottom: 0; + + ul { + padding: 0; + margin: 0; + width: 100%; + } + + li { + @include clearfix; + list-style-type: none; + } + + .stage-nav-item { + line-height: 65px; + + &.active { + background: var(--blue-50, $blue-50); + border-color: var(--blue-300, $blue-300); + box-shadow: inset 4px 0 0 0 var(--blue-500, $blue-500); + } + + &:hover:not(.active) { + background-color: var(--gray-10, $gray-10); + box-shadow: inset 2px 0 0 0 var(--border-color, $border-color); + cursor: pointer; + } + + .stage-nav-item-cell.stage-name { + width: 44.5%; + } + + .stage-nav-item-cell.stage-median { + min-width: 43%; + } + + .stage-empty, + .not-available { + color: var(--gray-500, $gray-500); + } + } + } + + .stage-panel-container { + width: 100%; + overflow: auto; + } + + .stage-panel { + min-width: 968px; + + .card-header { + padding: 0; + background-color: transparent; + } + + .events-description { + line-height: 65px; + padding: 0 $gl-padding; + } + + .events-info { + color: var(--gray-500, $gray-500); + } + } + + .stage-events { + width: 60%; + min-height: 467px; + } + + .stage-event-list { + margin: 0; + padding: 0; + } + + .stage-event-item { + @include clearfix; + list-style-type: none; + padding: 0 0 $gl-padding; + margin: 0 $gl-padding $gl-padding; + border-bottom: 1px solid var(--gray-50, $gray-50); + + &:last-child { + border-bottom: 0; + margin-bottom: 0; + } + + .item-details, + .item-time { + float: left; + } + + .item-details { + width: 75%; + } + + .item-title { + margin: 0 0 2px; + + &.issue-title, + &.commit-title, + &.merge-request-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; + display: block; + + a { + color: var(--gl-text-color, $gl-text-color); + } + } + } + + .item-time { + width: 25%; + text-align: right; + } + + .total-time { + font-size: $cycle-analytics-big-font; + color: var(--gl-text-color, $gl-text-color); + + span { + color: var(--gl-text-color, $gl-text-color); + font-size: $gl-font-size; + } + } + + .issue-date, + .build-date { + color: var(--gl-text-color, $gl-text-color); + } + + .mr-link, + .issue-link, + .commit-author-link, + .issue-author-link { + color: var(--gl-text-color, $gl-text-color); + } + + // Custom CSS for components + .item-conmmit-component { + .commit-icon { + svg { + display: inline-block; + width: 20px; + height: 20px; + vertical-align: bottom; + } + } + } + + .merge-request-branch { + a { + max-width: 180px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: bottom; + } + } + } + + // Custom Styles for stage items + .item-build-component { + .item-title { + .icon-build-status { + float: left; + margin-right: 5px; + position: relative; + top: 2px; + } + + .item-build-name { + color: var(--gl-text-color, $gl-text-color); + } + + .pipeline-id { + color: var(--gl-text-color, $gl-text-color); + padding: 0 3px 0 0; + } + + .ref-name { + color: var(--gray-900, $gray-900); + display: inline-block; + max-width: 180px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + line-height: 1.3; + vertical-align: top; + } + + .commit-sha { + color: var(--blue-600, $blue-600); + line-height: 1.3; + vertical-align: top; + font-weight: $gl-font-weight-normal; + } + + .fa { + color: var(--gray-500, $gray-500); + font-size: $code-font-size; + } + } + } + + .empty-stage, + .no-access-stage { + text-align: center; + width: 75%; + margin: 0 auto; + padding-top: 130px; + color: var(--gray-500, $gray-500); + + h4 { + color: var(--gl-text-color, $gl-text-color); + } + } + + .empty-stage { + .icon-no-data { + height: 36px; + width: 78px; + display: inline-block; + margin-bottom: 20px; + } + } + + .no-access-stage { + .icon-lock { + height: 36px; + width: 78px; + display: inline-block; + margin-bottom: 20px; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/dev_ops_report.scss b/app/assets/stylesheets/page_bundles/dev_ops_report.scss new file mode 100644 index 00000000000..5c6019efce6 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/dev_ops_report.scss @@ -0,0 +1,261 @@ +@import 'mixins_and_variables_and_functions'; + +$space-between-cards: 8px; + +.devops-empty svg { + margin: 64px auto 32px; + max-width: 420px; +} + +.devops-header { + margin-top: $gl-padding; + margin-bottom: $gl-padding; + padding: 0 4px; + display: flex; + align-items: center; + + .devops-header-title { + font-size: 48px; + line-height: 1; + margin: 0; + } + + .devops-header-subtitle { + font-size: 22px; + line-height: 1; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + margin-left: 8px; + font-weight: $gl-font-weight-normal; + + .devops-header-icon { + vertical-align: px-to-rem(-$gl-spacing-scale-1); + } + + a { + font-size: 18px; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + + &:hover { + color: var(--blue-500, $blue-500); + } + } + } +} + +.devops-cards { + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.devops-card-wrapper { + display: flex; + flex-direction: column; + align-items: stretch; + text-align: center; + width: 50%; + border-color: var(--border-color, $border-color); + margin: 0 0 32px; + padding: $space-between-cards / 2; + position: relative; + + @include media-breakpoint-up(xs) { + width: percentage(1 / 4); + } + + @include media-breakpoint-up(sm) { + width: percentage(1 / 5); + } + + @include media-breakpoint-up(md) { + width: percentage(1 / 6); + } + + @include media-breakpoint-up(lg) { + width: percentage(1 / 10); + } +} + +.devops-card { + border: solid 1px var(--border-color, $border-color); + border-radius: 3px; + border-top-width: 3px; + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.devops-card-low { + border-top-color: var(--red-400, $red-400); + + .board-card-score-big { + background-color: var(--red-50, $red-50); + } +} + +.devops-card-average { + border-top-color: var(--orange-200, $orange-200); + + .board-card-score-big { + background-color: var(--orange-50, $orange-50); + } +} + +.devops-card-high { + border-top-color: var(--green-400, $green-400); + + .board-card-score-big { + background-color: var(--green-50, $green-50); + } +} + +.devops-card-title { + margin: $gl-padding auto auto; + max-width: 100px; + + h3 { + font-size: 14px; + margin: 0 0 2px; + } + + .light-text { + font-size: 13px; + line-height: 1.25; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + } +} + +.board-card-scores { + display: flex; + justify-content: space-around; + align-items: center; + margin: $gl-padding $gl-btn-padding; + line-height: 1; +} + +.board-card-score { + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + + .board-card-score-name { + font-size: 13px; + margin-top: 4px; + } +} + +.board-card-score-value { + font-size: 16px; + color: var(--gl-text-color, $gl-text-color); + font-weight: $gl-font-weight-normal; +} + +.board-card-score-big { + border-top: 2px solid var(--border-color, $border-color); + border-bottom: 1px solid var(--border-color, $border-color); + font-size: 22px; + padding: 10px 0; + font-weight: $gl-font-weight-normal; +} + +.board-card-buttons { + display: flex; + + > * { + font-size: 16px; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + padding: 10px; + flex-grow: 1; + + &:hover { + background-color: var(--border-color, $border-color); + color: var(--border-color, $border-color); + } + + + * { + border-left: solid 1px var(--border-color, $border-color); + } + } +} + +.devops-steps { + margin-top: $gl-padding; + height: 1px; + min-width: 100%; + justify-content: space-around; + position: relative; + background: var(--border-color, $border-color); +} + +.devops-step { + $step-positions: 5% 10% 30% 42% 48% 55% 60% 70% 75% 90%; + @each $pos in $step-positions { + $i: index($step-positions, $pos); + + &:nth-child(#{$i}) { + left: $pos; + } + } + + position: absolute; + transform-origin: 75% 50%; + padding: 8px; + height: 50px; + width: 50px; + border-radius: 3px; + display: flex; + flex-direction: column; + align-items: center; + border: solid 1px var(--border-color, $border-color); + background: var(--white, $white); + transform: translate(-50%, -50%); + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + fill: var(--gl-text-color-secondary, $gl-text-color-secondary); + box-shadow: 0 2px 4px var(--dropdown-shadow-color, $dropdown-shadow-color); + + &:hover { + padding: 8px 10px; + fill: currentColor; + z-index: 100; + height: auto; + width: auto; + + .devops-step-title { + max-height: 2em; + opacity: 1; + transition: opacity 0.2s; + } + + svg { + transform: scale(1.5); + margin: $gl-btn-padding; + } + } + + svg { + transition: transform 0.1s; + width: 30px; + height: 30px; + min-height: 30px; + min-width: 30px; + } +} + +.devops-step-title { + max-height: 0; + opacity: 0; + text-transform: uppercase; + margin: $gl-vert-padding 0 0; + text-align: center; + font-size: 12px; +} + +.devops-high-score { + color: var(--green-400, $green-400); +} + +.devops-average-score { + color: var(--orange-500, $orange-500); +} + +.devops-low-score { + color: var(--red-400, $red-400); +} diff --git a/app/assets/stylesheets/page_bundles/environments.scss b/app/assets/stylesheets/page_bundles/environments.scss new file mode 100644 index 00000000000..871f118ea9d --- /dev/null +++ b/app/assets/stylesheets/page_bundles/environments.scss @@ -0,0 +1,131 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.environments-container { + .ci-table { + .commit-title { + margin: 0; + } + + .external-url, + .dropdown-new { + color: var(--gray-500, $gray-500); + } + + .build-link, + .ref-name { + color: var(--gray-900, $gray-900); + } + + .folder-icon { + margin-right: 3px; + color: var(--gray-500, $gray-500); + display: inline-block; + vertical-align: text-top; + } + + .folder-name { + cursor: pointer; + color: var(--gray-500, $gray-500); + display: inline-block; + } + + .icon-container { + width: 20px; + text-align: center; + } + + .no-btn { + border: 0; + background: none; + outline: none; + width: 100%; + text-align: left; + } + + .environment-child-row { + padding-left: 20px; + } + } +} + +.gl-responsive-table-row { + .branch-commit { + max-width: 100%; + } +} + +.folder-row { + border-left: 0; + border-right: 0; + + @media (min-width: map-get($grid-breakpoints, md)-1) { + border-top: 0; + } +} + +.x-axis path, +.y-axis path, +.label-x-axis-line, +.label-y-axis-line { + fill: none; + stroke-width: 1; + shape-rendering: crispEdges; +} + +.x-axis path, +.y-axis path { + stroke: var(--gray-300, $gray-300); +} + +.label-x-axis-line, +.label-y-axis-line { + stroke: var(--gray-100, $gray-100); +} + +.y-axis { + line { + stroke: var(--gray-300, $gray-300); + stroke-width: 1; + } +} + +.metric-area { + opacity: 0.25; +} + +.rect-text-metric { + fill: var(--white, $white); + stroke-width: 1; + stroke: var(--gray-600, $gray-600); +} + +.rect-axis-text { + fill: var(--white, $white); +} + +.text-metric { + font-size: 12px; +} + +.selected-metric-line { + stroke: var(--gray-900, $gray-900); + stroke-width: 1; +} + +.deployment-line { + stroke: var(--white, $white); + stroke-width: 1; +} + +.divider-line { + stroke-width: 1; + stroke: var(--gray-600, $gray-600); +} + +.environments-actions { + .external-url, + .monitoring-url, + .terminal-button { + width: 38px; + } +} diff --git a/app/assets/stylesheets/page_bundles/error_tracking_details.scss b/app/assets/stylesheets/page_bundles/error_tracking_details.scss new file mode 100644 index 00000000000..a47c5cc9b3e --- /dev/null +++ b/app/assets/stylesheets/page_bundles/error_tracking_details.scss @@ -0,0 +1,51 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.error-details { + li { + @include gl-line-height-32; + } + + .btn-outline-info { + color: var(--blue-500, $blue-500); + border-color: var(--blue-500, $blue-500); + } + + .error-details-header { + border-bottom: 1px solid var(--border-color, $border-color); + + @include media-breakpoint-down(xs) { + flex-flow: column; + + .error-details-meta-culprit { + display: flex; + } + + .error-details-options { + width: 100%; + + .dropdown-toggle { + text-align: center; + } + } + } + } +} + +.stacktrace { + .file-title { + svg { + vertical-align: middle; + top: -1px; + } + } + + .file-title-name { + &.limited-width { + max-width: 80%; + } + } + + .line_content.old::before { + content: none !important; + } +} diff --git a/app/assets/stylesheets/page_bundles/error_tracking_index.scss b/app/assets/stylesheets/page_bundles/error_tracking_index.scss new file mode 100644 index 00000000000..65bddfb7890 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/error_tracking_index.scss @@ -0,0 +1,40 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.error-list { + .dropdown { + min-width: auto; + } + + .sort-control { + .btn { + padding-right: 2rem; + } + + .gl-dropdown-caret { + position: absolute; + right: 0.5rem; + top: 0.5rem; + } + } + + @include media-breakpoint-down(sm) { + .error-list-table { + .table-col { + min-height: 68px; + + &:last-child { + background-color: var(--gray-10, $gray-10); + + &::before { + content: none !important; + } + + div { + width: 100% !important; + padding: 0 !important; + } + } + } + } + } +} diff --git a/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss b/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss new file mode 100644 index 00000000000..337b5b001fe --- /dev/null +++ b/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss @@ -0,0 +1,96 @@ +@import 'mixins_and_variables_and_functions'; + +.signup-page { + .page-wrap { + background-color: var(--gray-10, $gray-10); + } + + .signup-box-container { + max-width: 960px; + } + + .signup-box { + background-color: var(--white, $white); + box-shadow: 0 0 0 1px var(--border-color, $border-color); + border-radius: $border-radius; + } + + .form-control { + &:active, + &:focus { + background-color: var(--white, $white); + } + } + + .devise-errors { + h2 { + font-size: $gl-font-size; + color: var(--red-700, $red-700); + } + } + + .omniauth-divider { + &::before, + &::after { + content: ''; + flex: 1; + border-bottom: 1px solid var(--gray-100, $gray-100); + margin: $gl-padding-24 0; + } + + &::before { + margin-right: $gl-padding; + } + + &::after { + margin-left: $gl-padding; + } + } + + .omniauth-btn { + width: 48%; + + @include media-breakpoint-down(md) { + width: 100%; + } + + img { + width: $default-icon-size; + height: $default-icon-size; + } + } + + .decline-page { + width: 350px; + } +} + +.signup-page[data-page^='registrations:experience_levels'] { + $card-shadow-color: rgba(var(--black, $black), 0.2); + + .page-wrap { + background-color: var(--white, $white); + } + + .card-deck { + max-width: 828px; + } + + .card { + transition: box-shadow 0.3s ease-in-out; + } + + .card:hover { + box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color; + } + + @media (min-width: $breakpoint-sm) { + .card-deck .card { + margin: 0 $gl-spacing-scale-3; + } + } + + .stretched-link:hover { + text-decoration: none; + } +} diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss index 37e6be9849b..41f9a8e6db7 100644 --- a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss +++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss @@ -20,20 +20,28 @@ --ide-btn-default-background: transparent; --ide-btn-default-border: #bfbfbf; --ide-btn-default-hover-border: #d8d8d8; + --ide-btn-default-hover-border-width: 2px; + --ide-btn-default-focus-box-shadow: 0 0 0 1px #bfbfbf; --ide-btn-primary-background: #1068bf; --ide-btn-primary-border: #428fdc; --ide-btn-primary-hover-border: #63a6e9; + --ide-btn-primary-hover-border-width: 2px; + --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9; --ide-btn-success-background: #217645; --ide-btn-success-border: #108548; --ide-btn-success-hover-border: #2da160; + --ide-btn-success-hover-border-width: 2px; + --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160; + --ide-btn-disabled-background: transparent; --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border-width: 1px; + --ide-btn-disabled-focus-box-shadow: 0 0 0 0 transparent; --ide-btn-disabled-color: rgba(145, 145, 145, 0.48); - --ide-btn-hover-border-width: 2px; - --ide-dropdown-background: #404040; --ide-dropdown-hover-background: #525252; diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss index 0ef0834d8db..ccb6f7a333b 100644 --- a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss +++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss @@ -18,22 +18,30 @@ --ide-input-color: #fff; --ide-btn-default-background: transparent; - --ide-btn-default-border: var(--ide-input-border); + --ide-btn-default-border: #d8d8d8; --ide-btn-default-hover-border: #d8d8d8; + --ide-btn-default-hover-border-width: 2px; + --ide-btn-default-focus-box-shadow: 0 0 0 1px #d8d8d8; --ide-btn-primary-background: #1068bf; --ide-btn-primary-border: #428fdc; --ide-btn-primary-hover-border: #63a6e9; + --ide-btn-primary-hover-border-width: 2px; + --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9; --ide-btn-success-background: #217645; --ide-btn-success-border: #108548; --ide-btn-success-hover-border: #2da160; + --ide-btn-success-hover-border-width: 2px; + --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160; + --ide-btn-disabled-background: transparent; --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border-width: 1px; + --ide-btn-disabled-focus-box-shadow: transparent; --ide-btn-disabled-color: rgba(145, 145, 145, 0.48); - --ide-btn-hover-border-width: 2px; - --ide-dropdown-background: #004c61; --ide-dropdown-hover-background: #00617a; diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss new file mode 100644 index 00000000000..8a958bdf0c5 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/issues_list.scss @@ -0,0 +1,45 @@ +@import 'mixins_and_variables_and_functions'; + +.issues-list { + &.manual-ordering { + background-color: var(--gray-10, $gray-10); + border-radius: $border-radius-default; + padding: $gl-padding-8; + + .issue { + background-color: var(--white, $white); + margin-bottom: $gl-padding-8; + border-radius: $border-radius-default; + border: 1px solid var(--border-color, $border-color); + box-shadow: 0 1px 2px $issue-boards-card-shadow; + } + } + + .issue { + padding: 10px $gl-padding; + position: relative; + + .title { + margin-bottom: 2px; + } + + .issue-labels, + .author-link { + display: inline-block; + } + + .icon-merge-request-unmerged { + height: 13px; + margin-bottom: 3px; + } + } +} + +.user-can-drag { + cursor: grab; +} + +.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 83d16f29d49..b8cdd120e04 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -13,6 +13,7 @@ $atlaskit-border-color: #dfe1e6; padding-top: $gl-padding-4; .ak-button { + align-items: center; height: auto; margin-left: $btn-margin-5; } @@ -20,6 +21,74 @@ $atlaskit-border-color: #dfe1e6; } } +$header-height: 40px; + +.jira-connect-header { + border-bottom: 1px solid $gray-100; + display: flex; + align-items: center; + justify-content: center; + min-height: $header-height; + padding-left: 16px; + padding-right: 16px; + position: fixed; + top: 0; + left: 0; + right: 0; +} + +.jira-connect-user { + float: right; + position: relative; + top: -30px; +} + +.jira-connect-app { + margin-top: $header-height; + max-width: 600px; + padding-top: 48px; + padding-left: 16px; + padding-right: 16px; + margin-left: auto; + margin-right: auto; + text-align: center; +} + +.gl-mt-5 { + margin-top: 16px; +} + +.heading-with-border { + border-bottom: 1px solid $gray-100; + display: inline-block; + padding-bottom: 16px; +} + +svg { + fill: currentColor; + + &.s16 { + height: 16px; + width: 16px; + } +} + +.ak-field-group label { + text-align: left; +} + +.ak-button__appearance-primary { + &:hover { + color: $white; + text-decoration: none; + } + + svg { + align-self: center; + margin-left: 4px; + } +} + .subscriptions { tbody { tr { @@ -31,3 +100,11 @@ $atlaskit-border-color: #dfe1e6; } } } + +.empty-subscriptions { + color: $gray-900; +} + +.browser-limitations-notice { + margin-top: 32px; +} diff --git a/app/assets/stylesheets/page_bundles/jira_connect_users.scss b/app/assets/stylesheets/page_bundles/jira_connect_users.scss new file mode 100644 index 00000000000..6725bf8f1a1 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/jira_connect_users.scss @@ -0,0 +1,13 @@ +@import 'mixins_and_variables_and_functions'; + +.jira-connect-users-container { + margin-left: auto; + margin-right: auto; + width: px-to-rem(350px); +} + +.devise-layout-html body .navless-container { + @include media-breakpoint-down(xs) { + padding-top: 65px; + } +} diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss new file mode 100644 index 00000000000..b0655408edf --- /dev/null +++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss @@ -0,0 +1,316 @@ +@import 'mixins_and_variables_and_functions'; +// Disabled to use the color map for creating color schemes +// scss-lint:disable ColorVariable +$colors: ( + white-header-head-neutral : #e1fad7, + white-line-head-neutral : #effdec, + white-button-head-neutral : #9adb84, + + white-header-head-chosen : #baf0a8, + white-line-head-chosen : #e1fad7, + white-button-head-chosen : #52c22d, + + white-header-origin-neutral : #e0f0ff, + white-line-origin-neutral : #f2f9ff, + white-button-origin-neutral : #87c2fa, + + white-header-origin-chosen : #add8ff, + white-line-origin-chosen : #e0f0ff, + white-button-origin-chosen : #268ced, + + white-header-not-chosen : #f0f0f0, + white-line-not-chosen : $gray-light, + + dark-header-head-neutral : rgba(#3f3, 0.2), + dark-line-head-neutral : rgba(#3f3, 0.1), + dark-button-head-neutral : #40874f, + + dark-header-head-chosen : rgba(#3f3, 0.33), + dark-line-head-chosen : rgba(#3f3, 0.2), + dark-button-head-chosen : #258537, + + dark-header-origin-neutral : rgba(#2878c9, 0.4), + dark-line-origin-neutral : rgba(#2878c9, 0.3), + dark-button-origin-neutral : #2a5c8c, + + dark-header-origin-chosen : rgba(#2878c9, 0.6), + dark-line-origin-chosen : rgba(#2878c9, 0.4), + dark-button-origin-chosen : #1d6cbf, + + dark-header-not-chosen : rgba(#fff, 0.25), + dark-line-not-chosen : rgba(#fff, 0.1), + + monokai-header-head-neutral : rgba(#a6e22e, 0.25), + monokai-line-head-neutral : rgba(#a6e22e, 0.1), + monokai-button-head-neutral : #376b20, + + monokai-header-head-chosen : rgba(#a6e22e, 0.4), + monokai-line-head-chosen : rgba(#a6e22e, 0.25), + monokai-button-head-chosen : #39800d, + + monokai-header-origin-neutral : rgba(#60d9f1, 0.35), + monokai-line-origin-neutral : rgba(#60d9f1, 0.15), + monokai-button-origin-neutral : #38848c, + + monokai-header-origin-chosen : rgba(#60d9f1, 0.5), + monokai-line-origin-chosen : rgba(#60d9f1, 0.35), + monokai-button-origin-chosen : #3ea4b2, + + monokai-header-not-chosen : rgba(#76715d, 0.24), + monokai-line-not-chosen : rgba(#76715d, 0.1), + + solarized-light-header-head-neutral : rgba(#859900, 0.37), + solarized-light-line-head-neutral : rgba(#859900, 0.2), + solarized-light-button-head-neutral : #afb262, + + solarized-light-header-head-chosen : rgba(#859900, 0.5), + solarized-light-line-head-chosen : rgba(#859900, 0.37), + solarized-light-button-head-chosen : #94993d, + + solarized-light-header-origin-neutral : rgba(#2878c9, 0.37), + solarized-light-line-origin-neutral : rgba(#2878c9, 0.15), + solarized-light-button-origin-neutral : #60a1bf, + + solarized-light-header-origin-chosen : rgba(#2878c9, 0.6), + solarized-light-line-origin-chosen : rgba(#2878c9, 0.37), + solarized-light-button-origin-chosen : #2482b2, + + solarized-light-header-not-chosen : rgba(#839496, 0.37), + solarized-light-line-not-chosen : rgba(#839496, 0.2), + + solarized-dark-header-head-neutral : rgba(#859900, 0.35), + solarized-dark-line-head-neutral : rgba(#859900, 0.15), + solarized-dark-button-head-neutral : #376b20, + + solarized-dark-header-head-chosen : rgba(#859900, 0.5), + solarized-dark-line-head-chosen : rgba(#859900, 0.35), + solarized-dark-button-head-chosen : #39800d, + + solarized-dark-header-origin-neutral : rgba(#2878c9, 0.35), + solarized-dark-line-origin-neutral : rgba(#2878c9, 0.15), + solarized-dark-button-origin-neutral : #086799, + + solarized-dark-header-origin-chosen : rgba(#2878c9, 0.6), + solarized-dark-line-origin-chosen : rgba(#2878c9, 0.35), + solarized-dark-button-origin-chosen : #0082cc, + + solarized_dark_header_not_chosen : rgba(#839496, 0.25), + solarized_dark_line_not_chosen : rgba(#839496, 0.15), + + none_header_head_neutral : $gray-normal, + none_line_head_neutral : $gray-normal, + none_button_head_neutral : $gray-normal, + + none_header_head_chosen : $gray-darker, + none_line_head_chosen : $gray-darker, + none_button_head_chosen : $gray-darker, + + none_header_origin_neutral : $gray-normal, + none_line_origin_neutral : $gray-normal, + none_button_origin_neutral : $gray-normal, + + none_header_origin_chosen : $gray-darker, + none_line_origin_chosen : $gray-darker, + none_button_origin_chosen : $gray-darker, + + none_header_not_chosen : $gray-light, + none_line_not_chosen : $gray-light + +); +// scss-lint:enable ColorVariable + +@mixin color-scheme($color) { + .header.line_content, + .diff-line-num { + &.origin { + background-color: map-get($colors, #{$color}-header-origin-neutral); + border-color: map-get($colors, #{$color}-header-origin-neutral); + + button { + background-color: map-get($colors, #{$color}-button-origin-neutral); + border-color: darken(map-get($colors, #{$color}-button-origin-neutral), 15); + } + + &.selected { + background-color: map-get($colors, #{$color}-header-origin-chosen); + border-color: map-get($colors, #{$color}-header-origin-chosen); + + button { + background-color: map-get($colors, #{$color}-button-origin-chosen); + border-color: darken(map-get($colors, #{$color}-button-origin-chosen), 15); + } + } + + &.unselected { + background-color: map-get($colors, #{$color}-header-not-chosen); + border-color: map-get($colors, #{$color}-header-not-chosen); + + button { + background-color: lighten(map-get($colors, #{$color}-button-origin-neutral), 15); + border-color: map-get($colors, #{$color}-button-origin-neutral); + } + } + } + + &.head { + background-color: map-get($colors, #{$color}-header-head-neutral); + border-color: map-get($colors, #{$color}-header-head-neutral); + + button { + background-color: map-get($colors, #{$color}-button-head-neutral); + border-color: darken(map-get($colors, #{$color}-button-head-neutral), 15); + } + + &.selected { + background-color: map-get($colors, #{$color}-header-head-chosen); + border-color: map-get($colors, #{$color}-header-head-chosen); + + button { + background-color: map-get($colors, #{$color}-button-head-chosen); + border-color: darken(map-get($colors, #{$color}-button-head-chosen), 15); + } + } + + &.unselected { + background-color: map-get($colors, #{$color}-header-not-chosen); + border-color: map-get($colors, #{$color}-header-not-chosen); + + button { + background-color: lighten(map-get($colors, #{$color}-button-head-neutral), 15); + border-color: map-get($colors, #{$color}-button-head-neutral); + } + } + } + } + + .line_content { + &.origin { + background-color: map-get($colors, #{$color}-line-origin-neutral); + + &.selected { + background-color: map-get($colors, #{$color}-line-origin-chosen); + } + + &.unselected { + background-color: map-get($colors, #{$color}-line-not-chosen); + } + } + + &.head { + background-color: map-get($colors, #{$color}-line-head-neutral); + + &.selected { + background-color: map-get($colors, #{$color}-line-head-chosen); + } + + &.unselected { + background-color: map-get($colors, #{$color}-line-not-chosen); + } + } + } +} + +#conflicts { + .white { + @include color-scheme('white'); } + + .dark { + @include color-scheme('dark'); } + + .monokai { + @include color-scheme('monokai'); } + + .solarized-light { + @include color-scheme('solarized-light'); } + + .solarized-dark { + @include color-scheme('solarized-dark'); } + + .none { + .line_content.header { + button { + color: $gray-900; + } + } + } + + .diff-wrap-lines .line_content { + white-space: normal; + min-height: 19px; + } + + .line_content.header { + position: relative; + + button { + border-radius: 2px; + font-size: 10px; + position: absolute; + right: 10px; + padding: 0; + outline: none; + color: var(--white, $white); + width: 75px; // static width to make 2 buttons have same width + height: 19px; + } + } + + .btn-success .fa-spinner { + color: var(--white, $white); + } + + .editor-wrap { + &.is-loading { + .editor { + display: none; + } + + .loading { + display: block; + } + } + + &.saved { + .editor { + border-top: solid 2px var(--green-300, $green-300); + } + } + + .editor { + pre { + height: 350px; + border: 0; + border-radius: 0; + margin-bottom: 0; + } + } + + .loading { + display: none; + } + } + + .discard-changes-alert { + background-color: var(--gray-10, $gray-10); + text-align: right; + padding: $gl-padding-top $gl-padding; + color: var(--gl-text-color, $gl-text-color); + + .discard-actions { + display: inline-block; + margin-left: 10px; + } + } + + .resolve-conflicts-form { + h4 { + margin-top: 0; + } + + .resolve-info { + @media(max-width: map-get($grid-breakpoints, lg)-1) { + margin-bottom: $gl-padding; + } + } + } +} diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss new file mode 100644 index 00000000000..5553dffac05 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -0,0 +1,96 @@ +@import 'mixins_and_variables_and_functions'; + +.compare-versions-container { + min-width: 0; +} + +.diff-files-holder { + flex: 1; + min-width: 0; + z-index: 201; +} + +.diff-tree-list { + position: -webkit-sticky; + position: sticky; + $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px; + top: $top-pos; + max-height: calc(100vh - #{$top-pos}); + z-index: 202; + + .with-system-header & { + top: $top-pos + $system-header-height; + } + + .with-system-header.with-performance-bar & { + top: $top-pos + $system-header-height + $performance-bar-height; + } + + .with-performance-bar & { + $performance-bar-top-pos: $performance-bar-height + $top-pos; + top: $performance-bar-top-pos; + max-height: calc(100vh - #{$performance-bar-top-pos}); + } + + .drag-handle { + bottom: 16px; + transform: translateX(10px); + } +} + +.tree-list-holder { + height: 100%; + + .file-row { + margin-left: 0; + margin-right: 0; + } +} + +.tree-list-scroll { + max-height: 100%; + padding-bottom: $grid-size; + overflow-y: scroll; + overflow-x: auto; +} + +.tree-list-search { + flex: 0 0 34px; + + .form-control { + padding-left: 30px; + } +} + +.tree-list-icon { + top: 50%; + left: 10px; + transform: translateY(-50%); + + &, + svg { + fill: var(--gray-400, $gray-400); + } +} + +.tree-list-clear-icon { + right: 10px; + left: auto; + line-height: 0; +} + +@media (max-width: map-get($grid-breakpoints, md)-1) { + .diffs .files { + .diff-tree-list { + position: relative; + top: 0; + // !important is required to override inline styles of resizable sidebar + width: 100% !important; + } + + .tree-list-holder { + max-height: calc(50px + 50vh); + padding-right: 0; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss new file mode 100644 index 00000000000..858e13fc558 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -0,0 +1,254 @@ +@import 'mixins_and_variables_and_functions'; + +$status-box-line-height: 26px; + +.issues-sortable-list .str-truncated { + max-width: 90%; +} + +.milestones { + padding: $gl-padding-8; + margin-top: $gl-padding-8; + border-radius: $border-radius-default; + background-color: var(--gray-100, $gray-100); + + .milestone { + border: 0; + padding: $gl-padding-top $gl-padding; + border-radius: $border-radius-default; + background-color: var(--white, $white); + + &:not(:last-child) { + margin-bottom: $gl-padding-4; + } + + h4 { + font-weight: $gl-font-weight-bold; + } + + .progress { + width: 100%; + height: 6px; + margin-bottom: $gl-padding-4; + } + + .milestone-progress, + .milestone-release-links { + a { + color: var(--blue-600, $blue-600); + } + } + + .status-box { + font-size: $tooltip-font-size; + margin-top: 0; + margin-right: $gl-padding-4; + line-height: $status-box-line-height; + + @include media-breakpoint-down(xs) { + line-height: unset; + padding: $gl-padding-4 $gl-input-padding; + } + } + } +} + +.milestone-content { + .issues-count { + margin-right: 17px; + float: right; + width: 105px; + } + + .issuable-row { + span { + a { + color: var(--gray-900, $gray-900); + word-wrap: break-word; + } + + .gl-label-link { + color: inherit; + } + } + } + + .card-header { + line-height: $line-height-base; + padding: 14px 16px; + display: flex; + + .title { + flex: 1; + flex-grow: 2; + } + + .counter { + flex: 0; + padding-left: 16px; + } + } +} + +.milestone-sidebar { + .milestone-progress { + .title { + padding-top: 5px; + } + + .progress { + height: 6px; + margin: 0; + } + + .sidebar-collapsed-icon { + clear: both; + padding: 15px 5px 5px; + + .progress { + margin: 5px 0; + } + } + } + + .collapsed-milestone-date { + font-size: 12px; + } + + .milestone-date { + display: block; + } + + .date-separator { + line-height: 5px; + } + + .remaining-days strong { + font-weight: $gl-font-weight-normal; + } + + .milestone-stat { + float: left; + margin-right: 14px; + } + + .milestone-stat:last-child { + margin-right: 0; + } + + .right-sidebar-expanded & { + .gutter-toggle { + margin-bottom: $sidebar-milestone-toggle-bottom-margin; + } + } + + .right-sidebar-collapsed & { + .milestone-progress { + padding-top: 0; + } + + .reference { + border-top: 1px solid $border-gray-normal; + } + } +} + +.milestone-issues-list, +.milestone-merge_requests-list { + .issuable-detail { + display: block; + margin-top: 7px; + + .issue-link { + display: inline-block; + } + + .issuable-number { + color: var(--gray-500, $gray-500); + margin-right: 5px; + } + + .avatar { + float: none; + } + + > a:not(:last-of-type) { + margin-right: 5px; + } + } +} + +.milestone-detail { + border-bottom: 1px solid var(--border-color, $border-color); +} + +@include media-breakpoint-down(xs) { + .milestone-actions { + @include clearfix(); + padding-top: $gl-vert-padding; + + .btn:first-child { + margin-left: 0; + } + } +} + +.milestone-page-header { + display: flex; + flex-flow: row; + align-items: center; + flex-wrap: wrap; + + .status-box { + margin-top: 0; + order: 1; + } + + .milestone-buttons { + margin-left: auto; + order: 2; + + .verbose { + display: none; + } + } + + .header-text-content { + order: 3; + width: 100%; + } + + @include media-breakpoint-up(xs) { + .milestone-buttons .verbose { + display: inline; + } + + .header-text-content { + order: 2; + width: auto; + } + + .milestone-buttons { + order: 3; + } + } +} + +.issuable-row { + background-color: var(--white, $white); +} + +.milestone-popover-instructions-list { + padding-left: 2em; + + > li { + padding-left: 1em; + } +} + +@include media-breakpoint-down(xs) { + .milestone-banner-text, + .milestone-banner-link { + display: inline; + } +} diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss new file mode 100644 index 00000000000..8e7be629481 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -0,0 +1,484 @@ +@import 'mixins_and_variables_and_functions'; +@import './pipeline_mixins'; + +/** + * Pipeline Page Bundle + * + * Styles used to render a single pipeline page. + * + * Includes its tabs: + * + * - [data-page='projects:pipelines:show'] + * - [data-page='projects:pipelines:dag'] + * - [data-page='projects:pipelines:builds'] + * - [data-page='projects:pipelines:failures'] + * - [data-page='projects:pipelines:tests'] + * - ... + */ + +.tab-pane { + .ci-table { + thead th { + border-top: 0; + } + } +} + +.build-failures { + .build-state { + padding: 20px 2px; + + .build-name { + font-weight: $gl-font-weight-normal; + } + + .stage { + color: $gl-text-color-secondary; + font-weight: $gl-font-weight-normal; + vertical-align: middle; + } + } + + .build-log { + border: 0; + line-height: initial; + } + + .build-trace-row td { + border-top: 0; + border-bottom-width: 1px; + border-bottom-style: solid; + padding-top: 0; + } + + .build-trace { + width: 100%; + text-align: left; + margin-top: $gl-padding; + } + + .build-name { + width: 196px; + + a { + font-weight: $gl-font-weight-bold; + color: $gl-text-color; + text-decoration: none; + + &:focus, + &:hover { + text-decoration: underline; + } + } + } + + .build-actions { + width: 70px; + text-align: right; + } + + .build-stage { + width: 140px; + } + + .ci-status-icon-failed { + padding: 10px 0 10px 12px; + width: 12px + 24px; // padding-left + svg width + } + + .build-icon svg { + width: 24px; + height: 24px; + vertical-align: middle; + } + + .build-state, + .build-trace-row { + > td:last-child { + padding-right: 0; + } + } + + @include media-breakpoint-down(sm) { + td:empty { + display: none; + } + + .ci-table { + margin-top: 2 * $gl-padding; + } + + .build-trace-container { + padding-top: $gl-padding; + padding-bottom: $gl-padding; + } + + .build-trace { + margin-bottom: 0; + margin-top: 0; + } + } +} + +.pipeline-tab-content { + display: flex; + width: 100%; + min-height: $dropdown-max-height-lg; + background-color: $gray-light; + padding: $gl-padding 0; + overflow: auto; +} + +// Pipeline graph, used at +// app/assets/javascripts/pipelines/components/graph/graph_component.vue +.pipeline-graph { + white-space: nowrap; + transition: max-height 0.3s, padding 0.3s; + + .stage-column-list, + .builds-container > ul { + padding: 0; + } + + a { + text-decoration: none; + color: $gl-text-color; + } + + svg { + vertical-align: middle; + } + + .stage-column { + display: inline-block; + vertical-align: top; + + &.left-margin { + &:not(:first-child) { + margin-left: 44px; + + .left-connector { + @include flat-connector-before; + } + } + } + + &.no-margin { + margin: 0; + } + + li { + list-style: none; + } + + // when downstream pipelines are present, the last stage isn't the last column + &:last-child:not(.has-downstream) { + .build { + // Remove right connecting horizontal line from first build in last stage + &:first-child::after { + border: 0; + } + // Remove right curved connectors from all builds in last stage + &:not(:first-child)::after { + border: 0; + } + // Remove opposite curve + .curve::before { + display: none; + } + } + } + + // when upstream pipelines are present, the first stage isn't the first column + &:first-child:not(.has-upstream) { + .build { + // Remove left curved connectors from all builds in first stage + &:not(:first-child)::before { + border: 0; + } + // Remove opposite curve + .curve::after { + display: none; + } + } + } + + // Curve first child connecting lines in opposite direction + .curve { + display: none; + + &::before, + &::after { + content: ''; + width: 21px; + height: 25px; + position: absolute; + top: -31px; + border-top: 2px solid $border-color; + } + + &::after { + left: -44px; + border-right: 2px solid $border-color; + border-radius: 0 20px; + } + + &::before { + right: -44px; + border-left: 2px solid $border-color; + border-radius: 20px 0 0; + } + } + } + + .stage-name { + margin: 0 0 15px 10px; + font-weight: $gl-font-weight-bold; + width: 176px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 2.2em; + } + + .build { + position: relative; + width: 186px; + margin-bottom: 10px; + white-space: normal; + + .ci-job-dropdown-container { + // override dropdown.scss + .dropdown-menu li button { + padding: 0; + text-align: center; + } + } + + // ensure .build-content has hover style when action-icon is hovered + .ci-job-dropdown-container:hover .build-content { + @extend .build-content:hover; + } + + .ci-status-icon svg { + height: 24px; + width: 24px; + } + + .dropdown-menu-toggle { + background-color: transparent; + border: 0; + padding: 0; + + &:focus { + outline: none; + } + } + + .build-content { + @include build-content(); + } + + a.build-content:hover, + button.build-content:hover { + background-color: $gray-darker; + border: 1px solid $dropdown-toggle-active-border-color; + } + + // Connect first build in each stage with right horizontal line + &:first-child { + &::after { + content: ''; + position: absolute; + top: 48%; + right: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } + } + + // Connect each build (except for first) with curved lines + &:not(:first-child) { + &::after, + &::before { + content: ''; + top: -49px; + position: absolute; + border-bottom: 2px solid $border-color; + width: 25px; + height: 69px; + } + + // Right connecting curves + &::after { + right: -25px; + border-right: 2px solid $border-color; + border-radius: 0 0 20px; + } + + // Left connecting curves + &::before { + left: -25px; + border-left: 2px solid $border-color; + border-radius: 0 0 0 20px; + } + } + + // Connect second build to first build with smaller curved line + &:nth-child(2) { + &::after, + &::before { + height: 29px; + top: -9px; + } + + .curve { + display: block; + } + } + } + + .ci-action-icon-container { + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-50%); + + // Action Icons in big pipeline-graph nodes + &.ci-action-icon-wrapper { + height: 30px; + width: 30px; + border-radius: 100%; + display: block; + padding: 0; + line-height: 0; + + svg { + fill: $gl-text-color-secondary; + } + + .spinner { + top: 2px; + } + + &.play { + svg { + left: 1px; + top: 1px; + } + } + } + } + + .stage-action svg { + left: 1px; + top: -2px; + } +} + +// Triggers the dropdown in the big pipeline graph +.dropdown-counter-badge { + font-weight: 100; + font-size: 15px; + position: absolute; + right: 13px; + top: 8px; +} + +.split-report-section { + border-bottom: 1px solid var(--gray-50, $gray-50); + + .report-block-container { + max-height: 500px; + overflow: auto; + } + + .space-children, + .space-children > span { + display: flex; + align-self: center; + } + + .media { + align-items: center; + padding: 10px; + line-height: 20px; + + /* + This fixes the wrapping div of the icon in the report header. + Apparently the borderless status icons are half the size of the status icons with border. + This means we have to double the size of the wrapping div for borderless icons. + */ + .space-children:first-child { + width: 32px; + height: 32px; + align-items: center; + justify-content: center; + margin-right: 5px; + margin-left: 1px; + } + } + + .code-text { + width: 100%; + flex: 1; + } +} + +.big-pipeline-graph-dropdown-menu { + @include pipeline-graph-dropdown-menu(); + width: 195px; + min-width: 195px; + left: 100%; + top: -10px; + box-shadow: 0 1px 5px $black-transparent; + + /** + * Top arrow in the dropdown in the big pipeline graph + */ + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 18px; + } + + &::before { + left: -6px; + margin-top: 3px; + border-width: 7px 5px 7px 0; + border-right-color: $border-color; + } + + &::after { + left: -5px; + border-width: 10px 7px 10px 0; + border-right-color: $white; + } +} + +.codequality-report { + .media { + padding: $gl-padding; + } + + .media-body { + flex-direction: row; + } + + .report-block-container { + height: auto !important; + } +} + +.test-reports-table { + .build-trace { + @include build-trace(); + } +} diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss new file mode 100644 index 00000000000..6ff07017d2e --- /dev/null +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -0,0 +1,195 @@ +@import 'mixins_and_variables_and_functions'; +@import './pipeline_mixins'; + +/** + * Pipelines Bundle: Pipeline lists and Mini Pipelines + */ + +// Pipelines list +// Should affect pipelines table components rendered by: +// - app/assets/javascripts/commit/pipelines/pipelines_bundle.js + +.pipelines { + .badge { + margin-bottom: 3px; + } + + .pipeline-actions { + min-width: 170px; //Guarantees buttons don't break in several lines. + + .btn-default { + color: $gl-text-color-secondary; + } + + .btn.btn-retry:hover, + .btn.btn-retry:focus { + border-color: $dropdown-toggle-active-border-color; + background-color: $white-normal; + } + + svg path { + fill: $gl-text-color-secondary; + } + + .dropdown-menu { + max-height: $dropdown-max-height; + overflow-y: auto; + } + + .dropdown-toggle, + .dropdown-menu { + color: $gl-text-color-secondary; + + .fa { + color: $gl-text-color-secondary; + font-size: 14px; + } + } + + .btn-group.open .btn-default { + background-color: $white-normal; + border-color: $border-white-normal; + } + + .btn .text-center { + display: inline; + } + + .tooltip { + white-space: nowrap; + } + } + + .pipeline-tags .label-container { + white-space: normal; + } +} + +// 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; + + + .stage-container { + margin-left: 6px; + } + + // Hack to show a button tooltip inline + button.has-tooltip + .tooltip { + min-width: 105px; + } + + // Bootstrap way of showing the content inline for anchors. + a.has-tooltip { + white-space: nowrap; + } + + &:not(:last-child) { + &::after { + content: ''; + width: 7px; + position: absolute; + right: -7px; + top: 11px; + border-bottom: 2px solid $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; + } + } + } + } +} + +// Dropdown button in mini pipeline graph +button.mini-pipeline-graph-dropdown-toggle { + @include mini-pipeline-item(); +} + +// Action icons inside dropdowns: +// mini graph in pipelines table +// mini graph in MR widget pipeline +// mini graph in Commit widget pipeline +.mini-pipeline-graph-dropdown-menu { + @include pipeline-graph-dropdown-menu(); + + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: -6px; + left: 50%; + transform: translate(-50%, 0); + border-width: 0 5px 6px; + + @include media-breakpoint-down(sm) { + left: 100%; + margin-left: -12px; + } + } + + &::before { + border-width: 0 5px 5px; + border-bottom-color: $border-color; + } + + &::after { + margin-top: 1px; + border-bottom-color: $white; + } + + /** + * Center dropdown menu in mini graph + */ + .dropdown &.dropdown-menu { + transform: translate(-80%, 0); + + @media (min-width: map-get($grid-breakpoints, md)) { + transform: translate(-50%, 0); + right: auto; + left: 50%; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss new file mode 100644 index 00000000000..5a9dd454970 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/reports.scss @@ -0,0 +1,94 @@ +@import 'mixins_and_variables_and_functions'; + +.mr-widget-grouped-section { + .report-block-container { + max-height: 170px; + overflow: auto; + } + + .report-block-list-issue-parent { + padding: $gl-padding-top $gl-padding; + border-top: 1px solid $border-color; + } +} + +.report-block-container { + border-top: 1px solid $border-color; + padding: $gl-padding - 2; + background-color: $gray-light; + + // Clean MR widget CSS + line-height: 20px; +} + +.report-block-list { + list-style: none; + padding: 0 1px; + margin: 0; +} + +.report-block-list-icon { + display: flex; + + &.failed svg { + color: var(--red-500, $red-500); + } + + &.success svg { + color: var(--green-500, $green-500); + } + + &.neutral svg { + color: var(--gray-500, $gray-500); + } + + .ci-status-icon { + svg { + width: 24px; + height: 24px; + } + } +} + +.report-block-list-issue { + display: flex; +} + +.is-dismissed .report-block-list-issue-description, +.is-dismissed .vulnerability-name-button { + text-decoration: line-through; +} + +.report-block-list-issue-description-text::after { + content: '\00a0'; +} + +.report-block-list-issue-description { + align-content: space-around; + align-items: flex-start; + flex-wrap: wrap; + display: flex; + align-self: center; +} + +.report-block { + .break-link { + word-wrap: break-word; + word-break: break-all; + } +} + +.report-block-issue-code { + width: 600px; +} + +.modal-security-report-dast { + .modal-dialog { + max-width: $modal-lg; + } + + // This is temporary till we get the new modals hooked up + &.modal-hide-footer .modal-footer { + display: none; + } +} diff --git a/app/assets/stylesheets/page_bundles/terminal.scss b/app/assets/stylesheets/page_bundles/terminal.scss new file mode 100644 index 00000000000..627baf96d6f --- /dev/null +++ b/app/assets/stylesheets/page_bundles/terminal.scss @@ -0,0 +1,3 @@ +#terminal > div { + min-height: 450px; +} diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss new file mode 100644 index 00000000000..eb34e7f3876 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -0,0 +1,159 @@ +@import 'mixins_and_variables_and_functions'; + +.title .edit-wiki-header { + width: 780px; + margin-left: auto; + margin-right: auto; + padding-right: 7px; +} + +.wiki-page-header { + position: relative; + + .wiki-breadcrumb { + border-bottom: 1px solid var(--gray-50, $gray-50); + padding: 11px 0; + } + + .wiki-page-title { + margin: 0; + font-size: 22px; + } + + .wiki-last-edit-by { + display: block; + color: var(--gray-500, $gray-500); + + strong { + color: var(--gl-text-color, $gl-text-color); + } + } + + .light { + font-weight: $gl-font-weight-normal; + color: var(--gray-500, $gray-500); + } + + .git-clone-holder { + .input-group-prepend, + .input-group-append { + background-color: transparent; + } + } + + button.sidebar-toggle { + position: absolute; + right: 0; + top: 11px; + display: block; + } + + &.has-sidebar-toggle .git-access-header { + padding-right: $sidebar-toggle-width; + } + + @include media-breakpoint-up(md) { + &.has-sidebar-toggle { + padding-right: 0; + } + + button.sidebar-toggle { + display: none; + } + } +} + +.wiki-git-access { + margin: $gl-padding 0; + + h3 { + font-size: 19px; + font-weight: $gl-font-weight-normal; + margin: $gl-padding 0; + } +} + +.right-sidebar.wiki-sidebar { + padding: 0; + + &.right-sidebar-collapsed { + display: none; + } + + .sidebar-container { + padding: $gl-padding 0; + padding-right: 100px; + height: 100%; + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + + .blocks-container { + padding: 0 $gl-padding; + } + + a { + color: var(--gray-400, $gray-400); + + &:hover, + &.active { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + + .active > a { + color: var(--black, $black); + } + + ul.wiki-pages, + ul.wiki-pages li { + list-style: none; + padding: 0; + margin: 0; + } + + ul.wiki-pages li { + margin: 5px 0 10px; + } + + ul.wiki-pages ul { + padding-left: 15px; + } + + .wiki-sidebar-header { + padding: 0 $gl-padding $gl-padding; + + .gutter-toggle { + margin-top: 0; + } + } +} + +ul.wiki-pages-list.content-list { + a { + color: var(--blue-600, $blue-600); + } + + ul { + list-style: none; + margin-left: 0; + padding-left: 15px; + + li { + padding: 5px 0; + } + } +} + +.empty-state-wiki .text-content { + max-width: 490px; // Widen to allow for the Confluence button +} + +.wiki-form .markdown-area { + max-height: none; +} |