diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
12 files changed, 391 insertions, 83 deletions
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index 499394ad960..cc876c9a635 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -4,7 +4,7 @@ position: absolute; top: 48%; left: -$length; - border-top: 2px solid $border-color; + border-top: 2px solid var(--border-color, $border-color); width: $length; height: 1px; } @@ -14,14 +14,14 @@ display: inline-block; padding: 8px 10px 9px; width: 100%; - border: 1px solid $border-color; + border: 1px solid var(--border-color, $border-color); border-radius: $border-radius; - background-color: $white; + background-color: var(--white, $white); &:hover { - background-color: $gray-darker; + background-color: var(--gray-50, $gray-50); border: 1px solid $dropdown-toggle-active-border-color; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } } @@ -66,7 +66,7 @@ @mixin mini-pipeline-item() { border-radius: 100px; - background-color: $white; + background-color: var(--white, $white); border-width: 1px; border-style: solid; width: $ci-action-icon-size; @@ -85,22 +85,22 @@ // 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); + @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($white, $red-100, $red-200, $red-500, $red-600, $red-700); + @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($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); + @include mini-pipeline-graph-color(var(--white, $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); + @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); } &.ci-status-icon-canceled, @@ -108,12 +108,12 @@ &.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); + @include mini-pipeline-graph-color(var(--white, $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); + @include mini-pipeline-graph-color(var(--white, $white), $gray-100, $gray-200, $gray-300, $gray-400, $gray-500); } } @@ -226,7 +226,7 @@ &:focus { outline: none; text-decoration: none; - background-color: $gray-darker; + background-color: var(--gray-100, $gray-50); } } } diff --git a/app/assets/stylesheets/page_bundles/alert_management_details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss index beb80a14c5a..2eaf4517710 100644 --- a/app/assets/stylesheets/page_bundles/alert_management_details.scss +++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss @@ -17,22 +17,19 @@ } } - .assignee-dropdown-item { - .dropdown-item { - @include gl-display-flex; - @include gl-align-items-center; - + .dropdown-item { + &:first-child { &::before { - top: 50% !important; + @include gl-pt-0; } + } - &.is-active { - &:last-child { - @include gl-border-b-gray-100; - @include gl-border-b-1; - @include gl-border-b-solid; - } - } + &::before { + @include gl-pt-8; + } + + .gl-new-dropdown-item-text-wrapper { + @include gl-py-0; } } diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index ffc15af6329..3d1ae3519a9 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -92,7 +92,6 @@ .board-title-caret { border-radius: $border-radius-default; line-height: $gl-spacing-scale-5; - height: $gl-spacing-scale-5; &.btn svg { top: 0; @@ -173,13 +172,6 @@ } } -.board-promotion-state { - background-color: var(--white, $white); - flex: 1; - overflow-y: auto; - overflow-x: hidden; -} - .board-list-component { min-height: 0; // firefox fix } diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index 2f0f4a46658..3962c546b51 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -61,7 +61,7 @@ } .environment-information { - border: 1px solid $border-color; + border: 1px solid var(--border-color, $border-color); padding: 8px $gl-padding 12px; border-radius: $border-radius-default; @@ -219,9 +219,9 @@ } .builds-container { - background-color: $white; - border-top: 1px solid $border-color; - border-bottom: 1px solid $border-color; + background-color: var(--white, $white); + border-top: 1px solid var(--border-color, $border-color); + border-bottom: 1px solid var(--border-color, $border-color); max-height: 300px; width: 289px; overflow: auto; @@ -237,7 +237,7 @@ width: 270px; &:hover { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } } @@ -256,13 +256,13 @@ } &:hover { - background-color: $gray-darker; + background-color: var(--gray-50, $gray-50); } } } .link-commit { - color: $blue-600; + color: var(--blue-600, $blue-600); } } diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss index 8522a0a8fe4..232d363b7f1 100644 --- a/app/assets/stylesheets/page_bundles/ci_status.scss +++ b/app/assets/stylesheets/page_bundles/ci_status.scss @@ -2,7 +2,7 @@ .ci-status { padding: 2px 7px 4px; - border: 1px solid $gray-darker; + border: 1px solid var(--border-color, $border-color); white-space: nowrap; border-radius: 4px; @@ -18,7 +18,11 @@ } &.ci-failed { - @include status-color($red-100, $red-500, $red-600); + @include status-color( + var(--red-100, $red-100), + var(--red-500, $red-500), + var(--red-600, $red-600) + ); } &.ci-success { @@ -26,11 +30,12 @@ } &.ci-canceled, + &.ci-skipped, &.ci-disabled, &.ci-scheduled, &.ci-manual { - color: $gl-text-color; - border-color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); + border-color: currentColor; &:not(span):hover { background-color: rgba($gl-text-color, 0.07); @@ -38,25 +43,37 @@ } &.ci-preparing { - @include status-color($gray-100, $gray-300, $gray-400); + @include status-color( + var(--gray-100, $gray-100), + var(--gray-300, $gray-300), + var(--gray-400, $gray-400) + ); } &.ci-pending, &.ci-waiting-for-resource, &.ci-failed-with-warnings, &.ci-success-with-warnings { - @include status-color($orange-50, $orange-500, $orange-700); + @include status-color( + var(--orange-50, $orange-50), + var(--orange-500, $orange-500), + var(--orange-700, $orange-700) + ); } &.ci-info, &.ci-running { - @include status-color($blue-100, $blue-500, $blue-600); + @include status-color( + var(--blue-100, $blue-100), + var(--blue-500, $blue-500), + var(--blue-600, $blue-600) + ); } &.ci-created, &.ci-skipped { - color: $gl-text-color-secondary; - border-color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); + border-color: currentColor; &:not(span):hover { background-color: rgba($gl-text-color-secondary, 0.07); diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss index 3a5e2e4159d..4a48333cd27 100644 --- a/app/assets/stylesheets/page_bundles/cycle_analytics.scss +++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss @@ -314,11 +314,6 @@ vertical-align: top; font-weight: $gl-font-weight-normal; } - - .fa { - color: var(--gray-500, $gray-500); - font-size: $code-font-size; - } } } diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss new file mode 100644 index 00000000000..5f43d5df7e3 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/import.scss @@ -0,0 +1,81 @@ +@import 'mixins_and_variables_and_functions'; + +.import-jobs-to-col { + width: 39%; +} + +.import-jobs-status-col { + width: 15%; +} + +.import-jobs-cta-col { + width: 1%; +} + +.import-project-name-input { + border-radius: 0 $border-radius-default $border-radius-default 0; + position: relative; + left: -1px; + max-width: 300px; +} + +.import-slash-divider { + background-color: $gray-lightest; + border: 1px solid $border-color; +} + +.import-row { + height: 55px; +} + +.import-table { + .import-jobs-from-col, + .import-jobs-to-col, + .import-jobs-status-col, + .import-jobs-cta-col { + border-bottom-width: 1px; + padding-left: $gl-padding; + } +} + +.import-projects-loading-icon { + margin-top: $gl-padding-32; +} + +.import-entities-target-select { + &.disabled { + .import-entities-target-select-separator, + .select2-container.select2-container-disabled .select2-choice { + color: var(--gray-400, $gray-400); + border-color: var(--gray-100, $gray-100); + background-color: var(--gray-10, $gray-10); + } + + .select2-container.select2-container-disabled .select2-choice .select2-arrow { + background-color: var(--gray-10, $gray-10); + } + } + + .import-entities-target-select-separator { + border-color: var(--gray-200, $gray-200); + background-color: var(--gray-10, $gray-10); + } + + .select2-container { + > .select2-choice { + .select2-arrow { + background-color: var(--white, $white); + } + + border-color: var(--gray-200, $gray-200); + color: var(--gray-900, $gray-900) !important; + background-color: var(--white, $white) !important; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + .gl-form-input { + box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200); + } +} diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss index b0655408edf..a26affb10a9 100644 --- a/app/assets/stylesheets/page_bundles/merge_conflicts.scss +++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss @@ -255,10 +255,6 @@ $colors: ( } } - .btn-success .fa-spinner { - color: var(--white, $white); - } - .editor-wrap { &.is-loading { .editor { diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss new file mode 100644 index 00000000000..3c95ecc9bf0 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss @@ -0,0 +1,189 @@ +@import 'mixins_and_variables_and_functions'; + +@mixin inset-border-1-red-500($important: false) { + box-shadow: inset 0 0 0 $gl-border-size-1 $red-500 if-important($important); +} + +.timezone-dropdown { + .dropdown-menu { + @include gl-w-full; + } + + .gl-new-dropdown-item-text-primary { + @include gl-overflow-hidden; + @include gl-text-overflow-ellipsis; + } +} + +.modal-footer { + @include gl-bg-gray-10; +} + +.invalid-dropdown { + .gl-dropdown-toggle { + @include inset-border-1-red-500; + + &:hover { + @include inset-border-1-red-500(true); + } + } +} + +//// Copied from roadmaps.scss - adapted for on-call schedules +$header-item-height: 72px; +$item-height: 40px; +$details-cell-width: 180px; +$timeline-cell-height: 32px; +$timeline-cell-width: 180px; +$border-style: 1px solid var(--gray-100, $gray-100); +$gradient-dark-gray: rgba(0, 0, 0, 0.15); +$gradient-gray: rgba(255, 255, 255, 0.001); +$scroll-top-gradient: linear-gradient(to bottom, $gradient-dark-gray 0%, $gradient-gray 100%); +$scroll-bottom-gradient: linear-gradient(to bottom, $gradient-gray 0%, $gradient-dark-gray 100%); +$column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradient-gray 100%); + +.schedule-shell { + @include gl-relative; + @include gl-h-full; + @include gl-w-full; + @include gl-overflow-x-auto; + @include gl-border-gray-100; + @include gl-border-1; + @include gl-border-solid; + @include gl-rounded-base; +} + +.timeline-section { + @include gl-sticky; + @include gl-top-0; + z-index: 20; + + .timeline-header-blank, + .timeline-header-item { + @include float-left; + height: $header-item-height; + border-bottom: $border-style; + background-color: var(--white, $white); + } + + .timeline-header-blank { + @include gl-sticky; + @include gl-top-0; + @include gl-left-0; + width: $details-cell-width; + z-index: 2; + } + + .timeline-header-item { + // container size minus left panel width divided by 2 week timeframes + width: calc((100% - #{$details-cell-width}) / 2); + + &:last-of-type .item-label { + @include gl-border-r-0; + } + + .item-label, + .item-sublabel .sublabel-value { + color: var(--gray-400, $gray-400); + @include gl-font-weight-normal; + + &.label-dark { + @include gl-text-gray-900; + } + + &.label-bold { + @include gl-font-weight-bold; + } + } + + .item-label { + @include gl-py-4; + @include gl-pl-4; + border-right: $border-style; + border-bottom: $border-style; + } + + .item-sublabel { + @include gl-relative; + @include gl-display-flex; + + .sublabel-value { + @include gl-flex-grow-1; + @include gl-flex-basis-0; + + text-align: center; + @include gl-font-base; + padding: 2px 0; + } + } + + .current-day-indicator-header { + @include gl-absolute; + @include gl-bottom-0; + height: $grid-size; + width: $grid-size; + background-color: var(--red-500, $red-500); + @include gl-rounded-full; + transform: translate(-50%, 50%); + } + } +} + +.timeline-section .timeline-header-blank, +.list-section .details-cell { + &::after { + @include gl-h-full; + @include gl-content-empty; + @include gl-absolute; + @include gl-top-0; + right: -$grid-size; + width: $grid-size; + @include gl-pointer-events-none; + background: $column-right-gradient; + } +} + +.details-cell, +.timeline-cell { + @include float-left; + height: $item-height; +} + +.details-cell { + @include gl-sticky; + @include gl-left-0; + width: $details-cell-width; + @include gl-font-base; + background-color: var(--white, $white); + z-index: 10; +} + +.timeline-cell { + @include gl-relative; + // width: $timeline-cell-width; + // container size minus left panel width divided by 2 week timeframes + width: calc((100% - #{$details-cell-width}) / 2); + @include gl-bg-transparent; + border-right: $border-style; + + &:last-child { + @include gl-border-r-0; + } + + .current-day-indicator { + @include gl-absolute; + top: -1px; + width: $gl-spacing-scale-1; + height: calc(100% + 1px); + background-color: var(--red-500, $red-500); + @include gl-pointer-events-none; + transform: translateX(-50%); + } +} + +.gl-token { + .gl-avatar-labeled-label { + @include gl-text-white; + @include gl-font-weight-normal; + } +} diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index 1de66aa73da..d9ab52774bd 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -33,7 +33,7 @@ } .stage { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); font-weight: $gl-font-weight-normal; vertical-align: middle; } @@ -62,7 +62,7 @@ a { font-weight: $gl-font-weight-bold; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); text-decoration: none; &:focus, @@ -124,11 +124,46 @@ display: flex; width: 100%; min-height: $dropdown-max-height-lg; - background-color: $gray-light; + background-color: var(--gray-50, $gray-50); padding: $gl-padding 0; overflow: auto; } +// These are single-value classes to use with utility-class style CSS +// but to still access this variable. Do not add other styles. +.gl-pipeline-min-h { + min-height: $dropdown-max-height-lg; +} + +.gl-pipeline-job-width { + width: 186px; +} + +.gl-linked-pipeline-padding { + padding-right: 120px; +} + +.gl-build-content { + @include build-content(); +} + +.gl-ci-action-icon-container { + position: absolute; + right: 5px; + top: 50% !important; + 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; + } +} + // Pipeline graph, used at // app/assets/javascripts/pipelines/components/graph/graph_component.vue .pipeline-graph { @@ -142,7 +177,7 @@ a { text-decoration: none; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } svg { @@ -214,18 +249,18 @@ height: 25px; position: absolute; top: -31px; - border-top: 2px solid $border-color; + border-top: 2px solid var(--border-color, $border-color); } &::after { left: -44px; - border-right: 2px solid $border-color; + border-right: 2px solid var(--border-color, $border-color); border-radius: 0 20px; } &::before { right: -44px; - border-left: 2px solid $border-color; + border-left: 2px solid var(--border-color, $border-color); border-radius: 20px 0 0; } } @@ -281,7 +316,7 @@ a.build-content:hover, button.build-content:hover { - background-color: $gray-darker; + background-color: var(--gray-100, $gray-100); border: 1px solid $dropdown-toggle-active-border-color; } @@ -292,7 +327,7 @@ position: absolute; top: 48%; right: -48px; - border-top: 2px solid $border-color; + border-top: 2px solid var(--border-color, $border-color); width: 48px; height: 1px; } @@ -305,7 +340,7 @@ content: ''; top: -49px; position: absolute; - border-bottom: 2px solid $border-color; + border-bottom: 2px solid var(--border-color, $border-color); width: 25px; height: 69px; } @@ -313,14 +348,14 @@ // Right connecting curves &::after { right: -25px; - border-right: 2px solid $border-color; + border-right: 2px solid var(--border-color, $border-color); border-radius: 0 0 20px; } // Left connecting curves &::before { left: -25px; - border-left: 2px solid $border-color; + border-left: 2px solid var(--border-color, $border-color); border-radius: 0 0 0 20px; } } @@ -355,7 +390,7 @@ line-height: 0; svg { - fill: $gl-text-color-secondary; + fill: var(--gray-500, $gray-500); } .spinner { @@ -453,13 +488,13 @@ left: -6px; margin-top: 3px; border-width: 7px 5px 7px 0; - border-right-color: $border-color; + border-right-color: var(--border-color, $border-color); } &::after { left: -5px; border-width: 10px 7px 10px 0; - border-right-color: $white; + border-right-color: var(--white, $white); } } @@ -484,5 +519,5 @@ } .progress-bar.bg-primary { - background-color: $blue-500 !important; + background-color: var(--blue-500, $blue-500) !important; } diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index e0e56893afc..dbde7933a8b 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -22,7 +22,7 @@ min-width: 170px; //Guarantees buttons don't break in several lines. .btn-default { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); } .btn.btn-retry:hover, @@ -32,7 +32,7 @@ } svg path { - fill: $gl-text-color-secondary; + fill: var(--gray-500, $gray-500); } .dropdown-menu { @@ -42,12 +42,7 @@ .dropdown-toggle, .dropdown-menu { - color: $gl-text-color-secondary; - - .fa { - color: $gl-text-color-secondary; - font-size: 14px; - } + color: var(--gray-500, $gray-500); } .btn-group.open .btn-default { diff --git a/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss b/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss new file mode 100644 index 00000000000..3b4b1fdcded --- /dev/null +++ b/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss @@ -0,0 +1,11 @@ +@media print { + .codes-to-print { + background-color: var(--white); + height: 100%; + width: 100%; + position: fixed; + top: 0; + left: 0; + margin: 0; + } +} |