diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
10 files changed, 324 insertions, 169 deletions
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 52cc7d3449e..093cba3560f 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -85,13 +85,12 @@ color: var(--ide-input-border, $gl-text-color-tertiary); } - .dropdown-input .fa, .dropdown-input .dropdown-input-clear { - color: var(--ide-input-border, $dropdown-input-fa-color); + color: var(--ide-input-border, $gray-500); } .ide-nav-form .input-icon { - color: var(--ide-input-border, $dropdown-input-fa-color); + color: var(--ide-input-border, $gray-500); } code { diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index cc876c9a635..72e2a45565e 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -148,18 +148,13 @@ &:hover { box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color; - background-color: $gray-darker; - - svg { - fill: $gl-text-color; - } + background-color: var(--gray-50, $gray-50); } .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; diff --git a/app/assets/stylesheets/page_bundles/environments.scss b/app/assets/stylesheets/page_bundles/environments.scss index 871f118ea9d..7d5f501d633 100644 --- a/app/assets/stylesheets/page_bundles/environments.scss +++ b/app/assets/stylesheets/page_bundles/environments.scss @@ -129,3 +129,92 @@ width: 38px; } } + +/** + * Deploy boards +*/ +.deploy-board { + background-color: var(--gray-50, $gray-50); + min-height: 20px; + + > .loading-icon, + > .deploy-board-empty, + > .deploy-board-information { + padding: 10px; + } + + .deploy-board-information { + display: flex; + justify-content: space-between; + + .deploy-board-status { + order: 1; + display: flex; + width: 70px; + flex-wrap: wrap; + justify-content: center; + margin: 20px 0 0 5px; + } + + .deploy-board-instances { + order: 2; + margin-left: 20px; + width: 100%; + } + + .deploy-board-canary-ingress { + order: 7; + } + + .deploy-board-actions { + order: 3; + align-self: center; + min-width: 150px; + margin-left: 10px; + } + + &.deploy-board-error-message { + justify-content: center; + } + + .deploy-board-empty-state-svg { + order: 1; + width: 90px; + margin: auto 0 auto 20px; + } + + .deploy-board-empty-state-text { + order: 2; + flex-wrap: wrap; + margin: auto auto 15px 0; + } + + .deploy-board-empty-state-title { + order: 1; + font-size: 17px; + line-height: 40px; + } + } + + .deploy-board-legend .legend-text { + color: var(--gray-900, $gray-900); + font-size: $gl-font-size-small; + font-weight: $gl-font-weight-bold; + line-height: $gl-line-height-14; + } +} + +.deploy-board-icon { + display: none; + + @include media-breakpoint-up(md) { + float: left; + display: block; + } + + i { + cursor: pointer; + color: var(--gray-200, $gray-200); + padding-right: 10px; + } +} diff --git a/app/assets/stylesheets/page_bundles/error_tracking_index.scss b/app/assets/stylesheets/page_bundles/error_tracking_index.scss index 65bddfb7890..5c49bcc0348 100644 --- a/app/assets/stylesheets/page_bundles/error_tracking_index.scss +++ b/app/assets/stylesheets/page_bundles/error_tracking_index.scss @@ -5,6 +5,10 @@ min-width: auto; } + .filtered-search-box .form-control { + min-width: unset; + } + .sort-control { .btn { padding-right: 2rem; diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 15cc10d1532..f6b9473d235 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -179,6 +179,10 @@ $ide-commit-header-height: 48px; overflow: auto; padding: $gl-padding; background-color: var(--ide-empty-state-background, transparent); + + .md { + max-width: $limited-layout-width; + } } .file-container { diff --git a/app/assets/stylesheets/page_bundles/incident_management_list.scss b/app/assets/stylesheets/page_bundles/incident_management_list.scss new file mode 100644 index 00000000000..30a75103c30 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/incident_management_list.scss @@ -0,0 +1,153 @@ +@import 'mixins_and_variables_and_functions'; + +.incident-management-list { + .new-alert { + background-color: var(--green-50, $green-50); + } + + // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui + table { + color: var(--gray-500, $gray-500); + + tbody { + tr:not(.b-table-busy-slot):not(.b-table-empty-row) { + &:hover { + @include gl-border-t-double; + + td { + @include gl-border-b-initial; + } + } + } + } + + tr { + &:focus { + @include gl-outline-none; + } + + td, + th { + @include gl-py-5; + @include gl-outline-none; + @include gl-relative; + } + + th { + @include gl-bg-transparent; + @include gl-font-weight-bold; + color: var(--gray-400, $gray-400); + + + &[aria-sort='none']:hover { + background-image: url('data:image/svg+xml, %3csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"%3e %3cpath style="fill: %23BABABA;" fill-rule="evenodd" d="M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375, 10.6834 4.292875,10.2929 C4.683375,9.90237 5.316575,9.90237 5.707075,10.2929 L6.999975, 11.5858 L6.999975,2 C6.999975,1.44771 7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395 ,9.90237 11.316555,9.90237 11.707085,10.2929 C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/%3e %3c/svg%3e'); + } + } + } + + @include media-breakpoint-up(md) { + tr { + &:last-child { + td { + @include gl-border-0; + } + } + } + + .sortable-cell { + padding-left: calc(0.75rem + 0.65em); + } + } + } + + @include media-breakpoint-down(sm) { + table { + tr { + @include gl-border-t-0; + + .table-col { + min-height: 68px; + } + + &:hover { + background-color: var(--white, $white); + @include gl-border-none; + } + + th, + td { + @include gl-pt-6; + } + } + + &.alert-management-table { + .table-col { + &:last-child { + background-color: var(--gray-10, $gray-10); + + &::before { + content: none !important; + } + + div:not(.dropdown-title) { + width: 100% !important; + padding: 0 !important; + } + } + } + } + + .b-table-empty-row { + td { + @include gl-border-b-0; + + div { + text-align: unset !important; + } + } + } + + .b-table-busy-slot { + td { + @include gl-border-b-0; + + div { + text-align: center !important; + } + } + } + } + } + + .gl-tabs-nav { + @include gl-border-b-0; + + .gl-tab-nav-item { + color: var(--gray-500, $gray-500); + + > .gl-tab-counter-badge { + @include gl-reset-color; + @include gl-font-sm; + background-color: var(--gray-50, $gray-50); + } + } + } + + @include media-breakpoint-down(xs) { + .list-header { + @include gl-flex-direction-column-reverse; + } + + .create-incident-button { + @include gl-w-full; + } + } + + .integration-list { + .b-table-empty-row { + td { + @include gl-px-0; + } + } + } +} diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index c3e49da92a6..231723ca4e3 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -1,6 +1,23 @@ @import 'mixins_and_variables_and_functions'; + +@import '@gitlab/ui/src/scss/bootstrap'; +@import 'bootstrap-vue/src/index'; + +@import '@gitlab/ui/src/scss/utilities'; +@import '@gitlab/ui/src/components/base/alert/alert'; + // We should only import styles that we actually use. -// @import '@gitlab/ui/src/scss/gitlab_ui'; +@import '@gitlab/ui/src/components/base/alert/alert'; +@import '@gitlab/ui/src/components/base/avatar/avatar'; +@import '@gitlab/ui/src/components/base/badge/badge'; +@import '@gitlab/ui/src/components/base/button/button'; +@import '@gitlab/ui/src/components/base/icon/icon'; +@import '@gitlab/ui/src/components/base/link/link'; +@import '@gitlab/ui/src/components/base/loading_icon/loading_icon'; +@import '@gitlab/ui/src/components/base/modal/modal'; +@import '@gitlab/ui/src/components/base/pagination/pagination'; +@import '@gitlab/ui/src/components/base/tabs/tabs/tabs'; +@import '@gitlab/ui/src/components/base/tooltip/tooltip'; $atlaskit-border-color: #dfe1e6; @@ -40,14 +57,16 @@ $header-height: 40px; } .jira-connect-user { - float: right; - position: relative; - top: -30px; + font-size: $gl-font-size; + position: fixed; + top: 10px; + right: 20px; } .jira-connect-app { margin-top: $header-height; max-width: 600px; + min-height: 95vh; padding-top: 48px; padding-left: 16px; padding-right: 16px; @@ -108,5 +127,6 @@ svg { } .browser-limitations-notice { + font-size: $gl-font-size; margin-top: 32px; } diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss index a26affb10a9..d7473d2c942 100644 --- a/app/assets/stylesheets/page_bundles/merge_conflicts.scss +++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss @@ -1,183 +1,65 @@ @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 +@import '../highlight/conflict_colors'; @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); + background-color: map-get($conflict-colors, #{$color}-header-origin-neutral); + border-color: map-get($conflict-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); + background-color: map-get($conflict-colors, #{$color}-button-origin-neutral); + border-color: darken(map-get($conflict-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); + background-color: map-get($conflict-colors, #{$color}-header-origin-chosen); + border-color: map-get($conflict-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); + background-color: map-get($conflict-colors, #{$color}-button-origin-chosen); + border-color: darken(map-get($conflict-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); + background-color: map-get($conflict-colors, #{$color}-header-not-chosen); + border-color: map-get($conflict-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); + background-color: lighten(map-get($conflict-colors, #{$color}-button-origin-neutral), 15); + border-color: map-get($conflict-colors, #{$color}-button-origin-neutral); } } } &.head { - background-color: map-get($colors, #{$color}-header-head-neutral); - border-color: map-get($colors, #{$color}-header-head-neutral); + background-color: map-get($conflict-colors, #{$color}-header-head-neutral); + border-color: map-get($conflict-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); + background-color: map-get($conflict-colors, #{$color}-button-head-neutral); + border-color: darken(map-get($conflict-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); + background-color: map-get($conflict-colors, #{$color}-header-head-chosen); + border-color: map-get($conflict-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); + background-color: map-get($conflict-colors, #{$color}-button-head-chosen); + border-color: darken(map-get($conflict-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); + background-color: map-get($conflict-colors, #{$color}-header-not-chosen); + border-color: map-get($conflict-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); + background-color: lighten(map-get($conflict-colors, #{$color}-button-head-neutral), 15); + border-color: map-get($conflict-colors, #{$color}-button-head-neutral); } } } @@ -185,26 +67,26 @@ $colors: ( .line_content { &.origin { - background-color: map-get($colors, #{$color}-line-origin-neutral); + background-color: map-get($conflict-colors, #{$color}-line-origin-neutral); &.selected { - background-color: map-get($colors, #{$color}-line-origin-chosen); + background-color: map-get($conflict-colors, #{$color}-line-origin-chosen); } &.unselected { - background-color: map-get($colors, #{$color}-line-not-chosen); + background-color: map-get($conflict-colors, #{$color}-line-not-chosen); } } &.head { - background-color: map-get($colors, #{$color}-line-head-neutral); + background-color: map-get($conflict-colors, #{$color}-line-head-neutral); &.selected { - background-color: map-get($colors, #{$color}-line-head-chosen); + background-color: map-get($conflict-colors, #{$color}-line-head-chosen); } &.unselected { - background-color: map-get($colors, #{$color}-line-not-chosen); + background-color: map-get($conflict-colors, #{$color}-line-not-chosen); } } } diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss index 3c95ecc9bf0..1b190024457 100644 --- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss +++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss @@ -29,6 +29,22 @@ } } +.rotations-modal { + .gl-card { + min-width: 75%; + } + + &.gl-modal .modal-md { + max-width: 640px; + } + + // TODO: move to gitlab/ui utilities + // https://gitlab.com/gitlab-org/gitlab/-/issues/297502 + .gl-w-fit-content { + width: fit-content; + } +} + //// Copied from roadmaps.scss - adapted for on-call schedules $header-item-height: 72px; $item-height: 40px; @@ -97,8 +113,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi } .item-label { - @include gl-py-4; - @include gl-pl-4; border-right: $border-style; border-bottom: $border-style; } diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss index eb34e7f3876..9f0fa137910 100644 --- a/app/assets/stylesheets/page_bundles/wiki.scss +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -15,11 +15,6 @@ padding: 11px 0; } - .wiki-page-title { - margin: 0; - font-size: 22px; - } - .wiki-last-edit-by { display: block; color: var(--gray-500, $gray-500); |