diff options
| author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-05-17 19:05:49 +0300 |
|---|---|---|
| committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-05-17 19:05:49 +0300 |
| commit | 43a25d93ebdabea52f99b05e15b06250cd8f07d7 (patch) | |
| tree | dceebdc68925362117480a5d672bcff122fb625b /app/assets/stylesheets | |
| parent | 20c84b99005abd1c82101dfeff264ac50d2df211 (diff) | |
Add latest changes from gitlab-org/gitlab@16-0-stable-eev16.0.0-rc42
Diffstat (limited to 'app/assets/stylesheets')
83 files changed, 1534 insertions, 1632 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index fa5d2bf7972..483c4dc226b 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -1,13 +1,10 @@ @import './pages/colors'; @import './pages/commits'; -@import './pages/detail_page'; @import './pages/events'; @import './pages/groups'; @import './pages/hierarchy'; @import './pages/issues'; @import './pages/labels'; -@import './pages/login'; -@import './pages/ml_experiment_tracking'; @import './pages/merge_requests'; @import './pages/note_form'; @import './pages/notes'; @@ -16,4 +13,3 @@ @import './pages/projects'; @import './pages/registry'; @import './pages/settings'; -@import './pages/storage_quota'; diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss index 44b06c0ff12..4e3fb819f4c 100644 --- a/app/assets/stylesheets/components/content_editor.scss +++ b/app/assets/stylesheets/components/content_editor.scss @@ -1,7 +1,18 @@ .ProseMirror { + padding-top: $gl-spacing-scale-4; + min-height: 140px; max-height: 55vh; overflow-y: auto; + ::selection { + background-color: transparent; + } + + &:not(.ProseMirror-hideselection) .content-editor-selection { + background-color: $blue-100; + box-shadow: 0 2px 0 $blue-100, 0 -2px 0 $blue-100; + } + td, th, li, @@ -13,11 +24,21 @@ } } - img.ProseMirror-selectednode { - outline: 3px solid rgba($blue-400, 0.48); + img.ProseMirror-selectednode, + .ProseMirror-selectednode audio, + .ProseMirror-selectednode video { + outline: 3px solid $blue-200; outline-offset: -3px; } + video { + max-width: 400px; + } + + img { + max-width: 100%; + } + ul[data-type='taskList'] { list-style: none; padding: 0; @@ -106,14 +127,8 @@ } } -.content-editor-dropdown .dropdown-menu { - width: auto !important; - - @include gl-min-w-0; - - button { - @include gl-white-space-nowrap; - } +.content-editor-switcher { + min-height: 32px; } diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/components/detail_page.scss index 909de9d57f2..74f61faa9ae 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/components/detail_page.scss @@ -1,6 +1,5 @@ .detail-page-header { - padding: $gl-padding-top 0; - border-bottom: 1px solid $border-color; + padding-top: $gl-spacing-scale-4; color: $gl-text-color; line-height: 34px; display: flex; @@ -55,9 +54,13 @@ } } +.detail-page-header-meta { + @include gl-flex-basis-full; +} + .detail-page-description { .title { - margin: 0 0 16px; + margin: 0 0 $gl-spacing-scale-4; color: $gl-text-color; padding: 0 0 0.3em; border-bottom: 1px solid $white-dark; @@ -71,3 +74,7 @@ color: $gl-text-color; } } + +.new-header-popover { + z-index: 999; +} diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 293caf6fc87..04a7590d531 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -6,6 +6,8 @@ $item-remove-button-space: 42px; .related-items-list { padding: $gl-padding-4; padding-right: $gl-padding-6; + border-bottom-left-radius: $gl-border-size-3; + border-bottom-right-radius: $gl-border-size-3; &, .list-item:last-child { @@ -33,6 +35,14 @@ $item-remove-button-space: 42px; .item-body { position: relative; line-height: $gl-line-height; + border: 1px solid transparent; + border-radius: $gl-border-radius-base; + + &:hover, + &:focus-within { + background-color: $white; + border-color: $gray-50; + } .merge-request-status.closed { color: $red-500; @@ -45,22 +55,23 @@ $item-remove-button-space: 42px; .item-weight .board-card-info-icon { min-width: $gl-padding; cursor: help; + + &:focus { + @include gl-focus; + } } .confidential-icon { color: $orange-500; } - .item-title-wrapper { - max-width: calc(100% - #{$item-remove-button-space}); - } - .item-title { flex-basis: 100%; font-size: $gl-font-size-small; .sortable-link { color: $gray-900; + font-weight: 500; } } @@ -87,16 +98,6 @@ $item-remove-button-space: 42px; } } - .item-attributes-area { - > * { - margin-left: 8px; - } - - @include media-breakpoint-down(sm) { - margin-left: -8px; - } - } - .item-milestone, .item-weight { cursor: help; @@ -147,7 +148,7 @@ $item-remove-button-space: 42px; } .item-path-id { - font-size: $gl-font-size-xs; + font-size: $gl-font-size-small; white-space: nowrap; .path-id-text { @@ -156,34 +157,15 @@ $item-remove-button-space: 42px; } } -.btn-item-remove { - position: absolute; - top: $gl-padding-4 / 2; - right: 0; - padding: $gl-padding-4; - margin-right: $gl-padding-4 / 2; +.mr-ci-status { line-height: 0; - border-color: transparent; - background-color: transparent; - color: $gl-text-color-secondary; - .related-items-tree & { - position: relative; - top: initial; - padding: $btn-sm-side-margin; - margin-right: initial; - } - - &:hover { - color: $gl-text-color; - border-color: $border-color; + a:focus { + @include gl-rounded-full; + @include gl-focus; } } -.mr-ci-status { - line-height: 0; -} - @include media-breakpoint-down(xs) { .btn-sm.dropdown-toggle-split { max-width: 40px; @@ -191,10 +173,6 @@ $item-remove-button-space: 42px; } @include media-breakpoint-up(sm) { - .item-info-area { - flex-basis: 100%; - } - .sortable-link { max-width: 90%; } @@ -265,18 +243,7 @@ $item-remove-button-space: 42px; } } - .btn-item-remove { - position: relative; - top: initial; - padding: $btn-sm-side-margin; - margin-right: $gl-padding-4 / 2; - } - .sortable-link { line-height: 1.3; } - - .item-info-area { - flex-basis: auto; - } } diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss index c1c68f64d86..35c619a2e2f 100644 --- a/app/assets/stylesheets/components/whats_new.scss +++ b/app/assets/stylesheets/components/whats_new.scss @@ -1,5 +1,5 @@ .whats-new-drawer { - margin-top: $header-height; + margin-top: calc(#{$header-height} + #{$calc-application-bars-height}); @include gl-shadow-none; overflow-y: hidden; width: 500px; @@ -35,18 +35,6 @@ } } -.with-performance-bar .whats-new-drawer { - margin-top: calc(#{$performance-bar-height} + #{$header-height}); -} - -.with-system-header .whats-new-drawer { - margin-top: calc(#{$system-header-height} + #{$header-height}); -} - -.with-performance-bar.with-system-header .whats-new-drawer { - margin-top: calc(#{$performance-bar-height} + #{$system-header-height} + #{$header-height}); -} - .whats-new-item-title-link { &:hover, &:focus, diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index fa235f72e35..c93ef2287a8 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -102,7 +102,6 @@ @include transition(color); } -a, .notification-dot { @include transition(background-color, color, border); } diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 799777977ed..cbdc55d66c1 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -29,10 +29,6 @@ border-bottom: 1px solid $white-dark; color: $gl-text-color; - &.oneline-block { - line-height: 42px; - } - &.white { background-color: $white; } @@ -89,10 +85,6 @@ padding: $gl-padding 0; border-bottom: 1px solid $white-dark; - &.oneline-block { - line-height: 36px; - } - > .controls { float: right; } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 5fa1923af7c..8059164782f 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -261,7 +261,6 @@ .btn-block { width: 100%; margin: 0; - @include gl-mb-5; &.btn { padding: 6px 0; diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 27e9a041145..65e378a79f3 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -20,56 +20,3 @@ } } } - -.pika-single.gitlab-theme { - .pika-label { - color: $gl-text-color-secondary; - font-size: 14px; - font-weight: $gl-font-weight-normal; - } - - th { - padding: 2px 0; - color: $note-disabled-comment-color; - font-weight: $gl-font-weight-normal; - text-transform: lowercase; - border-top: 1px solid $calendar-border-color; - } - - abbr { - cursor: default; - } - - td { - border: 1px solid $calendar-border-color; - - &:first-child { - border-left: 0; - } - - &:last-child { - border-right: 0; - } - } - - .pika-day { - border-radius: 0; - background-color: $white; - text-align: center; - } - - .is-today { - .pika-day { - color: inherit; - font-weight: $gl-font-weight-normal; - } - } - - .is-selected .pika-day, - .pika-day:hover, - .is-today .pika-day { - background: $gray-darker; - color: $gl-text-color; - box-shadow: none; - } -} diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index cc7a45e1c82..f828129cdf1 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -1,3 +1,71 @@ +// stylelint-disable length-zero-no-unit +:root { + --performance-bar-height: 0px; + --system-header-height: 0px; + --top-bar-height: 0px; + --system-footer-height: 0px; + --mr-review-bar-height: 0px; + + --application-bar-left: 0px; + --application-bar-right: 0px; +} + +.with-performance-bar { + --performance-bar-height: #{$performance-bar-height}; +} + +.with-system-header { + --system-header-height: #{$system-header-height}; +} + +.with-top-bar { + --top-bar-height: #{$top-bar-height}; +} + +.with-system-footer { + --system-footer-height: #{$system-footer-height}; +} + +.review-bar-visible { + --mr-review-bar-height: #{$mr-review-bar-height}; +} + +@include media-breakpoint-up(md) { + .page-with-contextual-sidebar { + --application-bar-left: #{$contextual-sidebar-collapsed-width}; + } + + .right-sidebar-collapsed { + --application-bar-right: #{$right-sidebar-collapsed-width}; + + &.is-merge-request { + --application-bar-right: 0px; + } + } + + .right-sidebar-expanded { + --application-bar-right: #{$right-sidebar-width}; + } +} + +@include media-breakpoint-up(xl) { + .page-with-contextual-sidebar { + --application-bar-left: #{$contextual-sidebar-width}; + } + + .page-with-icon-sidebar { + --application-bar-left: #{$contextual-sidebar-collapsed-width}; + } + + .page-with-super-sidebar { + --application-bar-left: #{$super-sidebar-width}; + } + + .page-with-super-sidebar-collapsed { + --application-bar-left: 0px; + } +} + /** COLORS **/ .cgray { color: $gl-text-color; } .clgray { color: $gray-200; } @@ -253,12 +321,6 @@ li.note { } } -img.emoji { - height: 16px; - vertical-align: top; - width: 20px; -} - .chart { overflow: hidden; height: 220px; @@ -451,7 +513,8 @@ img.emoji { width: 100%; > .dropdown-menu, - > .btn { + > .btn, + > .gl-new-dropdown-toggle > .gl-button-text { width: 100%; } } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 1e05441c731..fb9816d1402 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -229,13 +229,13 @@ // .nav-sidebar { - @include gl-fixed; - @include gl-bottom-0; - @include gl-left-0; + position: fixed; + bottom: $calc-application-footer-height; + left: 0; transition: width $gl-transition-duration-medium, left $gl-transition-duration-medium; z-index: 600; width: $contextual-sidebar-width; - top: $header-height; + top: $calc-application-header-height; background-color: $contextual-sidebar-bg-color; border-right: 1px solid $contextual-sidebar-border-color; transform: translate3d(0, 0, 0); diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 4eb26d533c2..6c40781670a 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -9,7 +9,7 @@ } table.code tr:last-of-type td:last-of-type { - @include gl-rounded-bottom-right-base(); + border-bottom-right-radius: $border-radius-default - 1px; } .file-title, @@ -32,30 +32,12 @@ } @media (min-width: map-get($grid-breakpoints, md)) { - // The `+11` is to ensure the file header border shows when scrolled - - // the bottom of the compare-versions header and the top of the file header - --initial-top: calc(#{$header-height} + #{$mr-tabs-height}); - --top: var(--initial-top); - - position: -webkit-sticky; position: sticky; - top: var(--top); + top: calc(#{$calc-application-header-height} + #{$mr-tabs-height}); z-index: 120; &.is-sidebar-moved { - --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 24px}); - } - - .with-system-header & { - --top: calc(var(--initial-top) + #{$system-header-height}); - } - - .with-system-header.with-performance-bar & { - --top: calc(var(--initial-top) + #{$system-header-height} + #{$performance-bar-height}); - } - - .with-performance-bar & { - top: calc(var(--initial-top) + #{$performance-bar-height}); + top: calc(#{$calc-application-header-height} + #{$mr-sticky-header-height} - #{$gl-border-size-1}); } &::before { @@ -69,20 +51,11 @@ pointer-events: none; } - &.is-commit { - top: calc(#{$header-height} + #{$commit-stat-summary-height}); - - .with-performance-bar & { - top: calc(#{$header-height} + #{$commit-stat-summary-height} + #{$performance-bar-height}); - } - } - - &.is-compare { - top: calc(#{$header-height} + #{$compare-branches-sticky-header-height}); - - .with-performance-bar & { - top: calc(#{$performance-bar-height} + #{$header-height} + #{$compare-branches-sticky-header-height}); - } + &.is-commit, + &.is-compare, + &.is-wiki { + top: calc(#{$calc-application-header-height}); + border-top: 0; } } @@ -99,22 +72,7 @@ @media (min-width: map-get($grid-breakpoints, md)) { &.conflict .file-title, &.conflict .file-title-flex-parent { - top: $header-height; - } - - .with-performance-bar &.conflict .file-title, - .with-performance-bar &.conflict .file-title-flex-parent { - top: calc(#{$header-height} + #{$performance-bar-height}); - } - - .with-system-header &.conflict .file-title, - .with-system-header &.conflict .file-title-flex-parent { - top: calc(#{$header-height} + #{$system-header-height}); - } - - .with-system-header.with-performance-bar &.conflict .file-title, - .with-system-header.with-performance-bar &.conflict .file-title-flex-parent { - top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height}); + top: $calc-application-header-height; } } @@ -587,7 +545,7 @@ table.code { .line_holder:last-of-type { .diff-td:first-child, td:first-child { - border-bottom-left-radius: $border-radius-default; + border-bottom-left-radius: $border-radius-default - 1px; } } @@ -723,44 +681,6 @@ table.code { } } -.diff-files-changed { - background-color: $body-bg; - - .inline-parallel-buttons { - @include gl-relative; - z-index: 1; - } - - @include media-breakpoint-up(sm) { - @include gl-sticky; - top: $header-height; - z-index: 200; - - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height}); - } - - &.is-stuck { - @include gl-py-0; - border-top: 1px solid $white-dark; - border-bottom: 1px solid $white-dark; - - .diff-stats-additions-deletions-expanded, - .inline-parallel-buttons { - @include gl-display-none; - } - } - } - - @include media-breakpoint-up(lg) { - &.is-stuck { - .diff-stats-additions-deletions-collapsed { - @include gl-display-block; - } - } - } -} - .note-container { background-color: $gray-light; border-top: 1px solid $white-normal; @@ -944,6 +864,19 @@ table.code { } } +// Remove border from collapsed replies widget only on diffs +.diff-grid-comments { + .replies-widget-collapsed { + border-bottom: 0; + } + // Rounded border radius only on diff comments with no replies + .discussion-collapsible { + .discussion-reply-holder:first-of-type { + border-radius: $gl-border-radius-base; + } + } +} + .discussion-body .image .frame { position: relative; } @@ -978,7 +911,7 @@ table.code { &.popover { width: 250px; min-width: 250px; - z-index: 210; + z-index: 610; } .popover-header { @@ -999,7 +932,7 @@ table.code { } // Note: Prevents tall files from appearing above sticky tabs -.diffs .vue-recycle-scroller__item-view > div:not(.active) { +.diff-files-holder .vue-recycle-scroller__item-view > div:not(.active) { position: absolute; bottom: 100vh; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index ebb9466eb15..884cb70cb9f 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -96,7 +96,7 @@ color: $gl-text-color; font-size: 14px; text-align: left; - border: 1px solid $border-color; + border: 1px solid $gray-200; border-radius: $border-radius-base; white-space: nowrap; @@ -143,11 +143,24 @@ .dropdown-menu-toggle.dropdown-menu-toggle { justify-content: flex-start; overflow: hidden; + padding-top: #{$gl-padding-8 - 1}; + padding-bottom: #{$gl-padding-8 - 1}; padding-right: 25px; position: relative; text-overflow: ellipsis; + line-height: $gl-line-height; width: 160px; + &:hover { + @include gl-inset-border-1-gray-400; + } + + &:hover, + &:focus { + background-color: $gray-50; + border-color: $gray-400; + } + .gl-spinner { position: absolute; top: 9px; @@ -157,7 +170,7 @@ .dropdown-menu-toggle-icon { position: absolute; right: $gl-padding-8; - color: $gray-darkest; + color: $gray-500; } } @@ -705,13 +718,13 @@ } .dropdown-label-box { - position: relative; - top: 0; - margin-right: 5px; + margin-right: $gl-spacing-scale-3; + margin-top: $gl-spacing-scale-2; display: inline-block; - width: 15px; - height: 15px; + width: $gl-spacing-scale-5; + height: $gl-spacing-scale-3; border-radius: $border-radius-base; + border: 1px solid var(--white, $white); } .git-revision-dropdown { @@ -984,17 +997,6 @@ .label-item { padding: 8px 20px; } - - .color-input-container { - .dropdown-label-color-preview { - border: 1px solid $gray-100; - border-right: 0; - - &[style] { - border-color: transparent; - } - } - } } .bulk-update { diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 9ea5a66b3bc..503e22742ba 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -2,17 +2,8 @@ * File content holder * */ -.container-fluid.container-limited.limit-container-width { - .file-holder.readme-holder.limited-width-container .file-content { - max-width: $limited-layout-width; - margin-left: auto; - margin-right: auto; - } -} - .file-holder { border: 1px solid $border-color; - border-top: 0; border-radius: $border-radius-default; &.file-holder-top-border { @@ -29,10 +20,6 @@ border: 0; } - &.file-holder-bottom-radius { - border-radius: 0 0 $border-radius-small $border-radius-small; - } - &.readme-holder { margin: $gl-padding 0; } @@ -484,18 +471,24 @@ span.idiff { @include gl-display-none; } -.tree-list-scroll:not(.tree-list-blobs) { +.mr-tree-list:not(.tree-list-blobs) { .tree-list-parent::before { @include gl-content-empty; @include gl-absolute; @include gl-z-index-1; @include gl-pointer-events-none; - top: 28px; - left: calc(14px + (var(--level) * 16px)); - width: 1px; - height: calc(100% - 24px); - background-color: var(--gray-100, $gray-100); + top: -4px; + left: 0; + width: 100%; + bottom: -4px; + // The virtual scroller has a flat HTML structure so instead of the ::before + // element stretching over multiple rows we instead create a repeating background image + // for the line + background: repeating-linear-gradient(to right, var(--gray-100, $gray-100), var(--gray-100, $gray-100) 1px, transparent 1px, transparent 14px); + background-size: calc(var(--level) * 14px) 100%; + background-repeat: no-repeat; + background-position: 14px; } } @@ -580,3 +573,31 @@ span.idiff { padding: 0; border-radius: 0 0 $border-radius-default $border-radius-default; } + +.blame-stream-container { + border-top: 1px solid $border-color; +} + +.blame-stream-loading { + $gradient-size: 16px; + position: sticky; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + margin-top: -$gradient-size; + height: $gl-spacing-scale-10; + border-top: $gradient-size solid transparent; + background-color: $white; + box-sizing: content-box; + background-clip: content-box; + + .gradient { + position: absolute; + left: 0; + right: 0; + top: -$gradient-size; + height: $gradient-size; + background: linear-gradient(to top, $white, transparentize($white, 1)); + } +} diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index b35175f4ef6..104cdf5544d 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -87,8 +87,8 @@ .filtered-search-term { display: flex; flex-shrink: 0; - margin-top: 4px; - margin-bottom: 4px; + margin-top: 2px; + margin-bottom: 2px; .selectable { display: flex; @@ -195,9 +195,9 @@ display: flex; width: 100%; min-width: 0; - border: 1px solid $border-color; + border: 1px solid $gray-400; background-color: $white; - border-radius: $border-radius-default 0 0 $border-radius-default; + border-radius: $border-radius-default; @include media-breakpoint-down(sm) { flex: 1 1 auto; @@ -206,8 +206,7 @@ &.focus, &.focus:hover { - border-color: $blue-300; - box-shadow: 0 0 4px $dropdown-input-focus-shadow; + @include gl-focus; } gl-emoji { @@ -227,7 +226,7 @@ min-width: 200px; padding-right: 25px; padding-left: 0; - height: $input-height - 2; + height: #{$input-height - 2px}; line-height: inherit; &, @@ -261,8 +260,9 @@ flex: 1; position: relative; min-width: 0; - height: 2rem; + height: #{$input-height - 2px}; background-color: $input-bg; + border-radius: $border-radius-default; } .filtered-search-input-dropdown-menu { @@ -291,10 +291,11 @@ } .filtered-search-history-dropdown-toggle-button.gl-button { - border-radius: $border-radius-default 0 0 $border-radius-default; - border-right: 1px solid $border-color; - box-shadow: none; + $inner-border: #{$border-radius-default - 1px}; + border-radius: $inner-border 0 0 $inner-border; color: $gl-text-color-secondary; + margin: -1px 0 -1px -1px; + box-shadow: inset 0 0 0 1px $gray-400; flex: 1; transition: color 0.1s linear; width: auto; @@ -302,7 +303,6 @@ &:hover, &:focus { color: $gl-text-color; - border-color: $border-color; } } diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index b63365e8159..6b4f1478978 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -9,7 +9,7 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); &.sticky { position: sticky; - top: $flash-container-top; + top: $calc-application-header-height; z-index: 251; .flash-alert, @@ -114,17 +114,3 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); left: -50%; } } - -.with-system-header .flash-container.sticky { - top: $flash-container-top + $system-header-height; -} - -.with-performance-bar { - .flash-container.sticky { - top: $flash-container-top + $performance-bar-height; - } - - &.with-system-header .flash-container.sticky { - top: $flash-container-top + $performance-bar-height + $system-header-height; - } -} diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index c0fe8ca6f76..3e1dff18f2a 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -148,7 +148,10 @@ label { width: $input-short-md-width; } } +} +.form-control, +[contenteditable=true] { &:focus { border-color: $gray-400; @include gl-focus; @@ -156,6 +159,7 @@ label { } .select-control { + line-height: 1.3; padding-left: 10px; padding-right: 10px; appearance: none; @@ -208,7 +212,7 @@ label { .gl-show-field-errors { .form-control:not(textarea) { - height: 34px; + height: $input-height; } .gl-field-success-outline { @@ -246,7 +250,7 @@ label { .show-password-complexity-errors { .form-control:not(textarea) { - height: 34px; + height: $input-height; } .password-complexity-error-outline { @@ -286,3 +290,22 @@ label { .input-group-text { max-height: $input-height; } + +.add-issuable-form-input-wrapper { + &.focus { + border-color: var(--gray-700, $gray-700); + + input { + @include gl-shadow-none; + } + } + + .gl-show-field-errors &.form-control:not(textarea) { + height: auto; + } +} + +.add-issuable-form-input-wrapper.focus, +.issue-token-remove-button:focus { + @include gl-focus; +} diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 7baf84198e4..0c53b3fd866 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -8,7 +8,7 @@ $search-input-field-x-min-width: 200px; min-height: $header-height; border: 0; position: fixed; - top: 0; + top: $calc-application-bars-height; left: 0; right: 0; border-radius: 0; @@ -312,23 +312,32 @@ $search-input-field-x-min-width: 200px; margin-top: $dropdown-vertical-offset; } -.breadcrumbs { - display: flex; - min-height: $breadcrumb-min-height; - color: $gl-text-color; +.top-bar-container { + min-height: $top-bar-height; } -.breadcrumbs-container { - display: flex; - width: 100%; - position: relative; - padding-top: $gl-padding / 2; - padding-bottom: $gl-padding / 2; - align-items: center; - border-bottom: 1px solid $border-color; +.top-bar-fixed { + @include gl-inset-border-b-1-gray-100; + background-color: $body-bg; + left: var(--application-bar-left); + position: fixed; + right: var(--application-bar-right); + top: $calc-application-bars-height; + width: auto; + z-index: $top-bar-z-index; + + @media (prefers-reduced-motion: no-preference) { + transition: left $gl-transition-duration-medium, right $gl-transition-duration-medium; + } + + .breadcrumbs-list { + @include media-breakpoint-down(xs) { + flex-wrap: nowrap; + } + } } -.breadcrumbs-links { +.breadcrumbs { flex: 1; min-width: 0; align-self: center; @@ -350,16 +359,6 @@ $search-input-field-x-min-width: 200px; top: 1px; } } - - .dropdown-menu li a .identicon { - width: 17px; - height: 17px; - font-size: $gl-font-size-xs; - vertical-align: middle; - text-indent: 0; - line-height: $gl-font-size-xs + 2px; - display: inline-block; - } } .breadcrumbs-list { @@ -375,14 +374,11 @@ $search-input-field-x-min-width: 200px; display: flex; align-items: center; position: relative; + min-width: 0; padding: 2px 0; &:not(:last-child) { padding-right: 20px; - - &:not(.dropdown) { - overflow: hidden; - } } &:last-child { @@ -503,11 +499,6 @@ $search-input-field-x-min-width: 200px; visibility: visible; } -.with-performance-bar .navbar-gitlab, -.with-performance-bar .fixed-top { - top: $performance-bar-height; -} - .navbar-empty { justify-content: center; height: $header-height; @@ -558,25 +549,16 @@ $search-input-field-x-min-width: 200px; } .toggle-mobile-nav { - display: none; - background-color: transparent; - border: 0; - padding: 6px 16px; - margin: 0 0 0 -15px; - height: 46px; - color: $gl-text-color; + @include gl-display-none; @include media-breakpoint-down(sm) { - display: flex; - align-items: center; - - i { - font-size: 18px; - } + @include gl-display-block; - + .breadcrumbs-links { - padding-left: $gl-padding; - border-left: 1px solid $gl-text-color-quaternary; + + .breadcrumbs { + @include gl-pl-4; + @include gl-border-l-1; + @include gl-border-l-solid; + @include gl-border-gray-100; } } } diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index f27a36d1966..37a2264122d 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -74,7 +74,6 @@ } .user-avatar-link { - display: inline-block; text-decoration: none; } diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 7a92adf7b7b..23dbe440d33 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -35,8 +35,9 @@ body { } } -.content-wrapper-margin { - margin-top: $header-height; +.layout-page { + padding-top: $calc-application-header-height; + padding-bottom: $calc-application-footer-height; } .content-wrapper { @@ -142,11 +143,6 @@ body { @include gl-overflow-hidden; } - -.with-performance-bar .layout-page { - margin-top: calc(#{$header-height} + #{$performance-bar-height}); -} - .fullscreen-layout { padding-top: 0; height: 100vh; diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index c40cadafb9c..e57dad9e4cb 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -44,46 +44,6 @@ } } -.md-header { - .nav-links { - a { - width: 100%; - padding-top: 0; - line-height: 19px; - - &.btn.btn-sm { - padding: 2px 5px; - } - - &:focus { - margin-top: -10px; - padding-top: 10px; - } - } - } - - .gl-tabs-nav { - @include media-breakpoint-down(xs) { - .nav-item { - flex: 1; - } - - .gl-tab-nav-item { - padding-top: $gl-padding-4; - padding-bottom: $gl-padding-8; - } - - .md-header-toolbar { - width: 100%; - display: flex; - flex-wrap: wrap; - padding-top: $gl-padding-8; - border-top: 1px solid $border-color; - } - } - } -} - .md-header-tab { @include media-breakpoint-down(xs) { flex: 1; @@ -120,9 +80,10 @@ } .referenced-commands { + $radius: $border-radius-default - 1px; background: $blue-50; padding: $gl-padding-8 $gl-padding; - border-radius: $border-radius-default; + border-radius: 0 0 $radius $radius; p { margin: 0; @@ -130,7 +91,7 @@ } .md-preview-holder { - min-height: 172px; + min-height: 176px; padding: 10px 0; overflow-x: auto; } diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index c5e50299e6d..15a31fbb3d9 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -256,14 +256,8 @@ @mixin build-log-top-bar($height) { @include build-log-bar($height); - - position: -webkit-sticky; position: sticky; - top: $header-height; - - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height}); - } + top: $calc-application-header-height; } /* @@ -457,3 +451,21 @@ color: $gl-text-color; } } + +@mixin omniauth-divider { + &::before, + &::after { + content: ''; + flex: 1; + border-bottom: 1px solid var(--gray-100, $gray-100); + margin: $gl-padding-24 0; + } + + &::before { + margin-right: $gl-padding; + } + + &::after { + margin-left: $gl-padding; + } +} diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index c9b17f5d5c4..f76a9cf0373 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -45,7 +45,7 @@ margin: #{2 * $grid-size} #{-2 * $grid-size} #{-2 * $grid-size}; } - .text-danger { + .text-danger:not(.dropdown-item) { font-weight: $gl-font-weight-bold; } } diff --git a/app/assets/stylesheets/framework/page_title.scss b/app/assets/stylesheets/framework/page_title.scss index 5ed5b1e1445..84a34f12649 100644 --- a/app/assets/stylesheets/framework/page_title.scss +++ b/app/assets/stylesheets/framework/page_title.scss @@ -1,8 +1,6 @@ .page-title-holder { - border-bottom: 1px solid $border-color; - .page-title { - margin: $gl-padding 0; + margin: $gl-spacing-scale-4 0; color: $gl-text-color; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index a07a57f40f7..9fdf889f4e9 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -22,7 +22,7 @@ &:not(.is-merge-request) { @include media-breakpoint-up(sm) { &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { - padding-right: $gutter-collapsed-width; + padding-right: $right-sidebar-collapsed-width; } } } @@ -30,7 +30,7 @@ &.is-merge-request { @include media-breakpoint-up(lg) { .content-wrapper { - padding-right: $gutter-collapsed-width; + padding-right: $right-sidebar-collapsed-width; } } } @@ -56,7 +56,7 @@ z-index: $zindex-dropdown-menu; &.right-sidebar-merge-requests { - width: 300px; + width: $right-sidebar-width; @include media-breakpoint-up(md) { z-index: auto; @@ -69,21 +69,21 @@ @include media-breakpoint-only(sm) { &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { - padding-right: $gutter-collapsed-width; + padding-right: $right-sidebar-collapsed-width; } } &:not(.is-merge-request) { @include media-breakpoint-up(md) { .content-wrapper { - padding-right: $gutter-width; + padding-right: $right-sidebar-width; } } } } .right-sidebar { - border-left: 1px solid $gray-100; + border-left: 1px solid $gray-50; &.right-sidebar-merge-requests { @include media-breakpoint-up(lg) { @@ -102,7 +102,7 @@ @mixin maintain-sidebar-dimensions { display: block; - width: $gutter-width; + width: $right-sidebar-width; } .issues-bulk-update.right-sidebar { @@ -113,7 +113,7 @@ &.right-sidebar-expanded { @include maintain-sidebar-dimensions; - width: $gutter-width; + width: $right-sidebar-width; .issuable-sidebar-header { // matches `.top-area .nav-controls` for issuable index pages @@ -140,6 +140,11 @@ .issuable-sidebar { padding: 0 3px; } + + .block { + border-bottom: 0; + padding-top: 0; + } } .issuable-sidebar .labels { @@ -266,6 +271,24 @@ } } +.merge-request-approved-icon { + animation: approval-animate 350ms ease-in; +} + +@include keyframes(approval-animate) { + 0% { + transform: scale(0); + } + + 75% { + transform: scale(1.4); + } + + 100% { + transform: scale(1); + } +} + .assignee-grid, .reviewer-grid { [data-css-area='attention'] { @@ -283,32 +306,34 @@ @mixin right-sidebar { position: fixed; - top: $header-height; - // Default value for CSS var must contain a unit - // stylelint-disable-next-line length-zero-no-unit - bottom: var(--review-bar-height, 0px); + bottom: calc(#{$calc-application-footer-height} + var(--mr-review-bar-height)); right: 0; transition: width $gl-transition-duration-medium; background-color: $white; z-index: 200; overflow: hidden; - } .right-sidebar { &:not(.right-sidebar-merge-requests) { @include right-sidebar; + top: calc(#{$header-height} + #{$calc-application-bars-height}); + + @include media-breakpoint-down(md) { + z-index: 251; + } } &.right-sidebar-merge-requests { @include media-breakpoint-down(md) { @include right-sidebar; + top: calc(#{$header-height} + #{$calc-application-bars-height}); z-index: 251; } - } - @include media-breakpoint-down(sm) { - z-index: 251; + @include media-breakpoint-down(sm) { + top: $calc-application-header-height; + } } a:not(.btn) { @@ -376,7 +401,7 @@ border-bottom: 1px solid $border-gray-normal; // This prevents the mess when resizing the sidebar // of elements repositioning themselves.. - width: $gutter-inner-width; + width: $right-sidebar-inner-width; // -- &:last-child { @@ -449,7 +474,7 @@ &.right-sidebar-expanded { &:not(.right-sidebar-merge-requests) { - width: $gutter-width; + width: $right-sidebar-width; } .value { @@ -464,28 +489,14 @@ padding: 0; .issuable-context-form { - --initial-top: calc(#{$header-height} + 76px); - --top: var(--initial-top); + $issue-sticky-header-height: 76px; - @include gl-sticky; - @include gl-overflow-auto; - - top: var(--top); - height: calc(100vh - var(--top)); + top: calc(#{$calc-application-header-height} + #{$issue-sticky-header-height}); + height: calc(#{$calc-application-viewport-height} - #{$issue-sticky-header-height} - var(--mr-review-bar-height)); + position: sticky; + overflow: auto; padding: 0 15px; - margin-bottom: calc(var(--top) * -1); - - .with-performance-bar & { - --top: calc(var(--initial-top) + #{$performance-bar-height}); - } - - .with-system-header & { - --top: calc(var(--initial-top) + #{$system-header-height}); - } - - .with-performance-bar.with-system-header & { - --top: calc(var(--initial-top) + #{$system-header-height} + #{$performance-bar-height}); - } + margin-bottom: calc((#{$header-height} + $issue-sticky-header-height) * -1); } } } @@ -543,13 +554,13 @@ } } - width: $gutter-collapsed-width; + width: $right-sidebar-collapsed-width; padding: 0; .block, .sidebar-contained-width, .issuable-sidebar-header { - width: $gutter-collapsed-width - 2px; + width: $right-sidebar-collapsed-width - 2px; padding: 0; border-bottom: 0; overflow: hidden; @@ -737,10 +748,6 @@ } } -.with-performance-bar .right-sidebar { - top: calc(#{$header-height} + #{$performance-bar-height}); -} - .issuable-show-labels { .gl-label { margin-bottom: 5px; @@ -786,7 +793,7 @@ .participants-author { &:nth-of-type(8n) { - padding-right: 0; + margin-right: 0; } .avatar.avatar-inline { diff --git a/app/assets/stylesheets/framework/sortable.scss b/app/assets/stylesheets/framework/sortable.scss index f9e95d16f63..91781bfe539 100644 --- a/app/assets/stylesheets/framework/sortable.scss +++ b/app/assets/stylesheets/framework/sortable.scss @@ -51,3 +51,12 @@ cursor: no-drop !important; } } + +.tree-item.is-dragging { + border-top: 0; + + .item-body { + background-color: $white; + border: 2px solid $gray-200; + } +} diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss index 046b8636f65..a09ab7ed64c 100644 --- a/app/assets/stylesheets/framework/source_editor.scss +++ b/app/assets/stylesheets/framework/source_editor.scss @@ -37,10 +37,34 @@ .gl-source-editor { @include gl-order-n1; + border-radius: 0 0 $border-radius-default $border-radius-default; } } .monaco-editor.gl-source-editor { + // Fix unreadable headings in tooltips for syntax highlighting themes that don't match general theme + &.vs-dark .markdown-hover { + h1, + h2, + h3, + h4, + h5, + h6 { + color: $source-editor-hover-light-text-color; + } + } + + &.vs .markdown-hover { + h1, + h2, + h3, + h4, + h5, + h6 { + color: $source-editor-hover-dark-text-color; + } + } + .margin-view-overlays { .line-numbers { @include gl-display-flex; diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index 4b55b39d6f3..ca67b472322 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -1,7 +1,58 @@ +@mixin active-toggle { + background-color: $gray-50 !important; + mix-blend-mode: multiply; + + .gl-dark & { + mix-blend-mode: screen; + } +} + +$super-sidebar-transition-duration: $gl-transition-duration-medium; +$super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; + +@mixin notification-dot($color, $size, $top, $left) { + background-color: $color; + border: 2px solid $gray-10; // Same as the sidebar's background color. + position: absolute; + height: $size; + width: $size; + top: $top; + left: $left; + border-radius: 50%; + transition: background-color 100ms linear, border-color 100ms linear; +} + +.super-sidebar-skip-to { + top: calc(#{$header-height} + #{$calc-application-bars-height}); + width: calc(#{$super-sidebar-width} - #{$gl-spacing-scale-5}); + z-index: $super-sidebar-skip-to-z-index; +} + .super-sidebar { - top: 0; - width: $contextual-sidebar-width; - z-index: 600; + display: flex; + flex-direction: column; + position: fixed; + top: calc(#{$header-height} + #{$calc-application-bars-height}); + bottom: $calc-application-footer-height; + left: 0; + background-color: var(--gray-10, $gray-10); + border-right: 1px solid $t-gray-a-08; + transform: translate3d(0, 0, 0); + width: $super-sidebar-width; + z-index: $super-sidebar-z-index; + + &.super-sidebar-loading { + transform: translate3d(-100%, 0, 0); + transition: none; + + @include media-breakpoint-up(xl) { + transform: translate3d(0, 0, 0); + } + } + + @media (prefers-reduced-motion: no-preference) { + transition: transform $super-sidebar-transition-duration; + } .user-bar { background-color: $t-gray-a-04; @@ -9,46 +60,100 @@ .tanuki-logo { @include gl-vertical-align-middle; } + + .user-bar-item, + .tanuki-logo-container { + @include gl-rounded-base; + @include gl-p-2; + @include gl-bg-transparent; + @include gl-border-none; + + &:focus, + &:active { + @include gl-focus; + } + } + + .user-bar-item { + &:hover, + &:focus, + &:active { + @include active-toggle; + } + } + + $light-mode-btn-bg: #e0dfe5; + $dark-mode-btn-bg: #53515b; + + .tanuki-logo-container { + &:hover, + &:focus, + &:active { + background-color: $light-mode-btn-bg; + + .gl-dark & { + background-color: $dark-mode-btn-bg; + } + } + } } - .counter .gl-icon { - color: var(--gray-500, $gray-500); + .counter .gl-icon, + .item-icon { + color: var(--gray-600, $gray-500); } .counter:hover, .counter:focus, - .gl-dropdown-custom-toggle:hover .counter, - .gl-dropdown-custom-toggle:focus .counter, - .gl-dropdown-custom-toggle[aria-expanded='true'] .counter { + .counter[aria-expanded='true'] { background-color: $gray-50; border-color: transparent; mix-blend-mode: multiply; + .gl-dark & { + mix-blend-mode: screen; + } + .gl-icon { color: var(--gray-700, $gray-700); } } - .context-switcher-toggle { + .counter:hover, + .counter[aria-expanded='true'] { + box-shadow: none; + } + + .context-switcher .gl-new-dropdown-custom-toggle { + width: 100%; + } + + .context-switcher .gl-new-dropdown-panel { + overflow-y: auto; + } + + .context-switcher-search-box input { + @include gl-font-sm; + } + + .gl-new-dropdown-custom-toggle .context-switcher-toggle { &[aria-expanded='true'] { background-color: $t-gray-a-08; } + + &:focus { + @include gl-focus($inset: true); } } .btn-with-notification { - mix-blend-mode: unset !important; // Our tertiary buttons otherwise use another mix-blend mode, making border-color semi-transparent. position: relative; - .notification { - background-color: $blue-500; - border: 2px solid $gray-10; // Same as the sidebar's background color. - position: absolute; - height: 9px; - width: 9px; - top: 5px; - left: 22px; - border-radius: 50%; - transition: background-color 100ms linear, border-color 100ms linear; + .notification-dot-info { + @include notification-dot($blue-500, 9px, 5px, 22px); + } + + .notification-dot-warning { + @include notification-dot($orange-300, 12px, 1px, 19px); } &:hover, @@ -58,8 +163,169 @@ } } } + + .gl-new-dropdown-toggle[aria-expanded='true'] { + @include active-toggle; + } + + .gl-new-dropdown-custom-toggle { + .btn-with-notification { + mix-blend-mode: unset; // Our tertiary buttons otherwise use another mix-blend mode, making border-color semi-transparent. + } + + [aria-expanded='true'] { + @include active-toggle; + } + } + + .nav-item-link { + button, + .draggable-icon { + opacity: 0; + } + + .draggable-icon { + cursor: grab; + } + + &:hover { + button, + .draggable-icon { + opacity: 1; + } + } + + &:hover, + &:focus-within { + .nav-item-badge { + opacity: 0; + } + } + + &:focus button, + button:focus { + opacity: 1; + } + } + + #trial-status-sidebar-widget:hover { + text-decoration: none; + @include gl-text-contrast-light; + } +} + +.super-sidebar-overlay { + display: none; +} + +.super-sidebar-peek, +.super-sidebar-peek-hint { + @include gl-shadow; + border-right: 0; +} + +.super-sidebar-peek-hint { + @media (prefers-reduced-motion: no-preference) { + transition: transform $super-sidebar-transition-hint-duration ease-out; + } +} + +.page-with-super-sidebar { + padding-left: 0; + + @media (prefers-reduced-motion: no-preference) { + transition: padding-left $super-sidebar-transition-duration; + } + + &:not(.page-with-super-sidebar-collapsed) { + .super-sidebar-overlay { + display: block; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: $black-transparent; + z-index: $super-sidebar-z-index - 1; + + @include media-breakpoint-up(md) { + display: none; + } + } + } + + @include media-breakpoint-up(xl) { + padding-left: $super-sidebar-width; + + .super-sidebar-toggle { + display: none; + } + } +} + +.page-with-super-sidebar-collapsed { + .super-sidebar { + transform: translate3d(-100%, 0, 0); + + &.super-sidebar-peek { + transform: translate3d(0, 0, 0); + } + + &.super-sidebar-peek-hint { + transform: translate3d(calc(#{$gl-spacing-scale-3} - 100%), 0, 0); + } + } + + @include media-breakpoint-up(xl) { + padding-left: 0; + + .super-sidebar-toggle { + display: block; + } + } +} + +.gl-dark { + .super-sidebar { + .gl-new-dropdown-custom-toggle { + .btn-with-notification.btn-with-notification { + mix-blend-mode: unset; + } + } + } } -.with-performance-bar .super-sidebar { - top: $performance-bar-height; +.global-search-modal { + padding: 3rem 0.5rem 0; + + &.gl-modal .modal-dialog { + align-items: flex-start; + } + + @include gl-media-breakpoint-up(sm) { + padding: 5rem 1rem 0; + } + + // This is a temporary workaround! + // the button in GitLab UI Search components need to be updated to not be the small size + // see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540 + .gl-search-box-by-type-clear.btn-sm { + padding: 0.5rem !important; + } + + .is-searching { + .in-search-scope-help { + position: absolute; + top: 0.625rem; + right: 2.5rem; + } + } + + .gl-search-box-by-type-input-borderless { + @include gl-rounded-base; + } + + .global-search-results { + max-height: 30rem; + } } diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 89585fd96ae..703c2ca0dad 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -36,69 +36,14 @@ } } -// System Header -.with-system-header { - // main navigation - // login page - .navbar-gitlab, - .fixed-top { - top: $system-header-height; - } - - // left sidebar eg: project page - // right sidebar eg: MR page - .nav-sidebar, - .right-sidebar { - top: calc(#{$system-header-height} + #{$header-height}); - } - - .content-wrapper-margin { - margin-top: calc(#{$system-header-height} + #{$header-height}); - } - - // Performance Bar - // System Header - &.with-performance-bar { - // main navigation - header.navbar-gitlab, - .fixed-top { - top: $performance-bar-height + $system-header-height; - } - - .layout-page { - margin-top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height}); - } - - // left sidebar eg: project page - // right sidebar eg: MR page - .nav-sidebar, - .right-sidebar { - top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height}); - } - } -} - // System Footer .with-system-footer { - // left sidebar eg: project page - // right sidebar eg: mr page - .nav-sidebar, - .right-sidebar, // navless pages' footer eg: login page // navless pages' footer border eg: login page &.devise-layout-html body .footer-container, &.devise-layout-html body hr.footer-fixed { bottom: $system-footer-height; } - - .content-wrapper-margin { - margin-bottom: 16px; - } - - .boards-list, - .board-swimlanes { - height: calc(100vh - (#{$header-height} + #{$breadcrumb-min-height} + #{$performance-bar-height} + #{$system-footer-height} + #{$gl-padding-32})); - } } .fullscreen-layout { diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 8b2a494527b..b28a93749d1 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -41,7 +41,7 @@ table { } th { - @include gl-bg-gray-50; + @include gl-bg-gray-10; border-bottom: 0; &.wide { @@ -160,3 +160,7 @@ table { border-top: 0; } } + +.gl-table-no-top-border th { + border-top: 0; +} diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 32e9bba8712..699693bd354 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -31,6 +31,7 @@ &:not(.note-form).internal-note .timeline-content, &:not(.note-form).draft-note .timeline-content { background-color: $orange-50 !important; + border-radius: 3px; } .timeline-entry-inner { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 9b5897b7df9..88f990d2320 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -494,6 +494,7 @@ outline: none; &::after { + @include gl-dark-invert-keep-hue; content: image-url('icon_anchor.svg'); visibility: hidden; } @@ -631,7 +632,7 @@ body { } .page-title { - margin: #{2 * $grid-size} 0; + margin: $gl-spacing-scale-4 0; line-height: 1.3; &.with-button { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index c616915073e..1ba3de68662 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -2,14 +2,19 @@ * Layout */ $grid-size: 8px; -$gutter-collapsed-width: 62px; -$gutter-width: 290px; -$gutter-inner-width: 250px; +$right-sidebar-collapsed-width: 62px; +$right-sidebar-width: 290px; +$right-sidebar-inner-width: 250px; $sidebar-breakpoint: 1024px; $default-transition-duration: 0.15s; $contextual-sidebar-width: 256px; $contextual-sidebar-collapsed-width: 56px; $toggle-sidebar-height: 48px; +$super-sidebar-width: 256px; +$super-sidebar-z-index: 600; +$super-sidebar-skip-to-z-index: 601; +$super-sidebar-overlay-z-index: 599; +$top-bar-z-index: 210; /** 🚨 Do not use this spacing scale — it is deprecated and being removed. 🚨 @@ -386,7 +391,6 @@ $nav-active-bg: $t-gray-a-08; * Text */ $gl-font-size: 14px; -$gl-font-size-xs: 11px; $gl-font-size-small: 12px; $gl-font-size-large: 16px; $gl-font-weight-normal: 400; @@ -477,10 +481,11 @@ $highlight-changes-color: rgb(235, 255, 232); $performance-bar-height: 35px; $system-header-height: 16px; $system-footer-height: $system-header-height; +$mr-sticky-header-height: 72px; +$mr-review-bar-height: calc(2rem + 13px); $flash-height: 52px; -$flash-container-top: 48px; $context-header-height: 60px; -$breadcrumb-min-height: 48px; +$top-bar-height: 48px; $home-panel-title-row-height: 64px; $home-panel-avatar-mobile-size: 24px; $issuable-title-max-width: 350px; @@ -494,6 +499,14 @@ $gl-line-height-14: 14px; $pages-group-name-color: #4c4e54; /* + * Calculated heights + */ +$calc-application-bars-height: calc(var(--system-header-height) + var(--performance-bar-height)); +$calc-application-header-height: calc(#{$header-height} + #{$calc-application-bars-height} + var(--top-bar-height)); +$calc-application-footer-height: var(--system-footer-height); +$calc-application-viewport-height: calc(100vh - #{$calc-application-header-height} - #{$calc-application-footer-height}); + +/* * Common component specific colors */ $user-mention-bg: rgba($blue-500, 0.044); @@ -665,8 +678,6 @@ $note-targe3-inside: #ffffd3; /* * Calendar */ -$calendar-hover-bg: #ecf3fe; -$calendar-border-color: rgba(#000, 0.1); $calendar-user-contrib-text: #959494; /* @@ -679,12 +690,11 @@ $ci-skipped-color: #888; */ $issue-boards-font-size: 14px; $issue-boards-card-shadow: rgba(0, 0, 0, 0.1); -$issue-boards-filter-height: 68px; /* The following heights are used in environment_logs.scss and are used for calculation of the log viewer height. */ $environment-logs-breadcrumbs-height: 63px; -$environment-logs-breadcrumbs-height-md: $breadcrumb-min-height; +$environment-logs-breadcrumbs-height-md: $top-bar-height; $environment-logs-difference-xs-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height}); $environment-logs-difference-md-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height-md}); @@ -730,7 +740,6 @@ $calendar-activity-colors: ( */ $commit-max-width-marker-color: rgba(0, 0, 0, 0); $commit-message-text-area-bg: rgba(0, 0, 0, 0); -$commit-stat-summary-height: 36px; /* * Files @@ -741,7 +750,7 @@ $logs-p-color: #333; /* * Forms */ -$input-height: 34px; +$input-height: 32px; $input-danger-bg: #f2dede; $input-group-addon-bg: $gray-10; $gl-field-focus-shadow: rgba(0, 0, 0, 0.075); @@ -877,6 +886,11 @@ Multi file editor $border-color-settings: #e1e1e1; /* +Drawers +*/ +$wide-drawer: 500px; + +/* Modals */ $modal-body-height: 80px; @@ -902,9 +916,15 @@ Merge requests $mr-tabs-height: 48px; /* -Compare Branches +Board Swimlanes +*/ +$board-swimlanes-headers-height: 64px; + +/* +Source Editor theme overrides */ -$compare-branches-sticky-header-height: 68px; +$source-editor-hover-light-text-color: #ececef; +$source-editor-hover-dark-text-color: #333238; /** Bootstrap 4.2.0 introduced new icons for validating forms. diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index cb9c623c8fc..1434c16b68f 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -1,7 +1,7 @@ .info-well { - background: $gray-light; + background: $gray-10; color: $gl-text-color; - border: 1px solid $border-color; + border: 1px solid $gray-100; border-radius: $border-radius-default; .card.card-body-segment { diff --git a/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss b/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss index 30895a55711..5f195bc47bf 100644 --- a/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss +++ b/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss @@ -25,7 +25,7 @@ } } - .gd { + .gi { background-color: var(--diff-addition-color); } } diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index ccb5d96e966..969a6665634 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -192,8 +192,8 @@ pre.code, } &.hll { - --highlight-border-color: #{$orange-200}; - background-color: $orange-50; + --highlight-border-color: #{$blue-300}; + background-color: $blue-50; } } @@ -247,8 +247,8 @@ pre.code, } &.hll { - --highlight-border-color: #{$orange-200}; - background-color: $orange-50; + --highlight-border-color: #{$blue-300}; + background-color: $blue-50; } } @@ -269,8 +269,8 @@ pre.code, } &.hll { - --highlight-border-color: #{$orange-200}; - background-color: $orange-50; + --highlight-border-color: #{$blue-300}; + background-color: $blue-50; } } } diff --git a/app/assets/stylesheets/page_bundles/admin/geo_nodes.scss b/app/assets/stylesheets/page_bundles/admin/geo_sites.scss index b0aaa48569a..37bc2394d58 100644 --- a/app/assets/stylesheets/page_bundles/admin/geo_nodes.scss +++ b/app/assets/stylesheets/page_bundles/admin/geo_sites.scss @@ -1,6 +1,6 @@ @import '../mixins_and_variables_and_functions'; -.geo-node-header-grid-columns { +.geo-site-header-grid-columns { grid-template-columns: 1fr auto; grid-gap: $gl-spacing-scale-5; @@ -9,7 +9,7 @@ } } -.geo-node-details-grid-columns { +.geo-site-details-grid-columns { grid-gap: $gl-spacing-scale-5; @include media-breakpoint-up(lg) { @@ -17,12 +17,12 @@ } } -.geo-node-core-details-grid-columns { +.geo-site-core-details-grid-columns { grid-template-columns: 1fr 1fr; grid-gap: $gl-spacing-scale-5; } -.geo-node-replication-details-grid-columns { +.geo-site-replication-details-grid-columns { grid-template-columns: 1fr 1fr; grid-gap: 1rem; @@ -31,7 +31,7 @@ } } -.geo-node-filter-grid-columns { +.geo-site-filter-grid-columns { grid-template-columns: 1fr; @include media-breakpoint-up(md) { @@ -39,7 +39,7 @@ } } -.geo-node-replication-counts-grid { +.geo-site-replication-counts-grid { grid-template-columns: 2fr 1fr 1fr; grid-gap: 1rem; } diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 99e7f7ae0a4..5aca697ae26 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -6,21 +6,30 @@ } .boards-app { + height: calc(#{$calc-application-viewport-height} - var(--header-height, 48px)); + display: flex; + flex-direction: column; + @include media-breakpoint-up(sm) { transition: width $gl-transition-duration-medium; width: 100%; &.is-compact { - width: calc(100% - #{$gutter-width}); + width: calc(100% - #{$right-sidebar-width}); } } } .boards-list, .board-swimlanes { - overflow-x: scroll; - min-height: 200px; + flex-grow: 1; border-left: 8px solid var(--gray-10, $white); + + min-height: calc(#{$calc-application-viewport-height} - var(--header-height)); + + @include media-breakpoint-up(sm) { + min-height: 0; + } } .board { @@ -40,6 +49,7 @@ // We do this because the flow of elements isn't affected by the rotate transform, so we must ensure that a // rotated element has square dimensions so it won't overlap with its siblings. margin: calc(50% - 8px) 0; + max-width: 50vh; transform-origin: center; } @@ -195,8 +205,8 @@ padding-top: 10px; } - .boards-list { - height: calc(100vh - #{$issue-boards-filter-height}); + .boards-app { + height: 100vh; } // Use !important for these as top and z-index are set on style attribute @@ -208,15 +218,11 @@ } .boards-sidebar { - top: $header-height !important; + top: $calc-application-header-height !important; height: auto; - bottom: 0; + bottom: $calc-application-footer-height; padding-bottom: 0.5rem; - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height}) !important; - } - .sidebar-collapsed-icon { @include gl-display-none; } diff --git a/app/assets/stylesheets/page_bundles/branches.scss b/app/assets/stylesheets/page_bundles/branches.scss index 2aa90529e22..a5b201c7dac 100644 --- a/app/assets/stylesheets/page_bundles/branches.scss +++ b/app/assets/stylesheets/page_bundles/branches.scss @@ -39,3 +39,7 @@ flex: 0 0 auto; white-space: nowrap; } + +.branches-list .branch-item:not(:last-of-type) { + border-bottom: 1px solid $border-color; +} diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index d40c03b7fd1..5114f484e53 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -6,30 +6,22 @@ } .archived-job { - top: $header-height; + top: $calc-application-header-height; border-radius: 2px 2px 0 0; color: var(--orange-600, $orange-600); background-color: var(--orange-50, $orange-50); border: 1px solid var(--border-color, $border-color); - - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height}); - } } .top-bar { @include build-log-top-bar(50px); &.has-archived-block { - top: calc(#{$header-height} + 28px); - - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height} + 28px); - } + top: calc(#{$calc-application-header-height} + 28px); } &.affix { - top: $header-height; + top: $calc-application-header-height; // with sidebar &.sidebar-expanded { diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss index 143682e1cd7..b42e6fd85fa 100644 --- a/app/assets/stylesheets/page_bundles/design_management.scss +++ b/app/assets/stylesheets/page_bundles/design_management.scss @@ -8,22 +8,13 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); background: transparent; } -.design-checkbox { - position: absolute; - top: $gl-padding; - left: 30px; -} - .layout-page.design-detail-layout { max-height: 100vh; } .design-detail { background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity); - - .with-performance-bar & { - top: 35px; - } + bottom: $calc-application-footer-height; .comment-indicator { border-radius: 50%; diff --git a/app/assets/stylesheets/page_bundles/editor.scss b/app/assets/stylesheets/page_bundles/editor.scss index 36da979ba1f..9e9723d2e5a 100644 --- a/app/assets/stylesheets/page_bundles/editor.scss +++ b/app/assets/stylesheets/page_bundles/editor.scss @@ -88,6 +88,10 @@ } } } + + .overflow-guard { + border-radius: 0 0 $border-radius-default $border-radius-default; + } } diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss index a6c08e344f9..0a856e217ef 100644 --- a/app/assets/stylesheets/page_bundles/import.scss +++ b/app/assets/stylesheets/page_bundles/import.scss @@ -4,19 +4,11 @@ $import-bar-height: $gl-spacing-scale-11; .import-table-bar { height: $import-bar-height; - top: $header-height; - - html.with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height}); - } + top: $calc-application-header-height; } .import-table { thead { - top: calc(#{$header-height} + #{$import-bar-height}); - - html.with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height} + #{$import-bar-height}); - } + top: calc(#{$calc-application-header-height} + #{$import-bar-height}); } } diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss index 493add1ea0f..fde35ab3d39 100644 --- a/app/assets/stylesheets/page_bundles/incidents.scss +++ b/app/assets/stylesheets/page_bundles/incidents.scss @@ -57,8 +57,6 @@ } .timeline-entry:not(:last-child) { - @include gl-pb-0; - .timeline-event-border { @include gl-pb-3; @include gl-border-gray-50; diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss index f364170c99f..1b98fd4df07 100644 --- a/app/assets/stylesheets/page_bundles/issuable.scss +++ b/app/assets/stylesheets/page_bundles/issuable.scss @@ -66,7 +66,7 @@ .title { padding: 0; - margin-bottom: $gl-padding; + margin-bottom: $gl-spacing-scale-4; border-bottom: 0; word-wrap: break-word; overflow-wrap: break-word; @@ -81,8 +81,6 @@ } .detail-page-description { - padding: 16px 0; - small { color: var(--gray-500, $gray-500); } @@ -92,10 +90,11 @@ color: var(--gray-500, $gray-500); display: block; margin: 16px 0 0; - font-size: 85%; + font-size: $gl-font-size-small; .author-link { - color: var(--gray-500, $gray-500); + color: var(--gray-700, $gray-700); + font-size: $gl-font-size-small; } } @@ -138,21 +137,6 @@ } } -.add-issuable-form-input-wrapper { - &.focus { - border-color: var(--gray-700, $gray-700); - @include gl-focus; - - input { - @include gl-shadow-none; - } - } - - .gl-show-field-errors &.form-control:not(textarea) { - height: auto; - } -} - /* * Following overrides are done to prevent * legacy dropdown styles from influencing @@ -181,3 +165,13 @@ border: 0; } } + +.merge-request-notification-toggle { + .gl-toggle { + @include gl-ml-auto; + } + + .gl-toggle-label { + @include gl-font-weight-normal; + } +} diff --git a/app/assets/stylesheets/page_bundles/issuable_list.scss b/app/assets/stylesheets/page_bundles/issuable_list.scss index b08e129a805..1ca0c5e7ce6 100644 --- a/app/assets/stylesheets/page_bundles/issuable_list.scss +++ b/app/assets/stylesheets/page_bundles/issuable_list.scss @@ -18,6 +18,11 @@ } } + .issuable-info, + .issuable-meta { + font-size: $gl-font-size-sm; + } + .issuable-meta { display: flex; flex-direction: column; diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss index 41515a98e0a..f39dee12126 100644 --- a/app/assets/stylesheets/page_bundles/issues_list.scss +++ b/app/assets/stylesheets/page_bundles/issues_list.scss @@ -23,11 +23,6 @@ margin-bottom: 2px; } - .issue-labels, - .author-link { - display: inline-block; - } - .icon-merge-request-unmerged { height: 13px; margin-bottom: 3px; diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 0a2b3175aa9..2c54c819543 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -16,12 +16,12 @@ @import '@gitlab/ui/src/components/base/pagination/pagination'; @import '@gitlab/ui/src/components/base/table/table'; @import '@gitlab/ui/src/components/base/tooltip/tooltip'; -@import '@gitlab/ui/src/components/base/search_box_by_type/search_box_by_type'; @import '@gitlab/ui/src/components/base/form/form_input/form_input'; @import '@gitlab/ui/src/components/base/form/form_radio/form_radio'; @import '@gitlab/ui/src/components/base/form/form_radio_group/form_radio_group'; @import '@gitlab/ui/src/components/base/form/form_checkbox/form_checkbox'; @import '@gitlab/ui/src/components/base/form/form_group/form_group'; +@import '@gitlab/ui/src/components/base/search_box_by_type/search_box_by_type'; $header-height: 40px; diff --git a/app/assets/stylesheets/page_bundles/jira_connect_users.scss b/app/assets/stylesheets/page_bundles/jira_connect_users.scss deleted file mode 100644 index 602910adad9..00000000000 --- a/app/assets/stylesheets/page_bundles/jira_connect_users.scss +++ /dev/null @@ -1 +0,0 @@ -@import '../themes/theme_indigo'; diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/page_bundles/login.scss index 360ea20733d..98fa45e0e3d 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/page_bundles/login.scss @@ -1,4 +1,5 @@ -@import 'framework/variables'; +@import 'mixins_and_variables_and_functions'; + /* Login Page */ .login-page { .container { @@ -95,11 +96,6 @@ .login-body { font-size: 13px; - input + p, - input ~ p.field-validation { - margin-top: 5px; - } - .username .validation-success { color: $green-600; } @@ -220,6 +216,10 @@ color: $red-700; } } + + .omniauth-divider { + @include omniauth-divider; + } } @include media-breakpoint-down(xs) { @@ -287,3 +287,9 @@ } } } + +@include media-breakpoint-down(sm) { + .sm-bg-gray-10 { + @include gl-bg-gray-10; + } +} diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index fe64e4f2fe8..61f8f0de557 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -1,6 +1,5 @@ @import 'mixins_and_variables_and_functions'; -$mr-review-bar-height: calc(2rem + 13px); $mr-widget-margin-left: 40px; $mr-widget-min-height: 69px; $tabs-holder-z-index: 250; @@ -181,6 +180,10 @@ $tabs-holder-z-index: 250; .content + .content { @include gl-border-t; } + + .notes-content { + border: 0; + } } &.inline-diff-view { @@ -242,18 +245,6 @@ $tabs-holder-z-index: 250; } } -.with-system-header { - --system-header-height: #{$system-header-height}; -} - -.with-performance-bar { - --performance-bar-height: #{$performance-bar-height}; -} - -.review-bar-visible { - --review-bar-height: #{$mr-review-bar-height}; -} - .diff-tree-list { // This 11px value should match the additional value found in // /assets/stylesheets/framework/diffs.scss @@ -264,24 +255,24 @@ $tabs-holder-z-index: 250; // If they don't match, the file tree and the diff files stick // to the top at different heights, which is a bad-looking defect $diff-file-header-top: 11px; - --initial-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); - --top-pos: var(--initial-pos); - position: -webkit-sticky; position: sticky; - top: calc(var(--top-pos) + var(--performance-bar-height, 0px)); - max-height: calc(100vh - var(--top-pos) - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); + top: calc(#{$calc-application-header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); + min-height: 300px; + height: calc(#{$calc-application-viewport-height} - (#{$mr-tabs-height} + #{$diff-file-header-top})); .drag-handle { bottom: 16px; } &.is-sidebar-moved { - --top-pos: calc(var(--initial-pos) + 26px); + height: calc(#{$calc-application-viewport-height} - (#{$mr-sticky-header-height} + #{$diff-file-header-top})); + top: calc(#{$calc-application-header-height} + #{$mr-sticky-header-height} + #{$diff-file-header-top}); } } .tree-list-holder { + --file-row-height: 32px; height: 100%; .file-row { @@ -297,6 +288,10 @@ $tabs-holder-z-index: 250; overflow-x: auto; } +.tree-list-gutter { + height: $grid-size; +} + .tree-list-search { flex: 0 0 34px; @@ -322,6 +317,12 @@ $tabs-holder-z-index: 250; line-height: 0; } +.file-row-header { + display: flex; + align-items: center; + height: var(--file-row-height); +} + @media (max-width: map-get($grid-breakpoints, lg)-1) { .diffs .files { .diff-tree-list { @@ -549,7 +550,7 @@ $tabs-holder-z-index: 250; border-radius: $border-radius-default; } - .mr-widget-section:not(:first-child) { + .mr-widget-section:not(:first-child) > div { border-top: solid 1px var(--border-color, $border-color); } @@ -596,10 +597,6 @@ $tabs-holder-z-index: 250; } } - label { - margin-bottom: 0; - } - .btn { font-size: $gl-font-size; } @@ -694,10 +691,6 @@ $tabs-holder-z-index: 250; margin-right: 7px; } - label { - font-weight: $gl-font-weight-normal; - } - .spacing { margin: 0 0 0 10px; } @@ -807,7 +800,7 @@ $tabs-holder-z-index: 250; .mr-widget-body, .mr-widget-content { - padding: $gl-padding; + padding: $gl-padding-12 $gl-padding; } .mr-widget-body-ready-merge { @@ -828,6 +821,11 @@ $tabs-holder-z-index: 250; } } +.mr-widget-grouped-section .report-block-container { + border-bottom-left-radius: $border-radius-default; + border-bottom-right-radius: $border-radius-default; +} + .mr-widget-extension { border-top: 1px solid var(--border-color, $border-color); background-color: var(--gray-10, $gray-10); @@ -898,15 +896,6 @@ $tabs-holder-z-index: 250; &:not(:first-child) { margin-top: $gl-padding; } - - &:not(:last-child)::before { - content: ''; - border-left: 2px solid var(--gray-10, $gray-10); - position: absolute; - bottom: -17px; - left: calc(1rem - 1px); - height: 16px; - } } .mr-version-controls { @@ -975,8 +964,8 @@ $tabs-holder-z-index: 250; .merge-request-overview { @include media-breakpoint-up(lg) { display: grid; - grid-template-columns: calc(95% - 285px) auto; - grid-gap: 5%; + grid-template-columns: calc(97% - #{$right-sidebar-width}) auto; + grid-gap: 3%; } } @@ -994,7 +983,7 @@ $tabs-holder-z-index: 250; .submit-review-dropdown { &.show .dropdown-menu { width: calc(100vw - 20px); - max-width: 650px; + max-width: 680px; max-height: calc(100vh - 50px); .gl-dropdown-inner { @@ -1004,7 +993,8 @@ $tabs-holder-z-index: 250; .md-header { .gl-tab-nav-item { color: var(--gl-text-color, $gl-text-color); - @include gl-pb-5; + @include gl-py-4; + @include gl-px-3; &:hover { @include gl-bg-none; @@ -1037,10 +1027,29 @@ $tabs-holder-z-index: 250; } .md-preview-holder { - max-height: 172px; + max-height: 182px; } } +.submit-review-dropdown-animated { + animation: review-btn-animate 300ms ease-in; +} + +@include keyframes(review-btn-animate) { + 0% { + transform: scale(1); + } + + 75% { + transform: scale(1.2); + } + + 100% { + transform: scale(1); + } +} + + .mr-widget-merge-details { *, & { @@ -1069,16 +1078,7 @@ $tabs-holder-z-index: 250; .merge-request-sticky-header { z-index: 204; - box-shadow: 0 1px 2px $issue-boards-card-shadow; - --width: calc(100% - #{$contextual-sidebar-width}); - - @include media-breakpoint-down(lg) { - --width: calc(100% - #{$contextual-sidebar-collapsed-width}); - } -} - -.page-with-icon-sidebar .issue-sticky-header { - --width: calc(100% - #{$contextual-sidebar-collapsed-width}); + height: $mr-sticky-header-height; } .merge-request-notification-toggle { @@ -1123,7 +1123,7 @@ $tabs-holder-z-index: 250; .review-bar-component { position: fixed; - bottom: 0; + bottom: $calc-application-footer-height; left: 0; z-index: $zindex-dropdown-menu; display: flex; @@ -1131,7 +1131,7 @@ $tabs-holder-z-index: 250; width: 100%; height: $toggle-sidebar-height; padding-left: $contextual-sidebar-width; - padding-right: $gutter_collapsed_width; + padding-right: $right-sidebar-collapsed-width; background: var(--white, $white); border-top: 1px solid var(--border-color, $border-color); transition: padding $gl-transition-duration-medium; @@ -1140,10 +1140,6 @@ $tabs-holder-z-index: 250; padding-left: $contextual-sidebar-collapsed-width; } - .right-sidebar-expanded & { - padding-right: $gutter_width; - } - @media (max-width: map-get($grid-breakpoints, sm)-1) { padding-left: 0; padding-right: 0; @@ -1208,3 +1204,70 @@ $tabs-holder-z-index: 250; } } } + +.mr-state-loader { + svg { + vertical-align: middle; + } + + .gl-skeleton-loader { + max-width: 334px; + } +} + +.mr-system-note-icon { + width: 20px; + height: 20px; + margin-left: 6px; + + &.gl-bg-green-100 { + --bg-color: var(--green-100, #{$green-100}); + } + + &.gl-bg-red-100 { + --bg-color: var(--red-100, #{$red-100}); + } + + &.gl-bg-blue-100 { + --bg-color: var(--blue-100, #{$blue-100}); + } +} + +.mr-system-note-icon:not(.mr-system-note-empty)::before { + content: ''; + display: block; + position: absolute; + left: calc(50% - 1px); + bottom: 100%; + width: 2px; + height: 20px; + background: linear-gradient(to bottom, transparent, var(--bg-color)); + + .system-note:first-child & { + display: none; + } +} + +.mr-system-note-icon:not(.mr-system-note-empty)::after { + content: ''; + display: block; + position: absolute; + left: calc(50% - 1px); + top: 100%; + width: 2px; + height: 20px; + background: linear-gradient(to bottom, var(--bg-color), transparent); + + .system-note:last-child & { + display: none; + } +} + +.mr-system-note-empty { + width: 8px; + height: 8px; + margin-top: 6px; + margin-left: 12px; + margin-right: 8px; + border: 2px solid var(--gray-50, $gray-50); +} diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index 9ee6d17cb50..8dc07715989 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -120,10 +120,6 @@ } } -.milestone-detail { - border-bottom: 1px solid var(--border-color, $border-color); -} - @include media-breakpoint-down(md) { .milestone-actions { @include clearfix(); @@ -135,42 +131,6 @@ } } -.milestone-page-header { - display: flex; - flex-flow: row; - align-items: center; - flex-wrap: wrap; - - .milestone-buttons { - margin-left: auto; - order: 2; - - .verbose { - display: none; - } - } - - .header-text-content { - order: 3; - width: 100%; - } - - @include media-breakpoint-up(xs) { - .milestone-buttons .verbose { - display: inline; - } - - .header-text-content { - order: 2; - width: auto; - } - - .milestone-buttons { - order: 3; - } - } -} - .issuable-row { background-color: var(--white, $white); } diff --git a/app/assets/stylesheets/pages/ml_experiment_tracking.scss b/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss index 3c025b5d23f..d6f71b12cd9 100644 --- a/app/assets/stylesheets/pages/ml_experiment_tracking.scss +++ b/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss @@ -1,26 +1,10 @@ @import '../page_bundles/mixins_and_variables_and_functions'; -.ml-experiment-row { - .title { - margin-bottom: $gl-spacing-scale-1; - font-weight: $gl-font-weight-bold; - } - - .ml-experiment-info { - color: $gl-text-color-secondary; - } - - a { - color: $gl-text-color; - } -} - table.ml-candidate-table { - table-layout: fixed; - tr td, tr th { padding: $gl-padding-8; + min-width: 100px; > * { @include gl-display-block; diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss index f08d6e3ca95..51bffd99dd0 100644 --- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss +++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss @@ -57,10 +57,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi @include gl-h-full; @include gl-w-full; @include gl-overflow-x-auto; - @include gl-border-gray-100; - @include gl-border-1; - @include gl-border-solid; - @include gl-rounded-base; } .timeline-section { @@ -68,15 +64,12 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi @include gl-top-0; z-index: 20; - .timeline-header-blank, + .timeline-header-label, .timeline-header-item { @include gl-float-left; - height: $header-item-height; - border-bottom: $border-style; - background-color: var(--white, $white); } - .timeline-header-blank { + .timeline-header-label { @include gl-sticky; @include gl-top-0; @include gl-left-0; @@ -85,13 +78,8 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi } .timeline-header-item { - &:last-of-type .item-label { - @include gl-border-r-0; - } - - .item-label, .item-sublabel .sublabel-value { - color: var(--gray-400, $gray-400); + color: var(--gray-700, $gray-700); @include gl-font-weight-normal; &.label-dark { @@ -103,11 +91,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi } } - .item-label { - border-right: $border-style; - border-bottom: $border-style; - } - .item-sublabel { @include gl-relative; @include gl-display-flex; @@ -118,7 +101,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi text-align: center; @include gl-font-base; - padding: 2px 0; } } @@ -131,10 +113,15 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi @include gl-rounded-full; transform: translate(-50%, 50%); } + + &:first-of-type { + .week-item-sublabel .sublabel-value:nth-of-type(7) { + @include gl-border-r; + } + } } } -.timeline-section .timeline-header-blank, .list-section .details-cell { &::after { @include gl-h-full; @@ -159,7 +146,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi @include gl-left-0; width: $details-cell-width; @include gl-font-base; - background-color: var(--white, $white); z-index: 10; } @@ -182,3 +168,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi transform: translateX(-50%); } } + +.rotation-asignee-container { + overflow-x: clip; +} diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss index fc745433f1b..dfc86a73635 100644 --- a/app/assets/stylesheets/page_bundles/profile.scss +++ b/app/assets/stylesheets/page_bundles/profile.scss @@ -135,10 +135,9 @@ } } +// Limits the width of the user bio for readability. .profile-user-bio { - // Limits the width of the user bio for readability. max-width: 600px; - margin: 10px auto; } .user-calendar { @@ -172,7 +171,6 @@ } .avatar-holder { - width: 90px; margin: 0 auto 10px; } } diff --git a/app/assets/stylesheets/pages/storage_quota.scss b/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss index 347bd1316c0..8f2cbc402c9 100644 --- a/app/assets/stylesheets/pages/storage_quota.scss +++ b/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + .storage-type-usage { &:first-child { @include gl-rounded-top-left-base; @@ -12,6 +14,6 @@ &:not(:last-child) { @include gl-border-r-2; @include gl-border-r-solid; - @include gl-border-white; + border-right-color: var(--white, $white); } } diff --git a/app/assets/stylesheets/page_bundles/releases.scss b/app/assets/stylesheets/page_bundles/releases.scss index 24ffbf9b90c..c011ec3fe4c 100644 --- a/app/assets/stylesheets/page_bundles/releases.scss +++ b/app/assets/stylesheets/page_bundles/releases.scss @@ -10,3 +10,17 @@ min-height: 46px; } } + +.release-tag-selector { + .popover-body { + padding-left: 0; + padding-right: 0; + padding-bottom: 0; + min-width: $gl-dropdown-width; + max-width: $gl-dropdown-width; + } + + .release-tag-list { + max-height: $dropdown-max-height; + } +} diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss index cde570cfb0f..d37e87b5cd5 100644 --- a/app/assets/stylesheets/page_bundles/search.scss +++ b/app/assets/stylesheets/page_bundles/search.scss @@ -21,18 +21,18 @@ $border-radius-medium: 3px; } } +.language-filter-checkbox { + .custom-control-label { + flex-grow: 1; + } +} + .search-sidebar { @include media-breakpoint-up(md) { min-width: $search-sidebar-min-width; max-width: $search-sidebar-max-width; } - .language-filter-checkbox { - .custom-control-label { - flex-grow: 1; - } - } - .language-filter-max-height { max-height: $language-filter-max-height; } diff --git a/app/assets/stylesheets/page_bundles/settings.scss b/app/assets/stylesheets/page_bundles/settings.scss index 8978b8d798b..9a0d7880734 100644 --- a/app/assets/stylesheets/page_bundles/settings.scss +++ b/app/assets/stylesheets/page_bundles/settings.scss @@ -138,42 +138,32 @@ border-radius: $gl-border-radius-base; } -.prometheus-metrics-monitoring { - .card { - .card-toggle { - width: 14px; - } +.prometheus-metrics-monitoring { + .gl-card { .badge.badge-pill { font-size: 12px; line-height: 12px; } - .card-header .label-count { + .gl-card-header .label-count { color: var(--white, $white); background: var(--gray-800, $gray-800); } - .card-body { - padding: 0; - } - .flash-container { margin-bottom: 0; cursor: default; - .flash-notice { + .flash-notice, + .flash-warning { + margin-top: 0; border-radius: 0; } } } .custom-monitored-metrics { - .card-header { - display: flex; - align-items: center; - } - .custom-metric { display: flex; align-items: center; diff --git a/app/assets/stylesheets/page_bundles/signup.scss b/app/assets/stylesheets/page_bundles/signup.scss index 4fc671dace8..2bb3ff77132 100644 --- a/app/assets/stylesheets/page_bundles/signup.scss +++ b/app/assets/stylesheets/page_bundles/signup.scss @@ -9,21 +9,7 @@ } .omniauth-divider { - &::before, - &::after { - content: ''; - flex: 1; - border-bottom: 1px solid var(--gray-100, $gray-100); - margin: $gl-padding-24 0; - } - - &::before { - margin-right: $gl-padding; - } - - &::after { - margin-left: $gl-padding; - } + @include omniauth-divider; } .decline-page { diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss index 50d9684c7d2..a13b8704095 100644 --- a/app/assets/stylesheets/page_bundles/tree.scss +++ b/app/assets/stylesheets/page_bundles/tree.scss @@ -6,7 +6,7 @@ .tree-holder { .nav-block { - margin: 16px 0; + margin: $gl-spacing-scale-2 0 $gl-spacing-scale-5; .tree-ref-holder { margin-right: 15px; @@ -103,7 +103,6 @@ tr { border-bottom: 1px solid var(--gray-50, $gray-50); - border-top: 1px solid var(--gray-50, $gray-50); &:last-of-type { border-bottom-color: transparent; diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss index 9bbea48d2c0..69a3ec94fda 100644 --- a/app/assets/stylesheets/page_bundles/wiki.scss +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -102,8 +102,43 @@ } } - .active > a { - color: var(--black, $black); + .active > .wiki-list { + a, + .wiki-list-expand-button, + .wiki-list-collapse-button { + color: $black; + } + } + + .wiki-list { + height: $gl-spacing-scale-8; + + &:hover { + background: $gray-10; + + .wiki-list-create-child-button { + display: block; + box-shadow: none; + + &:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px $blue-400; + } + + &:active { + background: $gray-100 !important; + box-shadow: 0 0 0 1px #fff, 0 0 0 3px $blue-400; + } + } + } + } + + .wiki-list-expand-button, + .wiki-list-collapse-button { + color: $gray-400; + + &:hover { + color: $black; + } } ul.wiki-pages, @@ -113,12 +148,8 @@ margin: 0; } - ul.wiki-pages li { - margin: 5px 0 10px; - } - ul.wiki-pages ul { - padding-left: 15px; + padding-left: 20px; } .wiki-sidebar-header { @@ -153,3 +184,44 @@ ul.wiki-pages-list.content-list { .wiki-form .markdown-area { max-height: 55vh; } + +.wiki-list { + .wiki-list-create-child-button { + display: none; + } + + .wiki-list-expand-button, + .wiki-list-collapse-button { + left: -$gl-spacing-scale-5; + } + + .wiki-list-expand-button { + display: none; + } + + &.collapsed { + .wiki-list-collapse-button { + display: none; + } + + .wiki-list-expand-button { + display: block; + } + } + + &.collapsed + ul { + display: none; + } +} + +.drawio-editor { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 100vw; + height: 100vh; + border: 0; + z-index: 1100; + visibility: hidden; +} diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index 07a0cf3f367..ecbb872e1df 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -87,9 +87,20 @@ } } -.work-item-notes { - .discussion-notes ul.notes li.toggle-replies-widget { - // offset for .timeline-content padding + an extra 1px for border width - margin: -5px -9px; +// sticky error placement for errors in modals , by default it is 83px for full view +#work-item-detail-modal { + .flash-container.flash-container-page.sticky { + top: -8px; + } +} + + +.work-item-notifications-form { + .gl-toggle { + @include gl-ml-auto; + } + + .gl-toggle-label { + @include gl-font-weight-normal; } } diff --git a/app/assets/stylesheets/pages/colors.scss b/app/assets/stylesheets/pages/colors.scss index d1917948c88..85c1f7da07f 100644 --- a/app/assets/stylesheets/pages/colors.scss +++ b/app/assets/stylesheets/pages/colors.scss @@ -1,5 +1,4 @@ .color-item { - @include gl-align-items-center; @include gl-display-flex; } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 7d465dbcc04..b25a5b1c493 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -71,18 +71,6 @@ } } -.commit-header { - padding: 5px 10px; - background-color: $gray-light; - border-bottom: 1px solid $gray-darker; - border-top: 1px solid $gray-darker; - font-size: 14px; - - &:first-child { - border-top-width: 0; - } -} - .commit-row-title { .str-truncated { max-width: 70%; @@ -270,6 +258,10 @@ &:hover { @include gl-text-decoration-none; } + + .header-main-content & { + @include gl-mr-2; + } } .gpg-popover-certificate-details { @@ -328,3 +320,18 @@ height: 100%; } } + +.add-review-item-modal { + .modal-content { + position: absolute; + top: 5%; + } + + .title-hint-text { + color: $gl-text-color-secondary; + } + + .gl-filtered-search-suggestion-list.dropdown-menu { + width: $gl-max-dropdown-max-height; + } +} diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 75c81b74ba7..36efe42aed1 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -77,8 +77,7 @@ ul.related-merge-requests > li gl-emoji { .issue { &.closed, &.merged { - background: $gray-light; - border-color: $border-color; + background: $gray-10; } } @@ -236,28 +235,25 @@ ul.related-merge-requests > li gl-emoji { outline: none; &::after { + @include gl-dark-invert-keep-hue; content: image-url('icon_anchor.svg'); visibility: hidden; } } &:hover > a.anchor::after { + position: relative; + top: -3px; visibility: visible; } } } .issue-sticky-header { - --width: 100%; - - @include gl-left-0; - width: var(--width); - top: $header-height; - - // collapsed right sidebar - @include media-breakpoint-up(sm) { - --width: calc(100% - #{$gutter-collapsed-width}); - } + left: var(--application-bar-left); + right: var(--application-bar-right); + width: auto; + top: $calc-application-header-height; } .limit-container-width { @@ -266,47 +262,6 @@ ul.related-merge-requests > li gl-emoji { } } -.with-performance-bar .issue-sticky-header { - top: calc(#{$header-height} + #{$performance-bar-height}); -} - -@include media-breakpoint-up(md) { - // collapsed left sidebar + collapsed right sidebar - .issue-sticky-header { - left: $contextual-sidebar-collapsed-width; - --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); - } - - // collapsed left sidebar + expanded right sidebar - .right-sidebar-expanded .issue-sticky-header { - --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); - } -} - -@include media-breakpoint-up(xl) { - // expanded left sidebar + collapsed right sidebar - .issue-sticky-header { - left: $contextual-sidebar-width; - --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width}); - } - - // collapsed left sidebar + collapsed right sidebar - .page-with-icon-sidebar .issue-sticky-header { - left: $contextual-sidebar-collapsed-width; - --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); - } - - // expanded left sidebar + expanded right sidebar - .right-sidebar-expanded .issue-sticky-header { - --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width}); - } - - // collapsed left sidebar + expanded right sidebar - .right-sidebar-expanded.page-with-icon-sidebar .issue-sticky-header { - --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); - } -} - .issuable-header-slide-enter-active, .issuable-header-slide-leave-active { @include gl-transition-medium; diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index bd66319d78f..15d4a0fec9a 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -1,5 +1,5 @@ .suggest-colors { - margin-top: 5px; + padding-top: 3px; a { border-radius: 4px; @@ -9,23 +9,50 @@ margin-right: 10px; margin-bottom: 10px; text-decoration: none; + + &:focus, + &:focus:active { + position: relative; + z-index: 1; + @include gl-focus; + } } &.suggest-colors-dropdown { margin-top: 10px; margin-bottom: 10px; - border-radius: $border-radius-base; - overflow: hidden; a { border-radius: 0; width: (100% / 7); margin-right: 0; margin-bottom: -5px; + + &:first-of-type { + border-top-left-radius: $border-radius-base; + } + + &:nth-of-type(7) { + border-top-right-radius: $border-radius-base; + } + + &:nth-last-child(7) { + border-bottom-left-radius: $border-radius-base; + } + + &:last-of-type { + border-bottom-right-radius: $border-radius-base; + } } } } +.labels-select-contents-create { + .dropdown-input { + margin-bottom: 4px; + } +} + .dropdown-menu-labels { .dropdown-content { max-height: 135px; @@ -44,21 +71,7 @@ .dropdown-label-color-input { position: relative; - margin-bottom: 10px; - - &.is-active { - padding-left: 32px; - } -} - -.dropdown-label-color-preview { - position: absolute; - left: 0; - top: 0; - width: 32px; - height: 32px; - border-top-left-radius: $border-radius-base; - border-bottom-left-radius: $border-radius-base; + margin-bottom: 8px; } .color-label { @@ -72,13 +85,19 @@ padding: 0; margin-bottom: 0; - > li:not(.empty-message):not(.no-border) { - background-color: $white; + > li:not(.empty-message):not(.no-border) .label-content { display: flex; justify-content: space-between; .prioritized-labels:not(.is-not-draggable) & { cursor: grab; + border: 1px solid transparent; + + &:hover, + &:focus-within { + background-color: $white; + border-color: $gray-50; + } &:active { cursor: grabbing; @@ -92,6 +111,10 @@ } } +.label-list-item:not(:last-of-type) { + border-bottom: 1px solid $border-color; +} + .prioritized-labels .add-priority, .other-labels .remove-priority { display: none; @@ -102,6 +125,7 @@ } .label-actions-list { + font-size: 0; list-style: none; flex-shrink: 0; text-align: right; @@ -119,7 +143,7 @@ font-size: $label-font-size; } -.label-list-item { +.label-content { .label-name { width: 200px; @@ -144,7 +168,7 @@ @media (max-width: map-get($grid-breakpoints, md)-1) { .manage-labels-list { - > li:not(.empty-message):not(.no-border) { + > li:not(.empty-message):not(.no-border) .label-content { flex-wrap: wrap; } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 5b8b850ba35..0a17b2c47a4 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -209,19 +209,11 @@ $comparison-empty-state-height: 62px; } .merge-request-tabs-holder { - top: $header-height; + top: $calc-application-header-height; z-index: $tabs-holder-z-index; background-color: $body-bg; border-bottom: 1px solid $border-color; - .with-system-header & { - top: calc(#{$header-height} + #{$system-header-height}); - } - - .with-system-header.with-performance-bar & { - top: calc(#{$header-height} + #{$system-header-height} + #{$performance-bar-height}); - } - @include media-breakpoint-up(md) { position: sticky; } @@ -240,12 +232,6 @@ $comparison-empty-state-height: 62px; } } -.with-performance-bar { - .merge-request-tabs-holder { - top: calc(#{$header-height} + #{$performance-bar-height}); - } -} - .limit-container-width { .merge-request-tabs-container { max-width: $limited-layout-width; @@ -336,11 +322,7 @@ $comparison-empty-state-height: 62px; .mr-compare { .diff-file .file-title-flex-parent { - top: calc(#{$header-height} + #{$mr-tabs-height}); - - .with-performance-bar & { - top: calc(#{$performance-bar-height} + #{$header-height} + #{$mr-tabs-height}); - } + top: calc(#{$calc-application-header-height} + #{$mr-tabs-height}); } } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index adeab227670..d029aa01e37 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -31,7 +31,7 @@ .note-textarea { display: block; - padding: 10px 1px; + padding: 10px 16px; color: $gl-text-color; font-family: $regular-font; border: 0; @@ -48,9 +48,8 @@ .common-note-form { .md-area { - padding: 0 $gl-padding; border: 1px solid $border-color; - border-radius: $border-radius-base; + border-radius: $border-radius-large; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; background-color: $white; @@ -81,6 +80,10 @@ @include gl-focus; } +.md-header { + min-height: 32px; +} + .md-header .nav-links { display: flex; flex-flow: row wrap; @@ -92,6 +95,11 @@ } } + +.md-header .gl-tabs-nav { + border-bottom: 0; +} + .issuable-note-warning { color: $orange-600; background-color: $orange-50; @@ -305,7 +313,6 @@ table { .comment-toolbar { color: $gl-text-color-secondary; - border-top: 1px solid $border-color; } .toolbar-button { @@ -394,6 +401,10 @@ table { float: left; margin-top: 5px; } + + button { + font-size: $gl-font-size-sm !important; + } } .uploading-error-icon, diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 5d03281a30a..b31ee069236 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -1,15 +1,24 @@ -$system-note-icon-size: 2rem; +$avatar-icon-size: 2rem; +$avatar-m-top: 0.5rem; +$avatar-m-ratio: 2; +$avatar-m-left: $avatar-m-top * $avatar-m-ratio; + +$system-note-icon-size: 1.5rem; $system-note-svg-size: 1rem; +$icon-size-diff: $avatar-icon-size - $system-note-icon-size; + +$system-note-icon-m-top: $avatar-m-top + $icon-size-diff - 1.3rem; +$system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; @mixin vertical-line($left) { &::before { content: ''; border-left: 2px solid var(--gray-50, $gray-50); position: absolute; - top: $gl-padding-6; + top: 16px; bottom: 0; left: calc(#{$left} - 1px); - height: calc(100% + 1.5rem); + height: calc(100% + 20px); } } @@ -21,8 +30,30 @@ $system-note-svg-size: 1rem; .issuable-discussion:not(.incident-timeline-events), .limited-width-notes { - .main-notes-list > li.timeline-entry:not(:last-of-type) { - @include vertical-line(1rem); + .main-notes-list::before, + .timeline-entry:last-child::before { + content: ''; + position: absolute; + width: 2px; + left: 15px; + top: 15px; + height: calc(100% - 15px); + } + + .main-notes-list::before { + background: var(--gray-50, $gray-50); + } + + .timeline-entry:last-child::before { + background: var(--white); + + .gl-dark & { + background: var(--gray-10); + } + + &.note-comment { + top: 30px; + } } } @@ -36,6 +67,15 @@ $system-note-svg-size: 1rem; &.timeline > .timeline-entry { margin: $gl-padding 0; + &.system-note { + margin-top: $gl-spacing-scale-1; + margin-bottom: 0; + + .note-header-info { + padding-left: $gl-spacing-scale-4; + } + } + &.system-note, &.note-form { border: 0; @@ -45,6 +85,10 @@ $system-note-svg-size: 1rem; height: 2rem; } + .gl-avatar { + border-color: var(--gray-50, $gray-50); + } + &.note-comment, &.note-skeleton, .draft-note { @@ -113,7 +157,7 @@ $system-note-svg-size: 1rem; background-color: $white; .timeline-content:not(.flash-container) { - padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding; + padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 18px; } .timeline-discussion-body-footer { @@ -247,7 +291,10 @@ $system-note-svg-size: 1rem; &.being-posted { pointer-events: none; - opacity: 0.5; + + .timeline-entry-inner { + opacity: 0.5; + } .dummy-avatar { background-color: $gray-100; @@ -270,7 +317,7 @@ $system-note-svg-size: 1rem; } &.is-editing { - .note-header, + .note-actions, .note-text, .edited-text { display: none; @@ -325,6 +372,7 @@ $system-note-svg-size: 1rem; .note-header-info { padding-bottom: 0; + padding-top: 0; } &.timeline-entry::after { @@ -351,9 +399,7 @@ $system-note-svg-size: 1rem; } .timeline-content { - @include notes-media('min', map-get($grid-breakpoints, sm)) { - margin-left: 30px; - } + margin-left: 30px; } .note-header { @@ -432,40 +478,6 @@ $system-note-svg-size: 1rem; } } } - - .timeline-icon { - float: left; - } - - .system-note, - .discussion-filter-note { - .timeline-icon { - display: flex; - align-items: center; - background-color: $gray-50; - width: $system-note-icon-size; - height: $system-note-icon-size; - border: 1px solid $gray-50; - border-radius: $system-note-icon-size; - margin: -6px 0 0; - - svg { - width: $system-note-svg-size; - height: $system-note-svg-size; - fill: $gray-600; - display: block; - margin: 0 auto; - } - } - } - - .discussion-filter-note { - .timeline-icon { - width: $system-note-icon-size; - height: $system-note-icon-size; - margin-top: -8px; - } - } } .card .notes { @@ -475,7 +487,7 @@ $system-note-svg-size: 1rem; } .timeline-icon { - margin: 8px 0 0 14px; + margin: 20px 0 0 28px; } } @@ -488,18 +500,6 @@ $system-note-svg-size: 1rem; border-radius: 0; margin-left: 2.5rem; - @media (min-width: map-get($grid-breakpoints, md)) { - --initial-top: calc(#{$header-height} + #{$mr-tabs-height}); - - &.is-sidebar-moved { - --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 24px}); - } - - .with-performance-bar & { - --top: 123px; - } - } - &:hover { background-color: $gray-light; } @@ -585,15 +585,6 @@ $system-note-svg-size: 1rem; .system-note { background-color: transparent; padding: 0; - - .timeline-icon { - margin-top: -2px; - } - - .timeline-entry-inner .timeline-icon { - margin-top: $grid-size; - margin-left: 14px; - } } } @@ -625,10 +616,6 @@ $system-note-svg-size: 1rem; padding: 0; vertical-align: top; white-space: normal; - - // Fixes subpixel rounding issue https://gitlab.com/gitlab-org/gitlab-foss/issues/53973 - // background-color is needed for dark code preference - padding-bottom: 1px; background-color: $white; &.parallel { @@ -655,6 +642,14 @@ $system-note-svg-size: 1rem; } } } + + .diff-grid-comments:last-child { + .notes-content { + border-bottom-width: 0; + border-bottom-left-radius: #{$border-radius-default - 1px}; + border-bottom-right-radius: #{$border-radius-default - 1px}; + } + } } .diffs { @@ -672,7 +667,7 @@ $system-note-svg-size: 1rem; .discussion-reply-holder { border-top: 0; - border-radius: 0 0 $border-radius-default $border-radius-default; + border-radius: 0 0 $gl-border-radius-base $gl-border-radius-base; position: relative; .discussion-form { @@ -1134,7 +1129,7 @@ $system-note-svg-size: 1rem; } .timeline-avatar { - margin: $gl-padding-8 0 0 $gl-padding; + margin: $avatar-m-top 0 0 $avatar-m-left; } } diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 8e4dd39e498..41b022437bb 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -64,13 +64,6 @@ } } -table.u2f-registrations { - th:not(:last-child), - td:not(:last-child) { - border-right: solid 1px transparent; - } -} - .codes { padding-top: 14px; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index ee91d955019..ff1987f35b3 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -291,9 +291,9 @@ .project-cell { @include gl-display-table-cell; - @include gl-border-b; @include gl-vertical-align-top; @include gl-py-4; + border-bottom: 1px solid $gray-50; } .project-row:last-of-type { @@ -654,3 +654,17 @@ } } } + +.projects-list-item { + .description { + max-height: $gl-spacing-scale-8; + + p { + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + /* stylelint-disable-next-line value-no-vendor-prefix */ + display: -webkit-box; + } + } +} diff --git a/app/assets/stylesheets/pages/registry.scss b/app/assets/stylesheets/pages/registry.scss index 31c6dbd2970..36b86771295 100644 --- a/app/assets/stylesheets/pages/registry.scss +++ b/app/assets/stylesheets/pages/registry.scss @@ -2,7 +2,7 @@ // 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 { +.breadcrumbs .gl-breadcrumbs { padding: 0; box-shadow: none; } diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 2d78ab82b7d..3b5e234c6b8 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -1,23 +1,4 @@ -.integration-settings-form { - .card.card-body, - .info-well { - padding: $gl-padding / 2; - box-shadow: none; - } - - .svg-container { - max-width: 150px; - } -} - .visibility-level-setting { - .option-title { - font-weight: $gl-font-weight-normal; - display: inline-block; - color: var(--gl-text-color, $gl-text-color); - vertical-align: top; - } - .option-description, .option-disabled-reason { color: var(--gray-700, $gray-700); @@ -69,30 +50,16 @@ } } -.push-pull-table { - margin-top: 1em; -} - .ci-variable-table, .deploy-freeze-table, .ci-secure-files-table { table { - thead { - border-bottom: 1px solid var(--gray-50, $gray-50); - } - tr { td, th { padding-left: 0; } - th { - background-color: transparent; - font-weight: $gl-font-weight-bold; - border: 0; - } - // When tables are "stacked", restore td padding @media(max-width: map-get($grid-breakpoints, lg)) { td { @@ -108,9 +75,3 @@ } } } - -.gl-md-flex-wrap-nowrap.gl-md-flex-wrap-nowrap { - @include gl-media-breakpoint-up(md) { - @include gl-flex-wrap-nowrap; - } -} diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index 5024b082b99..cb153122767 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -128,6 +128,3 @@ color: $black; } -html.with-performance-bar .nav-sidebar { - top: calc(#{$header-height} + #{$performance-bar-height}); -} diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index ab86a2f69dd..84181a00f34 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -25,6 +25,7 @@ nav, nav.navbar-collapse, nav.navbar-collapse.collapse, .nav-sidebar, +.super-sidebar, .profiler-results, .tree-ref-holder, .tree-holder .breadcrumb, @@ -62,9 +63,5 @@ a[href]::after { } .with-performance-bar .layout-page { - margin-top: 0; -} - -.content-wrapper-margin { - margin-top: 0; + padding-top: 0; } diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 3b28025053b..74ffebd44ec 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -119,7 +119,7 @@ kbd kbd { .form-control { display: block; width: 100%; - height: 34px; + height: 32px; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 400; @@ -132,10 +132,6 @@ kbd kbd { } @media (prefers-reduced-motion: reduce) { } -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #ececef; -} .form-control::placeholder { color: #a4a3a8; opacity: 1; @@ -144,18 +140,6 @@ kbd kbd { background-color: #24232a; opacity: 1; } -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -@media (min-width: 576px) { - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } -} .btn { display: inline-block; font-weight: 400; @@ -352,6 +336,7 @@ kbd kbd { border: 0; } .gl-avatar { + display: inline-flex; border-width: 1px; border-style: solid; border-color: rgba(251, 250, 253, 0.08); @@ -566,17 +551,13 @@ strong { svg { vertical-align: baseline; } -.form-control, -.search form { +.form-control { font-size: 0.875rem; } .hidden { display: none !important; visibility: hidden !important; } -.hide { - display: none; -} .badge:not(.gl-badge) { padding: 4px 5px; font-size: 12px; @@ -597,6 +578,14 @@ svg { html { overflow-y: scroll; } +.layout-page { + padding-top: calc( + var(--header-height, 48px) + + calc(var(--system-header-height) + var(--performance-bar-height)) + + var(--top-bar-height) + ); + padding-bottom: var(--system-footer-height); +} @media (min-width: 576px) { .logged-out-marketing-header { --header-height: 72px; @@ -636,39 +625,40 @@ html { color: #bfbfc3; vertical-align: baseline; } -.gl-font-sm { - font-size: 12px; -} -.dropdown { - position: relative; +:root { + --performance-bar-height: 0px; + --system-header-height: 0px; + --top-bar-height: 0px; + --system-footer-height: 0px; + --mr-review-bar-height: 0px; } -.dropdown-menu-toggle:active { - box-shadow: 0 0 0 1px #333238, 0 0 0 3px #1f75cb; - outline: none; +.with-top-bar { + --top-bar-height: 48px; } -.search-input-container .dropdown-menu { - margin-top: 11px; +@media (min-width: 768px) { + .page-with-contextual-sidebar { + --application-bar-left: 56px; + } } -.dropdown-menu-toggle { - padding: 6px 8px 6px 10px; - background-color: #333238; - color: #ececef; - font-size: 14px; - text-align: left; - border: 1px solid #434248; - border-radius: 0.25rem; - white-space: nowrap; +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + --application-bar-left: 256px; + } + .page-with-icon-sidebar { + --application-bar-left: 56px; + } + .page-with-super-sidebar { + --application-bar-left: 256px; + } + .page-with-super-sidebar-collapsed { + --application-bar-left: 0px; + } } -.dropdown-menu-toggle.no-outline { - outline: 0; +.gl-font-sm { + font-size: 12px; } -.dropdown-menu-toggle.dropdown-menu-toggle { - justify-content: flex-start; - overflow: hidden; - padding-right: 25px; +.dropdown { position: relative; - text-overflow: ellipsis; - width: 160px; } .dropdown-menu { display: none; @@ -751,11 +741,6 @@ html { min-width: 100%; } } -@media (max-width: 767.98px) { - .dropdown-menu-toggle.dropdown-menu-toggle { - width: 100%; - } -} input { border-radius: 0.25rem; color: #ececef; @@ -794,7 +779,7 @@ kbd { min-height: var(--header-height, 48px); border: 0; position: fixed; - top: 0; + top: calc(var(--system-header-height) + var(--performance-bar-height)); left: 0; right: 0; border-radius: 0; @@ -1076,11 +1061,15 @@ kbd { } .nav-sidebar { position: fixed; - bottom: 0; + bottom: var(--system-footer-height); left: 0; z-index: 600; width: 256px; - top: var(--header-height, 48px); + top: calc( + var(--header-height, 48px) + + calc(var(--system-header-height) + var(--performance-bar-height)) + + var(--top-bar-height) + ); background-color: #1f1e24; border-right: 1px solid #e9e9e9; transform: translate3d(0, 0, 0); @@ -1493,6 +1482,50 @@ kbd { display: none; } } +.super-sidebar { + display: flex; + flex-direction: column; + position: fixed; + top: calc( + var(--header-height, 48px) + + calc(var(--system-header-height) + var(--performance-bar-height)) + ); + bottom: var(--system-footer-height); + left: 0; + background-color: var(--gray-10, #1f1e24); + border-right: 1px solid rgba(251, 250, 253, 0.08); + transform: translate3d(0, 0, 0); + width: 256px; + z-index: 600; +} +.super-sidebar.super-sidebar-loading { + transform: translate3d(-100%, 0, 0); +} +@media (min-width: 1200px) { + .super-sidebar.super-sidebar-loading { + transform: translate3d(0, 0, 0); + } +} +@media (prefers-reduced-motion: no-preference) { +} +.page-with-super-sidebar { + padding-left: 0; +} +@media (prefers-reduced-motion: no-preference) { +} +@media (min-width: 1200px) { + .page-with-super-sidebar { + padding-left: 256px; + } +} +.page-with-super-sidebar-collapsed .super-sidebar { + transform: translate3d(-100%, 0, 0); +} +@media (min-width: 1200px) { + .page-with-super-sidebar-collapsed { + padding-left: 0; + } +} input::-moz-placeholder { color: #737278; opacity: 1; @@ -1631,7 +1664,6 @@ svg.s16 { --gray-200: #535158; --gray-700: #bfbfc3; --gray-900: #ececef; - --gl-text-color: #ececef; --border-color: #434248; --white: #333238; --black: #fff; @@ -1743,16 +1775,6 @@ body.gl-dark .header-search .keyboard-shortcut-helper { color: #ececef; background-color: rgba(236, 236, 239, 0.2); } -body.gl-dark .search form { - background-color: rgba(236, 236, 239, 0.2); -} -body.gl-dark .search .search-input::placeholder { - color: rgba(236, 236, 239, 0.8); -} -body.gl-dark .search .search-input-wrap .search-icon, -body.gl-dark .search .search-input-wrap .clear-icon { - fill: rgba(236, 236, 239, 0.8); -} body.gl-dark .nav-sidebar li.active > a { color: #ececef; } @@ -1781,17 +1803,6 @@ body.gl-dark .navbar-gitlab .header-search:active { background-color: var(--gray-100) !important; box-shadow: inset 0 0 0 1px var(--blue-200) !important; } -body.gl-dark .navbar-gitlab .search form { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--border-color); -} -body.gl-dark .navbar-gitlab .search form:active { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--blue-200); -} -body.gl-dark .navbar-gitlab .search form .search-input { - color: var(--gl-text-color); -} .tab-width-8 { tab-size: 8; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index adafe719892..c5a5d1aa289 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -119,7 +119,7 @@ kbd kbd { .form-control { display: block; width: 100%; - height: 34px; + height: 32px; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 400; @@ -132,10 +132,6 @@ kbd kbd { } @media (prefers-reduced-motion: reduce) { } -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #333238; -} .form-control::placeholder { color: #626168; opacity: 1; @@ -144,18 +140,6 @@ kbd kbd { background-color: #fbfafd; opacity: 1; } -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -@media (min-width: 576px) { - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } -} .btn { display: inline-block; font-weight: 400; @@ -352,6 +336,7 @@ kbd kbd { border: 0; } .gl-avatar { + display: inline-flex; border-width: 1px; border-style: solid; border-color: rgba(31, 30, 36, 0.08); @@ -566,17 +551,13 @@ strong { svg { vertical-align: baseline; } -.form-control, -.search form { +.form-control { font-size: 0.875rem; } .hidden { display: none !important; visibility: hidden !important; } -.hide { - display: none; -} .badge:not(.gl-badge) { padding: 4px 5px; font-size: 12px; @@ -597,6 +578,14 @@ svg { html { overflow-y: scroll; } +.layout-page { + padding-top: calc( + var(--header-height, 48px) + + calc(var(--system-header-height) + var(--performance-bar-height)) + + var(--top-bar-height) + ); + padding-bottom: var(--system-footer-height); +} @media (min-width: 576px) { .logged-out-marketing-header { --header-height: 72px; @@ -636,39 +625,40 @@ html { color: #535158; vertical-align: baseline; } -.gl-font-sm { - font-size: 12px; +:root { + --performance-bar-height: 0px; + --system-header-height: 0px; + --top-bar-height: 0px; + --system-footer-height: 0px; + --mr-review-bar-height: 0px; } -.dropdown { - position: relative; -} -.dropdown-menu-toggle:active { - box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc; - outline: none; +.with-top-bar { + --top-bar-height: 48px; } -.search-input-container .dropdown-menu { - margin-top: 11px; +@media (min-width: 768px) { + .page-with-contextual-sidebar { + --application-bar-left: 56px; + } } -.dropdown-menu-toggle { - padding: 6px 8px 6px 10px; - background-color: #fff; - color: #333238; - font-size: 14px; - text-align: left; - border: 1px solid #dcdcde; - border-radius: 0.25rem; - white-space: nowrap; +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + --application-bar-left: 256px; + } + .page-with-icon-sidebar { + --application-bar-left: 56px; + } + .page-with-super-sidebar { + --application-bar-left: 256px; + } + .page-with-super-sidebar-collapsed { + --application-bar-left: 0px; + } } -.dropdown-menu-toggle.no-outline { - outline: 0; +.gl-font-sm { + font-size: 12px; } -.dropdown-menu-toggle.dropdown-menu-toggle { - justify-content: flex-start; - overflow: hidden; - padding-right: 25px; +.dropdown { position: relative; - text-overflow: ellipsis; - width: 160px; } .dropdown-menu { display: none; @@ -751,11 +741,6 @@ html { min-width: 100%; } } -@media (max-width: 767.98px) { - .dropdown-menu-toggle.dropdown-menu-toggle { - width: 100%; - } -} input { border-radius: 0.25rem; color: #333238; @@ -794,7 +779,7 @@ kbd { min-height: var(--header-height, 48px); border: 0; position: fixed; - top: 0; + top: calc(var(--system-header-height) + var(--performance-bar-height)); left: 0; right: 0; border-radius: 0; @@ -1076,11 +1061,15 @@ kbd { } .nav-sidebar { position: fixed; - bottom: 0; + bottom: var(--system-footer-height); left: 0; z-index: 600; width: 256px; - top: var(--header-height, 48px); + top: calc( + var(--header-height, 48px) + + calc(var(--system-header-height) + var(--performance-bar-height)) + + var(--top-bar-height) + ); background-color: #fbfafd; border-right: 1px solid #e9e9e9; transform: translate3d(0, 0, 0); @@ -1493,6 +1482,50 @@ kbd { display: none; } } +.super-sidebar { + display: flex; + flex-direction: column; + position: fixed; + top: calc( + var(--header-height, 48px) + + calc(var(--system-header-height) + var(--performance-bar-height)) + ); + bottom: var(--system-footer-height); + left: 0; + background-color: var(--gray-10, #fbfafd); + border-right: 1px solid rgba(31, 30, 36, 0.08); + transform: translate3d(0, 0, 0); + width: 256px; + z-index: 600; +} +.super-sidebar.super-sidebar-loading { + transform: translate3d(-100%, 0, 0); +} +@media (min-width: 1200px) { + .super-sidebar.super-sidebar-loading { + transform: translate3d(0, 0, 0); + } +} +@media (prefers-reduced-motion: no-preference) { +} +.page-with-super-sidebar { + padding-left: 0; +} +@media (prefers-reduced-motion: no-preference) { +} +@media (min-width: 1200px) { + .page-with-super-sidebar { + padding-left: 256px; + } +} +.page-with-super-sidebar-collapsed .super-sidebar { + transform: translate3d(-100%, 0, 0); +} +@media (min-width: 1200px) { + .page-with-super-sidebar-collapsed { + padding-left: 0; + } +} input::-moz-placeholder { color: #89888d; opacity: 1; diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 3aace601c45..f676782de2a 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -192,7 +192,7 @@ hr { .form-control { display: block; width: 100%; - height: 34px; + height: 32px; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 400; @@ -205,10 +205,6 @@ hr { } @media (prefers-reduced-motion: reduce) { } -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #333238; -} .form-control::placeholder { color: #626168; opacity: 1; @@ -262,7 +258,7 @@ input.btn-block[type="button"] { display: block; min-height: 1.5rem; padding-left: 1.5rem; - color-adjust: exact; + print-color-adjust: exact; } .custom-control-input { position: absolute; @@ -303,7 +299,7 @@ input.btn-block[type="button"] { pointer-events: none; content: ""; background-color: #fff; - border: #737278 solid 1px; + border: 1px solid #737278; } .custom-control-label::after { position: absolute; @@ -313,7 +309,7 @@ input.btn-block[type="button"] { width: 1rem; height: 1rem; content: ""; - background: no-repeat 50% / 50% 50%; + background: 50% / 50% 50% no-repeat; } .custom-checkbox .custom-control-label::before { border-radius: 0.25rem; @@ -364,11 +360,6 @@ input.btn-block[type="button"] { align-items: center; justify-content: space-between; } -.clearfix::after { - display: block; - clear: both; - content: ""; -} .fixed-top { position: fixed; top: 0; @@ -434,8 +425,13 @@ input.btn-block[type="button"] { cursor: not-allowed; color: #89888d; } +.gl-form-checkbox.custom-control { + padding-left: 1rem; +} .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label { cursor: pointer; + padding-left: 0.5rem; + margin-bottom: 0.5rem; } .gl-form-checkbox.custom-control .custom-control-input @@ -444,6 +440,7 @@ input.btn-block[type="button"] { .custom-control-input ~ .custom-control-label::after { top: 0; + left: -1rem; } .gl-form-checkbox.custom-control .custom-control-input @@ -663,11 +660,17 @@ body.navless { .btn-block { width: 100%; margin: 0; - margin-bottom: 1rem; } .btn-block.btn { padding: 6px 0; } +:root { + --performance-bar-height: 0px; + --system-header-height: 0px; + --top-bar-height: 0px; + --system-footer-height: 0px; + --mr-review-bar-height: 0px; +} .tab-content { overflow: visible; } @@ -695,7 +698,11 @@ hr { } .flash-container.sticky { position: sticky; - top: 48px; + top: calc( + var(--header-height, 48px) + + calc(var(--system-header-height) + var(--performance-bar-height)) + + var(--top-bar-height) + ); z-index: 251; } .flash-container.flash-container-page { @@ -726,7 +733,7 @@ label.label-bold { color: #89888d; } .gl-show-field-errors .form-control:not(textarea) { - height: 34px; + height: 32px; } .navbar-empty { justify-content: center; @@ -761,234 +768,18 @@ input:-ms-input-placeholder { svg { fill: currentColor; } -.login-page .container { - max-width: 960px; -} -.login-page .navbar-gitlab .container { - max-width: none; -} -.login-page .flash-container { - margin-bottom: 16px; - position: relative; - top: 8px; -} -.login-page .brand-holder { - font-size: 18px; - line-height: 1.5; -} -.login-page .brand-holder p { - font-size: 16px; - color: #888; -} -.login-page .brand-holder h3 { - font-size: 22px; -} -.login-page .brand-holder img { - max-width: 100%; - margin-bottom: 30px; -} -.login-page .brand-holder a { - font-weight: 600; -} -.login-page p { - font-size: 13px; -} -.login-page .signin-text p { - margin-bottom: 0; - line-height: 1.5; -} -.login-page .borderless .login-box, -.login-page .borderless .omniauth-container { - box-shadow: none; -} -.login-page .borderless .g-recaptcha > div { - margin-left: auto; - margin-right: auto; -} -.login-page .login-box, -.login-page .omniauth-container { - box-shadow: 0 0 0 1px #dcdcde; - border-radius: 0.25rem; -} -.login-page .login-box .login-heading h3, -.login-page .omniauth-container .login-heading h3 { - font-weight: 400; - line-height: 1.5; - margin: 0 0 10px; -} -.login-page .login-box .login-footer, -.login-page .omniauth-container .login-footer { - margin-top: 10px; -} -.login-page .login-box .login-footer p:last-child, -.login-page .omniauth-container .login-footer p:last-child { - margin-bottom: 0; -} -.login-page .login-box a.forgot, -.login-page .omniauth-container a.forgot { - float: right; - padding-top: 6px; -} -.login-page .login-box .nav .active a, -.login-page .omniauth-container .nav .active a { - background: transparent; -} -.login-page .login-box .login-body, -.login-page .omniauth-container .login-body { - font-size: 13px; -} -.login-page .login-box .login-body input + p, -.login-page .login-box .login-body input ~ p.field-validation, -.login-page .omniauth-container .login-body input + p, -.login-page .omniauth-container .login-body input ~ p.field-validation { - margin-top: 5px; -} -.login-page .login-box .login-body .username .validation-success, -.login-page .omniauth-container .login-body .username .validation-success { - color: #217645; -} -.login-page .login-box .login-body .username .validation-error, -.login-page .omniauth-container .login-body .username .validation-error { - color: #dd2b0e; -} -.login-page .omniauth-container { - border-radius: 0.25rem; - font-size: 13px; -} -.login-page .omniauth-container p { - margin: 0; -} -.login-page .omniauth-container form { - padding: 0; - border: 0; - background: none; -} -.login-page .new-session-tabs { - display: flex; - box-shadow: 0 0 0 1px #dcdcde; - border-top-right-radius: 4px; - border-top-left-radius: 4px; -} -.login-page .new-session-tabs.nav-links-unboxed { - border-color: transparent; - box-shadow: none; -} -.login-page .new-session-tabs.nav-links-unboxed .nav-item { - border-left: 0; - border-right: 0; - border-bottom: 1px solid #dcdcde; - background-color: transparent; -} -.login-page .new-session-tabs.custom-provider-tabs { - flex-wrap: wrap; -} -.login-page .new-session-tabs.custom-provider-tabs li { - min-width: 85px; - flex-basis: auto; -} -.login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) { - border-top: 1px solid #dcdcde; -} -.login-page .new-session-tabs.custom-provider-tabs a { - font-size: 16px; -} -.login-page .new-session-tabs li { - flex: 1; - text-align: center; - border-left: 1px solid #dcdcde; -} -.login-page .new-session-tabs li:first-of-type { - border-left: 0; - border-top-left-radius: 4px; -} -.login-page .new-session-tabs li:last-of-type { - border-top-right-radius: 4px; -} -.login-page .new-session-tabs li:not(.active) { - background-color: #fbfafd; -} -.login-page .new-session-tabs li a { - width: 100%; - font-size: 18px; -} -.login-page .new-session-tabs li.active > a { - cursor: default; -} -.login-page .form-control:active, -.login-page .form-control:focus { - background-color: #fff; -} -.login-page .submit-container { - margin-top: 16px; -} -.login-page input[type="submit"] { - margin-bottom: 0; - display: block; - width: 100%; -} -.login-page .devise-errors h2 { - margin-top: 0; - font-size: 14px; - color: #ae1800; -} -@media (max-width: 575.98px) { - .login-page .col-md-5.float-right { - float: none !important; - margin-bottom: 45px; - } -} -.devise-layout-html { - margin: 0; - padding: 0; - height: 100%; -} -.devise-layout-html body { - height: calc(100% - 51px); - margin: 0; - padding: 0; -} -.devise-layout-html body.navless { - height: calc(100% - 11px); -} -.devise-layout-html body .page-wrap { - min-height: 100%; - position: relative; -} -.devise-layout-html body .footer-container, -.devise-layout-html body hr.footer-fixed { - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 40px; - background: #fff; -} -.devise-layout-html body .login-page-broadcast { - margin-top: 40px; -} -.devise-layout-html body .navless-container { - padding: 0 15px 65px; -} -.devise-layout-html body .flash-container { - padding-bottom: 65px; -} -@media (max-width: 575.98px) { - .devise-layout-html body .flash-container { - padding-bottom: 0; - } -} +.fixed-top { + top: calc(var(--system-header-height) + var(--performance-bar-height)); +} .gl-display-flex { display: flex; } .gl-display-inline-block { display: inline-block; } -.gl-flex-wrap { - flex-wrap: wrap; -} -.gl-justify-content-center { - justify-content: center; +.gl-align-items-center { + align-items: center; } .gl-justify-content-space-between { justify-content: space-between; @@ -1002,9 +793,6 @@ svg { .gl-w-half { width: 50%; } -.gl-w-90p { - width: 90%; -} .gl-w-full { width: 100%; } @@ -1013,9 +801,6 @@ svg { width: 100%; } } -.gl-p-5 { - padding: 1rem; -} .gl-px-5 { padding-left: 1rem; padding-right: 1rem; @@ -1023,6 +808,13 @@ svg { .gl-pt-5 { padding-top: 1rem; } +.gl-pb-5 { + padding-bottom: 1rem; +} +.gl-py-5 { + padding-top: 1rem; + padding-bottom: 1rem; +} .gl-mt-3 { margin-top: 0.5rem; } @@ -1032,9 +824,6 @@ svg { .gl-mr-auto { margin-right: auto; } -.gl-mr-2 { - margin-right: 0.25rem; -} .gl-mb-1 { margin-bottom: 0.125rem; } @@ -1047,9 +836,6 @@ svg { .gl-ml-auto { margin-left: auto; } -.gl-ml-2 { - margin-left: 0.25rem; -} @media (min-width: 576px) { .gl-sm-mt-0 { margin-top: 0; @@ -1061,9 +847,6 @@ svg { .gl-font-size-h2 { font-size: 1.1875rem; } -.gl-font-weight-normal { - font-weight: 400; -} .gl-font-weight-bold { font-weight: 600; } diff --git a/app/assets/stylesheets/test_environment.scss b/app/assets/stylesheets/test_environment.scss index e9ba41f9bb7..38fe2795ff4 100644 --- a/app/assets/stylesheets/test_environment.scss +++ b/app/assets/stylesheets/test_environment.scss @@ -1,9 +1,3 @@ -// Disable sticky changes bar for tests -.diff-files-changed { - position: relative !important; - top: 0 !important; -} - // Un-hide inputs for @gitlab/ui custom checkboxes and radios so Capybara can target them .custom-control-input { z-index: 500; diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index bb97261a1ca..3a18f735217 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -143,6 +143,17 @@ body.gl-dark { background-color: $gray-200; } } + + .gl-new-dropdown-item { + &:active, + &:hover, + &:focus, + &:focus:active { + .gl-new-dropdown-item-content { + @include gl-bg-gray-10; + } + } + } } // Some hacks and overrides for things that don't properly support dark mode @@ -289,3 +300,13 @@ body.gl-dark { // soften on darkmode background-color: mix($gray-50, $orange-50, 75%) !important; } + +.tanuki-bot-chat-drawer .tanuki-bot-message { + // lightens chat bubble in darkmode as $gray-50 matches drawer background. See tanuki_bot_chat.scss + background-color: $gray-100; +} + +.ai-genie-chat, +.ai-genie-chat .gl-form-input { + background-color: $gray-10; +} diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index f37b426cd91..6e46100dbb3 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -159,6 +159,22 @@ background-color: $search-and-nav-links-a30 !important; } + &.is-focused { + input { + background-color: $white; + color: $gl-text-color !important; + box-shadow: inset 0 0 0 1px $gray-900; + + &:focus { + box-shadow: inset 0 0 0 1px $gray-900, 0 0 0 1px $white, 0 0 0 3px $blue-400; + } + + &::placeholder { + color: $gray-400; + } + } + } + svg.gl-search-box-by-type-search-icon { color: $search-and-nav-links-a80; } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index af98d59251f..fd378dc7008 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -39,6 +39,12 @@ .border-radius-small { border-radius: $border-radius-small; } .box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; } +// Override Bootstrap class with offset for system-header and +// performance bar when present +.fixed-top { + top: $calc-application-bars-height; +} + .gl-children-ml-sm-3 > * { @include media-breakpoint-up(sm) { @include gl-ml-3; @@ -59,6 +65,10 @@ min-width: 0; } +.gl-min-h-100vh { + min-height: 100vh; +} + // .gl-font-size-inherit will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1466 .gl-font-size-inherit, .font-size-inherit { font-size: inherit; } @@ -71,58 +81,11 @@ // https://gitlab.com/groups/gitlab-org/-/epics/2882 .gl-h-200\! { height: px-to-rem($grid-size * 25) !important; } -.gl-bg-purple-light { background-color: $purple-light; } - -// move this to GitLab UI once onboarding experiment is considered a success -.gl-py-8 { - padding-top: $gl-spacing-scale-8; - padding-bottom: $gl-spacing-scale-8; -} - -.gl-transition-property-stroke-opacity { - transition-property: stroke-opacity; -} - -.gl-transition-property-stroke { - transition-property: stroke; -} - -.gl-top-66vh { - top: 66vh; -} - -.gl-shadow-x0-y0-b3-s1-blue-500 { - box-shadow: inset 0 0 3px $gl-border-size-1 $blue-500; -} - // This utility is used to force the z-index to match that of dropdown menu's .gl-z-dropdown-menu\! { z-index: $zindex-dropdown-menu !important; } -.gl-flex-basis-quarter { - flex-basis: 25%; -} - -// Will be moved to @gitlab/ui (without the !important) in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1462 -// We only need the bang (!) version until the non-bang version is added to -// @gitlab/ui utitlities.scss. Once there, it will get loaded in the correct -// order to properly override `.gl-mt-6` which is used for narrower screen -// widths (currently that style gets added to the application.css stylesheet -// after this one, so it takes precedence). -.gl-md-mt-11\! { - @media (min-width: $breakpoint-md) { - margin-top: $gl-spacing-scale-11 !important; - } -} - -// Same as above (also without the !important) but for overriding `.gl-pt-6` -.gl-md-pt-11\! { - @media (min-width: $breakpoint-md) { - padding-top: $gl-spacing-scale-11 !important; - } -} - // This is used to help prevent issues with margin collapsing. // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing. .gl-force-block-formatting-context::after { @@ -130,34 +93,6 @@ display: flex; } -.gl-sm-mr-3 { - @include media-breakpoint-up(sm) { - margin-right: $gl-spacing-scale-3; - } -} - -.gl-xl-ml-3 { - @include media-breakpoint-up(lg) { - margin-left: $gl-spacing-scale-3; - } -} - -.gl-mr-n2 { - margin-right: -$gl-spacing-scale-2; -} - -.gl-w-grid-size-30 { - width: $grid-size * 30; -} - -.gl-w-grid-size-40 { - width: $grid-size * 40; -} - -.gl-max-w-50p { - max-width: 50%; -} - /** Note: ::-webkit-scrollbar is a non-standard rule only supported by webkit browsers. @@ -181,59 +116,6 @@ @include gl-focus($gl-border-size-1, $gray-900, true); } -/* -All of the following (up until the "End gitlab-ui#1709" comment) will be moved -to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 -*/ -.gl-md-grid-template-columns-3 { - @include media-breakpoint-up(md) { - grid-template-columns: repeat(3, 1fr); - } -} - -.gl-lg-grid-template-columns-4 { - @include media-breakpoint-up(lg) { - grid-template-columns: repeat(4, 1fr); - } -} - -.gl-max-w-48 { - max-width: $gl-spacing-scale-48; -} - -.gl-max-w-75 { - max-width: $gl-spacing-scale-75; -} - -.gl-md-pt-11 { - @include media-breakpoint-up(md) { - padding-top: $gl-spacing-scale-11 !important; // only need !important for now so that it overrides styles from @gitlab/ui which currently take precedence - } -} - -.gl-md-mb-6 { - @include media-breakpoint-up(md) { - margin-bottom: $gl-spacing-scale-6 !important; // only need !important for now so that it overrides styles from @gitlab/ui which currently take precedence - } -} - -.gl-md-mb-12 { - @include media-breakpoint-up(md) { - margin-bottom: $gl-spacing-scale-12 !important; // only need !important for now so that it overrides styles from @gitlab/ui which currently take precedence - } -} - -.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; @@ -246,37 +128,46 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 } } -.gl-md-mb-3\! { +.gl-md-w-15 { @include gl-media-breakpoint-up(md) { - margin-bottom: $gl-spacing-scale-3 !important; + width: $gl-spacing-scale-15; } } - -.gl-gap-2 { - gap: $gl-spacing-scale-2; +.gl-md-w-20 { + @include gl-media-breakpoint-up(md) { + width: $gl-spacing-scale-20; + } } -.gl-hover-bg-t-gray-a-08:hover { - background-color: $t-gray-a-08; +.gl-md-w-30 { + @include gl-media-breakpoint-up(md) { + width: $gl-spacing-scale-30; + } } -/* End gitlab-ui#1709 */ - -/* - * The below style will be moved to @gitlab/ui by - * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1751 - */ -.gl-filter-blur-1 { - backdrop-filter: blur(2px); - /* stylelint-disable property-no-vendor-prefix */ - -webkit-backdrop-filter: blur(2px); // still required by Safari +.gl-fill-orange-500 { + fill: $orange-500; } -.gl-flex-flow-row-wrap { - flex-flow: row wrap; +.gl-fill-red-500 { + fill: $red-500; } -.gl-isolate { - isolation: isolate; +/** + Note: used by app/assets/javascripts/vue_shared/components/truncated_text/truncated_text.vue + Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab/-/issues/408643 + + Although this solution uses vendor-prefixes, it is supported by all browsers and it is + currently the only way to truncate text by lines. See https://caniuse.com/css-line-clamp +**/ +.gl-truncate-text-by-line { + // stylelint-disable-next-line value-no-vendor-prefix + display: -webkit-box; + -webkit-line-clamp: var(--lines); + -webkit-box-orient: vertical; + + @include gl-media-breakpoint-down(sm) { + -webkit-line-clamp: var(--mobile-lines); + } } |