diff options
Diffstat (limited to 'app/assets/stylesheets')
23 files changed, 176 insertions, 117 deletions
diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss index a6ecca88bd4..a023b41083d 100644 --- a/app/assets/stylesheets/fonts.scss +++ b/app/assets/stylesheets/fonts.scss @@ -26,7 +26,36 @@ Usage: src: font-url('jetbrains-mono/JetBrainsMono.woff2') format('woff2'); } +@font-face { + font-family: 'JetBrains Mono'; + font-display: optional; + font-weight: bold; + src: font-url('jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2'); +} + +@font-face { + font-family: 'JetBrains Mono'; + font-display: optional; + font-weight: normal; + font-style: italic; + src: font-url('jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2'); +} + +@font-face { + font-family: 'JetBrains Mono'; + font-display: optional; + font-weight: bold; + font-style: italic; + src: font-url('jetbrains-mono/JetBrainsMono-BoldItalic.woff2') format('woff2'); +} + :root { --default-mono-font: 'JetBrains Mono', 'Menlo'; --default-regular-font: 'GitLab Sans', -apple-system; } + +// This isn't the best solution, but we needed a quick fix +// https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107592/ +* { + font-variant-ligatures: none; +} diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 07db6b3c147..e60353578b0 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -38,6 +38,7 @@ @import 'framework/sidebar'; @import 'framework/contextual_sidebar_header'; @import 'framework/contextual_sidebar'; +@import 'framework/super_sidebar'; @import 'framework/tables'; @import 'framework/notes'; @import 'framework/tabs'; diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 14e756a5c21..0bc920b1f73 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -471,6 +471,10 @@ img.emoji { .gl-font-size-28 { font-size: $gl-font-size-28; } .gl-font-size-42 { font-size: $gl-font-size-42; } +.gl-icon-button:hover { + background-color: $gray-100; +} + .border-section { @include gl-py-6; @include gl-m-0; diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 34c7ffa58fe..1e05441c731 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -138,13 +138,12 @@ } @mixin top-level-item { + @include gl-h-7; @include gl-px-4; - @include gl-py-3; @include gl-display-flex; @include gl-align-items-center; @include gl-rounded-base; @include gl-w-auto; - @include gl-line-height-normal; transition: none; margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin; @@ -339,6 +338,7 @@ a { @include top-level-item; @include context-header; + @include gl-h-auto; } } } @@ -348,6 +348,7 @@ .context-header a { @include context-header; + @include gl-h-auto; } > li { @@ -457,9 +458,9 @@ // PANELS-SPECIFIC // +.icon-avatar, .settings-avatar { svg { margin: auto; } } - diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 0acda85f527..65d7eafb8b8 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -851,10 +851,6 @@ @include gl-focus($inset: true); } } - - .frequent-items-list-item-container a { - display: flex; - } } .section-header { @@ -873,9 +869,10 @@ .frequent-items-item-title, .frequent-items-item-namespace { - max-width: 250px; + max-width: 220px; text-overflow: ellipsis; white-space: nowrap; + overflow: hidden; } .frequent-items-item-title { @@ -895,6 +892,11 @@ .frequent-items-item-metadata-container { float: none; } + + .frequent-items-item-title, + .frequent-items-item-namespace { + max-width: 250px; + } } } diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index ea741af918c..98083fbc72a 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -37,3 +37,14 @@ } } } + +.approvers-select { + .dropdown-menu { + @include gl-w-full; + @include gl-max-w-none; + } + + .gl-dropdown-item-check-icon { + @include gl-display-none; + } +} diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss new file mode 100644 index 00000000000..59a9df9ede0 --- /dev/null +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -0,0 +1,22 @@ +.super-sidebar { + top: 0; + width: $contextual-sidebar-width; + + .user-bar { + background-color: $t-gray-a-04; + + .tanuki-logo { + @include gl-vertical-align-middle; + } + } + + .context-switcher-toggle { + &[aria-expanded='true'] { + background-color: $t-gray-a-08; + } + } +} + +.with-performance-bar .super-sidebar { + top: $performance-bar-height; +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index ec8ffaf8c53..539e92eeca4 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -392,7 +392,7 @@ $gl-font-size-large: 16px; $gl-font-weight-normal: 400; $gl-font-weight-bold: 600; $gl-text-color: $gray-900; -$gl-text-color-secondary: $gray-500; +$gl-text-color-secondary: $gray-500 !default; $gl-text-color-tertiary: $gray-400; $gl-text-color-quaternary: #d6d6d6; $gl-text-color-inverted: $white; diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss index 2c5ea8347ae..e3cec187fab 100644 --- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss +++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss @@ -339,19 +339,3 @@ display: inline; } } - -.gl-select2-html5-required-fix { - .select2-container { - + .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; - margin: -3px auto 0; - } - } -} diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss index 6b976106cc9..7adbf10b83a 100644 --- a/app/assets/stylesheets/page_bundles/ci_status.scss +++ b/app/assets/stylesheets/page_bundles/ci_status.scss @@ -1,10 +1,7 @@ @import 'mixins_and_variables_and_functions'; .ci-status { - padding: 2px 7px 4px; border: 1px solid var(--border-color, $border-color); - white-space: nowrap; - border-radius: 4px; &:hover, &:focus { diff --git a/app/assets/stylesheets/page_bundles/editor.scss b/app/assets/stylesheets/page_bundles/editor.scss index b7b698b2128..36da979ba1f 100644 --- a/app/assets/stylesheets/page_bundles/editor.scss +++ b/app/assets/stylesheets/page_bundles/editor.scss @@ -163,7 +163,6 @@ .gitignore-selector, .gitlab-ci-yml-selector, .dockerfile-selector, - .template-type-selector, .metrics-dashboard-selector { display: inline-block; vertical-align: top; diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss index cd5e6d32e4e..a6c08e344f9 100644 --- a/app/assets/stylesheets/page_bundles/import.scss +++ b/app/assets/stylesheets/page_bundles/import.scss @@ -1,48 +1,10 @@ @import 'mixins_and_variables_and_functions'; -.import-jobs-from-col { - width: 37%; -} - - -.import-jobs-to-col { - width: 37%; -} - -.import-jobs-status-col { - width: 25%; -} - -.import-jobs-cta-col { - width: 1%; -} - -.import-entities-target-select { - &.disabled { - .import-entities-target-select-separator { - color: var(--gray-400, $gray-400); - border-color: var(--gray-100, $gray-100); - background-color: var(--gray-10, $gray-10); - } - } - - .import-entities-target-select-separator { - border-color: var(--gray-200, $gray-200); - background-color: var(--gray-10, $gray-10); - } - - .gl-form-input { - box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200); - } -} - $import-bar-height: $gl-spacing-scale-11; .import-table-bar { - @include gl-sticky; height: $import-bar-height; top: $header-height; - z-index: 3; html.with-performance-bar & { top: calc(#{$header-height} + #{$performance-bar-height}); @@ -50,16 +12,11 @@ $import-bar-height: $gl-spacing-scale-11; } .import-table { - border-collapse: separate; - thead { - @include gl-sticky; - background-color: var(--gray-10, $gray-10); top: calc(#{$header-height} + #{$import-bar-height}); - z-index: 3; html.with-performance-bar & { - top: calc(#{$header-height + $performance-bar-height} + #{$import-bar-height}); + top: calc(#{$header-height} + #{$performance-bar-height} + #{$import-bar-height}); } } } diff --git a/app/assets/stylesheets/page_bundles/members.scss b/app/assets/stylesheets/page_bundles/members.scss index 8d2c0a8ca22..826921be8f0 100644 --- a/app/assets/stylesheets/page_bundles/members.scss +++ b/app/assets/stylesheets/page_bundles/members.scss @@ -76,6 +76,10 @@ width: px-to-rem(200px); } + .col-activity { + width: px-to-rem(250px); + } + .col-actions { width: px-to-rem(65px); } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 4950561bcb7..5c699dd81df 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -1002,12 +1002,12 @@ $tabs-holder-z-index: 250; .md-header { .gl-tab-nav-item { - @include gl-text-gray-900; + color: var(--gl-text-color, $gl-text-color); @include gl-pb-5; &:hover { @include gl-bg-none; - @include gl-text-gray-900; + color: var(--gl-text-color, $gl-text-color); &:not(.gl-tab-nav-item-active) { @include gl-inset-border-b-2-gray-200; @@ -1017,7 +1017,7 @@ $tabs-holder-z-index: 250; .gl-tab-nav-item-active { @include gl-font-weight-bold; - @include gl-text-gray-900; + color: var(--gl-text-color, $gl-text-color); @include gl-inset-border-b-2-theme-accent; &:active, @@ -1197,13 +1197,13 @@ $tabs-holder-z-index: 250; } .mr-section-container { + .media-body { + column-gap: 0; + } + .state-container-action-buttons { @include media-breakpoint-up(md) { flex-direction: row-reverse; - - .btn { - margin-left: auto; - } } } } diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss index b995724ec7c..f08d6e3ca95 100644 --- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss +++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss @@ -5,14 +5,14 @@ } .timezone-dropdown { - .dropdown-menu { - @include gl-w-full; - } - .gl-dropdown-item-text-primary { @include gl-overflow-hidden; @include gl-text-overflow-ellipsis; } + + .btn-block { + margin-bottom: 0; + } } .modal-footer { @@ -20,7 +20,7 @@ } .invalid-dropdown { - .gl-dropdown-toggle { + .gl-button.gl-dropdown-toggle { @include inset-border-1-red-500; &:hover { diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss index b35f5b38740..d4b0b4169d3 100644 --- a/app/assets/stylesheets/page_bundles/todos.scss +++ b/app/assets/stylesheets/page_bundles/todos.scss @@ -79,11 +79,11 @@ @include gl-py-0; @include gl-px-1; @include gl-m-0; - @include gl-bg-gray-50; @include gl-border-0; @include gl-rounded-base; @include gl-display-inline-flex; - @include gl-text-body; + background: var(--gray-50, $gray-50); + color: var(--gl-text-color, $gl-text-color); } .gl-label-scoped { diff --git a/app/assets/stylesheets/pages/ml_experiment_tracking.scss b/app/assets/stylesheets/pages/ml_experiment_tracking.scss index c1582f2090b..3c025b5d23f 100644 --- a/app/assets/stylesheets/pages/ml_experiment_tracking.scss +++ b/app/assets/stylesheets/pages/ml_experiment_tracking.scss @@ -15,6 +15,20 @@ } } +table.ml-candidate-table { + table-layout: fixed; + + tr td, + tr th { + padding: $gl-padding-8; + + > * { + @include gl-display-block; + @include gl-text-truncate; + } + } +} + table.candidate-details { td { padding: $gl-spacing-scale-3; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 89be1c024db..d26e29c4047 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -63,18 +63,17 @@ } } + @include media-breakpoint-down(md) { + .time-ago { + align-items: flex-end; + } + } + .duration, .finished-at { color: $gl-text-color-secondary; margin: 0; white-space: nowrap; - - svg { - width: 12px; - height: 12px; - vertical-align: middle; - margin-right: 4px; - } } .build-link a { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 15a32ea8ad3..ee91d955019 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -122,7 +122,7 @@ padding: 0; background: transparent; border: 0; - line-height: 34px; + line-height: $gl-line-height-32; margin: 0; a { @@ -495,7 +495,7 @@ .protected-branches-list, .protected-tags-list { - margin-bottom: 30px; + margin-bottom: 32px; .settings-message { margin: 0; diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index c7e55289b11..bb83a91bc57 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -536,10 +536,11 @@ a.gl-badge.badge-warning:active { color: #89888d; } .gl-search-box-by-type-search-icon { - margin: 0.5rem; color: #89888d; width: 1rem; position: absolute; + left: 0.5rem; + top: calc(50% - 16px / 2); } .gl-search-box-by-type { display: flex; @@ -591,7 +592,7 @@ svg { } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left { - color: #89888d; + color: #bfbfc3; } html { overflow-y: scroll; @@ -1136,15 +1137,13 @@ kbd { } .nav-sidebar li > a, .nav-sidebar li > .fly-out-top-item-container { + height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; display: flex; align-items: center; border-radius: 0.25rem; width: auto; - line-height: 1rem; margin: 1px 8px; } .nav-sidebar li.active > a { @@ -1373,19 +1372,18 @@ kbd { margin-top: 0.25rem; } .nav-sidebar-inner-scroll > div.context-header a { + height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; display: flex; align-items: center; border-radius: 0.25rem; width: auto; - line-height: 1rem; margin: 1px 8px; padding: 0.25rem; margin-bottom: 0.25rem; margin-top: 0.125rem; + height: auto; } .nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; @@ -1398,6 +1396,7 @@ kbd { padding: 0.25rem; margin-bottom: 0.25rem; margin-top: 0.125rem; + height: auto; } .sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; @@ -1428,7 +1427,7 @@ kbd { padding: 0 16px; background-color: #24232a; border: 0; - color: #89888d; + color: #bfbfc3; display: flex; align-items: center; background-color: #1f1e24; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index f24b6fb9e81..9e1c6b065a0 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -536,10 +536,11 @@ a.gl-badge.badge-warning:active { color: #737278; } .gl-search-box-by-type-search-icon { - margin: 0.5rem; color: #737278; width: 1rem; position: absolute; + left: 0.5rem; + top: calc(50% - 16px / 2); } .gl-search-box-by-type { display: flex; @@ -1136,15 +1137,13 @@ kbd { } .nav-sidebar li > a, .nav-sidebar li > .fly-out-top-item-container { + height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; display: flex; align-items: center; border-radius: 0.25rem; width: auto; - line-height: 1rem; margin: 1px 8px; } .nav-sidebar li.active > a { @@ -1373,19 +1372,18 @@ kbd { margin-top: 0.25rem; } .nav-sidebar-inner-scroll > div.context-header a { + height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; display: flex; align-items: center; border-radius: 0.25rem; width: auto; - line-height: 1rem; margin: 1px 8px; padding: 0.25rem; margin-bottom: 0.25rem; margin-top: 0.125rem; + height: auto; } .nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; @@ -1398,6 +1396,7 @@ kbd { padding: 0.25rem; margin-bottom: 0.25rem; margin-top: 0.125rem; + height: auto; } .sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 8db91fd9908..c471d6183d8 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -115,6 +115,8 @@ $data-viz-blue-950: #e9ebff; $border-white-normal: $border-color; +$gl-text-color-secondary: $gray-700; + $body-bg: $gray-10; $input-bg: $white; $input-focus-bg: $white; @@ -130,7 +132,7 @@ $popover-color: $gray-950; $popover-box-shadow: 0 2px 3px 1px $gray-700; $popover-arrow-outer-color: $gray-800; -$secondary: $gray-600; +$secondary: $gray-700; $yiq-text-dark: $gray-50; $yiq-text-light: $gray-950; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 714dd932147..7d98a780e55 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -236,13 +236,44 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 } } -// TODO: Remove once https: //gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3198 is merged -.gl-sm-ml-5 { - @include gl-media-breakpoint-up(sm) { - @include gl-ml-5; +.gl-mt-n5 { + margin-top: -$gl-spacing-scale-5; +} + +// Utils below are very specific so cannot be part of GitLab UI +.gl-md-mt-5 { + @include gl-media-breakpoint-up(md) { + margin-top: $gl-spacing-scale-5; + } +} + +.gl-sm-mr-0\! { + @include gl-media-breakpoint-down(md) { + margin-right: 0 !important; + } +} + +.gl-sm-mb-5 { + @include gl-media-breakpoint-down(md) { + margin-bottom: $gl-spacing-scale-5; + } +} + +.gl-md-mb-3\! { + @include gl-media-breakpoint-up(md) { + margin-bottom: $gl-spacing-scale-3 !important; } } + +.gl-gap-2 { + gap: $gl-spacing-scale-2; +} + +.gl-hover-bg-t-gray-a-08:hover { + background-color: $t-gray-a-08; +} + /* End gitlab-ui#1709 */ /* @@ -263,3 +294,7 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 .gl-max-w-0 { max-width: 0; } + +.gl-isolate { + isolation: isolate; +} |