diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-20 18:40:28 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-20 18:40:28 +0300 |
commit | b595cb0c1dec83de5bdee18284abe86614bed33b (patch) | |
tree | 8c3d4540f193c5ff98019352f554e921b3a41a72 /app/assets/stylesheets | |
parent | 2f9104a328fc8a4bddeaa4627b595166d24671d0 (diff) |
Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42
Diffstat (limited to 'app/assets/stylesheets')
37 files changed, 434 insertions, 295 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index 092cf643e0f..be72ec33465 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -1,5 +1,6 @@ @import './pages/branches'; @import './pages/clusters'; +@import './pages/colors'; @import './pages/commits'; @import './pages/deploy_keys'; @import './pages/detail_page'; @@ -8,6 +9,7 @@ @import './pages/events'; @import './pages/groups'; @import './pages/help'; +@import './pages/hierarchy'; @import './pages/issuable'; @import './pages/issues'; @import './pages/labels'; @@ -25,9 +27,8 @@ @import './pages/registry'; @import './pages/search'; @import './pages/service_desk'; -@import './pages/settings'; @import './pages/settings_ci_cd'; +@import './pages/settings'; @import './pages/storage_quota'; @import './pages/tree'; @import './pages/users'; -@import './pages/hierarchy'; diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss index 870ed50c6eb..1b6a0208ca7 100644 --- a/app/assets/stylesheets/components/content_editor.scss +++ b/app/assets/stylesheets/components/content_editor.scss @@ -106,11 +106,14 @@ } } -.table-dropdown .dropdown-menu { +.content-editor-dropdown .dropdown-menu { + width: auto !important; + @include gl-min-w-0; - @include gl-w-auto; - @include gl-white-space-nowrap; + button { + @include gl-white-space-nowrap; + } } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index ced62926218..37f92d3cf3d 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -506,8 +506,7 @@ max-width: unset; } - .no-emoji-placeholder, - .clear-user-status { + .no-emoji-placeholder { svg { fill: var(--gray-500, $gray-500); } diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index a8e740525e2..f27a36d1966 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -60,6 +60,13 @@ @include icon-styles($gray-500, $gray-100); } +.password-status-icon-success { + svg { + vertical-align: middle; + fill: $green-500; + } +} + .icon-link { &:hover { text-decoration: none; @@ -67,6 +74,7 @@ } .user-avatar-link { + display: inline-block; text-decoration: none; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index eeffc4fc21b..1e921b4234e 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -432,7 +432,6 @@ $gl-input-padding: 10px; $gl-vert-padding: 6px; $gl-padding-top: 10px; $gl-sidebar-padding: 22px; -$gl-bar-padding: 3px; $input-horizontal-padding: 12px; $browser-scrollbar-size: 10px; diff --git a/app/assets/stylesheets/highlight/hljs.scss b/app/assets/stylesheets/highlight/hljs.scss index 2e31e7c1f6d..e1bc23852a4 100644 --- a/app/assets/stylesheets/highlight/hljs.scss +++ b/app/assets/stylesheets/highlight/hljs.scss @@ -37,6 +37,10 @@ &.class_ { color: var(--color-hljs-class); + + &.inherited__ { + color: var(--color-hljs-variable); + } } &.function_ { diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index f4d9909d81f..709e7f5ae18 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -188,7 +188,11 @@ $dark-il: #de935f; .diff-line-num.new, .line-coverage.new, .line-codequality.new, - .line_content.new { + .line_content.new, + .diff-line-num.new-nomappinginraw, + .line-coverage.new-nomappinginraw, + .line-codequality.new-nomappinginraw, + .line_content.new-nomappinginraw { @include diff-background($dark-new-bg, $dark-new-idiff, $dark-border); &::before, @@ -200,7 +204,11 @@ $dark-il: #de935f; .diff-line-num.old, .line-coverage.old, .line-codequality.old, - .line_content.old { + .line_content.old, + .diff-line-num.old-nomappinginraw, + .line-coverage.old-nomappinginraw, + .line-codequality.old-nomappinginraw, + .line_content.old-nomappinginraw { @include diff-background($dark-old-bg, $dark-old-idiff, $dark-border); &::before, diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index dfa32d4b773..0ed9c209417 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -100,6 +100,8 @@ $monokai-gh: #75715e; // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251) @include hljs-override('string', $monokai-s); @include hljs-override('attr', $monokai-na); + @include hljs-override('attribute', $monokai-n); + @include hljs-override('selector-tag', $monokai-nt); @include hljs-override('keyword', $monokai-k); @include hljs-override('variable', $monokai-nv); @include hljs-override('variable.language_', $monokai-k); @@ -113,7 +115,8 @@ $monokai-gh: #75715e; @include hljs-override('section', $monokai-gh); @include hljs-override('bullet', $monokai-n); @include hljs-override('subst', $monokai-p); - @include hljs-override('symbol', $monokai-ni); + @include hljs-override('symbol', $monokai-ss); + @include hljs-override('title.class_.inherited__', $monokai-no); // Line numbers .file-line-num { @@ -178,7 +181,11 @@ $monokai-gh: #75715e; .diff-line-num.new, .line-coverage.new, .line-codequality.new, - .line_content.new { + .line_content.new, + .diff-line-num.new-nomappinginraw, + .line-coverage.new-nomappinginraw, + .line-codequality.new-nomappinginraw, + .line_content.new-nomappinginraw { @include diff-background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border); &::before, @@ -190,7 +197,11 @@ $monokai-gh: #75715e; .diff-line-num.old, .line-coverage.old, .line-codequality.old, - .line_content.old { + .line_content.old, + .diff-line-num.old-nomappinginraw, + .line-coverage.old-nomappinginraw, + .line-codequality.old-nomappinginraw, + .line_content.old-nomappinginraw { @include diff-background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border); &::before, diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index f70c53c9eaa..868e466b1f8 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -75,7 +75,9 @@ .line-coverage, .line-codequality { &.old, - &.new { + &.new, + &.new-nomappinginraw, + &.old-nomappinginraw { background-color: $white-normal; } } @@ -131,7 +133,7 @@ } .line_content { - &.old { + &.old, &.old-nomappinginraw { background-color: $white-normal; &::before { @@ -144,7 +146,7 @@ } } - &.new { + &.new, &.new-nomappinginraw { background-color: $white-normal; &::before { diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index 73aa6275d17..6260339a48d 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -103,6 +103,8 @@ $solarized-dark-il: #2aa198; // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251) @include hljs-override('string', $solarized-dark-s); @include hljs-override('attr', $solarized-dark-na); + @include hljs-override('attribute', $solarized-dark-n); + @include hljs-override('selector-tag', $solarized-dark-nt); @include hljs-override('keyword', $solarized-dark-k); @include hljs-override('variable', $solarized-dark-nv); @include hljs-override('variable.language_', $solarized-dark-k); @@ -117,7 +119,8 @@ $solarized-dark-il: #2aa198; @include hljs-override('bullet', $solarized-dark-n); @include hljs-override('subst', $solarized-dark-p); @include hljs-override('symbol', $solarized-dark-ni); - + @include hljs-override('title.class_.inherited__', $solarized-dark-no); + // Line numbers .file-line-num { @include line-number-link($solarized-dark-line-color); @@ -189,7 +192,11 @@ $solarized-dark-il: #2aa198; .diff-line-num.new, .line-coverage.new, .line-codequality.new, - .line_content.new { + .line_content.new, + .diff-line-num.new-nomappinginraw, + .line-coverage.new-nomappinginraw, + .line-codequality.new-nomappinginraw, + .line_content.new-nomappinginraw { @include diff-background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border); &::before, @@ -201,7 +208,11 @@ $solarized-dark-il: #2aa198; .diff-line-num.old, .line-coverage.old, .line-codequality.old, - .line_content.old { + .line_content.old, + .diff-line-num.old-nomappinginraw, + .line-coverage.old-nomappinginraw, + .line-codequality.old-nomappinginraw, + .line_content.old-nomappinginraw { @include diff-background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border); &::before, diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 74448317270..e6f098f4cdf 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -106,6 +106,7 @@ $solarized-light-il: #2aa198; } .code.solarized-light { + @include hljs-override('title.class_.inherited__', $solarized-light-no); // Line numbers .file-line-num { @include line-number-link($solarized-light-line-color); @@ -169,7 +170,11 @@ $solarized-light-il: #2aa198; .diff-line-num.new, .line-coverage.new, .line-codequality.new, - .line_content.new { + .line_content.new, + .diff-line-num.new-nomappinginraw, + .line-coverage.new-nomappinginraw, + .line-codequality.new-nomappinginraw, + .line_content.new-nomappinginraw { @include diff-background($solarized-light-new-bg, $solarized-light-new-idiff, $solarized-light-border); @@ -190,7 +195,11 @@ $solarized-light-il: #2aa198; .diff-line-num.old, .line-coverage.old, .line-codequality.old, - .line_content.old { + .line_content.old, + .diff-line-num.old-nomappinginraw, + .line-coverage.old-nomappinginraw, + .line-codequality.old-nomappinginraw, + .line_content.old-nomappinginraw { @include diff-background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border); &::before, diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss index 8698e448c94..b0f6595feff 100644 --- a/app/assets/stylesheets/highlight/themes/white.scss +++ b/app/assets/stylesheets/highlight/themes/white.scss @@ -2,6 +2,9 @@ @import '../white_base'; @include conflict-colors('white'); + @include hljs-override('variable', $white-nv); + @include hljs-override('symbol', $white-ss); + @include hljs-override('title.class_.inherited__', $white-no); } :root { diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index aac8ccde96e..770a90bbc57 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -158,7 +158,8 @@ pre.code, } .diff-line-num { - &.old { + &.old, + &.old-nomappinginraw { background-color: $line-number-old; a { @@ -166,7 +167,8 @@ pre.code, } } - &.new { + &.new, + &.new-nomappinginraw { background-color: $line-number-new; a { @@ -204,7 +206,8 @@ pre.code, } .line_content { - &.old { + &.old, + &.old-nomappinginraw { background-color: $line-removed; &::before { @@ -216,7 +219,8 @@ pre.code, } } - &.new { + &.new, + &.new-nomappinginraw { background-color: $line-added; &::before { @@ -243,11 +247,13 @@ pre.code, .line-coverage, .line-codequality { - &.old { + &.old, + &.old-nomappinginraw { background-color: $line-removed; } - &.new { + &.new, + &.new-nomappinginraw { background-color: $line-added; } diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index b8cbe64df38..da120b5fb4e 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -2,8 +2,6 @@ // Do not use 3-letter hex codes, bgcolor vs css background-color is problematic in emails // -// stylelint-disable color-hex-length - $mailer-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; $mailer-text-color: #333; $mailer-bg-color: #fafafa; diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss index 57053c7f0cb..d93b4f75d77 100644 --- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss @@ -1,9 +1,3 @@ - -// stylelint-disable selector-class-pattern -// stylelint-disable selector-max-compound-selectors -// stylelint-disable stylelint-gitlab/duplicate-selectors -// stylelint-disable stylelint-gitlab/utility-classes - .blob-editor-container { flex: 1; height: 0; diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 25a565ce2ba..c584bbaac09 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -64,10 +64,6 @@ border-color: var(--ide-input-border, $gray-darkest); } } - - a.gl-tab-nav-item-active { - box-shadow: inset 0 -2px 0 0 var(--ide-input-border, $gray-darkest); - } } .drag-handle:hover { diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 14873c54cd7..1b27e51e793 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -46,9 +46,7 @@ $tabs-holder-z-index: 250; position: -webkit-sticky; position: sticky; // Unitless zero values are not allowed in calculations - // stylelint-disable-next-line length-zero-no-unit top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px)); - // stylelint-disable-next-line length-zero-no-unit max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); .drag-handle { @@ -632,6 +630,24 @@ $tabs-holder-z-index: 250; height: 24px; } +.mr-widget-extension-icon::after { + @include gl-content-empty; + @include gl-absolute; + @include gl-rounded-full; + + top: 4px; + left: 4px; + width: 16px; + height: 16px; + border: 4px solid currentColor; +} + +.mr-widget-extension-icon svg { + position: relative; + top: 2px; + left: 2px; +} + .mr-widget-heading { position: relative; border: 1px solid var(--border-color, $border-color); diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss index ddc638197ca..91fd2d42657 100644 --- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss +++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss @@ -70,7 +70,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi .timeline-header-blank, .timeline-header-item { - @include float-left; + @include gl-float-left; height: $header-item-height; border-bottom: $border-style; background-color: var(--white, $white); @@ -150,7 +150,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi .details-cell, .timeline-cell { - @include float-left; + @include gl-float-left; height: $item-height; } diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss index 0bc3cc6678c..eec5ebdb383 100644 --- a/app/assets/stylesheets/page_bundles/project.scss +++ b/app/assets/stylesheets/page_bundles/project.scss @@ -128,10 +128,6 @@ > li { display: inline-block; - &:not(:last-child) { - margin-right: $gl-padding; - } - &.right { vertical-align: top; margin-top: 0; @@ -179,7 +175,6 @@ } .btn { - margin-bottom: $gl-padding-8; padding: $gl-btn-vert-padding $gl-btn-padding; line-height: $gl-btn-line-height; @@ -190,12 +185,6 @@ } } -.project-buttons { - .nav > li:not(:last-child) { - margin-right: $gl-padding-8; - } -} - .git-empty { margin-bottom: 7px; diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss new file mode 100644 index 00000000000..9220fa82b46 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -0,0 +1,35 @@ +@import 'mixins_and_variables_and_functions'; + +.gl-token-selector-token-container { + display: flex; + align-items: center; +} + +#weight-widget-input:not(:hover, :focus), +#weight-widget-input[readonly] { + box-shadow: inset 0 0 0 $gl-border-size-1 var(--white, $white); +} + +#weight-widget-input[readonly] { + background-color: var(--white, $white); +} + +.work-item-assignees { + .assign-myself { + display: none; + } + + .assignees-selector:hover .assign-myself { + display: block; + } +} + +.work-item-labels { + .gl-token { + padding-left: $gl-spacing-scale-1; + } + + .gl-token-close { + display: none; + } +} diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss index d34d309eea3..18158fab75f 100644 --- a/app/assets/stylesheets/pages/branches.scss +++ b/app/assets/stylesheets/pages/branches.scss @@ -1,9 +1,3 @@ -.content-list > .branch-item, -.branch-title { - display: flex; - align-items: center; -} - .branch-info { flex: auto; min-width: 0; diff --git a/app/assets/stylesheets/pages/colors.scss b/app/assets/stylesheets/pages/colors.scss new file mode 100644 index 00000000000..20e072b9903 --- /dev/null +++ b/app/assets/stylesheets/pages/colors.scss @@ -0,0 +1,24 @@ +.color-item { + @include gl-align-items-center; + @include gl-display-flex; +} + +.color-item-color { + @include gl-flex-shrink-0; + @include gl-mr-3; + @include gl-top-0; +} + +.right-sidebar-collapsed { + .color-item { + @include gl-pt-3; + } + + .color-item-color { + margin: 0; + } + + .color-item-text { + display: none; + } +} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 80b9e378252..c96d8ecc782 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -95,8 +95,14 @@ } } -.commits-row + .commits-row { - border-top: 1px solid $white-normal; +.commits-row { + + .commits-row { + border-top: 1px solid $white-normal; + } + + + .commits-empty { + display: none; + } } .text-expander { @@ -133,18 +139,6 @@ } } -.commit-detail { - display: flex; - justify-content: space-between; - align-items: start; - flex-grow: 1; - min-width: 0; - - .project-namespace { - color: $gl-text-color-tertiary; - } -} - .commit-content { padding-right: 10px; white-space: normal; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 96ca9fbcb43..2e1bb9b9eac 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -209,7 +209,6 @@ table.pipeline-project-metrics tr td { } .title { - margin-top: -$gl-padding-8; // negative margin required for flex-wrap font-size: $gl-font-size; } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index f3182af3047..51f964a4b70 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -176,11 +176,16 @@ } .gutter-toggle { + display: flex; + align-items: center; margin-left: 20px; - padding-left: 10px; + padding: 4px; + border-radius: 4px; + height: 24px; &:hover { color: $gl-text-color; + background: $gray-50; } &:hover, @@ -291,7 +296,7 @@ @include media-breakpoint-up(lg) { padding: 0; - form { + .issuable-context-form { --initial-top: calc(#{$header-height} + #{$mr-tabs-height}); --top: var(--initial-top); @@ -338,7 +343,6 @@ } .gutter-toggle { - border-left: 1px solid $border-gray-normal; text-align: center; } @@ -405,8 +409,8 @@ width: 100%; height: $sidebar-toggle-height; margin-left: 0; - padding-left: 0; border-bottom: 1px solid $border-white-normal; + border-radius: 0; } a.gutter-toggle { @@ -709,10 +713,6 @@ line-height: 20px; padding: 0; } - - .issue-updated-at { - line-height: 20px; - } } @include media-breakpoint-down(xs) { @@ -736,7 +736,7 @@ .issuable-milestone, .issuable-info, .task-status, - .issuable-updated-at { + .issuable-timestamp { font-weight: $gl-font-weight-normal; color: $gl-text-color-secondary; @@ -991,4 +991,19 @@ bottom: -10%; } } + + &.timeline-event-note-form { + &::before { + top: -15% !important; // Override default positioning + height: 20%; + } + + &::after { + content: none; + } + } +} + +.timeline-event-note-form { + padding-left: 20px; } diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 04e0ef6631e..c0a283ec643 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -124,8 +124,16 @@ ul.related-merge-requests > li gl-emoji { .new-branch-col { .discussion-filter-container { - &:not(:only-child) { - margin-right: $gl-padding-8; + &:not(:last-child) { + margin-right: $gl-spacing-scale-3; + } + } + + @include media-breakpoint-down(xs) { + width: 100%; + + > div:not(:last-child) { + margin-bottom: $gl-spacing-scale-3; } } } @@ -147,6 +155,16 @@ ul.related-merge-requests > li gl-emoji { .btn-group:not(.hidden) { display: flex; + + @include media-breakpoint-down(xs) { + .btn.btn-confirm { + @include gl-justify-content-start; + + &.dropdown-toggle { + @include gl-flex-grow-0; + } + } + } } .js-create-merge-request { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index a3fbedd87a9..96fe6caeea2 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -349,3 +349,36 @@ $comparison-empty-state-height: 62px; } } } + +.mr-experience-survey-wrapper { + // setting this explicitly because: + // diff-files-holder has z-index 203 + // z-index 9999 utility class breaks tooltips + z-index: 210; +} + +.mr-experience-survey-body { + width: 300px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.mr-experience-survey-legal { + order: 1; +} + +.mr-experience-survey-logo { + width: 16px; + + svg { + max-width: 100%; + } +} + +.survey-slide-up-enter { + transform: translateY(10px); + opacity: 0; +} + +.survey-slide-up-enter-active { + @include gl-transition-slow; +} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 82e96dee4c6..4d0cf30a3b2 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -70,41 +70,6 @@ $system-note-svg-size: 16px; } } - .replies-toggle { - background-color: $gray-light; - padding: $gl-padding-8 $gl-padding; - border-top: 1px solid $gray-100; - border-bottom: 1px solid $gray-100; - - .collapse-replies-btn:hover { - color: $blue-600; - } - - &.collapsed { - color: $gl-text-color-secondary; - border-radius: 0 0 $border-radius-default $border-radius-default; - - img { - margin: -2px 4px 0 0; - } - - .author-link { - color: $gl-text-color; - } - } - - .user-avatar-link { - &:last-child img { - margin-right: $gl-padding-8; - } - } - - .btn-link { - border: 0; - vertical-align: baseline; - } - } - .discussion-toggle-replies { border-top: 0; border-radius: 4px 4px 0 0; diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss index 518ec181e5e..c7d7aacceec 100644 --- a/app/assets/stylesheets/pages/profiles/preferences.scss +++ b/app/assets/stylesheets/pages/profiles/preferences.scss @@ -1,6 +1,6 @@ .application-theme { - $ui-gray-bg: #2e2e2e; - $ui-light-gray-bg: #dfdfdf; + $ui-gray-bg: #303030; + $ui-light-gray-bg: #f0f0f0; $ui-dark-mode-bg: #1f1f1f; .preview { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 3b76130dd1a..0d45beab983 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -548,14 +548,6 @@ pre.light-well { } } -.new-protected-branch, -.new-protected-tag { - label { - margin-top: 6px; - font-weight: $gl-font-weight-normal; - } -} - .protected-branches-list, .protected-tags-list { margin-bottom: 30px; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 8755db83d35..f1865a7dc40 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -4,7 +4,8 @@ $search-sidebar-min-width: 240px; $search-sidebar-max-width: 300px; $search-input-field-x-min-width: 200px; $search-input-field-min-width: 320px; -$search-input-field-max-width: 600px; +$search-input-field-max-width: 640px; +$search-keyboard-shortcut: '/'; $border-radius-medium: 3px; @@ -67,54 +68,53 @@ input[type='checkbox']:hover { } } -// 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 -.header-search .gl-search-box-by-type-clear.btn-sm { - padding: 0.5rem !important; -} - .header-search { min-width: $search-input-field-min-width; + // 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; + } + @include media-breakpoint-between(md, lg) { min-width: $search-input-field-x-min-width; } - input, - svg { - transition: border-color ease-in-out $default-transition-duration, - background-color ease-in-out $default-transition-duration; + &.is-active { + &.is-searching { + .in-search-scope-help { + position: absolute; + top: $gl-spacing-scale-2; + right: 2.125rem; + z-index: 2; + } + } } - &.is-not-active { - .btn.gl-clear-icon-button { + &.is-not-searching { + .in-search-scope-help { + display: none; + } + } + + .keyboard-shortcut-helper { + transform: translateY(calc(50% - 2px)); + box-shadow: none; + border-color: transparent; + } + + &.is-active { + .keyboard-shortcut-helper { display: none; } + } - &::after { - content: '/'; - display: inline-block; - position: absolute; - top: 0; - right: 8px; - transform: translateY(calc(50% - 4px)); - padding: 4px 5px; - font-size: $gl-font-size-small; - font-family: $monospace-font; - line-height: 1; - vertical-align: middle; - border-width: 0; - border-style: solid; - border-image: none; - border-radius: $border-radius-medium; - box-shadow: none; - white-space: pre-wrap; - box-sizing: border-box; - // Safari - word-wrap: break-word; - overflow-wrap: break-word; - word-break: keep-all; + &.is-not-active { + .btn.gl-clear-icon-button, + .in-search-scope-help { + display: none; } } } diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 0c7b74684cc..935595d1b3b 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -28,6 +28,7 @@ &:first-of-type { margin-top: 10px; + padding-top: 0; border: 0; } @@ -156,39 +157,33 @@ } .visibility-level-setting { - .form-check { - margin-bottom: 10px; - - .option-title { - font-weight: $gl-font-weight-normal; - display: inline-block; - color: $gl-text-color; - vertical-align: top; - } + .option-title { + font-weight: $gl-font-weight-normal; + display: inline-block; + color: $gl-text-color; + vertical-align: top; + } - .option-description, - .option-disabled-reason { - margin-left: 20px; - color: $project-option-descr-color; - margin-top: -5px; + .option-description, + .option-disabled-reason { + color: $project-option-descr-color; + } + + .option-disabled-reason { + display: none; + } + + .disabled { + svg { + opacity: 0.5; } - .option-disabled-reason { + .option-description { display: none; } - &.disabled { - svg { - opacity: 0.5; - } - - .option-description { - display: none; - } - - .option-disabled-reason { - display: block; - } + .option-disabled-reason { + display: block; } } } @@ -320,7 +315,8 @@ } .ci-variable-table, -.deploy-freeze-table { +.deploy-freeze-table, +.ci-secure-files-table { table { thead { border-bottom: 1px solid $white-normal; diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 4cefa60b12a..801c9ea828f 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -2,10 +2,16 @@ // Please see the feedback issue for more details and help: // https://gitlab.com/gitlab-org/gitlab/-/issues/331812 @charset "UTF-8"; +:root { + color-scheme: dark; +} body.gl-dark { + --gray-10: #1f1f1f; --gray-50: #303030; --gray-100: #404040; + --gray-200: #525252; --gray-600: #bfbfbf; + --gray-700: #dbdbdb; --gray-900: #fafafa; --green-100: #0d532a; --green-700: #91d4a8; @@ -61,6 +67,11 @@ a:not([href]):not([class]) { color: inherit; text-decoration: none; } +kbd { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", + "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + font-size: 1em; +} img { vertical-align: middle; border-style: none; @@ -105,6 +116,18 @@ button::-moz-focus-inner, padding-left: 0; list-style: none; } +kbd { + padding: 0.2rem 0.4rem; + font-size: 90%; + color: #333; + background-color: #fafafa; + border-radius: 0.2rem; +} +kbd kbd { + padding: 0; + font-size: 100%; + font-weight: 600; +} .container-fluid { width: 100%; padding-right: 15px; @@ -740,6 +763,22 @@ input { .form-control::placeholder { color: #868686; } +kbd { + display: inline-block; + padding: 3px 5px; + font-size: 0.6875rem; + line-height: 10px; + color: var(--gray-700, #dbdbdb); + vertical-align: middle; + background-color: var(--gray-10, #1f1f1f); + border-width: 1px; + border-style: solid; + border-color: var(--gray-100, #404040) var(--gray-100, #404040) + var(--gray-200, #525252); + border-image: none; + border-radius: 3px; + box-shadow: 0 -1px 0 var(--gray-200, #525252) inset; +} .navbar-gitlab { padding: 0 16px; z-index: 1000; @@ -1504,7 +1543,7 @@ svg.s16 { vertical-align: -3px; } .header-content .header-search-new { - max-width: 600px; + max-width: 640px; } .header-search { min-width: 320px; @@ -1514,29 +1553,10 @@ svg.s16 { min-width: 200px; } } -.header-search.is-not-active::after { - content: "/"; - display: inline-block; - position: absolute; - top: 0; - right: 8px; - transform: translateY(calc(50% - 4px)); - padding: 4px 5px; - font-size: 12px; - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", - "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; - line-height: 1; - vertical-align: middle; - border-width: 0; - border-style: solid; - border-image: none; - border-radius: 3px; +.header-search .keyboard-shortcut-helper { + transform: translateY(calc(50% - 2px)); box-shadow: none; - white-space: pre-wrap; - box-sizing: border-box; - word-wrap: break-word; - overflow-wrap: break-word; - word-break: keep-all; + border-color: transparent; } .search { margin: 0 8px; @@ -1697,6 +1717,9 @@ svg.s16 { .rect-avatar.s32 { border-radius: 4px; } +:root { + color-scheme: dark; +} body.gl-dark { --gray-10: #1f1f1f; --gray-50: #303030; @@ -1884,7 +1907,7 @@ body.gl-dark .header-search input::placeholder { body.gl-dark .header-search input:active::placeholder { color: #868686; } -body.gl-dark .header-search.is-not-active::after { +body.gl-dark .header-search.is-not-active .keyboard-shortcut-helper { color: #fafafa; background-color: rgba(250, 250, 250, 0.2); } @@ -1938,6 +1961,9 @@ body.gl-dark .navbar-gitlab .search form .search-input { color: var(--gl-text-color); } +:root { + color-scheme: dark; +} body.gl-dark { --gray-10: #1f1f1f; --gray-50: #303030; @@ -2030,7 +2056,6 @@ body.gl-dark { --nav-active-bg: rgba(255, 255, 255, 0.08); } .tab-width-8 { - -moz-tab-size: 8; tab-size: 8; } .gl-sr-only { @@ -2084,6 +2109,12 @@ body.gl-dark { .gl-absolute { position: absolute; } +.gl-top-0 { + top: 0; +} +.gl-right-3 { + right: 0.5rem; +} .gl-w-full { width: 100%; } @@ -2119,6 +2150,9 @@ body.gl-dark { .gl-font-weight-bold { font-weight: 600; } +.gl-z-index-1 { + z-index: 1; +} @import "startup/cloaking"; @include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index cb3c97f18a3..43ca5a512d5 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -46,6 +46,11 @@ a:not([href]):not([class]) { color: inherit; text-decoration: none; } +kbd { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", + "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + font-size: 1em; +} img { vertical-align: middle; border-style: none; @@ -90,6 +95,18 @@ button::-moz-focus-inner, padding-left: 0; list-style: none; } +kbd { + padding: 0.2rem 0.4rem; + font-size: 90%; + color: #fff; + background-color: #303030; + border-radius: 0.2rem; +} +kbd kbd { + padding: 0; + font-size: 100%; + font-weight: 600; +} .container-fluid { width: 100%; padding-right: 15px; @@ -725,6 +742,22 @@ input { .form-control::placeholder { color: #868686; } +kbd { + display: inline-block; + padding: 3px 5px; + font-size: 0.6875rem; + line-height: 10px; + color: var(--gray-700, #525252); + vertical-align: middle; + background-color: var(--gray-10, #f5f5f5); + border-width: 1px; + border-style: solid; + border-color: var(--gray-100, #dbdbdb) var(--gray-100, #dbdbdb) + var(--gray-200, #bfbfbf); + border-image: none; + border-radius: 3px; + box-shadow: 0 -1px 0 var(--gray-200, #bfbfbf) inset; +} .navbar-gitlab { padding: 0 16px; z-index: 1000; @@ -1489,7 +1522,7 @@ svg.s16 { vertical-align: -3px; } .header-content .header-search-new { - max-width: 600px; + max-width: 640px; } .header-search { min-width: 320px; @@ -1499,29 +1532,10 @@ svg.s16 { min-width: 200px; } } -.header-search.is-not-active::after { - content: "/"; - display: inline-block; - position: absolute; - top: 0; - right: 8px; - transform: translateY(calc(50% - 4px)); - padding: 4px 5px; - font-size: 12px; - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", - "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; - line-height: 1; - vertical-align: middle; - border-width: 0; - border-style: solid; - border-image: none; - border-radius: 3px; +.header-search .keyboard-shortcut-helper { + transform: translateY(calc(50% - 2px)); box-shadow: none; - white-space: pre-wrap; - box-sizing: border-box; - word-wrap: break-word; - overflow-wrap: break-word; - word-break: keep-all; + border-color: transparent; } .search { margin: 0 8px; @@ -1684,7 +1698,6 @@ svg.s16 { } .tab-width-8 { - -moz-tab-size: 8; tab-size: 8; } .gl-sr-only { @@ -1738,6 +1751,12 @@ svg.s16 { .gl-absolute { position: absolute; } +.gl-top-0 { + top: 0; +} +.gl-right-3 { + right: 0.5rem; +} .gl-w-full { width: 100%; } @@ -1773,6 +1792,9 @@ svg.s16 { .gl-font-weight-bold { font-weight: 600; } +.gl-z-index-1 { + z-index: 1; +} @import "startup/cloaking"; @include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index fe8a5aec1b3..e6e736ef47c 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -101,6 +101,10 @@ $white-dark: #444; $border-color: #4f4f4f; $nav-active-bg: rgba(255, 255, 255, 0.08); +:root { + color-scheme: dark; +} + body.gl-dark { --gray-10: #{$gray-10}; --gray-50: #{$gray-50}; diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index ad352f0022b..2b6221a6c87 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -159,7 +159,6 @@ color: rgba($search-and-nav-links, 0.8); } - input { background-color: transparent; color: rgba($search-and-nav-links, 0.8); @@ -177,9 +176,11 @@ } } - &.is-not-active::after { - color: $search-and-nav-links; - background-color: rgba($search-and-nav-links, 0.2); + &.is-not-active { + .keyboard-shortcut-helper { + color: $search-and-nav-links; + background-color: rgba($search-and-nav-links, 0.2); + } } } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 27fcade548f..6bd05f90f26 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -367,50 +367,6 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 -webkit-backdrop-filter: blur(2px); // still required by Safari } -/* - * The styles from here to END-#1825 will be moved to @gitlab/ui by - * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1825 - */ -.gl-lg-mx-12 { - @include media-breakpoint-up(lg) { - margin-left: $gl-spacing-scale-12; - margin-right: $gl-spacing-scale-12; - } -} - -.gl-lg-ml-12 { - @include media-breakpoint-up(lg) { - margin-left: $gl-spacing-scale-12; - } -} - -.gl-lg-mr-12 { - @include media-breakpoint-up(lg) { - margin-right: $gl-spacing-scale-12; - } -} - -.gl-lg-ml-10 { - @include media-breakpoint-up(lg) { - margin-left: $gl-spacing-scale-10; - } -} - -.gl-lg-mr-10 { - @include media-breakpoint-up(lg) { - margin-right: $gl-spacing-scale-10; - } -} - -.gl-lg-w-30p { - @include gl-media-breakpoint-up(lg) { - width: 30%; - } -} - -.gl-lg-w-40p { - @include gl-media-breakpoint-up(lg) { - width: 40%; - } +.gl-flex-flow-row-wrap { + flex-flow: row wrap; } -/* END-#1825 */ |