diff options
Diffstat (limited to 'app/assets/stylesheets')
43 files changed, 822 insertions, 443 deletions
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index 27ddff181c5..598ef70297c 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -1,318 +1,6 @@ -$text-color: $gl-text-color; - -$brand-primary: $blue-500; -$brand-success: $green-500; -$brand-info: $blue-500; -$brand-warning: $orange-500; -$brand-danger: $red-500; - -$border-radius-base: $gl-border-radius-base; - -$modal-body-bg: $white; -$input-border: $border-color; - -$padding-base-vertical: $gl-vert-padding; -$padding-base-horizontal: $gl-padding; - -/* - * Scss to help with bootstrap 3 to 4 migration - */ -body, -.form-control, -.search form { - // Override default font size used in non-csslab UI - // Use rem to keep default font-size at 14px on body so 1rem still - // fits 8px grid, but also allow users to change browser font size - font-size: 0.875rem; -} - -legend { - border-bottom: 1px solid $border-color; - margin-bottom: 20px; -} - -button, -html [type='button'], -[type='reset'], -[type='submit'], -[role='button'] { - // Override bootstrap reboot - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-appearance: inherit; - cursor: pointer; -} - -h1, -.h1, -h2, -.h2, -h3, -.h3 { - margin-top: 20px; - margin-bottom: 10px; -} - -h4, -.h4, -h5, -.h5, -h6, -.h6 { - margin-top: 10px; - margin-bottom: 10px; -} - -/* Our adjustments to hx & .hx above add unnecessary margins to modal-title - and page-title in modals, so we set them to 0 in order to have properly - formatted modal headers. */ -.modal-header { - .modal-title, - .page-title { - margin-top: 0; - margin-bottom: 0; - } -} - -h5, -.h5 { - font-size: $gl-font-size; -} - -input[type='file'] { - // Bootstrap 4 file input height is taller by default - // which makes them look ugly - line-height: 1; -} - -b, -strong { - font-weight: bold; -} - -a { - color: $blue-600; -} - -hr { - overflow: hidden; -} - -.form-group.row .col-form-label { - // Bootstrap 4 aligns labels to the left - // for horizontal forms - @include media-breakpoint-up(md) { - text-align: right; - } -} - -code { - padding: 2px 4px; - color: $code-color; - background-color: $gray-50; - border-radius: $border-radius-default; - - .code > &, - .build-log & { - background-color: inherit; - padding: unset; - } -} - -table { - // Remove any table border lines - border-spacing: 0; -} - -@each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - .d#{$infix}-table-header-group { - display: table-header-group !important; - } - } -} - -.text-secondary { - // Override Bootstrap's light secondary color - // We have to use !important because bootstrap has that set as well - color: $gl-text-color-secondary !important; -} - -.bg-success, -.bg-primary, -.bg-info, -.bg-danger, -.bg-warning { - .card-header { - color: $white; - } -} - -// Polyfill deprecated selectors - -.hidden { - display: none !important; - visibility: hidden !important; -} - -.hide { - display: none; -} - -.dropdown-toggle::after, -.dropright .dropdown-menu-toggle::after { - // Remove bootstrap's dropdown caret - display: none; -} - -// Add to .label so that old system notes that are saved to the db -// will still receive the correct styling -.badge:not(.gl-badge), -.label { - padding: 4px 5px; - font-size: 12px; - font-style: normal; - font-weight: $gl-font-weight-normal; - display: inline-block; - - &.badge-gray { - background-color: $label-gray-bg; - color: $gl-text-color; - text-shadow: none; - } - - &.badge-inverse { - background-color: $label-inverse-bg; - } -} - -.divider { - // copied rules from node_modules/bootstrap/scss/_dropdown.scss:116 - // this might be safe to just remove instead - // most places that use divider add overrides to undo these things - // there is also a probably-unintentional use in deprecated_dropdown_divider.scss - // so we would end up with .gl-dropdown .dropdown-divider - height: 0; - margin: 4px 0; - overflow: hidden; - border-top: 1px solid $border-color; -} - -.info-well { - background: $gray-10; - color: $gl-text-color; - border: 1px solid $border-color; - border-radius: 4px; - margin-bottom: 16px; - - .well-segment { - padding: 16px; - - &:not(:last-of-type) { - border-bottom: 1px solid $well-inner-border; - } - - p, - ol, - ul, - .form-group { - &:last-of-type { - margin-bottom: 0; - } - } - } - - .badge.badge-gray { - background-color: $well-expand-item; - } -} - -.card { - &.card-without-border, - &.bg-light { - border: 0 !important; - } -} - -.nav-tabs { - // Override bootstrap's default border - border-bottom: 0; - - .nav-link { - border-top: 0; - border-left: 0; - border-right: 0; - } - - .nav-item { - margin-bottom: 0; - } -} - -pre code { - white-space: pre-wrap; -} - -.alert { - border-radius: 0; -} - -.alert-success { - background-color: $green-500; - border-color: $green-500; -} - -.alert-info { - background-color: $blue-500; - border-color: $blue-500; -} - -.alert-warning { - background-color: $orange-500; - border-color: $orange-500; -} - -.alert-danger { - background-color: $red-500; - border-color: $red-500; -} - -.alert-success, -.alert-info, -.alert-warning, -.alert-danger { - color: $white; - - h4, - .alert-link { - color: $white; - } -} - -input[type=color].form-control { - height: $input-height; -} - -.toggle-sidebar-button { - .collapse-text, - .icon-chevron-double-lg-left, - .icon-chevron-double-lg-right { - color: $gl-text-color-secondary; - } -} - -.project-templates-buttons { - .btn { - vertical-align: unset; - } -} - -/* - Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons, - so we need to reset the vertical alignment to the default value. See: - - https://gitlab.com/gitlab-org/gitlab-foss/issues/51362 - */ -svg { - vertical-align: baseline; -} +// --- +// Scss to help with bootstrap 3 to 4 migration +// --- +@import 'bootstrap_migration_variables'; +@import 'bootstrap_migration_reset'; +@import 'bootstrap_migration_components'; diff --git a/app/assets/stylesheets/bootstrap_migration_components.scss b/app/assets/stylesheets/bootstrap_migration_components.scss new file mode 100644 index 00000000000..b6cecbe5806 --- /dev/null +++ b/app/assets/stylesheets/bootstrap_migration_components.scss @@ -0,0 +1,216 @@ +// --- +// Scss to help with bootstrap 3 to 4 migration of bootstrap components +// --- +.form-control, +.search form { + // Override default font size used in non-csslab UI + // Use rem to keep default font-size at 14px on body so 1rem still + // fits 8px grid, but also allow users to change browser font size + font-size: 0.875rem; +} + +/* Our adjustments to hx & .hx above add unnecessary margins to modal-title + and page-title in modals, so we set them to 0 in order to have properly + formatted modal headers. */ +.modal-header { + .modal-title, + .page-title { + margin-top: 0; + margin-bottom: 0; + } +} + +input[type='file'] { + // Bootstrap 4 file input height is taller by default + // which makes them look ugly + line-height: 1; +} + +.form-group.row .col-form-label { + // Bootstrap 4 aligns labels to the left + // for horizontal forms + @include media-breakpoint-up(md) { + text-align: right; + } +} + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .d#{$infix}-table-header-group { + display: table-header-group !important; + } + } +} + +.text-secondary { + // Override Bootstrap's light secondary color + // We have to use !important because bootstrap has that set as well + color: $gl-text-color-secondary !important; +} + +.bg-success, +.bg-primary, +.bg-info, +.bg-danger, +.bg-warning { + .card-header { + color: $white; + } +} + +// Polyfill deprecated selectors + +.hidden { + display: none !important; + visibility: hidden !important; +} + +.hide { + display: none; +} + +.dropdown-toggle::after, +.dropright .dropdown-menu-toggle::after { + // Remove bootstrap's dropdown caret + display: none; +} + +// Add to .label so that old system notes that are saved to the db +// will still receive the correct styling +.badge:not(.gl-badge), +.label { + padding: 4px 5px; + font-size: 12px; + font-style: normal; + font-weight: $gl-font-weight-normal; + display: inline-block; + + &.badge-gray { + background-color: $label-gray-bg; + color: $gl-text-color; + text-shadow: none; + } + + &.badge-inverse { + background-color: $label-inverse-bg; + } +} + +.divider { + // copied rules from node_modules/bootstrap/scss/_dropdown.scss:116 + // this might be safe to just remove instead + // most places that use divider add overrides to undo these things + // there is also a probably-unintentional use in deprecated_dropdown_divider.scss + // so we would end up with .gl-dropdown .dropdown-divider + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid $border-color; +} + +.info-well { + background: $gray-10; + color: $gl-text-color; + border: 1px solid $border-color; + border-radius: 4px; + margin-bottom: 16px; + + .well-segment { + padding: 16px; + + &:not(:last-of-type) { + border-bottom: 1px solid $well-inner-border; + } + + p, + ol, + ul, + .form-group { + &:last-of-type { + margin-bottom: 0; + } + } + } + + .badge.badge-gray { + background-color: $well-expand-item; + } +} + +.card { + &.card-without-border, + &.bg-light { + border: 0 !important; + } +} + +.nav-tabs { + // Override bootstrap's default border + border-bottom: 0; + + .nav-link { + border-top: 0; + border-left: 0; + border-right: 0; + } + + .nav-item { + margin-bottom: 0; + } +} + +.alert { + border-radius: 0; +} + +.alert-success { + background-color: $green-500; + border-color: $green-500; +} + +.alert-info { + background-color: $blue-500; + border-color: $blue-500; +} + +.alert-warning { + background-color: $orange-500; + border-color: $orange-500; +} + +.alert-danger { + background-color: $red-500; + border-color: $red-500; +} + +.alert-success, +.alert-info, +.alert-warning, +.alert-danger { + color: $white; + + h4, + .alert-link { + color: $white; + } +} + +input[type=color].form-control { + height: $input-height; +} + +.toggle-sidebar-button { + .collapse-text, + .icon-chevron-double-lg-left, + .icon-chevron-double-lg-right { + color: $gl-text-color-secondary; + } +} + +.project-templates-buttons { + .btn { + vertical-align: unset; + } +} diff --git a/app/assets/stylesheets/bootstrap_migration_reset.scss b/app/assets/stylesheets/bootstrap_migration_reset.scss new file mode 100644 index 00000000000..ad315c4ada1 --- /dev/null +++ b/app/assets/stylesheets/bootstrap_migration_reset.scss @@ -0,0 +1,94 @@ +// --- +// Scss to help with bootstrap 3 to 4 migration of core elements +// --- +body { + // Override default font size used in non-csslab UI + // Use rem to keep default font-size at 14px on body so 1rem still + // fits 8px grid, but also allow users to change browser font size + font-size: 0.875rem; +} + +legend { + border-bottom: 1px solid $border-color; + margin-bottom: 20px; +} + +button, +html [type='button'], +[type='reset'], +[type='submit'], +[role='button'] { + // Override bootstrap reboot + /* stylelint-disable-next-line property-no-vendor-prefix */ + -webkit-appearance: inherit; + cursor: pointer; +} + +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 20px; + margin-bottom: 10px; +} + +h4, +.h4, +h5, +.h5, +h6, +.h6 { + margin-top: 10px; + margin-bottom: 10px; +} + +h5, +.h5 { + font-size: $gl-font-size; +} + +b, +strong { + font-weight: bold; +} + +a { + color: $blue-600; +} + +hr { + overflow: hidden; +} + +code { + padding: 2px 4px; + color: $code-color; + background-color: $gray-50; + border-radius: $border-radius-default; + + .code > &, + .build-log & { + background-color: inherit; + padding: unset; + } +} + +table { + // Remove any table border lines + border-spacing: 0; +} + +pre code { + white-space: pre-wrap; +} + +/* + Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons, + so we need to reset the vertical alignment to the default value. See: + - https://gitlab.com/gitlab-org/gitlab-foss/issues/51362 + */ +svg { + vertical-align: baseline; +} diff --git a/app/assets/stylesheets/bootstrap_migration_variables.scss b/app/assets/stylesheets/bootstrap_migration_variables.scss new file mode 100644 index 00000000000..f3888de4ed8 --- /dev/null +++ b/app/assets/stylesheets/bootstrap_migration_variables.scss @@ -0,0 +1,15 @@ +$text-color: $gl-text-color; + +$brand-primary: $blue-500; +$brand-success: $green-500; +$brand-info: $blue-500; +$brand-warning: $orange-500; +$brand-danger: $red-500; + +$border-radius-base: $gl-border-radius-base; + +$modal-body-bg: $white; +$input-border: $border-color; + +$padding-base-vertical: $gl-vert-padding; +$padding-base-horizontal: $gl-padding; diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss index 5d1709c22ec..94d295c324b 100644 --- a/app/assets/stylesheets/components/milestone_combobox.scss +++ b/app/assets/stylesheets/components/milestone_combobox.scss @@ -1,13 +1,4 @@ .milestone-combobox { - .selected-item { - /* stylelint-disable-next-line function-url-quotes */ - background: url(asset_path('checkmark.png')) no-repeat 0 2px; - } - - .dropdown-item-space { - padding: 8px 12px; - } - .dropdown-menu.show { overflow: hidden; } diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 2c72c4b0f65..1192c51b9aa 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -244,9 +244,13 @@ // above will be deprecated once all instances of "award emoji" are // migrated to Vue. -.gl-button .award-emoji-block gl-emoji { - margin-top: -1px; - margin-bottom: -1px; +.gl-button .award-emoji-block { + display: contents; + + gl-emoji { + margin-top: -1px; + margin-bottom: -1px; + } } .add-reaction-button { diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss index b8934d2797a..58f986ec0ae 100644 --- a/app/assets/stylesheets/framework/broadcast_messages.scss +++ b/app/assets/stylesheets/framework/broadcast_messages.scss @@ -15,6 +15,10 @@ .broadcast-banner-message { text-align: center; + + p { + margin-bottom: 0; + } } .broadcast-notification-message { diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 36a0d3ca3ca..be8a890320f 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -254,10 +254,9 @@ li.note { } img.emoji { - height: 20px; + height: 16px; vertical-align: top; width: 20px; - margin-top: 1px; } .chart { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 7f960e3da51..5c6d9266f7c 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -503,6 +503,7 @@ &.dropdown-menu-user-link::before { top: 50%; + transform: translateY(-50%); } } @@ -520,8 +521,22 @@ } &.is-active { - /* stylelint-disable-next-line function-url-quotes */ - background: url(asset_path('checkmark.png')) no-repeat 14px center; + position: relative; + + &::before { + content: ''; + display: block; + position: absolute; + top: 0.5rem; + left: 1rem; + width: 1rem; + height: 1rem; + mask-image: asset_url('icons-stacked.svg#check'); + mask-repeat: no-repeat; + mask-size: cover; + mask-position: center center; + background: $black-normal; + } } } } @@ -692,7 +707,7 @@ .dropdown-label-box { position: relative; - top: 3px; + top: 0; margin-right: 5px; display: inline-block; width: 15px; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 1004383cfd3..f44123fc2ed 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -1,5 +1,3 @@ -$top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important; - .navbar-gitlab { padding: 0 16px; z-index: $header-zindex; @@ -54,7 +52,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important white-space: nowrap; img { - height: 28px; + height: 24px; + .logo-text { margin-left: 8px; @@ -460,7 +458,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important vertical-align: text-top; } - a.upgrade-plan-link gl-emoji, a.ci-minutes-emoji gl-emoji, a.trial-link gl-emoji { font-size: $gl-font-size; @@ -574,7 +571,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important } .frequent-items-list-item-container > a:hover { - background-color: $top-nav-hover-bg; + background-color: $nav-active-bg; } } @@ -589,11 +586,9 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important } .top-nav-menu-item { - color: var(--indigo-900, $theme-indigo-900) !important; - &.active, &:hover { - background-color: $top-nav-hover-bg; + background-color: $nav-active-bg; } .gl-icon { @@ -603,7 +598,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important .top-nav-responsive { @include gl-display-none; - color: var(--indigo-900, $theme-indigo-900); } .top-nav-responsive-open { diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 7731ec751c9..7522f791b8e 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -72,7 +72,6 @@ @include media-breakpoint-down(xs) { .nav-item { flex: 1; - border-bottom: 1px solid $border-color; } .gl-tab-nav-item { @@ -84,7 +83,8 @@ width: 100%; display: flex; flex-wrap: wrap; - margin-top: $gl-padding-8; + padding-top: $gl-padding-8; + border-top: 1px solid $border-color; } } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index e77971d5280..d270f802c56 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -226,3 +226,29 @@ .edit-link { margin-right: -$gl-spacing-scale-2; } + +.assignee-grid { + grid-template-areas: ' attention user'; + grid-template-columns: min-content 1fr; +} + +.reviewer-grid { + grid-template-areas: ' user approval rerequest'; + grid-template-columns: 1fr min-content min-content; + + &.attention-requests { + grid-template-areas: ' attention user approval'; + grid-template-columns: min-content 1fr min-content; + } +} + +.assignee-grid, +.reviewer-grid { + [data-css-area='attention'] { + grid-area: attention; + } + + [data-css-area='user'] { + grid-area: user; + } +} diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index c6bc8fa0eac..6348703e9e1 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -48,7 +48,7 @@ table { th { padding: 10px $gl-padding; line-height: 20px; - vertical-align: middle; + vertical-align: top; } th { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 31ef5ae0646..8e3b34e4eaf 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -363,6 +363,7 @@ $well-expand-item: #e8f2f7 !default; $well-inner-border: #eef0f2 !default; $well-light-border: #f1f1f1; $well-light-text-color: #5b6169; +$nav-active-bg: var(--nav-active-bg, rgba($black, 0.08)) !important; /* * Text diff --git a/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss b/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss new file mode 100644 index 00000000000..30895a55711 --- /dev/null +++ b/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss @@ -0,0 +1,36 @@ +/** +* CSS variables used below are declared in `app/views/layouts/_diffs_colors_css.haml` +*/ +.diff-custom-addition-color { + .code { + .line_holder { + .diff-line-num, + .line-coverage, + .line-codequality, + .line_content { + &.new { + &:not(.hll) { + background: var(--diff-addition-color); + } + + &.line_content span.idiff { + background: var(--diff-addition-color) !important; + } + + &::before, + a { + mix-blend-mode: luminosity; + } + } + } + } + + .gd { + background-color: var(--diff-addition-color); + } + } + + .idiff.addition { + background: var(--diff-addition-color) !important; + } +} diff --git a/app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss b/app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss new file mode 100644 index 00000000000..a8ab43909eb --- /dev/null +++ b/app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss @@ -0,0 +1,36 @@ +/** +* CSS variables used below are declared in `app/views/layouts/_diffs_colors_css.haml` +*/ +.diff-custom-deletion-color { + .code { + .line_holder { + .diff-line-num, + .line-coverage, + .line-codequality, + .line_content { + &.old { + &:not(.hll) { + background: var(--diff-deletion-color); + } + + &.line_content span.idiff { + background: var(--diff-deletion-color) !important; + } + + &::before, + a { + mix-blend-mode: luminosity; + } + } + } + } + + .gd { + background-color: var(--diff-deletion-color); + } + } + + .idiff.deletion { + background: var(--diff-deletion-color) !important; + } +} diff --git a/app/assets/stylesheets/highlight/hljs.scss b/app/assets/stylesheets/highlight/hljs.scss new file mode 100644 index 00000000000..2e31e7c1f6d --- /dev/null +++ b/app/assets/stylesheets/highlight/hljs.scss @@ -0,0 +1,125 @@ +.code.highlight { + .hljs-comment { + color: var(--color-hljs-comment); + } + + .hljs-link { + color: var(--color-hljs-link); + } + + .hljs-meta { + color: var(--color-hljs-meta); + } + + .hljs-keyword { + color: var(--color-hljs-keyword); + } + + .hljs-type { + color: var(--color-hljs-type); + } + + .hljs-attr, + .hljs-property { + color: var(--color-hljs-attr); + } + + .hljs-built_in { + color: var(--color-hljs-builtin); + } + + .hljs-literal { + color: var(--color-hljs-literal); + } + + .hljs-title { + color: var(--color-hljs-title); + + &.class_ { + color: var(--color-hljs-class); + } + + &.function_ { + color: var(--color-hljs-function); + } + } + + .hljs-tag , + .hljs-name { + color: var(--color-hljs-tag); + } + + .hljs-number { + color: var(--color-hljs-number); + } + + .hljs-subst { + color: var(--color-hljs-subst); + } + + .hljs-string, + .hljs-section, + .hljs-bullet { + color: var(--color-hljs-string); + } + + .hljs-symbol { + color: var(--color-hljs-symbol); + } + + .hljs-variable { + color: var(--color-hljs-variable); + + &.language_ { + color: var(--color-hljs-language); + } + + &.constant_ { + color: var(--color-hljs-constant); + } + } + + .hljs-attribute { + color: var(--color-hljs-attribute); + } + + .hljs-operator { + color: var(--color-hljs-operator); + } + + .hljs-punctuation { + color: var(--color-hljs-punctuation); + } + + .hljs-regexp { + color: var(--color-hljs-regexp); + } + + .hljs-params { + color: var(--color-hljs-params); + } + + .hljs-doctag { + color: var(--color-hljs-doctag); + } + + .hljs-selector-tag { + color: var(--color-hljs-selector-tag); + } + + .hljs-selector-class { + color: var(--color-hljs-selector-class); + } + + .hljs-selector-id { + color: var(--color-hljs-selector-id); + } + + .hljs-selector-attr { + color: var(--color-hljs-selector-attr); + } + + .hljs-selector-pseudo { + color: var(--color-hljs-selector-pseudo); + } +} diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 28878280d24..c51b1f04757 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -1,6 +1,7 @@ /* https://github.com/MozMorris/tomorrow-pygments */ @import '../common'; +@import '../hljs'; /* * Dark syntax colors @@ -88,6 +89,41 @@ $dark-vg: #c66; $dark-vi: #c66; $dark-il: #de935f; +:root { + --color-hljs-comment: #{$dark-c}; + --color-hljs-variable: #{$dark-k}; + --color-hljs-link: #{$dark-l}; + --color-hljs-meta: #{$dark-cp}; + --color-hljs-keyword: #{$dark-kd}; + --color-hljs-type: #{$dark-kt}; + --color-hljs-attr: #{$dark-na}; + --color-hljs-builtin: #{$dark-nb}; + --color-hljs-title: #{$dark-n}; + --color-hljs-class: #{$dark-nc}; + --color-hljs-function: #{$dark-nf}; + --color-hljs-tag: #{$dark-nt}; + --color-hljs-number: #{$dark-mi}; + --color-hljs-subst: #{$dark-sc}; + --color-hljs-string: #{$dark-s1}; + --color-hljs-symbol: #{$dark-ss}; + --color-hljs-variable: #{$dark-vi}; + --color-hljs-operator: #{$dark-o}; + --color-hljs-punctuation: #{$dark-p}; + --color-hljs-regexp: #{$dark-sr}; + --color-hljs-constant: #{$dark-nx}; + --color-hljs-literal: #{$dark-kc}; + --color-hljs-language: #{$dark-nx}; + --color-hljs-params: #{$dark-nx}; + --color-hljs-selector-doctag: #{$dark-cm}; + --color-hljs-selector-tag: #{$dark-nt}; + --color-hljs-selector-class: #{$dark-nc}; + --color-hljs-selector-id: #{$dark-nn}; + --color-hljs-selector-attr: #{$dark-nt}; + --color-hljs-selector-pseudo: #{$dark-nd}; + --default-diff-color-deletion: #ff3333; + --default-diff-color-addition: #288f2a; +} + .code.dark { // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 6faf1cffdef..226bb44f0e7 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -89,6 +89,11 @@ $monokai-gd: #f92672; $monokai-gi: #a6e22e; $monokai-gh: #75715e; +:root { + --default-diff-color-deletion: #c87872; + --default-diff-color-addition: #678528; +} + .code.monokai { // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 9c28d9463dc..7a36aba8be7 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -9,6 +9,11 @@ background-color: $white-normal; } +:root { + --default-diff-color-deletion: #b4b4b4; + --default-diff-color-addition: #b4b4b4; +} + .code.none { // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index c9f889c79fc..acd401e1694 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -92,6 +92,11 @@ $solarized-dark-vg: #268bd2; $solarized-dark-vi: #268bd2; $solarized-dark-il: #2aa198; +:root { + --default-diff-color-deletion: #ff362c; + --default-diff-color-addition: #647e0e; +} + .code.solarized-dark { // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 0108d7e496f..ddcecc4cbcf 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -94,6 +94,11 @@ $solarized-light-vg: #268bd2; $solarized-light-vi: #268bd2; $solarized-light-il: #2aa198; +:root { + --default-diff-color-deletion: #dc322f; + --default-diff-color-addition: #859900; +} + @mixin match-line { color: $black-transparent; background: $solarized-light-matchline-bg; diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss index ed1d9c924c0..8698e448c94 100644 --- a/app/assets/stylesheets/highlight/themes/white.scss +++ b/app/assets/stylesheets/highlight/themes/white.scss @@ -3,3 +3,8 @@ @include conflict-colors('white'); } + +:root { + --default-diff-color-deletion: #eb919b; + --default-diff-color-addition: #a0f5b4; +}
\ No newline at end of file diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 91d8f4a1ba5..20a36d2e8b1 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -149,7 +149,6 @@ pre.code, .diff-line-num { &.old { background-color: $line-number-old; - border-color: $line-removed-dark; a { color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%); @@ -158,7 +157,6 @@ pre.code, &.new { background-color: $line-number-new; - border-color: $line-added-dark; a { color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%); diff --git a/app/assets/stylesheets/notify_base.scss b/app/assets/stylesheets/notify_base.scss index 8c6f9a27077..0ca1398c609 100644 --- a/app/assets/stylesheets/notify_base.scss +++ b/app/assets/stylesheets/notify_base.scss @@ -1,5 +1,6 @@ -@import 'framework/mixins'; @import 'framework/variables'; +@import 'framework/variables_overrides'; +@import 'framework/mixins'; img { max-width: 100%; diff --git a/app/assets/stylesheets/notify_enhanced.scss b/app/assets/stylesheets/notify_enhanced.scss index 5df5a8592bf..a366498ea03 100644 --- a/app/assets/stylesheets/notify_enhanced.scss +++ b/app/assets/stylesheets/notify_enhanced.scss @@ -2,20 +2,30 @@ // keep parts that affect elements that can appear in emails; // omit Bootstrap Reboot since it adds unnecessary styles to every element. @import 'notify_base'; + +// bootstrap variables, mixins, functions @import 'bootstrap/scss/functions'; @import 'bootstrap/scss/variables'; @import 'bootstrap/scss/mixins'; + +// bootstrap styles @import 'bootstrap/scss/code'; + +// @gitlab/ui variables, mixins, functions @import '@gitlab/ui/src/scss/variables'; @import '@gitlab/ui/src/scss/utility-mixins/index'; -@import '@gitlab/ui/src/scss/components'; -@import 'bootstrap_migration'; -@import 'framework/common'; + +// @gitlab/ui styles +@import '@gitlab/ui/src/components/base/icon/icon'; +@import '@gitlab/ui/src/components/base/label/label'; + +// gitlab styles +@import 'bootstrap_migration_variables'; +@import 'bootstrap_migration_reset'; @import 'framework/gfm'; @import 'framework/kbd'; @import 'framework/tables'; @import 'framework/typography'; -@import 'framework/emojis'; body { font-family: $regular-font; @@ -26,11 +36,15 @@ a { text-decoration: none; } -.content { - .md { - padding: 1rem 0; - } +.gl-mb-5 { + @include gl-mb-5; +} +.gl-mt-5 { + @include gl-mt-5; +} + +.content { hr { border: 1px solid #e1e1e1; } diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index f91ca489bdf..eecd4954e39 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -198,7 +198,7 @@ border-bottom: 1px solid var(--gray-100, $gray-100); height: 3rem; - .js-max-issue-size::before { + .max-issue-size::before { content: '/'; } } diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss index b7a4d9564fe..cd5e6d32e4e 100644 --- a/app/assets/stylesheets/page_bundles/import.scss +++ b/app/assets/stylesheets/page_bundles/import.scss @@ -1,18 +1,22 @@ @import 'mixins_and_variables_and_functions'; +.import-jobs-from-col { + width: 37%; +} + + .import-jobs-to-col { - width: 39%; + width: 37%; } .import-jobs-status-col { - width: 15%; + width: 25%; } .import-jobs-cta-col { width: 1%; } - .import-entities-target-select { &.disabled { .import-entities-target-select-separator { diff --git a/app/assets/stylesheets/page_bundles/jira_connect_users.scss b/app/assets/stylesheets/page_bundles/jira_connect_users.scss index 6725bf8f1a1..602910adad9 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect_users.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect_users.scss @@ -1,13 +1 @@ -@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; - } -} +@import '../themes/theme_indigo'; diff --git a/app/assets/stylesheets/page_bundles/learn_gitlab.scss b/app/assets/stylesheets/page_bundles/learn_gitlab.scss index 10a4a210d41..189aefb330b 100644 --- a/app/assets/stylesheets/page_bundles/learn_gitlab.scss +++ b/app/assets/stylesheets/page_bundles/learn_gitlab.scss @@ -1,11 +1,3 @@ .learn-gitlab-info-card-content { height: 200px; } - -.learn-gitlab-section-card { - height: 400px; -} - -.learn-gitlab-section-card-header { - height: 165px; -} diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index 989219552a6..aa582db10d2 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -7,21 +7,7 @@ $status-box-line-height: 26px; } .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; } diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index d9ad82d4e4b..27d81d8e53b 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -1,12 +1,4 @@ .clusters-container { - .empty-state .svg-content { - @include gl-pb-0; - - img { - width: 100px; - } - } - @include media-breakpoint-down(xs) { .nav-controls { @include gl-w-full; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 9bb4c5357e7..f127b0dc66c 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -311,7 +311,7 @@ ul.related-merge-requests > li gl-emoji { .description.work-items-enabled { ul.task-list { > li.task-list-item { - padding-inline-start: 2.25rem; + padding-inline-start: 2.5rem; .js-add-task { svg { @@ -324,7 +324,7 @@ ul.related-merge-requests > li gl-emoji { } > input.task-list-item-checkbox { - left: 0.875rem; + left: 1.25rem; } &:hover, diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index c84a83c1fab..18a0f119edf 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -45,6 +45,36 @@ input[type='checkbox']:hover { transition: border-color ease-in-out $default-transition-duration, background-color ease-in-out $default-transition-duration; } + + &.is-not-active { + .btn.gl-clear-icon-button { + display: none; + } + + &::after { + content: '/'; + display: inline-block; + position: absolute; + top: 0; + right: 8px; + transform: translateY(calc(50% - 4px)); + padding: 4px 5px; + font-size: $gl-font-size-small; + font-family: $monospace-font; + line-height: 1; + vertical-align: middle; + border-width: 0; + border-style: solid; + border-image: none; + border-radius: 3px; + box-shadow: none; + white-space: pre-wrap; + // Safari + word-wrap: break-word; + overflow-wrap: break-word; + word-break: keep-all; + } + } } .header-search-dropdown-menu { diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 5956368a977..0c7b74684cc 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -110,9 +110,14 @@ .bs-callout, .form-check:first-child, - .form-text.text-muted { + .form-check .form-text.text-muted, + .form-check + .form-text.text-muted { margin-top: 0; } + + .form-check .form-text.text-muted { + margin-bottom: $grid-size; + } } .settings-list-icon { diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index d38c1818f53..f79237eee3d 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -33,6 +33,10 @@ text-align: left; } + .file-holder { + margin: 0; + } + .file-content.code { border: $border-style; border-radius: 0 0 $border-radius-default $border-radius-default; diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 00195f553dc..62d45332204 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -9,7 +9,6 @@ body.gl-dark { --gray-900: #fafafa; --green-100: #0d532a; --green-700: #91d4a8; - --indigo-900-alpha-008: rgba(235, 235, 250, 0.08); --gl-text-color: #fafafa; --border-color: #4f4f4f; --black: #fff; @@ -453,9 +452,12 @@ a.gl-badge.badge-warning:active { .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { background-color: #1f1f1f; - color: #868686; box-shadow: inset 0 0 0 1px #404040; +} +.gl-form-input:disabled, +.gl-form-input.form-control:disabled { cursor: not-allowed; + color: #868686; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { @@ -544,9 +546,7 @@ a.gl-badge.badge-warning:active { padding-right: 2rem; padding-left: 1.75rem; } -body, -.form-control, -.search form { +body { font-size: 0.875rem; } button, @@ -564,6 +564,13 @@ strong { a { color: #63a6e9; } +svg { + vertical-align: baseline; +} +.form-control, +.search form { + font-size: 0.875rem; +} .hidden { display: none !important; visibility: hidden !important; @@ -588,9 +595,6 @@ a { .toggle-sidebar-button .icon-chevron-double-lg-left { color: #999; } -svg { - vertical-align: baseline; -} html { overflow-y: scroll; } @@ -804,7 +808,7 @@ input { white-space: nowrap; } .navbar-gitlab .header-content .title img { - height: 28px; + height: 24px; } .navbar-gitlab .header-content .title img + .logo-text { margin-left: 8px; @@ -1512,6 +1516,29 @@ svg.s16 { .header-search { width: 320px; } +.header-search.is-not-active::after { + content: "/"; + display: inline-block; + position: absolute; + top: 0; + right: 8px; + transform: translateY(calc(50% - 4px)); + padding: 4px 5px; + font-size: 12px; + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", + "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + line-height: 1; + vertical-align: middle; + border-width: 0; + border-style: solid; + border-image: none; + border-radius: 3px; + box-shadow: none; + white-space: pre-wrap; + word-wrap: break-word; + overflow-wrap: break-word; + word-break: keep-all; +} .search { margin: 0 8px; } @@ -1739,7 +1766,6 @@ body.gl-dark { --indigo-800: #d1d1f0; --indigo-900: #ebebfa; --indigo-950: #f7f7ff; - --indigo-900-alpha-008: rgba(235, 235, 250, 0.08); --purple-50: #232150; --purple-100: #2f2a6b; --purple-200: #453894; @@ -1769,7 +1795,7 @@ body.gl-dark { box-shadow: none; } .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { - background-color: var(--indigo-900-alpha-008); + background-color: var(--nav-active-bg); } body.gl-dark { --gl-theme-accent: #868686; @@ -1851,6 +1877,10 @@ body.gl-dark .header-search input::placeholder { body.gl-dark .header-search input:active::placeholder { color: #868686; } +body.gl-dark .header-search.is-not-active::after { + color: #fafafa; + background-color: rgba(250, 250, 250, 0.2); +} body.gl-dark .search form { background-color: rgba(250, 250, 250, 0.2); } @@ -1972,7 +2002,6 @@ body.gl-dark { --indigo-800: #d1d1f0; --indigo-900: #ebebfa; --indigo-950: #f7f7ff; - --indigo-900-alpha-008: rgba(235, 235, 250, 0.08); --purple-50: #232150; --purple-100: #2f2a6b; --purple-200: #453894; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 6d66e207bdc..a8b7299b935 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -438,9 +438,12 @@ a.gl-badge.badge-warning:active { .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { background-color: #fafafa; - color: #868686; box-shadow: inset 0 0 0 1px #dbdbdb; +} +.gl-form-input:disabled, +.gl-form-input.form-control:disabled { cursor: not-allowed; + color: #868686; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { @@ -529,9 +532,7 @@ a.gl-badge.badge-warning:active { padding-right: 2rem; padding-left: 1.75rem; } -body, -.form-control, -.search form { +body { font-size: 0.875rem; } button, @@ -549,6 +550,13 @@ strong { a { color: #1068bf; } +svg { + vertical-align: baseline; +} +.form-control, +.search form { + font-size: 0.875rem; +} .hidden { display: none !important; visibility: hidden !important; @@ -573,9 +581,6 @@ a { .toggle-sidebar-button .icon-chevron-double-lg-left { color: #666; } -svg { - vertical-align: baseline; -} html { overflow-y: scroll; } @@ -789,7 +794,7 @@ input { white-space: nowrap; } .navbar-gitlab .header-content .title img { - height: 28px; + height: 24px; } .navbar-gitlab .header-content .title img + .logo-text { margin-left: 8px; @@ -1497,6 +1502,29 @@ svg.s16 { .header-search { width: 320px; } +.header-search.is-not-active::after { + content: "/"; + display: inline-block; + position: absolute; + top: 0; + right: 8px; + transform: translateY(calc(50% - 4px)); + padding: 4px 5px; + font-size: 12px; + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", + "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + line-height: 1; + vertical-align: middle; + border-width: 0; + border-style: solid; + border-image: none; + border-radius: 3px; + box-shadow: none; + white-space: pre-wrap; + word-wrap: break-word; + overflow-wrap: break-word; + word-break: keep-all; +} .search { margin: 0 8px; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 213d1c013a0..751ad26ca21 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -301,9 +301,12 @@ fieldset:disabled a.btn { .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { background-color: #fafafa; - color: #868686; box-shadow: inset 0 0 0 1px #dbdbdb; +} +.gl-form-input:disabled, +.gl-form-input.form-control:disabled { cursor: not-allowed; + color: #868686; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { @@ -369,8 +372,7 @@ fieldset:disabled a.btn { outline: none; background-color: #0b5cad; } -body, -.form-control { +body { font-size: 0.875rem; } [type="submit"] { @@ -387,6 +389,12 @@ a { hr { overflow: hidden; } +svg { + vertical-align: baseline; +} +.form-control { + font-size: 0.875rem; +} .hidden { display: none !important; visibility: hidden !important; @@ -394,9 +402,6 @@ hr { .hide { display: none; } -svg { - vertical-align: baseline; -} html { overflow-y: scroll; } diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 3cb8c58a380..550e3981401 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -70,7 +70,6 @@ $indigo-700: #a6a6de; $indigo-800: #d1d1f0; $indigo-900: #ebebfa; $indigo-950: #f7f7ff; -$indigo-900-alpha-008: rgba($indigo-900, 0.08); $purple-50: #232150; $purple-100: #2f2a6b; @@ -174,7 +173,6 @@ body.gl-dark { --indigo-800: #{$indigo-800}; --indigo-900: #{$indigo-900}; --indigo-950: #{$indigo-950}; - --indigo-900-alpha-008: #{$indigo-900-alpha-008}; --purple-50: #{$purple-50}; --purple-100: #{$purple-100}; diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index bb9a9cf0497..83254fe1a52 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -48,7 +48,7 @@ } > a:hover { - background-color: var(--indigo-900-alpha-008); + background-color: var(--nav-active-bg); } &.active { @@ -56,7 +56,7 @@ &:not(.fly-out-top-item) { > a:not(.has-sub-items) { - background-color: var(--indigo-900-alpha-008); + background-color: var(--nav-active-bg); } } } diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index c6e29c7f8b0..07194e2b532 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -176,6 +176,11 @@ } } } + + &.is-not-active::after { + color: $search-and-nav-links; + background-color: rgba($search-and-nav-links, 0.2); + } } .search { diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 0511a179980..d7a5e21e303 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -366,8 +366,3 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 /* stylelint-disable property-no-vendor-prefix */ -webkit-backdrop-filter: blur(2px); // still required by Safari } - -// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2708 -.gl-inset-border-l-3-red-600 { - box-shadow: inset $gl-border-size-3 0 0 0 $red-600; -} |