diff options
Diffstat (limited to 'app/assets/stylesheets')
30 files changed, 176 insertions, 84 deletions
diff --git a/app/assets/stylesheets/emoji_sprites.scss b/app/assets/stylesheets/emoji_sprites.scss index 01d13b30d2b..5a5f39a4b77 100644 --- a/app/assets/stylesheets/emoji_sprites.scss +++ b/app/assets/stylesheets/emoji_sprites.scss @@ -7,111 +7,111 @@ background-position: -20px 0; } -.emoji-1F627 { +.emoji-8ball { background-position: 0 -20px; } -.emoji-8ball { +.emoji-a { background-position: -20px -20px; } -.emoji-a { +.emoji-ab { background-position: -40px 0; } -.emoji-ab { +.emoji-abc { background-position: -40px -20px; } -.emoji-abc { +.emoji-abcd { background-position: 0 -40px; } -.emoji-abcd { +.emoji-accept { background-position: -20px -40px; } -.emoji-accept { +.emoji-aerial_tramway { background-position: -40px -40px; } -.emoji-aerial_tramway { +.emoji-airplane { background-position: -60px 0; } -.emoji-airplane { +.emoji-airplane_arriving { background-position: -60px -20px; } -.emoji-airplane_arriving { +.emoji-airplane_departure { background-position: -60px -40px; } -.emoji-airplane_departure { +.emoji-airplane_small { background-position: 0 -60px; } -.emoji-airplane_small { +.emoji-alarm_clock { background-position: -20px -60px; } -.emoji-alarm_clock { +.emoji-alembic { background-position: -40px -60px; } -.emoji-alembic { +.emoji-alien { background-position: -60px -60px; } -.emoji-alien { +.emoji-ambulance { background-position: -80px 0; } -.emoji-ambulance { +.emoji-amphora { background-position: -80px -20px; } -.emoji-amphora { +.emoji-anchor { background-position: -80px -40px; } -.emoji-anchor { +.emoji-angel { background-position: -80px -60px; } -.emoji-angel { +.emoji-angel_tone1 { background-position: 0 -80px; } -.emoji-angel_tone1 { +.emoji-angel_tone2 { background-position: -20px -80px; } -.emoji-angel_tone2 { +.emoji-angel_tone3 { background-position: -40px -80px; } -.emoji-angel_tone3 { +.emoji-angel_tone4 { background-position: -60px -80px; } -.emoji-angel_tone4 { +.emoji-angel_tone5 { background-position: -80px -80px; } -.emoji-angel_tone5 { +.emoji-anger { background-position: -100px 0; } -.emoji-anger { +.emoji-anger_right { background-position: -100px -20px; } -.emoji-anger_right { +.emoji-angry { background-position: -100px -40px; } -.emoji-angry { +.emoji-anguished { background-position: -100px -60px; } diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 06a8694eb3d..c1c8bfffff7 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -62,7 +62,6 @@ @import 'framework/sortable'; @import 'framework/ci_variable_list'; @import 'framework/feature_highlight'; -@import 'framework/terms'; @import 'framework/read_more'; @import 'framework/flex_grid'; @import 'framework/system_messages'; diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index df78543f96d..8f65f349cf9 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -146,13 +146,6 @@ * Blame file */ &.blame { - // - // IMPORTANT PERFORMANCE OPTIMIZATION - // - // When viewinng a blame with many commits a lot of content is rendered on the page. - // The line below ensures that we only render what is visible to the user, thus reducing TBT in the browser. - content-visibility: auto; - table { border: 0; margin: 0; @@ -167,12 +160,6 @@ } td { - // - // IMPORTANT PERFORMANCE OPTIMIZATION - // - // When viewinng a blame with many commits a lot of content is rendered on the page. - // The line below ensures that we only render what is visible to the user, thus reducing TBT in the browser. - content-visibility: auto; border-top: 0; border-bottom: 0; @@ -235,6 +222,25 @@ color: $gray-900; } } + + // + // IMPORTANT PERFORMANCE OPTIMIZATION + // + // When viewinng a blame with many commits a lot of content is rendered on the page. + // content-visibility rules below ensure that we only render what is visible to the user, thus reducing TBT in the browser. + .commit { + content-visibility: auto; + contain-intrinsic-size: 1px 3em; + } + + code .line { + content-visibility: auto; + contain-intrinsic-size: 1px 1.1875rem; + } + + .line-numbers { + content-visibility: auto; + } } &.logs { diff --git a/app/assets/stylesheets/framework/kbd.scss b/app/assets/stylesheets/framework/kbd.scss index 05991bc16fd..7dd0ae47834 100644 --- a/app/assets/stylesheets/framework/kbd.scss +++ b/app/assets/stylesheets/framework/kbd.scss @@ -12,4 +12,20 @@ kbd { border-image: none; border-radius: 3px; box-shadow: 0 -1px 0 var(--gray-200, $gray-200) inset; + + &.flat { + color: $code-color; + background-color: $gray-100; + border-color: var(--gray-10, $gray-10) var(--gray-10, $gray-10) var(--gray-50, $gray-50); + box-shadow: none; + border-radius: $border-radius-default; + font-family: $monospace-font; + font-size: $gl-font-size-small; + line-height: 1; + white-space: pre-wrap; + // Safari + word-wrap: break-word; + overflow-wrap: break-word; + word-break: keep-all; + } } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index ef294635641..9b04b9a2612 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -82,11 +82,11 @@ .nav-links { li.md-header-toolbar { margin-left: auto; - display: none; + visibility: hidden; padding-bottom: $gl-padding-8; &.active { - display: block; + visibility: visible; @include media-breakpoint-down(xs) { flex: none; @@ -116,7 +116,7 @@ } .md-preview-holder { - min-height: 167px; + min-height: 172px; padding: 10px 0; overflow-x: auto; } diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index 8270db9966e..fb4266a2f41 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -96,9 +96,10 @@ } @mixin line-number-link($color) { + min-width: $gl-spacing-scale-9; + &::before { - @include gl-visibility-hidden; - @include gl-display-inline-block; + @include gl-display-none; @include gl-align-self-center; @include gl-mt-2; @include gl-mr-2; @@ -114,10 +115,10 @@ } &:hover::before { - @include gl-visibility-visible; + @include gl-display-inline-block; } &:focus::before { - @include gl-visibility-visible; + @include gl-display-inline-block; } } diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index 3220510775c..5f50489555b 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -143,6 +143,10 @@ table.content { line-height: 1.4; padding: 15px 5px; text-align: center; + + ul.list-style-position-inside { + list-style-position: inside; + } } td.mailer-align-left { diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index a3ec2167b13..d4c59a6ab0c 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -470,6 +470,10 @@ .labels-select-wrapper.is-embedded .labels-select-wrapper.is-embedded { width: auto; } + + .show.dropdown .dropdown-menu { + @include gl-w-full; + } } .board-header-collapsed-info-icon:hover { diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 4beb5edbe7b..9fe0490571e 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -42,8 +42,6 @@ $header-height: 40px; .jira-connect-app-body { max-width: 768px; - margin-left: auto; - margin-right: auto; } // needed for external_link diff --git a/app/assets/stylesheets/framework/terms.scss b/app/assets/stylesheets/page_bundles/terms.scss index b07d6023127..8eb66e58aed 100644 --- a/app/assets/stylesheets/framework/terms.scss +++ b/app/assets/stylesheets/page_bundles/terms.scss @@ -1,18 +1,22 @@ +@import 'mixins_and_variables_and_functions'; + .terms { + .with-system-header &, + .with-system-header.with-performance-bar &, .with-performance-bar & { margin-top: 0; } - .alert-wrapper { - min-height: $header-height + $gl-padding; + .terms-fade { + background: linear-gradient(0deg, $white 0%, rgba($white, 0.5) 100%); } .content { padding-top: $gl-padding; } - .card { - .card-header { + .gl-card { + .gl-card-header { display: flex; align-items: center; justify-content: space-between; diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index de27ca2e5e8..b450bca4f41 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -1,9 +1,13 @@ .clusters-container { - .empty-state .svg-content img { - width: 145px; + .empty-state .svg-content { + @include gl-pb-0; + + img { + width: 100px; + } } - .empty-state--agent { + .agents-empty-state { .text-content { @include gl-max-w-full; @include media-breakpoint-up(lg) { @@ -16,4 +20,23 @@ @include gl-flex-wrap; } } + + .gl-card-body { + @include media-breakpoint-up(sm) { + @include gl-pt-2; + min-height: 372px; + } + } + + @include media-breakpoint-down(xs) { + .nav-controls { + @include gl-w-full; + order: -1; + + .gl-new-dropdown, + .split-content-button { + @include gl-w-full; + } + } + } } diff --git a/app/assets/stylesheets/pages/deploy_keys.scss b/app/assets/stylesheets/pages/deploy_keys.scss index 2fafe052106..997e42a8fd5 100644 --- a/app/assets/stylesheets/pages/deploy_keys.scss +++ b/app/assets/stylesheets/pages/deploy_keys.scss @@ -1,12 +1,3 @@ -.deploy-keys-list { - width: 100%; - overflow: auto; - - table { - border: 1px solid $table-border-color; - } -} - .deploy-keys-title { padding-bottom: 2px; line-height: 2; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index c597d2dd8da..cf5e93e94a2 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -179,6 +179,7 @@ } .block, + .sidebar-contained-width, .issuable-sidebar-header { @include clearfix; padding: $gl-padding 0; @@ -317,6 +318,7 @@ padding: 0; .block, + .sidebar-contained-width, .issuable-sidebar-header { width: $gutter-collapsed-width - 2px; padding: 0; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index cec8d8a29cc..3b86750c6ca 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -269,7 +269,9 @@ $tabs-holder-z-index: 250; } .mr-widget-body { - line-height: 28px; + &:not(.mr-widget-body-line-height-1) { + line-height: 28px; + } @include clearfix; diff --git a/app/assets/stylesheets/startup/_cloaking.scss b/app/assets/stylesheets/startup/_cloaking.scss index 3c25feb0c5c..f60d72a51fb 100644 --- a/app/assets/stylesheets/startup/_cloaking.scss +++ b/app/assets/stylesheets/startup/_cloaking.scss @@ -2,6 +2,8 @@ Prevent flashing of content when using startup.css */ @mixin cloak-startup-scss($display) { + // General selector for cloaking until ready + .cloak-startup, // Breadcrumbs and alerts on the top of the page .content-wrapper > .alert-wrapper, // Content on pages diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index d436c328921..efa4b04ee62 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -5,6 +5,7 @@ body.gl-dark { --gray-50: #303030; --gray-100: #404040; + --gray-600: #bfbfbf; --gray-900: #fafafa; --gray-950: #fff; --green-100: #0d532a; @@ -12,6 +13,7 @@ body.gl-dark { --green-700: #91d4a8; --blue-400: #1f75cb; --orange-400: #ab6100; + --indigo-900-alpha-008: rgba(235, 235, 250, 0.08); --gl-text-color: #fafafa; --border-color: #4f4f4f; --black: #fff; @@ -1693,9 +1695,15 @@ body.gl-dark { --black: #fff; --svg-status-bg: #333; } +.nav-sidebar li a { + color: var(--gray-600); +} .nav-sidebar li.active { box-shadow: none; } +.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { + background-color: var(--indigo-900-alpha-008); +} body.gl-dark .navbar-gitlab { background-color: #fafafa; } @@ -1780,7 +1788,7 @@ body.gl-dark .search .search-input-wrap .clear-icon { fill: rgba(250, 250, 250, 0.8); } body.gl-dark .nav-sidebar li.active > a { - color: #f0f0f0; + color: #fafafa; } body.gl-dark .nav-sidebar .fly-out-top-item a, body.gl-dark .nav-sidebar .fly-out-top-item.active a, @@ -1935,7 +1943,7 @@ body.gl-dark { .gl-display-none { display: none; } -@media (min-width: 36rem) { +@media (min-width: 576px) { .gl-sm-display-block { display: block; } diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 40026c95a15..977f994dc78 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -1621,7 +1621,7 @@ svg.s16 { .gl-display-none { display: none; } -@media (min-width: 36rem) { +@media (min-width: 576px) { .gl-sm-display-block { display: block; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 8d7531d6c9c..3daeeb30082 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -776,7 +776,7 @@ svg { .gl-mb-5 { margin-bottom: 1rem; } -@media (min-width: 36rem) { +@media (min-width: 576px) { .gl-sm-mt-0 { margin-top: 0; } diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index b77048174c9..2b5751cab36 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -42,8 +42,24 @@ } .nav-sidebar { - li.active { - box-shadow: none; + li { + a { + color: var(--gray-600); + } + + > a:hover { + background-color: var(--indigo-900-alpha-008); + } + + &.active { + box-shadow: none; + + &:not(.fly-out-top-item) { + > a:not(.has-sub-items) { + background-color: var(--indigo-900-alpha-008); + } + } + } } .sidebar-sub-level-items.fly-out-list { @@ -53,7 +69,7 @@ } body.gl-dark { - @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-800, $gray-900, $white); + @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $gray-900, $white); .logo-text svg { fill: var(--gl-text-color); diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss index 9f9802f77f4..817557f37cd 100644 --- a/app/assets/stylesheets/themes/theme_blue.scss +++ b/app/assets/stylesheets/themes/theme_blue.scss @@ -6,7 +6,7 @@ body { $theme-blue-200, $theme-blue-500, $theme-blue-700, - $theme-blue-800, + $gray-900, $theme-blue-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_dark.scss b/app/assets/stylesheets/themes/theme_dark.scss index e6db6cd2a5e..4c52cdc30df 100644 --- a/app/assets/stylesheets/themes/theme_dark.scss +++ b/app/assets/stylesheets/themes/theme_dark.scss @@ -6,7 +6,7 @@ body { $gray-200, $gray-300, $gray-500, - $gray-700, + $gray-900, $gray-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss index 6dcad6e1301..7e387e97452 100644 --- a/app/assets/stylesheets/themes/theme_green.scss +++ b/app/assets/stylesheets/themes/theme_green.scss @@ -6,7 +6,7 @@ body { $theme-green-200, $theme-green-500, $theme-green-700, - $theme-green-800, + $gray-900, $theme-green-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss index 9566c9c6004..3bf6cfea650 100644 --- a/app/assets/stylesheets/themes/theme_indigo.scss +++ b/app/assets/stylesheets/themes/theme_indigo.scss @@ -6,7 +6,7 @@ body { $indigo-200, $indigo-500, $indigo-700, - $purple-900, + $gray-900, $indigo-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss index 4c3bc1b2298..f2fdd499781 100644 --- a/app/assets/stylesheets/themes/theme_light.scss +++ b/app/assets/stylesheets/themes/theme_light.scss @@ -6,7 +6,7 @@ body { $gray-500, $gray-700, $gray-500, - $gray-500, + $gray-900, $gray-50, $gray-500 ); diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss index 07d1c60a4c6..771a84911b3 100644 --- a/app/assets/stylesheets/themes/theme_light_blue.scss +++ b/app/assets/stylesheets/themes/theme_light_blue.scss @@ -6,7 +6,7 @@ body { $theme-light-blue-200, $theme-light-blue-500, $theme-light-blue-500, - $theme-light-blue-700, + $gray-900, $theme-light-blue-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss index e122501b93c..8c991a7bfb3 100644 --- a/app/assets/stylesheets/themes/theme_light_green.scss +++ b/app/assets/stylesheets/themes/theme_light_green.scss @@ -6,7 +6,7 @@ body { $theme-green-200, $theme-green-500, $theme-green-500, - $theme-light-green-700, + $gray-900, $theme-light-green-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss index 5b607238ed9..6c220e0459a 100644 --- a/app/assets/stylesheets/themes/theme_light_indigo.scss +++ b/app/assets/stylesheets/themes/theme_light_indigo.scss @@ -6,7 +6,7 @@ body { $indigo-200, $indigo-500, $indigo-500, - $indigo-700, + $gray-900, $indigo-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss index fd3980183f3..e1a715293b4 100644 --- a/app/assets/stylesheets/themes/theme_light_red.scss +++ b/app/assets/stylesheets/themes/theme_light_red.scss @@ -6,7 +6,7 @@ body { $theme-light-red-200, $theme-light-red-500, $theme-light-red-500, - $theme-light-red-700, + $gray-900, $theme-light-red-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss index fa5ecc09f50..19fd150727d 100644 --- a/app/assets/stylesheets/themes/theme_red.scss +++ b/app/assets/stylesheets/themes/theme_red.scss @@ -6,7 +6,7 @@ body { $theme-red-200, $theme-red-500, $theme-red-700, - $theme-red-800, + $gray-900, $theme-red-900, $white ); diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index ec70926b418..7e46f16e1d0 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -281,3 +281,19 @@ $gl-line-height-42: px-to-rem(42px); display: none; } } + +// Will both be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465 +.gl-text-transparent { + color: transparent; +} + +.gl-focus-ring-border-1-gray-900\! { + @include gl-focus($gl-border-size-1, $gray-900, true); +} + +// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2476 +.gl-md-max-w-50p { + @include gl-media-breakpoint-up(md) { + max-width: 50%; + } +} |