diff options
Diffstat (limited to 'app/assets/stylesheets')
43 files changed, 565 insertions, 233 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index f56665553ba..42d15635566 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -10,7 +10,6 @@ @import './pages/events'; @import './pages/groups'; @import './pages/help'; -@import './pages/incident_management_list'; @import './pages/issuable'; @import './pages/issues/issue_count_badge'; @import './pages/issues'; @@ -28,6 +27,7 @@ @import './pages/profiles/preferences'; @import './pages/projects'; @import './pages/prometheus'; +@import './pages/registry'; @import './pages/runners'; @import './pages/search'; @import './pages/service_desk'; diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss index 67213eedca8..3c8abe43070 100644 --- a/app/assets/stylesheets/components/avatar.scss +++ b/app/assets/stylesheets/components/avatar.scss @@ -68,7 +68,7 @@ $avatar-sizes: ( ); $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal, - $identicon-orange, $gray-darker; + $identicon-orange, $identicon-gray; %avatar-circle { float: left; @@ -125,8 +125,8 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i .identicon { text-align: center; vertical-align: top; - color: $gray-700; - background-color: $gray-darker; + color: $identicon-text-color; + background-color: $identicon-gray; // Sizes @each $size, $size-config in $avatar-sizes { diff --git a/app/assets/stylesheets/components/deployment_instance.scss b/app/assets/stylesheets/components/deployment_instance.scss new file mode 100644 index 00000000000..a8c3400deca --- /dev/null +++ b/app/assets/stylesheets/components/deployment_instance.scss @@ -0,0 +1,91 @@ +.deployment-instance { + width: $gl-padding; + height: $gl-padding; + margin: 1px; + border: 1px solid; + border-radius: $border-radius-small; + position: relative; + + &-succeeded { + background-color: $green-600; + border-color: $green-800; + + &.link:hover { + background-color: $green-800; + border-color: $green-950; + } + } + + &-running { + background-color: $green-300; + border-color: $green-600; + + &.link:hover { + background-color: $green-500; + border-color: $green-800; + } + } + + &-failed { + background-color: $red-600; + border-color: $red-800; + + &::before { + content: ''; + border: 1px solid $white; + background: $white; + transform: rotate(45deg); + position: absolute; + border-radius: 1px; + top: -2px; + bottom: -2px; + } + + &.link:hover { + background-color: $red-800; + border-color: $red-950; + } + } + + &-pending { + background-color: $gray-200; + border-color: $gray-500; + + &.link:hover { + background-color: $gray-300; + border-color: $gray-900; + } + } + + &-unknown { + background-color: $white; + border-color: $gray-500; + + &.link:hover { + background-color: $white; + border-color: $gray-900; + } + } + + &.deployment-instance-canary { + &::after { + width: 7px; + height: 7px; + border: 1px solid $white; + background-color: $orange-300; + border-radius: 50%; + content: ''; + z-index: 1; + } + } + + &-canary-icon { + background-color: transparent; + border: 0; + + &::after { + width: $gl-padding !important; + height: $gl-padding !important; + } + } +} diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss index 51bf2686be2..3e9060e869b 100644 --- a/app/assets/stylesheets/components/whats_new.scss +++ b/app/assets/stylesheets/components/whats_new.scss @@ -57,7 +57,7 @@ } .whats-new-modal-backdrop { - z-index: 9; + z-index: 699; } .whats-new-notification-count { diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index a1e757afe56..0ada5fabde9 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -123,6 +123,10 @@ justify-content: center; text-align: center; } + + .blank-state-icon { + min-width: 215px; + } } $experiment-new-project-indigo-700: #41419f; diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 48252762546..745d469e3e8 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -436,11 +436,7 @@ padding: 6px 16px; margin: 0 0 0 -15px; height: 46px; - - i { - font-size: 20px; - color: $gl-text-color-secondary; - } + color: $gl-text-color; @include media-breakpoint-down(sm) { display: flex; diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index cf9363b77be..499b9c00116 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -588,6 +588,12 @@ table.code { // Merge request diff grid layout .diff-grid { + .diff-td { + // By default min-width is auto with 1fr which causes some overflow problems + // https://gitlab.com/gitlab-org/gitlab/-/issues/296222 + min-width: 0; + } + .diff-grid-row { display: grid; grid-template-columns: 1fr 1fr; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index e2335c184b0..41fc4d3dd4e 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -567,14 +567,13 @@ margin-bottom: 10px; padding: 0 10px; - .fa, .input-icon, .dropdown-input-clear, .dropdown-input-search { position: absolute; top: $gl-padding-8; right: 20px; - color: $dropdown-input-fa-color; + color: $gray-500; font-size: 12px; pointer-events: none; } @@ -796,6 +795,14 @@ .navbar-gitlab { li.dropdown { position: static; + + &.user-counter { + margin-left: 8px !important; + + > a { + padding: 0 4px !important; + } + } } } @@ -979,6 +986,8 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { .labels-select-wrapper { &.is-standalone { + min-width: $input-md-width; + .labels-select-dropdown-contents { max-height: 350px; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index a6a01c7b090..730e10114c3 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -172,7 +172,7 @@ } li { - .badge.badge-pill { + .badge.badge-pill:not(.merge-request-badge) { box-shadow: none; font-weight: $gl-font-weight-bold; } @@ -438,7 +438,7 @@ .title-container, .navbar-nav { - .badge.badge-pill { + .badge.badge-pill:not(.merge-request-badge) { position: inherit; font-weight: $gl-font-weight-normal; margin-left: -6px; diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index 73a2170fc68..28577e2801e 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -45,7 +45,8 @@ a { font-family: $monospace-font; - display: block; + display: flex; + justify-content: flex-end; font-size: $code-font-size !important; white-space: nowrap; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 7ba9236b833..e3d02d01496 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -99,6 +99,10 @@ line-height: $list-text-height; color: $gl-text-color-secondary; + @include media-breakpoint-down(xs) { + padding-top: $gl-padding-6; + } + span { margin-right: 15px; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index d867cc96dbc..bef33bd2ef0 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -58,6 +58,19 @@ height: $gl-padding; } } + + .copy-email-button { // TODO: replace with utility + @include gl-w-full; + @include gl-h-full; + } + + .copy-email-address { + height: 60px; + + &:hover { + background: $gray-100; + } + } } .right-sidebar-expanded { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 808813599c5..674ba1a307b 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -516,9 +516,12 @@ $line-removed-dark-transparent: rgba(246, 53, 85, 0.2); $line-number-old: #f9d7dc; $line-number-new: #ddfbe6; $line-number-select: #fbf2da; +$line-number-commented: #dae5fb; $line-target-blue: $blue-50; $line-select-yellow: #fcf8e7; $line-select-yellow-dark: #f0e2bd; +$line-commented-blue: #e8effc; +$line-commented-blue-dark: #bccef0; $dark-diff-match-bg: rgba($white, 0.3); $dark-diff-match-color: rgba($white, 0.1); $diff-image-info-color: #808080; @@ -546,7 +549,6 @@ $dropdown-vertical-offset: 4px; $dropdown-empty-row-bg: rgba(#000, 0.04); $dropdown-shadow-color: rgba(#000, 0.1); $dropdown-title-btn-color: #bfbfbf; -$dropdown-input-fa-color: #c7c7c7; $dropdown-input-focus-shadow: rgba($blue-300, 0.4); $dropdown-loading-bg: rgba($white, 0.6); $dropdown-chevron-size: 10px; @@ -629,12 +631,14 @@ $note-icon-gutter-width: 55px; /* * Identicon */ +$identicon-text-color: #525252 !default; $identicon-red: #ffebee !default; $identicon-purple: #f3e5f5 !default; $identicon-indigo: #e8eaf6 !default; $identicon-blue: #e3f2fd !default; $identicon-teal: #e0f2f1 !default; $identicon-orange: #fbe9e7 !default; +$identicon-gray: #eee !default; /* * Calendar diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index d9b9f3694c1..6c050f33b07 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -1,4 +1,5 @@ @import '../framework/variables'; +@import './conflict_colors'; @mixin diff-background($background, $idiff, $border) { background: $background; @@ -35,11 +36,11 @@ transition: border-left 0.1s ease-out; &.coverage { - border-left: 3px solid $coverage; + border-left: 4px solid $coverage; } &.no-coverage { - border-left: 3px solid $no-coverage; + border-left: 2px solid $no-coverage; } } @@ -51,3 +52,44 @@ color: darken($color, 15%); } } + +@mixin conflict-colors($theme) { + .diff-line-num { + &.conflict_marker_our, + &.conflict_our { + background-color: map-get($conflict-colors, #{$theme}-header-head-neutral); + border-color: map-get($conflict-colors, #{$theme}-header-head-neutral); + } + + &.conflict_marker_their, + &.conflict_their { + background-color: map-get($conflict-colors, #{$theme}-header-origin-neutral); + border-color: map-get($conflict-colors, #{$theme}-header-origin-neutral); + } + } + + .line_holder { + .line_content, + .line-coverage { + &.conflict_marker_our { + background-color: map-get($conflict-colors, #{$theme}-header-head-neutral); + border-color: map-get($conflict-colors, #{$theme}-header-head-neutral); + } + + &.conflict_marker_their { + background-color: map-get($conflict-colors, #{$theme}-header-origin-neutral); + border-color: map-get($conflict-colors, #{$theme}-header-origin-neutral); + } + + &.conflict_our { + background-color: map-get($conflict-colors, #{$theme}-line-head-neutral); + border-color: map-get($conflict-colors, #{$theme}-line-head-neutral); + } + + &.conflict_their { + background-color: map-get($conflict-colors, #{$theme}-line-origin-neutral); + border-color: map-get($conflict-colors, #{$theme}-line-origin-neutral); + } + } + } +} diff --git a/app/assets/stylesheets/highlight/conflict_colors.scss b/app/assets/stylesheets/highlight/conflict_colors.scss new file mode 100644 index 00000000000..98ca3775b72 --- /dev/null +++ b/app/assets/stylesheets/highlight/conflict_colors.scss @@ -0,0 +1,119 @@ +// Disabled to use the color map for creating color schemes +// scss-lint:disable ColorVariable +$conflict-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 diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index d51d5b7137d..64387fbce09 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -24,8 +24,8 @@ $dark-pre-hll-bg: #373b41; $dark-hll-bg: #373b41; $dark-over-bg: #9f9ab5; $dark-expanded-bg: #3e3e3e; -$dark-coverage: #b5bd68; -$dark-no-coverage: #de935f; +$dark-coverage: #b3e841; +$dark-no-coverage: #ff4f33; $dark-c: #969896; $dark-err: #c66; $dark-k: #b294bb; @@ -198,6 +198,8 @@ $dark-il: #de935f; } } + @include conflict-colors('dark'); + // highlight line via anchor pre .hll { background-color: $dark-pre-hll-bg !important; diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index e690f9c7c74..119908ffba8 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -198,6 +198,8 @@ $monokai-gi: #a6e22e; } } + @include conflict-colors('monokai'); + // highlight line via anchor pre .hll { background-color: $monokai-hll !important; diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index 8c532f53182..f95f5393323 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -202,6 +202,8 @@ $solarized-dark-il: #2aa198; } } + @include conflict-colors('solarized-dark'); + // highlight line via anchor pre .hll { background-color: $solarized-dark-hll-bg !important; diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 1f9042a9534..dc4bc2f32c2 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -210,6 +210,8 @@ $solarized-light-il: #2aa198; } } + @include conflict-colors('solarized-light'); + // highlight line via anchor pre .hll { background-color: $solarized-light-hll-bg !important; diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss index 6362dd734f6..ed1d9c924c0 100644 --- a/app/assets/stylesheets/highlight/themes/white.scss +++ b/app/assets/stylesheets/highlight/themes/white.scss @@ -1,3 +1,5 @@ .code.white { @import '../white_base'; + + @include conflict-colors('white'); } diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index bb5ca94af33..777332881f3 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -81,6 +81,17 @@ $white-gc-bg: #eaf2f5; .line-numbers, .diff-line-num { background-color: $gray-light; + + &.conflict_marker, + &.conflict_our { + background-color: map-get($conflict-colors, 'white-header-head-neutral'); + border-color: map-get($conflict-colors, 'white-header-head-neutral'); + } + + &.conflict_their { + background-color: map-get($conflict-colors, 'white-header-origin-neutral'); + border-color: map-get($conflict-colors, 'white-header-origin-neutral'); + } } .diff-line-num, @@ -115,7 +126,7 @@ pre.code, .diff-grid-left:hover, .diff-grid-right:hover { - .diff-line-num:not(.empty-cell) { + .diff-line-num:not(.empty-cell):not(.conflict_marker_their):not(.conflict_marker_our) { @include line-number-hover($white-over-bg); } } @@ -203,7 +214,7 @@ pre.code, } .line-coverage { - @include line-coverage-border-color($green-500, $orange-500); + @include line-coverage-border-color($green-400, $red-400); &.old { background-color: $line-removed; 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/pages/incident_management_list.scss b/app/assets/stylesheets/page_bundles/incident_management_list.scss index ba363e2d119..30a75103c30 100644 --- a/app/assets/stylesheets/pages/incident_management_list.scss +++ b/app/assets/stylesheets/page_bundles/incident_management_list.scss @@ -1,11 +1,13 @@ +@import 'mixins_and_variables_and_functions'; + .incident-management-list { .new-alert { - background-color: $issues-today-bg; + 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 { - @include gl-text-gray-500; + color: var(--gray-500, $gray-500); tbody { tr:not(.b-table-busy-slot):not(.b-table-empty-row) { @@ -34,7 +36,8 @@ th { @include gl-bg-transparent; @include gl-font-weight-bold; - @include gl-text-gray-400; + 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'); @@ -67,7 +70,7 @@ } &:hover { - @include gl-bg-white; + background-color: var(--white, $white); @include gl-border-none; } @@ -80,7 +83,7 @@ &.alert-management-table { .table-col { &:last-child { - @include gl-bg-gray-10; + background-color: var(--gray-10, $gray-10); &::before { content: none !important; @@ -120,12 +123,12 @@ @include gl-border-b-0; .gl-tab-nav-item { - @include gl-text-gray-500; + color: var(--gray-500, $gray-500); > .gl-tab-counter-badge { @include gl-reset-color; @include gl-font-sm; - @include gl-bg-gray-50; + background-color: var(--gray-50, $gray-50); } } } 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); diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index e0e10d63f8e..52bd16d1a79 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -181,6 +181,7 @@ .license-selector, .gitignore-selector, .gitlab-ci-yml-selector, + .gitlab-ci-syntax-yml-selector, .dockerfile-selector, .template-type-selector, .metrics-dashboard-selector { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index efca82def92..b99e619cc98 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -124,7 +124,7 @@ $mr-widget-min-height: 69px; padding: $gl-padding; @include media-breakpoint-up(md) { - padding-left: $gl-padding-8 * 7; + margin-left: $gl-spacing-scale-7; } } } @@ -301,7 +301,8 @@ $mr-widget-min-height: 69px; margin: 0 0 0 10px; } - .bold { + .bold, + .gl-font-weight-bold { font-weight: $gl-font-weight-bold; color: $gray-600; margin-left: 10px; @@ -317,7 +318,8 @@ $mr-widget-min-height: 69px; } .spacing, - .bold { + .bold, + .gl-font-weight-bold { vertical-align: middle; } @@ -394,10 +396,6 @@ $mr-widget-min-height: 69px; } } - .mr-widget-help { - padding: 10px 16px 10px ($gl-padding-8 * 7); - } - .ci-coverage { float: right; } @@ -1016,3 +1014,11 @@ $mr-widget-min-height: 69px; vertical-align: middle; } } + +.mr-ready-to-merge-loader { + max-width: 418px; + + > svg { + vertical-align: middle; + } +} diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 0c24ea9ccc6..254ad96bb57 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -100,8 +100,6 @@ color: $orange-600; background-color: $orange-50; border-radius: $border-radius-default $border-radius-default 0 0; - border: 1px solid $border-gray-normal; - border-bottom: 0; padding: 3px 12px; margin: auto; align-items: center; @@ -454,3 +452,9 @@ table { .markdown-selector { color: $blue-600; } + +.comment-warning-wrapper { + .md-area { + border: 0; + } +} diff --git a/app/assets/stylesheets/pages/registry.scss b/app/assets/stylesheets/pages/registry.scss new file mode 100644 index 00000000000..31c6dbd2970 --- /dev/null +++ b/app/assets/stylesheets/pages/registry.scss @@ -0,0 +1,8 @@ +// Workaround for gl-breadcrumb at the last child of the handwritten breadcrumb +// until this gitlab-ui issue is resolved: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1079 +// +// See app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue when this is changed. +.breadcrumbs-container .gl-breadcrumbs { + padding: 0; + box-shadow: none; +} diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 335e177d169..f31b6d96f03 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -43,7 +43,7 @@ .settings-header { position: relative; - padding: 20px 110px 0 0; + padding: 24px 110px 0 0; h4 { margin-top: 0; diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss index ebf21f58208..346b3f61caa 100644 --- a/app/assets/stylesheets/pages/settings_ci_cd.scss +++ b/app/assets/stylesheets/pages/settings_ci_cd.scss @@ -17,10 +17,6 @@ } } -.registry-placeholder { - min-height: 60px; -} - .auto-devops-card { margin-bottom: $gl-vert-padding; } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 8f3574a337b..352050f7b01 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -98,6 +98,7 @@ .tree-table { margin-bottom: 0; + table-layout: fixed; tr { border-bottom: 1px solid $white-normal; diff --git a/app/assets/stylesheets/pages/trials.scss b/app/assets/stylesheets/pages/trials.scss index 3fb9054b2b8..55f323b7df7 100644 --- a/app/assets/stylesheets/pages/trials.scss +++ b/app/assets/stylesheets/pages/trials.scss @@ -3,13 +3,13 @@ * MR link https://gitlab.com/gitlab-org/gitlab/-/merge_requests/22716 */ .gl-select2-html5-required-fix div.select2-container+select.select2 { + @include gl-opacity-0; + @include gl-border-0; + @include gl-bg-none; + @include gl-bg-transparent; display: block !important; width: 1px; height: 1px; z-index: -1; - opacity: 0; margin: -3px auto 0; - background-image: none; - background-color: transparent; - border: 0; } diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index d875f758ead..31a501f3a36 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -1242,8 +1242,8 @@ body.gl-dark .navbar-gitlab .search form { line-height: 18px; margin: 4px 0 4px 2px; } -.title-container .badge.badge-pill, -.navbar-nav .badge.badge-pill { +.title-container .badge.badge-pill:not(.merge-request-badge), +.navbar-nav .badge.badge-pill:not(.merge-request-badge) { position: inherit; font-weight: 400; margin-left: -6px; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index a98e91b32eb..7f6e537af8f 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -1163,8 +1163,8 @@ input { line-height: 18px; margin: 4px 0 4px 2px; } -.title-container .badge.badge-pill, -.navbar-nav .badge.badge-pill { +.title-container .badge.badge-pill:not(.merge-request-badge), +.navbar-nav .badge.badge-pill:not(.merge-request-badge) { position: inherit; font-weight: 400; margin-left: -6px; diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 7f2bea9bf26..d8f74a2913e 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -168,6 +168,20 @@ body.gl-dark { --black: #{$black}; --svg-status-bg: #{$white}; + + .gl-button.gl-button, + .gl-button.gl-button.btn-block { + &.btn-default, + &.btn-dashed, + &.btn-info, + &.btn-success, + &.btn-danger, + &.btn-warning { + &-tertiary { + mix-blend-mode: screen; + } + } + } } $border-white-light: $gray-900; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index bf251993c38..ab330ed69c6 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -143,16 +143,3 @@ flex-direction: column !important; } } - -// These will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1091 -.gl-w-10p { - width: 10%; -} - -.gl-w-20p { - width: 20%; -} - -.gl-w-40p { - width: 40%; -} |