diff options
| author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 14:10:13 +0300 |
|---|---|---|
| committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 14:10:13 +0300 |
| commit | 0ea3fcec397b69815975647f5e2aa5fe944a8486 (patch) | |
| tree | 7979381b89d26011bcf9bdc989a40fcc2f1ed4ff /app/assets/stylesheets | |
| parent | 72123183a20411a36d607d70b12d57c484394c8e (diff) | |
Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42
Diffstat (limited to 'app/assets/stylesheets')
61 files changed, 678 insertions, 782 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index 24549a170bd..092cf643e0f 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -17,7 +17,6 @@ @import './pages/note_form'; @import './pages/notes'; @import './pages/notifications'; -@import './pages/pages'; @import './pages/pipelines'; @import './pages/profile'; @import './pages/profiles/preferences'; diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss index 3885134e276..ceac5da7f80 100644 --- a/app/assets/stylesheets/components/avatar.scss +++ b/app/assets/stylesheets/components/avatar.scss @@ -113,10 +113,6 @@ $avatar-sizes: ( border-radius: 0; border: 0; } - - &.avatar-placeholder { - border: 0; - } } .identicon { diff --git a/app/assets/stylesheets/components/feature_highlight.scss b/app/assets/stylesheets/components/feature_highlight.scss index 54123e74675..4d301cc5617 100644 --- a/app/assets/stylesheets/components/feature_highlight.scss +++ b/app/assets/stylesheets/components/feature_highlight.scss @@ -1,29 +1,3 @@ -.gl-badge.feature-highlight-badge { - background-color: $purple-light; - color: $purple; - - &, - &.sm { - padding: 0.25rem; - } -} - -.gl-order-1 { - order: 1; -} - -.gl-sm-order-init { - @media (min-width: $breakpoint-sm) { - order: initial; - } -} - -.gl-xs-ml-3 { - @media (max-width: $breakpoint-sm) { - @include gl-ml-3; - } -} - .gl-sm-mr-3 { @media (min-width: $breakpoint-sm) { @include gl-mr-3; diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 7c668666d70..3bb889b6ba0 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -80,11 +80,6 @@ $item-remove-button-space: 42px; .health-label-short { max-width: 0; } - - .bullet-separator { - font-size: 9px; - color: $gray-200; - } } .card-header { @@ -198,7 +193,6 @@ $item-remove-button-space: 42px; } } -.mr-status-wrapper, .mr-ci-status { line-height: 0; } diff --git a/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss index 2bc6eba3342..f6be241d644 100644 --- a/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss +++ b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss @@ -1,25 +1,50 @@ +@function encodecolor($string) { + @if type-of($string) == 'color' { + $hex: str-slice(ie-hex-str($string), 4); + $string: unquote('#{$hex}'); + } + $string: '%23' + $string; + @return $string; +} + +@mixin dropzone-background($stroke-color, $stroke-width: 4, $stroke-linecap: 'butt') { + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{encodecolor($stroke-color)}' stroke-width='#{$stroke-width}' stroke-dasharray='6%2c4' stroke-dashoffset='0' stroke-linecap='#{encodecolor($stroke-linecap)}'/%3e%3c/svg%3e"); +} + .upload-dropzone-border { - border: 2px dashed $gray-100; + border: 0; + @include dropzone-background($gray-400, 2, 'round'); + border-radius: 8px; } .upload-dropzone-card { - transition: border $gl-transition-duration-medium $general-hover-transition-curve; + transition: background $gl-transition-duration-medium $general-hover-transition-curve, + border $gl-transition-duration-medium $general-hover-transition-curve; color: $gl-text-color; + &:hover, &:focus, + &:focus-within, &:active { outline: none; - border: 2px dashed $purple; + @include dropzone-background($blue-500); color: $gl-text-color; } + &:focus, + &:focus-within, + &:active { + @include gl-focus; + } + &:hover { border-color: $gray-300; } } .upload-dropzone-overlay { - border: 2px dashed $purple; + background-color: $blue-50; + @include dropzone-background($blue-500); top: 0; left: 0; pointer-events: none; diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss index 00cc3409fa7..3ef6452b706 100644 --- a/app/assets/stylesheets/errors.scss +++ b/app/assets/stylesheets/errors.scss @@ -9,6 +9,10 @@ @import 'bootstrap/scss/buttons'; @import 'bootstrap/scss/forms'; +@import '@gitlab/ui/src/scss/variables'; +@import '@gitlab/ui/src/scss/utility-mixins/index'; +@import '@gitlab/ui/src/components/base/button/button'; + $body-color: #666; $header-color: #456; diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 8e43a9b1b0d..e977fb92928 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -24,7 +24,6 @@ @import 'framework/kbd'; @import 'framework/header'; @import 'framework/highlight'; -@import 'framework/issue_box'; @import 'framework/lists'; @import 'framework/logo'; @import 'framework/job_log'; diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 1192c51b9aa..56ec61ffd84 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -6,6 +6,12 @@ width: 20px; height: 20px; } + + // Show active state. + .gl-button.selected { + background-color: $blue-50; + box-shadow: inset 0 0 0 2px $blue-500; + } } .emoji-menu { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 33522c66024..5fa1923af7c 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -106,15 +106,15 @@ } @mixin btn-blue { - @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white); + @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-contrast); } @mixin btn-orange { - @include btn-color($orange-500, $orange-600, $orange-500, $orange-600, $orange-600, $orange-800, $white); + @include btn-color($orange-500, $orange-600, $orange-500, $orange-600, $orange-600, $orange-800, $white-contrast); } @mixin btn-red { - @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white); + @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-contrast); } @mixin btn-white { @@ -122,7 +122,7 @@ } @mixin btn-purple { - @include btn-color($purple-700, $purple-800, $purple-800, $purple-900, $purple-900, $purple-950, $white); + @include btn-color($purple-700, $purple-800, $purple-800, $purple-900, $purple-900, $purple-950, $white-contrast); } @mixin btn-with-margin { @@ -175,10 +175,6 @@ @include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800); } - &.btn-warning { - @include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700); - } - &.btn-primary, &.btn-info { @include btn-outline($white, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800); @@ -190,10 +186,6 @@ @include btn-blue; } - &.btn-warning { - @include btn-orange; - } - &.btn-danger { @include btn-red; } @@ -357,25 +349,6 @@ } } -.btn-link { - padding: 0; - background-color: transparent; - color: $blue-600; - font-weight: normal; - border-radius: 0; - border-color: transparent; - border-width: 0; - - &:hover, - &:active, - &:focus { - color: $blue-800; - text-decoration: underline; - background-color: transparent; - border-color: transparent; - } -} - // The .btn-svg class is available for legacy icon buttons to // preserve a 34px height and have 16x16 icons at the same time. // Once a button is migrated (to the current 32px height) @@ -417,16 +390,6 @@ fieldset[disabled] .btn, cursor: default; } -// This class helps convert `.gl-button` children so that they consistently -// match the style of `.btn` elements which might be around them. Ideally we -// wouldn't need this class. -// -// Remove by upgrading all buttons in a container to use the new `.gl-button` style. -.gl-button-deprecated-adapter .gl-button { - box-shadow: none; - border-width: 1px; -} - copy-code { @include gl-absolute; @include gl-transition-medium; @@ -440,3 +403,22 @@ copy-code { @include gl-opacity-10; } } + +.btn-link { + padding: 0; + background-color: transparent; + color: $blue-600; + font-weight: normal; + border-radius: 0; + border-color: transparent; + border-width: 0; + + &:hover, + &:active, + &:focus { + color: $blue-800; + text-decoration: underline; + background-color: transparent; + border-color: transparent; + } +} diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index e06c71dccf0..036cec15935 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -27,7 +27,8 @@ } .toggle-sidebar-button { - width: $contextual-sidebar-collapsed-width; + width: #{$contextual-sidebar-collapsed-width - 1px}; + padding: 0 21px; .collapse-text { display: none; @@ -81,7 +82,7 @@ @include gl-px-0; @include gl-pb-2; @include gl-pt-0; - background-color: $gray-10; + @include gl-bg-gray-10; box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24; border-style: none; border-radius: $border-radius-default; @@ -128,7 +129,7 @@ @include gl-p-2; @include gl-mb-2; - @include gl-mt-0; + @include gl-mt-1; .avatar-container { @include gl-font-weight-normal; @@ -246,7 +247,8 @@ z-index: 600; width: $contextual-sidebar-width; top: $header-height; - background-color: $gray-50; + background-color: $contextual-sidebar-bg-color; + border-right: 1px solid $contextual-sidebar-border-color; transform: translate3d(0, 0, 0); &.sidebar-collapsed-desktop { @@ -352,7 +354,6 @@ } .sidebar-top-level-items { - @include gl-mt-2; margin-bottom: 60px; .context-header a { @@ -410,11 +411,10 @@ .toggle-sidebar-button, .close-nav-button { @include side-panel-toggle; - background-color: $gray-50; - border-top: 1px solid $border-color; + background-color: $contextual-sidebar-bg-color; position: fixed; bottom: 0; - width: $contextual-sidebar-width; + width: #{$contextual-sidebar-width - 1px}; .collapse-text, .icon-chevron-double-lg-left, diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 7a77256398e..904d041fdc9 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -456,19 +456,6 @@ table.code { table-layout: fixed; border-radius: 0 0 $border-radius-default $border-radius-default; - .diff-tr:first-of-type.line_expansion > .diff-td, - tr:first-of-type.line_expansion > td { - border-top: 0; - } - - .diff-tr:nth-last-of-type(2).line_expansion > .diff-td, - tr:nth-last-of-type(2).line_expansion, - tr:last-of-type.line_expansion { - > td { - border-bottom: 0; - } - } - .diff-tr.line_holder .diff-td, tr.line_holder td { line-height: $code-line-height; @@ -557,6 +544,10 @@ table.code { left: 0; } } + + img { + max-width: 100%; + } } } @@ -607,10 +598,6 @@ table.code { grid-template-columns: 50px 8px 0 1fr; } - .diff-grid-3-col { - grid-template-columns: 50px 1fr !important; - } - .diff-grid-2-col { grid-template-columns: 100px 1fr !important; @@ -619,10 +606,6 @@ table.code { } } - &.inline-diff-view .diff-grid-3-col { - grid-template-columns: 50px 50px 1fr !important; - } - .diff-grid-comments { display: grid; grid-template-columns: 1fr 1fr; @@ -839,18 +822,6 @@ table.code { } } -.commits-container { - .diff-files-changed { - @include media-breakpoint-up(sm) { - top: $header-height; - - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height}); - } - } - } -} - .diff-files-changed { background-color: $body-bg; @@ -861,11 +832,11 @@ table.code { @include media-breakpoint-up(sm) { @include gl-sticky; - top: calc(#{$header-height} + #{$mr-tabs-height}); + top: $header-height; z-index: 200; .with-performance-bar & { - top: calc(#{$header-height} + #{$mr-tabs-height} + #{$performance-bar-height}); + top: calc(#{$header-height} + #{$performance-bar-height}); } &.is-stuck { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 5c6d9266f7c..43e14a63f9d 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -70,6 +70,15 @@ } } +.dropdown-toggle, +.dropdown-menu-toggle, +.dropdown-menu-close { + &:active, + &:focus { + @include gl-focus; + } +} + // Get search dropdown to line up with other nav dropdowns .search-input-container .dropdown-menu { margin-top: 11px; @@ -206,6 +215,13 @@ text-decoration: none; } + &:active, + &:focus, + &:focus:active, + &.is-focused { + @include gl-focus($inset: true); + } + &.dropdown-menu-user-link { line-height: 16px; padding-top: 10px; @@ -271,7 +287,6 @@ display: block; text-align: left; list-style: none; - padding: 0 1px; > a, button, @@ -839,6 +854,15 @@ color: $red-700; } + .frequent-items-list-item-container .gl-button { + &:active, + &:focus, + &:focus:active, + &.is-focused { + @include gl-focus($inset: true); + } + } + .frequent-items-list-item-container a { display: flex; } diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 50783433c3d..bba995a6de3 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -108,6 +108,11 @@ label { width: $input-short-md-width; } } + + &:focus { + border-color: $gray-400; + @include gl-focus; + } } .select-control { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index f76a0cbbae8..ced62926218 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -52,8 +52,13 @@ display: flex; align-items: center; padding: 2px 8px; - margin: 4px 2px 4px -12px; + margin: 4px 2px 4px -8px; border-radius: $border-radius-default; + + &:active, + &:focus { + @include gl-focus($focus-ring: $focus-ring-dark); + } } .canary-badge { @@ -214,6 +219,11 @@ outline: 0; color: $white; } + + &:active, + &:focus { + @include gl-focus($focus-ring: $focus-ring-dark); + } } .top-nav-toggle, @@ -234,6 +244,8 @@ .navbar-sub-nav { display: flex; + align-items: center; + height: 100%; margin: 0 0 0 6px; .dropdown-chevron { diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index a80643e695b..1c43212f501 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -11,7 +11,6 @@ border-radius: 0 0 $border-radius-default; font-family: $monospace-font; font-size: $code-font-size; - line-height: 1.5; margin: 0; overflow: auto; overflow-y: hidden; diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index ca0240b6a65..a8e740525e2 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -1,94 +1,55 @@ -.ci-status-icon-success, -.ci-status-icon-passed { - svg { - fill: $green-500; +@mixin icon-styles($primary-color, $svg-color) { + svg, + .gl-icon { + fill: $primary-color; + } + + // For the pipeline mini graph, we pass a custom 'gl-border' so that we can enforce + // a border of 1px instead of the thicker svg borders to adhere to design standards. + // If we implement the component with 'isBorderless' and also pass that border, + // this css is to dynamically apply the correct border color for those specific icons. + &.borderless { + border-color: $primary-color; } &.interactive { &:hover { - background: $green-500; + background: $svg-color; + } - svg { - --svg-status-bg: #{$green-100}; - box-shadow: 0 0 0 1px $green-500; - } + &:hover, + &.active { + box-shadow: 0 0 0 1px $primary-color; } } } +.ci-status-icon-success, +.ci-status-icon-passed { + @include icon-styles($green-500, $green-100); +} + .ci-status-icon-error, .ci-status-icon-failed { - svg { - fill: $red-500; - } - - &.interactive { - &:hover { - background: $red-500; - - svg { - --svg-status-bg: #{$red-100}; - box-shadow: 0 0 0 1px $red-500; - } - } - } + @include icon-styles($red-500, $red-100); } .ci-status-icon-pending, .ci-status-icon-waiting-for-resource, .ci-status-icon-failed-with-warnings, .ci-status-icon-success-with-warnings { - svg { - fill: $orange-500; - } - - &.interactive { - &:hover { - background: $orange-500; - - svg { - --svg-status-bg: #{$orange-100}; - box-shadow: 0 0 0 1px $orange-500; - } - } - } + @include icon-styles($orange-500, $orange-100); } .ci-status-icon-running { - svg { - fill: $blue-500; - } - - &.interactive { - &:hover { - background: $blue-500; - - svg { - --svg-status-bg: #{$blue-100}; - box-shadow: 0 0 0 1px $blue-500; - } - } - } + @include icon-styles($blue-500, $blue-100); } .ci-status-icon-canceled, .ci-status-icon-disabled, .ci-status-icon-scheduled, .ci-status-icon-manual { - svg { - fill: $gray-900; - } - - &.interactive { - &:hover { - background: $gray-900; - - svg { - --svg-status-bg: #{$gray-100}; - box-shadow: 0 0 0 1px $gray-900; - } - } - } + @include icon-styles($gray-900, $gray-100); } .ci-status-icon-notification, @@ -96,20 +57,7 @@ .ci-status-icon-created, .ci-status-icon-skipped, .ci-status-icon-notfound { - svg { - fill: $gray-500; - } - - &.interactive { - &:hover { - background: $gray-500; - - svg { - --svg-status-bg: #{$gray-100}; - box-shadow: 0 0 0 1px $gray-500; - } - } - } + @include icon-styles($gray-500, $gray-100); } .icon-link { diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss deleted file mode 100644 index 8baf70da0c6..00000000000 --- a/app/assets/stylesheets/framework/issue_box.scss +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Issue box for showing Open/Closed state: - * Used for Issue#show page, MergeRequest#show page etc - * - */ - -.status-box { - padding: 0 $gl-btn-padding; - - border-radius: $border-radius-default; - display: block; - float: left; - margin-right: $gl-padding-8; - color: $white; - font-size: $gl-font-size; - line-height: $gl-line-height-24; - - &.status-box-closed, - &.status-box-mr-closed { - background-color: $red-500; - } - - &.status-box-issue-closed, - &.status-box-alert-resolved, - &.status-box-mr-merged { - background-color: $blue-500; - } - - &.status-box-open { - background-color: $green-500; - } - - &.status-box-expired { - background-color: $orange-500; - } - - &.status-box-upcoming { - background: $gl-text-color-secondary; - } -} diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 1caf02937d5..2cea3b96ff7 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -358,8 +358,8 @@ line-height: 1; padding: 0; min-width: 16px; - color: $gray-400; - fill: $gray-400; + color: $gray-500; + fill: $gray-500; svg { @include btn-svg; diff --git a/app/assets/stylesheets/framework/page_title.scss b/app/assets/stylesheets/framework/page_title.scss index c77e2be8e5a..5ed5b1e1445 100644 --- a/app/assets/stylesheets/framework/page_title.scss +++ b/app/assets/stylesheets/framework/page_title.scss @@ -3,8 +3,6 @@ .page-title { margin: $gl-padding 0; - font-size: 1.75em; - font-weight: $gl-font-weight-bold; color: $gl-text-color; } diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 549b61aedae..74aed1bd984 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -273,6 +273,18 @@ @include scrolling-links(); } + .fade-left::after, + .fade-right::after { + content: ''; + pointer-events: none; + z-index: -1; + display: block; + width: 16px; + height: 100%; + position: absolute; + top: 0; + } + .fade-right { @include fade(left, $gray-light); right: -5px; @@ -280,6 +292,11 @@ svg { right: -7px; } + + &::after { + right: 0; + background: linear-gradient(270deg, $white, transparent); + } } .fade-left { @@ -290,6 +307,11 @@ svg { left: -7px; } + + &::after { + left: 0; + background: linear-gradient(90deg, $white, transparent); + } } } @@ -316,7 +338,6 @@ .fade-right, .fade-left { - bottom: $gl-padding; top: auto; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index dd9581c4692..13201d43fd0 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -24,15 +24,11 @@ &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { padding-right: $gutter-collapsed-width; } - - .merge-request-tabs-holder.affix { - right: $gutter-collapsed-width; - } } } &.is-merge-request { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { .content-wrapper { padding-right: $gutter-collapsed-width; } @@ -60,7 +56,7 @@ z-index: $zindex-dropdown-menu; &.right-sidebar-merge-requests { - width: 270px; + width: 300px; @include media-breakpoint-up(md) { z-index: auto; @@ -77,17 +73,11 @@ } } - @include media-breakpoint-up(md) { - .content-wrapper { - padding-right: $gutter-width; - } - - &:not(.with-overlay) .merge-request-tabs-holder.affix { - right: $gutter-width; - } - - &.with-overlay .merge-request-tabs-holder.affix { - right: $gutter-collapsed-width; + &:not(.is-merge-request) { + @include media-breakpoint-up(md) { + .content-wrapper { + padding-right: $gutter-width; + } } } } @@ -96,7 +86,7 @@ border-left: 1px solid $gray-100; &.right-sidebar-merge-requests { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { border-left: 0; } } @@ -110,10 +100,6 @@ } } -.with-performance-bar .right-sidebar.affix { - top: calc(#{$header-height} + #{$performance-bar-height}); -} - @mixin maintain-sidebar-dimensions { display: block; width: $gutter-width; @@ -284,6 +270,10 @@ .reviewer-grid { [data-css-area='attention'] { grid-area: attention; + + button.selected svg { + fill: $orange-500; + } } [data-css-area='user'] { diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 9b38e842635..086b83b13e0 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -49,7 +49,7 @@ } img.avatar { - margin-right: $gl-padding; + margin-right: $gl-padding-12; @include media-breakpoint-down(sm) { width: $gl-spacing-scale-6; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index b1e44a81267..b5e0dcd875a 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -135,11 +135,13 @@ blockquote, .blockquote { - color: $gl-grayish-blue; font-size: inherit; - padding: 8px 24px; - margin: 16px 0; - border-left: 3px solid $white-dark; + @include gl-text-gray-700; + @include gl-py-3; + @include gl-pl-6; + @include gl-my-3; + @include gl-mx-0; + @include gl-inset-border-l-4-gray-100; &:dir(rtl) { border-left: 0; @@ -147,9 +149,8 @@ } p { - color: $gl-grayish-blue !important; - font-size: inherit; line-height: 1.5; + @include gl-reset-color; &:last-child { margin: 0; @@ -592,6 +593,14 @@ } /** + * Links + * + */ +a:focus-visible { + @include gl-focus($outline: true, $outline-offset: $outline-width); +} + +/** * Headers * */ @@ -602,8 +611,6 @@ body { .page-title { margin: #{2 * $grid-size} 0; line-height: 1.3; - font-size: 1.25em; - font-weight: $gl-font-weight-bold; &.with-button { line-height: 34px; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index bc649b6407d..eeffc4fc21b 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -8,8 +8,8 @@ $gutter-inner-width: 250px; $sidebar-transition-duration: 0.3s; $sidebar-breakpoint: 1024px; $default-transition-duration: 0.15s; -$contextual-sidebar-width: 220px; -$contextual-sidebar-collapsed-width: 48px; +$contextual-sidebar-width: 256px; +$contextual-sidebar-collapsed-width: 56px; $toggle-sidebar-height: 48px; /** @@ -169,7 +169,7 @@ $purple-800: #453894 !default; $purple-900: #2f2a6b !default; $purple-950: #232150 !default; -$gray-10: #fafafa !default; +$gray-10: #f5f5f5 !default; $gray-50: #f0f0f0 !default; $gray-100: #dbdbdb !default; $gray-200: #bfbfbf !default; @@ -357,6 +357,8 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); /* * UI elements */ +$contextual-sidebar-bg-color: #f5f5f5; +$contextual-sidebar-border-color: #e9e9e9; $border-color: $gray-100; $shadow-color: $t-gray-a-08; $well-expand-item: #e8f2f7 !default; @@ -426,8 +428,6 @@ $gl-padding-12: 12px; $gl-padding: 16px; $gl-padding-24: 24px; $gl-padding-32: 32px; -$gl-padding-50: 50px; -$gl-col-padding: 15px; $gl-input-padding: 10px; $gl-vert-padding: 6px; $gl-padding-top: 10px; @@ -439,7 +439,7 @@ $browser-scrollbar-size: 10px; /* * Misc */ -$header-height: var(--header-height, 40px); +$header-height: var(--header-height, 48px); $header-zindex: 1000; $zindex-dropdown-menu: 300; $suggestion-header-height: 46px; @@ -580,7 +580,7 @@ $sidebar-toggle-height: 60px; $sidebar-toggle-width: 40px; $sidebar-milestone-toggle-bottom-margin: 10px; $sidebar-avatar-size: 32px; -$sidebar-top-item-lr-margin: 4px; +$sidebar-top-item-lr-margin: 8px; $sidebar-top-item-tb-margin: 1px; /* diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index 433141ae690..fcbd05141b9 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -29,36 +29,6 @@ } } -@mixin old-diff-expansion($background, $border, $link) { - background-color: $background; - - .diff-td, - td { - border-top: 1px solid $border; - border-bottom: 1px solid $border; - } - - button { - color: $link; - border: 0; - background: transparent; - - &[disabled] { - color: desaturate($link, 100%); - opacity: 0.5; - cursor: default; - } - - &:hover:not([disabled]) { - text-decoration: underline; - } - - &:not(:focus-visible) { - outline: 0; - } - } -} - @mixin dark-diff-expansion-line { &.expansion .diff-td { @@ -156,3 +126,11 @@ @include gl-display-inline-block; } } + +@mixin hljs-override($suffix, $color) { + &.blob-viewer { + .hljs-#{$suffix} { + color: $color; + } + } +} diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 0eeebdb2e7a..f4d9909d81f 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -154,10 +154,6 @@ $dark-il: #de935f; color: $dark-line-color; } - .old-line_expansion { - @include old-diff-expansion($dark-main-bg, $dark-border, $dark-na); - } - .diff-line-expand-button { @include diff-expansion($gray-600, $gray-200, $gray-300, $white); } diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index b8cd97d6504..dfa32d4b773 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -96,6 +96,25 @@ $monokai-gh: #75715e; } .code.monokai { + // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167) + // 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('keyword', $monokai-k); + @include hljs-override('variable', $monokai-nv); + @include hljs-override('variable.language_', $monokai-k); + @include hljs-override('title', $monokai-nf); + @include hljs-override('name', $monokai-k); + @include hljs-override('tag', $monokai-nt); + @include hljs-override('type', $monokai-nc); + @include hljs-override('number', $monokai-mf); + @include hljs-override('literal', $monokai-kc); + @include hljs-override('built_in', $monokai-n); + @include hljs-override('section', $monokai-gh); + @include hljs-override('bullet', $monokai-n); + @include hljs-override('subst', $monokai-p); + @include hljs-override('symbol', $monokai-ni); + // Line numbers .file-line-num { @include line-number-link($monokai-line-num-color); @@ -125,10 +144,6 @@ $monokai-gh: #75715e; color: $monokai-text-color; } - .old-line_expansion { - @include old-diff-expansion($monokai-bg, $monokai-border, $monokai-k); - } - .diff-line-expand-button { @include diff-expansion($gray-600, $gray-200, $gray-300, $white); } diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 99a3de23c26..f70c53c9eaa 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -15,6 +15,14 @@ } .code.none { + // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167) + // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251) + &.blob-viewer { + [class^="hljs-"] { + color: $gl-text-color; + } + } + // Line numbers .file-line-num { @include line-number-link($black-transparent); @@ -44,10 +52,6 @@ color: $gl-text-color; } - .old-line_expansion { - @include old-diff-expansion($gray-light, $white-normal, $gl-text-color); - } - .diff-line-expand-button { @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800); } diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index 55d17b8f1d2..73aa6275d17 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -99,6 +99,25 @@ $solarized-dark-il: #2aa198; } .code.solarized-dark { + // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167) + // 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('keyword', $solarized-dark-k); + @include hljs-override('variable', $solarized-dark-nv); + @include hljs-override('variable.language_', $solarized-dark-k); + @include hljs-override('title', $solarized-dark-nf); + @include hljs-override('name', $solarized-dark-k); + @include hljs-override('tag', $solarized-dark-nt); + @include hljs-override('type', $solarized-dark-nc); + @include hljs-override('number', $solarized-dark-mf); + @include hljs-override('literal', $solarized-dark-kc); + @include hljs-override('built_in', $solarized-dark-n); + @include hljs-override('section', $solarized-dark-gh); + @include hljs-override('bullet', $solarized-dark-n); + @include hljs-override('subst', $solarized-dark-p); + @include hljs-override('symbol', $solarized-dark-ni); + // Line numbers .file-line-num { @include line-number-link($solarized-dark-line-color); @@ -128,10 +147,6 @@ $solarized-dark-il: #2aa198; color: $solarized-dark-pre-color; } - .old-line_expansion { - @include old-diff-expansion($solarized-dark-line-bg, $solarized-dark-border, $solarized-dark-kd); - } - .diff-line-expand-button { @include diff-expansion(lighten($solarized-dark-pre-bg, 10%), $gray-200, lighten($solarized-dark-pre-bg, 20%), $white); } diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 72b961097e4..74448317270 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -134,10 +134,6 @@ $solarized-light-il: #2aa198; background-color: $solarized-light-pre-bg; color: $solarized-light-pre-color; } - - .old-line_expansion { - @include old-diff-expansion($solarized-light-line-bg, $solarized-light-border, $solarized-light-kd); - } .diff-line-expand-button { @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800); diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index b984c194033..aac8ccde96e 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -133,19 +133,6 @@ pre.code, color: $white-code-color; } -.old-line_expansion { - @include old-diff-expansion($gray-light, $border-color, $blue-600); - - &.diff-tr:last-child { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - - .diff-td { - border-bottom: 0; - } - } -} - .diff-line-expand-button { @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800); } diff --git a/app/assets/stylesheets/notify_enhanced.scss b/app/assets/stylesheets/notify_enhanced.scss index a366498ea03..b331d997a97 100644 --- a/app/assets/stylesheets/notify_enhanced.scss +++ b/app/assets/stylesheets/notify_enhanced.scss @@ -32,10 +32,6 @@ body { font-size: inherit; } -a { - text-decoration: none; -} - .gl-mb-5 { @include gl-mb-5; } diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index 3327f8da632..613d27a2f39 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -52,7 +52,6 @@ width: $ci-action-dropdown-svg-size; height: $ci-action-dropdown-svg-size; position: relative; - top: 1px; vertical-align: initial; } } diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index d55d6b27576..d40c03b7fd1 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -44,13 +44,6 @@ } } - &.affix-top { - position: absolute; - right: 0; - left: 0; - top: 0; - } - .controllers { @include build-controllers(15px, center, false, 0, inline, 0); } @@ -177,12 +170,6 @@ width: 289px; overflow: auto; - svg { - margin-right: 3px; - height: 14px; - width: 14px; - } - a { padding: $gl-padding 10px $gl-padding 40px; width: 270px; diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 6c270852e53..a4a82fdcef3 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -563,24 +563,11 @@ $ide-commit-header-height: 48px; } .ide-commit-options { - label { - font-weight: normal; - - &.is-disabled { - .ide-option-label { - text-decoration: line-through; - } + .is-disabled { + .ide-option-label { + text-decoration: line-through; } } - - .form-text.text-muted { - margin-top: 0; - line-height: 0; - } -} - -.ide-commit-new-branch { - margin-left: 25px; } .ide-sidebar-link { diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss index ade649faaae..c664e0a734e 100644 --- a/app/assets/stylesheets/page_bundles/issues_show.scss +++ b/app/assets/stylesheets/page_bundles/issues_show.scss @@ -24,8 +24,9 @@ /* The inside bullet aligns itself to the bottom, which we see when text to the right of * a multi-line list item wraps. We fix this by aligning it to the top, and excluding - * other elements adversely affected by this. Targeting ::marker doesn't seem to work. */ - > *:not(code):not(input):not(.gl-label) { + * other elements. Targeting ::marker doesn't seem to work, instead we exclude custom elements + * or anything with a class */ + > *:not(gl-emoji, code, [class]) { vertical-align: top; } @@ -75,29 +76,6 @@ } } -.description.work-items-enabled { - ul.task-list { - > li.task-list-item { - .js-add-task { - svg { - visibility: hidden; - } - - &:focus svg { - visibility: visible; - } - } - - &:hover, - &:focus-within { - .js-add-task svg { - visibility: visible; - } - } - } - } -} - .is-ghost { opacity: 0.3; pointer-events: none; diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index f153569f99b..0a2b3175aa9 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -33,12 +33,6 @@ $header-height: 40px; right: 0; } -.jira-connect-user { - position: fixed; - top: 10px; - right: 20px; -} - .jira-connect-app { margin-top: $header-height; height: calc(100% - #{$header-height}); diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index f04cdfba0e4..14873c54cd7 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -315,7 +315,7 @@ $tabs-holder-z-index: 250; } .mr-fast-forward-message { - padding-left: $gl-padding-50; + padding-left: $gl-spacing-scale-9; padding-bottom: $gl-padding; } @@ -610,10 +610,10 @@ $tabs-holder-z-index: 250; .mr-widget-extension { border-top: 1px solid var(--border-color, $border-color); - background-color: var(--gray-50, $gray-50); + background-color: var(--gray-10, $gray-10); &.clickable:hover { - background-color: var(--gray-100, $gray-100); + background-color: var(--gray-50, $gray-50); cursor: pointer; } } @@ -737,9 +737,70 @@ $tabs-holder-z-index: 250; } .merge-request-overview { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { display: grid; - grid-template-columns: 1fr 270px; + grid-template-columns: calc(95% - 285px) auto; grid-gap: 5%; } } + +.container-fluid:not(.container-limited) { + .detail-page-header, + .detail-page-description, + .merge-request-tabs-container { + &.is-merge-request { + @include gl-mx-auto; + max-width: $fixed-layout-width - ($gl-padding * 2); + } + } +} + +.submit-review-dropdown { + &.show .dropdown-menu { + width: calc(100vw - 20px); + max-width: 650px; + + .gl-new-dropdown-inner { + max-height: none !important; + } + + .md-header { + .gl-tab-nav-item { + @include gl-text-gray-900; + @include gl-pb-5; + + &:hover { + @include gl-bg-none; + @include gl-text-gray-900; + + &:not(.gl-tab-nav-item-active) { + @include gl-inset-border-b-2-gray-200; + } + } + } + + .gl-tab-nav-item-active { + @include gl-font-weight-bold; + @include gl-text-gray-900; + @include gl-inset-border-b-2-theme-accent; + + &:active, + &:focus, + &:focus:active { + box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500), + $focus-ring; + @include gl-outline-none; + } + } + } + } + + .gl-new-dropdown-contents { + padding: $gl-spacing-scale-4 !important; + } + + .md-preview-holder { + max-height: 180px; + height: 180px; + } +} diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index a225a0f0061..4946bbbebe5 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -74,11 +74,8 @@ .stage-cell { .stage-container { - align-items: center; - display: inline-flex; - - + .stage-container { - margin-left: 4px; + &:last-child { + margin-right: 0; } // Hack to show a button tooltip inline @@ -94,10 +91,11 @@ &:not(:last-child) { &::after { content: ''; - width: 4px; + border-bottom: 2px solid $gray-200; position: absolute; right: -4px; - border-bottom: 2px solid $gray-200; + top: 11px; + width: 4px; } } } diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss index c64e159c648..9bbea48d2c0 100644 --- a/app/assets/stylesheets/page_bundles/wiki.scss +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -1,5 +1,4 @@ @import 'mixins_and_variables_and_functions'; -@import 'highlight.js/scss/a11y-light'; @import 'components/content_editor'; .title .edit-wiki-header { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index afe57bb26e6..80b9e378252 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -56,7 +56,7 @@ position: relative; font-family: $monospace-font; $left: 12px; - overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-foss/issues/13987 + .max-width-marker { width: 72ch; color: $commit-max-width-marker-color; @@ -95,6 +95,10 @@ } } +.commits-row + .commits-row { + border-top: 1px solid $white-normal; +} + .text-expander { display: inline-flex; background: $white; diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index e0319952adb..909de9d57f2 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -5,15 +5,6 @@ line-height: 34px; display: flex; - a { - color: $gl-text-color; - - &.link, - &.gl-link { - color: $blue-600; - } - } - .author-link { white-space: nowrap; } @@ -23,6 +14,15 @@ } } +.detail-page-header a { + color: $gl-text-color; +} + +.detail-page-header a.link, +.detail-page-header .title a { + color: $blue-600; +} + .detail-page-header-body { position: relative; display: flex; @@ -58,7 +58,6 @@ .detail-page-description { .title { margin: 0 0 16px; - font-size: 2em; color: $gl-text-color; padding: 0 0 0.3em; border-bottom: 1px solid $white-dark; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 7ac3ef2221f..96ca9fbcb43 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -6,15 +6,8 @@ .groups-list { @include basic-list; - display: flex; - flex-direction: column; - margin: 0; li { - .title { - font-weight: 600; - } - a { text-decoration: none; @@ -40,8 +33,8 @@ } .save-group-loader { - margin-top: $gl-padding-50; - margin-bottom: $gl-padding-50; + margin-top: $gl-spacing-scale-9; + margin-bottom: $gl-spacing-scale-9; color: $gray-700; } @@ -81,17 +74,13 @@ table.pipeline-project-metrics tr td { } .explore-groups.landing { - .inner-content { - padding: 0; - - p { - margin: 7px 0 0; - max-width: 480px; - padding: 0 $gl-padding; + .inner-content p { + margin: 7px 0 0; + max-width: 480px; + padding: 0 $gl-padding; - @include media-breakpoint-down(sm) { - margin: 0 auto; - } + @include media-breakpoint-down(sm) { + margin: 0 auto; } } @@ -113,13 +102,6 @@ table.pipeline-project-metrics tr td { } .groups-list-tree-container { - .has-no-search-results { - text-align: center; - padding: $gl-padding; - font-style: italic; - color: $well-light-text-color; - } - > .group-list-tree > .group-row.has-children:first-child { border-top: 0; } @@ -135,16 +117,6 @@ table.pipeline-project-metrics tr td { } } - .folder-caret, - .item-type-icon { - display: inline-block; - color: $gl-text-color-secondary; - } - - .folder-caret { - width: $gl-font-size-large; - } - .item-type-icon { margin-top: 2px; width: 20px; @@ -288,10 +260,3 @@ table.pipeline-project-metrics tr td { } } } - -.js-groups-list-holder { - .groups-list-loading { - font-size: 34px; - text-align: center; - } -} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 086abcf3f86..f3182af3047 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -1,3 +1,14 @@ +.status-box { + padding: 0 $gl-btn-padding; + border-radius: $border-radius-default; + display: block; + float: left; + margin-right: $gl-padding-8; + color: $white; + font-size: $gl-font-size; + line-height: $gl-line-height-24; +} + .issuable-warning-icon { background-color: $orange-50; border-radius: $border-radius-default; @@ -134,8 +145,9 @@ } &.right-sidebar-merge-requests { - @include media-breakpoint-down(sm) { + @include media-breakpoint-down(md) { @include right-sidebar; + z-index: 251; } } @@ -186,7 +198,7 @@ } .block { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { padding: $gl-spacing-scale-5 0; } } @@ -263,10 +275,6 @@ } } - &.affix-top .issuable-sidebar { - height: 100%; - } - &.right-sidebar-expanded { &:not(.right-sidebar-merge-requests) { width: $gutter-width; @@ -280,8 +288,33 @@ padding: 0 20px; &.is-merge-request { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { padding: 0; + + form { + --initial-top: calc(#{$header-height} + #{$mr-tabs-height}); + --top: var(--initial-top); + + @include gl-sticky; + @include gl-overflow-auto; + + top: var(--top); + height: calc(100vh - var(--top)); + 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}); + } + } } } } @@ -334,7 +367,7 @@ } &.right-sidebar-merge-requests { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { display: block; } } @@ -617,21 +650,6 @@ } } -.issuable-status-box { - align-self: stretch; - display: flex; - justify-content: center; - align-items: center; - margin-top: 0; - padding: 0 $gl-padding-8; - - @include media-breakpoint-up(sm) { - display: inline-block; - height: auto; - align-self: center; - } -} - .issuable-gutter-toggle { @include media-breakpoint-down(sm) { margin-left: $btn-side-margin; @@ -919,3 +937,58 @@ margin-right: -7px; z-index: 1; } + +.issuable-discussion.incident-timeline-events { + .main-notes-list::before { + content: none; + } + + .timeline-event-note { + p { + margin-bottom: 0; + } + } +} + +/** + * We have a very specific design proposal where we cannot + * use `vertical-line` mixin as it is and have to use + * custom styles, see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81284#note_904867444 + */ +.timeline-entry-vertical-line { + &::before, + &::after { + content: ''; + border-left: 2px solid $gray-50; + position: absolute; + left: 39px; + height: 80%; + } + + &:first-child::before, + &:last-child::after { + content: none; + } + + &:first-child { + &::after { + top: 50%; + } + } + + &:last-child { + &::before { + bottom: 50%; + } + } + + &:not(:first-child):not(:last-child) { + &::before { + top: -10%; + } + + &::after { + bottom: -10%; + } + } +} diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 82216b8d5c5..bd66319d78f 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -74,21 +74,11 @@ > li:not(.empty-message):not(.no-border) { background-color: $white; - margin-bottom: 5px; display: flex; justify-content: space-between; - padding: $gl-padding; - border-radius: $border-radius-default; - border: 1px solid $gray-50; - - &:last-child { - margin-bottom: 0; - } .prioritized-labels:not(.is-not-draggable) & { - box-shadow: 0 1px 2px $issue-boards-card-shadow; cursor: grab; - border: 0; &:active { cursor: grabbing; @@ -111,11 +101,6 @@ width: 109px; } -.labels-container { - border-radius: $border-radius-default; - padding: $gl-padding $gl-padding-8; -} - .label-actions-list { list-style: none; flex-shrink: 0; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 0d3ed0e7c71..a3fbedd87a9 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -3,6 +3,7 @@ * */ $tabs-holder-z-index: 250; +$comparison-empty-state-height: 62px; .space-children { @include clearfix; @@ -70,6 +71,10 @@ $tabs-holder-z-index: 250; } } +.compare-commit-empty { + min-height: $comparison-empty-state-height; +} + .commits-empty { text-align: center; @@ -200,11 +205,6 @@ $tabs-holder-z-index: 250; } } -.assign-to-me-link { - padding-left: 12px; - white-space: nowrap; -} - .table-holder { .ci-table { th { @@ -214,14 +214,9 @@ $tabs-holder-z-index: 250; } } -.merge-request-tabs-holder, -.epic-tabs-holder { +.merge-request-tabs-holder { top: $header-height; z-index: $tabs-holder-z-index; - margin-left: -$gl-padding; - margin-right: -$gl-padding; - padding-left: $gl-padding; - padding-right: $gl-padding; background-color: $body-bg; border-bottom: 1px solid $border-color; @@ -251,30 +246,14 @@ $tabs-holder-z-index: 250; } } -.merge-request-tabs-holder.affix .merge-request-tabs-container, -.epic-tabs-holder.affix .epic-tabs-container { - padding-left: $gl-padding; - padding-right: $gl-padding; -} - .with-performance-bar { - .merge-request-tabs-holder, - .epic-tabs-holder { + .merge-request-tabs-holder { top: calc(#{$header-height} + #{$performance-bar-height}); } } -.merge-request-tabs, -.epic-tabs { - display: flex; - flex-wrap: nowrap; - margin-bottom: 0; - padding: 0; -} - .limit-container-width { - .merge-request-tabs-container, - .epic-tabs-container { + .merge-request-tabs-container { max-width: $limited-layout-width; margin-left: auto; margin-right: auto; @@ -287,11 +266,7 @@ $tabs-holder-z-index: 250; } } -.merge-request-tabs-container, -.epic-tabs-container { - display: flex; - justify-content: space-between; - +.merge-request-tabs-container { @include media-breakpoint-down(xs) { .discussion-filter-container { margin-bottom: $gl-padding-4; @@ -318,16 +293,14 @@ $tabs-holder-z-index: 250; // Wrap MR tabs/buttons so you don't have to scroll on desktop @include media-breakpoint-down(md) { - .merge-request-tabs-container, - .epic-tabs-container { + .merge-request-tabs-container { flex-direction: column-reverse; } } @include media-breakpoint-down(lg) { .right-sidebar-expanded { - .merge-request-tabs-container, - .epic-tabs-container { + .merge-request-tabs-container { flex-direction: column-reverse; align-items: flex-start; } @@ -335,8 +308,7 @@ $tabs-holder-z-index: 250; } .limit-container-width:not(.container-limited) { - .merge-request-tabs-holder:not(.affix) .merge-request-tabs-container, - .epic-tabs-holder:not(.affix) .epic-tabs-container { + .merge-request-tabs-holder .merge-request-tabs-container { max-width: $limited-layout-width - ($gl-padding * 2); } } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 1c408f6d985..645f145328b 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -55,16 +55,6 @@ box-shadow ease-in-out 0.15s; background-color: $white; - &.is-focused { - border-color: $input-focus-border-color; - box-shadow: $input-focus-box-shadow; - - .comment-toolbar, - .nav-links { - border-color: $blue-300; - } - } - &.is-dropzone-hover { border-color: $green-500; box-shadow: 0 0 2px $black-transparent, @@ -75,9 +65,22 @@ border-color: $green-500; } } + + // Disable inner focus + textarea:focus { + @include gl-shadow-none; + } + } + + .comment-warning-wrapper:focus-within { + @include gl-focus; } } +.md-area:focus-within { + @include gl-focus; +} + .md-header .nav-links { display: flex; flex-flow: row wrap; @@ -428,7 +431,11 @@ table { } .comment-warning-wrapper { + transition: border-color ease-in-out 0.15s, + box-shadow ease-in-out 0.15s; + .md-area { border: 0; + box-shadow: none; } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 1949603b416..82e96dee4c6 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -20,7 +20,7 @@ $system-note-svg-size: 16px; } .note-wrapper { - padding: $gl-padding; + padding: $gl-padding $gl-padding-8 $gl-padding $gl-padding; &.outlined { @include outline-comment(); @@ -199,6 +199,7 @@ $system-note-svg-size: 16px; } .note-body { + padding: $gl-padding-4; overflow-x: auto; overflow-y: hidden; @@ -564,7 +565,6 @@ $system-note-svg-size: 16px; } .discussion-header { - min-height: $line-height-base * 2em; box-sizing: content-box; .note-header-info { @@ -579,6 +579,7 @@ $system-note-svg-size: 16px; &.note-wrapper { display: flex; align-items: center; + padding-right: $gl-padding; } } @@ -615,6 +616,7 @@ $system-note-svg-size: 16px; .note-header-info { min-width: 0; + padding-left: $gl-padding-4; &.discussion { padding-bottom: 0; @@ -623,7 +625,7 @@ $system-note-svg-size: 16px; .note-header-info, .note-actions { - padding-bottom: $gl-padding-8; + padding-bottom: $gl-padding-4; } .system-note .note-header-info { diff --git a/app/assets/stylesheets/pages/pages.scss b/app/assets/stylesheets/pages/pages.scss deleted file mode 100644 index 2de33f20595..00000000000 --- a/app/assets/stylesheets/pages/pages.scss +++ /dev/null @@ -1,55 +0,0 @@ -.pages-domain-list { - &-item { - align-items: center; - - .domain-status { - display: inline-flex; - left: $gl-padding; - position: absolute; - } - - .domain-name { - flex-grow: 1; - } - - } - - &.has-verification-status > li { - padding-left: 3 * $gl-padding; - } - -} - -.status-badge { - - display: inline-flex; - margin-bottom: $gl-padding-8; - - // Most of the following settings "stolen" from btn-sm - // Border radius is overwritten for both - .label, - .btn { - padding: $gl-padding-4 $gl-padding-8; - font-size: $gl-font-size; - line-height: $gl-btn-line-height; - border-radius: 0; - display: flex; - align-items: center; - } - - .btn svg { - top: auto; - } - - :first-child { - line-height: $gl-line-height; - } - - :not(:first-child) { - border-left: 0; - } - - :last-child { - border-radius: $border-radius-default; - } -} diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index f76a8030e5b..812cc6ab4e6 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -363,10 +363,6 @@ table.u2f-registrations { color: $gl-text-color-secondary; } -.gitlab-slack-body { - max-width: 420px; -} - .gitlab-slack-slack-logo { transform: scale(200%); // Slack logo SVG is scaled down 50% and has empty space around it } diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss index b583d40de79..518ec181e5e 100644 --- a/app/assets/stylesheets/pages/profiles/preferences.scss +++ b/app/assets/stylesheets/pages/profiles/preferences.scss @@ -1,6 +1,6 @@ .application-theme { - $ui-dark-bg: #2e2e2e; - $ui-light-bg: #dfdfdf; + $ui-gray-bg: #2e2e2e; + $ui-light-gray-bg: #dfdfdf; $ui-dark-mode-bg: #1f1f1f; .preview { @@ -42,13 +42,13 @@ background-color: $theme-light-red-700; } - &.ui-dark { - background-color: $ui-dark-bg; + &.ui-gray { + background-color: $ui-gray-bg; border: solid 1px $border-color; } - &.ui-light { - background-color: $ui-light-bg; + &.ui-light-gray { + background-color: $ui-light-gray-bg; } &.gl-dark { diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index f79237eee3d..e1f540c0f5f 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -26,6 +26,7 @@ &.gl-snippet-icon-doc-code { background-position: 0 0; } &.gl-snippet-icon-doc-text { background-position: 0 -16px; } &.gl-snippet-icon-download { background-position: 0 -32px; } + &.gl-snippet-icon-copy-to-clipboard { background-position: 0 -48px; } } .blob-viewer { @@ -109,6 +110,7 @@ .file-header-content { max-width: 75%; + align-self: center; .file-title-name { font-weight: $gl-font-weight-bold; @@ -143,6 +145,7 @@ } .btn-group { + button.btn, a.btn { background-color: $white; text-decoration: none; @@ -165,5 +168,9 @@ border-right: $border-style; } } + + button.btn { + padding: 9px 9px 8px; + } } } diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 001431e517b..4cefa60b12a 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -42,10 +42,6 @@ body { text-align: left; background-color: #1f1f1f; } -h1 { - margin-top: 0; - margin-bottom: 0.25rem; -} ul { margin-top: 0; margin-bottom: 1rem; @@ -105,15 +101,6 @@ button::-moz-focus-inner, [type="search"] { outline-offset: -2px; } -h1 { - margin-bottom: 0.25rem; - font-weight: 600; - line-height: 1.2; - color: #fafafa; -} -h1 { - font-size: 2.1875rem; -} .list-unstyled { padding-left: 0; list-style: none; @@ -363,9 +350,6 @@ h1 { white-space: nowrap; border: 0; } -.m-auto { - margin: auto !important; -} .gl-badge { display: inline-flex; align-items: center; @@ -547,10 +531,6 @@ html [type="button"], [role="button"] { cursor: pointer; } -h1 { - margin-top: 20px; - margin-bottom: 10px; -} strong { font-weight: bold; } @@ -634,6 +614,10 @@ body { .dropdown { position: relative; } +.dropdown-menu-toggle:active { + box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb; + outline: none; +} .search-input-container .dropdown-menu { margin-top: 11px; } @@ -684,7 +668,6 @@ body { display: block; text-align: left; list-style: none; - padding: 0 1px; } .dropdown-menu li > a, .dropdown-menu li button { @@ -710,6 +693,12 @@ body { outline: 0; text-decoration: none; } +.dropdown-menu li > a:active, +.dropdown-menu li button:active { + box-shadow: inset 0 0 0 2px #1f75cb, inset 0 0 0 3px #333, + inset 0 0 0 1px #333; + outline: none; +} .dropdown-menu .divider { height: 1px; margin: 0.25rem 0; @@ -755,7 +744,7 @@ input { padding: 0 16px; z-index: 1000; margin-bottom: 0; - min-height: var(--header-height, 40px); + min-height: var(--header-height, 48px); border: 0; position: fixed; top: 0; @@ -771,7 +760,7 @@ input { display: flex; justify-content: space-between; position: relative; - min-height: var(--header-height, 40px); + min-height: var(--header-height, 48px); padding-left: 0; } .navbar-gitlab .header-content .title { @@ -787,16 +776,17 @@ input { .navbar-gitlab .header-content .title img { height: 24px; } -.navbar-gitlab .header-content .title img + .logo-text { - margin-left: 8px; -} .navbar-gitlab .header-content .title a { display: flex; align-items: center; padding: 2px 8px; - margin: 4px 2px 4px -12px; + margin: 4px 2px 4px -8px; border-radius: 4px; } +.navbar-gitlab .header-content .title a:active { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px #1068bf; + outline: none; +} .navbar-gitlab .header-content .title .canary-badge { margin-left: -8px; } @@ -902,6 +892,13 @@ input { height: 32px; font-weight: 600; } +.navbar-sub-nav > li > a:active, +.navbar-sub-nav > li > button:active, +.navbar-nav > li > a:active, +.navbar-nav > li > button:active { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px #1068bf; + outline: none; +} .navbar-sub-nav > li .top-nav-toggle, .navbar-sub-nav > li > button, .navbar-nav > li .top-nav-toggle, @@ -915,6 +912,8 @@ input { } .navbar-sub-nav { display: flex; + align-items: center; + height: 100%; margin: 0 0 0 6px; } .caret-down, @@ -990,7 +989,7 @@ input { .context-header { position: relative; margin-right: 2px; - width: 220px; + width: 256px; } .context-header > a, .context-header > button { @@ -1015,17 +1014,17 @@ input { } @media (min-width: 768px) { .page-with-contextual-sidebar { - padding-left: 48px; + padding-left: 56px; } } @media (min-width: 1200px) { .page-with-contextual-sidebar { - padding-left: 220px; + padding-left: 256px; } } @media (min-width: 768px) { .page-with-icon-sidebar { - padding-left: 48px; + padding-left: 56px; } } .nav-sidebar { @@ -1033,13 +1032,14 @@ input { bottom: 0; left: 0; z-index: 600; - width: 220px; - top: var(--header-height, 40px); - background-color: #303030; + width: 256px; + top: var(--header-height, 48px); + background-color: #f5f5f5; + border-right: 1px solid #e9e9e9; transform: translate3d(0, 0, 0); } .nav-sidebar.sidebar-collapsed-desktop { - width: 48px; + width: 56px; } .nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { overflow-x: hidden; @@ -1092,7 +1092,7 @@ input { border-radius: 0.25rem; width: auto; line-height: 1rem; - margin: 1px 4px; + margin: 1px 8px; } .nav-sidebar li.active > a { font-weight: 600; @@ -1106,7 +1106,7 @@ input { } @media (max-width: 767.98px) { .nav-sidebar { - left: -220px; + left: -256px; } } .nav-sidebar .nav-icon-container { @@ -1228,7 +1228,7 @@ input { } @media (min-width: 768px) and (max-width: 1199px) { .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 48px; + width: 56px; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; @@ -1263,7 +1263,7 @@ input { } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; - width: 48px; + width: 56px; } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; @@ -1295,7 +1295,8 @@ input { margin-right: 0; } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { - width: 48px; + width: 55px; + padding: 0 21px; } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button @@ -1328,10 +1329,10 @@ input { border-radius: 0.25rem; width: auto; line-height: 1rem; - margin: 1px 4px; + margin: 1px 8px; padding: 0.25rem; margin-bottom: 0.25rem; - margin-top: 0; + margin-top: 0.125rem; } .nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; @@ -1350,13 +1351,12 @@ input { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items { - margin-top: 0.25rem; margin-bottom: 60px; } .sidebar-top-level-items .context-header a { padding: 0.25rem; margin-bottom: 0.25rem; - margin-top: 0; + margin-top: 0.125rem; } .sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; @@ -1402,11 +1402,10 @@ input { color: #999; display: flex; align-items: center; - background-color: #303030; - border-top: 1px solid #404040; + background-color: #f5f5f5; position: fixed; bottom: 0; - width: 220px; + width: 255px; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left, @@ -1420,7 +1419,7 @@ input { } .sidebar-collapsed-desktop .context-header { height: 60px; - width: 48px; + width: 56px; } .sidebar-collapsed-desktop .context-header a { padding: 10px 4px; @@ -1452,7 +1451,8 @@ input { margin-right: 0; } .sidebar-collapsed-desktop .toggle-sidebar-button { - width: 48px; + width: 55px; + padding: 0 21px; } .sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text { display: none; @@ -1788,6 +1788,12 @@ body.gl-dark { --svg-status-bg: #333; --nav-active-bg: rgba(255, 255, 255, 0.08); } +.nav-sidebar, +.toggle-sidebar-button, +.close-nav-button { + background-color: #262626; + border-right: 1px solid #303030; +} .nav-sidebar li a { color: var(--gray-600); } @@ -2044,19 +2050,9 @@ body.gl-dark { .gl-display-none { display: none; } -@media (min-width: 992px) { - .gl-lg-display-none\! { - display: none !important; - } -} .gl-display-flex { display: flex; } -@media (min-width: 992px) { - .gl-lg-display-flex { - display: flex; - } -} @media (min-width: 576px) { .gl-sm-display-block { display: block; @@ -2070,12 +2066,18 @@ body.gl-dark { .gl-display-inline-block\! { display: inline-block !important; } +.gl-align-items-center { + align-items: center; +} .gl-align-items-stretch { align-items: stretch; } .gl-flex-grow-1 { flex-grow: 1; } +.gl-justify-content-end { + justify-content: flex-end; +} .gl-relative { position: relative; } diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index c42b5554d8d..cb3c97f18a3 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -27,10 +27,6 @@ body { text-align: left; background-color: #fff; } -h1 { - margin-top: 0; - margin-bottom: 0.25rem; -} ul { margin-top: 0; margin-bottom: 1rem; @@ -90,15 +86,6 @@ button::-moz-focus-inner, [type="search"] { outline-offset: -2px; } -h1 { - margin-bottom: 0.25rem; - font-weight: 600; - line-height: 1.2; - color: #303030; -} -h1 { - font-size: 2.1875rem; -} .list-unstyled { padding-left: 0; list-style: none; @@ -348,9 +335,6 @@ h1 { white-space: nowrap; border: 0; } -.m-auto { - margin: auto !important; -} .gl-badge { display: inline-flex; align-items: center; @@ -431,7 +415,7 @@ a.gl-badge.badge-warning:active { .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { - background-color: #fafafa; + background-color: #f5f5f5; box-shadow: inset 0 0 0 1px #dbdbdb; } .gl-form-input:disabled, @@ -532,10 +516,6 @@ html [type="button"], [role="button"] { cursor: pointer; } -h1 { - margin-top: 20px; - margin-bottom: 10px; -} strong { font-weight: bold; } @@ -619,6 +599,10 @@ body { .dropdown { position: relative; } +.dropdown-menu-toggle:active { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc; + outline: none; +} .search-input-container .dropdown-menu { margin-top: 11px; } @@ -669,7 +653,6 @@ body { display: block; text-align: left; list-style: none; - padding: 0 1px; } .dropdown-menu li > a, .dropdown-menu li button { @@ -695,6 +678,12 @@ body { outline: 0; text-decoration: none; } +.dropdown-menu li > a:active, +.dropdown-menu li button:active { + box-shadow: inset 0 0 0 2px #428fdc, inset 0 0 0 3px #fff, + inset 0 0 0 1px #fff; + outline: none; +} .dropdown-menu .divider { height: 1px; margin: 0.25rem 0; @@ -740,7 +729,7 @@ input { padding: 0 16px; z-index: 1000; margin-bottom: 0; - min-height: var(--header-height, 40px); + min-height: var(--header-height, 48px); border: 0; position: fixed; top: 0; @@ -756,7 +745,7 @@ input { display: flex; justify-content: space-between; position: relative; - min-height: var(--header-height, 40px); + min-height: var(--header-height, 48px); padding-left: 0; } .navbar-gitlab .header-content .title { @@ -772,16 +761,17 @@ input { .navbar-gitlab .header-content .title img { height: 24px; } -.navbar-gitlab .header-content .title img + .logo-text { - margin-left: 8px; -} .navbar-gitlab .header-content .title a { display: flex; align-items: center; padding: 2px 8px; - margin: 4px 2px 4px -12px; + margin: 4px 2px 4px -8px; border-radius: 4px; } +.navbar-gitlab .header-content .title a:active { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9; + outline: none; +} .navbar-gitlab .header-content .title .canary-badge { margin-left: -8px; } @@ -887,6 +877,13 @@ input { height: 32px; font-weight: 600; } +.navbar-sub-nav > li > a:active, +.navbar-sub-nav > li > button:active, +.navbar-nav > li > a:active, +.navbar-nav > li > button:active { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9; + outline: none; +} .navbar-sub-nav > li .top-nav-toggle, .navbar-sub-nav > li > button, .navbar-nav > li .top-nav-toggle, @@ -900,6 +897,8 @@ input { } .navbar-sub-nav { display: flex; + align-items: center; + height: 100%; margin: 0 0 0 6px; } .caret-down, @@ -975,7 +974,7 @@ input { .context-header { position: relative; margin-right: 2px; - width: 220px; + width: 256px; } .context-header > a, .context-header > button { @@ -1000,17 +999,17 @@ input { } @media (min-width: 768px) { .page-with-contextual-sidebar { - padding-left: 48px; + padding-left: 56px; } } @media (min-width: 1200px) { .page-with-contextual-sidebar { - padding-left: 220px; + padding-left: 256px; } } @media (min-width: 768px) { .page-with-icon-sidebar { - padding-left: 48px; + padding-left: 56px; } } .nav-sidebar { @@ -1018,13 +1017,14 @@ input { bottom: 0; left: 0; z-index: 600; - width: 220px; - top: var(--header-height, 40px); - background-color: #f0f0f0; + width: 256px; + top: var(--header-height, 48px); + background-color: #f5f5f5; + border-right: 1px solid #e9e9e9; transform: translate3d(0, 0, 0); } .nav-sidebar.sidebar-collapsed-desktop { - width: 48px; + width: 56px; } .nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { overflow-x: hidden; @@ -1077,7 +1077,7 @@ input { border-radius: 0.25rem; width: auto; line-height: 1rem; - margin: 1px 4px; + margin: 1px 8px; } .nav-sidebar li.active > a { font-weight: 600; @@ -1091,7 +1091,7 @@ input { } @media (max-width: 767.98px) { .nav-sidebar { - left: -220px; + left: -256px; } } .nav-sidebar .nav-icon-container { @@ -1213,7 +1213,7 @@ input { } @media (min-width: 768px) and (max-width: 1199px) { .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 48px; + width: 56px; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; @@ -1248,7 +1248,7 @@ input { } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; - width: 48px; + width: 56px; } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; @@ -1280,7 +1280,8 @@ input { margin-right: 0; } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { - width: 48px; + width: 55px; + padding: 0 21px; } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button @@ -1313,10 +1314,10 @@ input { border-radius: 0.25rem; width: auto; line-height: 1rem; - margin: 1px 4px; + margin: 1px 8px; padding: 0.25rem; margin-bottom: 0.25rem; - margin-top: 0; + margin-top: 0.125rem; } .nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; @@ -1335,13 +1336,12 @@ input { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items { - margin-top: 0.25rem; margin-bottom: 60px; } .sidebar-top-level-items .context-header a { padding: 0.25rem; margin-bottom: 0.25rem; - margin-top: 0; + margin-top: 0.125rem; } .sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; @@ -1387,11 +1387,10 @@ input { color: #666; display: flex; align-items: center; - background-color: #f0f0f0; - border-top: 1px solid #dbdbdb; + background-color: #f5f5f5; position: fixed; bottom: 0; - width: 220px; + width: 255px; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left, @@ -1405,7 +1404,7 @@ input { } .sidebar-collapsed-desktop .context-header { height: 60px; - width: 48px; + width: 56px; } .sidebar-collapsed-desktop .context-header a { padding: 10px 4px; @@ -1437,7 +1436,8 @@ input { margin-right: 0; } .sidebar-collapsed-desktop .toggle-sidebar-button { - width: 48px; + width: 55px; + padding: 0 21px; } .sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text { display: none; @@ -1704,19 +1704,9 @@ svg.s16 { .gl-display-none { display: none; } -@media (min-width: 992px) { - .gl-lg-display-none\! { - display: none !important; - } -} .gl-display-flex { display: flex; } -@media (min-width: 992px) { - .gl-lg-display-flex { - display: flex; - } -} @media (min-width: 576px) { .gl-sm-display-block { display: block; @@ -1730,12 +1720,18 @@ svg.s16 { .gl-display-inline-block\! { display: inline-block !important; } +.gl-align-items-center { + align-items: center; +} .gl-align-items-stretch { align-items: stretch; } .gl-flex-grow-1 { flex-grow: 1; } +.gl-justify-content-end { + justify-content: flex-end; +} .gl-relative { position: relative; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 020ed9c040b..3090edfb123 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -297,7 +297,7 @@ fieldset:disabled a.btn { .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { - background-color: #fafafa; + background-color: #f5f5f5; box-shadow: inset 0 0 0 1px #dbdbdb; } .gl-form-input:disabled, @@ -419,7 +419,7 @@ body.navless { } } .navless-container { - margin-top: var(--header-height, 40px); + margin-top: var(--header-height, 48px); padding-top: 32px; } .btn { @@ -506,7 +506,7 @@ label.label-bold { } .navbar-empty { justify-content: center; - height: var(--header-height, 40px); + height: var(--header-height, 48px); background: #fff; border-bottom: 1px solid #dbdbdb; } diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 6a9e96c3ac5..fe8a5aec1b3 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -209,7 +209,6 @@ body.gl-dark { &.btn-info, &.btn-success, &.btn-danger, - &.btn-warning, &.btn-confirm { &-tertiary { mix-blend-mode: screen; diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index dbb961fe71f..34bb4925249 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -41,6 +41,13 @@ border-color: $gray-800; } +.nav-sidebar, +.toggle-sidebar-button, +.close-nav-button { + background-color: darken($gray-50, 4%); + border-right: 1px solid $gray-50; +} + .nav-sidebar { li { a { @@ -68,6 +75,11 @@ } } +aside.right-sidebar:not(.right-sidebar-merge-requests) { + background-color: $gray-10; + border-left-color: $gray-50; +} + body.gl-dark { @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $gray-900, $white); diff --git a/app/assets/stylesheets/themes/theme_dark.scss b/app/assets/stylesheets/themes/theme_gray.scss index 4c52cdc30df..75b111f90c7 100644 --- a/app/assets/stylesheets/themes/theme_dark.scss +++ b/app/assets/stylesheets/themes/theme_gray.scss @@ -1,7 +1,7 @@ @import './theme_helper'; body { - &.ui-dark { + &.ui-gray { @include gitlab-theme( $gray-200, $gray-300, diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 234010074aa..ad352f0022b 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -97,8 +97,7 @@ .notification-dot { will-change: border-color, background-color; - // stylelint-disable-next-line - border-color: $nav-svg-color + 33; + border-color: adjust-color($nav-svg-color, $red: 33, $green: 33, $blue: 33); } &.header-help-dropdown-toggle .notification-dot { diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light_gray.scss index 66b2b3c3437..ad19438d79a 100644 --- a/app/assets/stylesheets/themes/theme_light.scss +++ b/app/assets/stylesheets/themes/theme_light_gray.scss @@ -1,7 +1,7 @@ @import './theme_helper'; body { - &.ui-light { + &.ui-light-gray { @include gitlab-theme( $gray-500, $gray-700, @@ -33,6 +33,14 @@ body { &.active > button { color: $white; } + + > a, + > button { + &:active, + &:focus { + @include gl-focus; + } + } } } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index fd85ff894a7..27fcade548f 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -368,28 +368,49 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 } /* - * The below style will be moved to @gitlab/ui by - * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1792 + * The styles from here to END-#1825 will be moved to @gitlab/ui by + * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1825 */ -.gl-text-purple-800 { - color: $purple-800; +.gl-lg-mx-12 { + @include media-breakpoint-up(lg) { + margin-left: $gl-spacing-scale-12; + margin-right: $gl-spacing-scale-12; + } } -.gl-bg-theme-indigo-800 { - background-color: $theme-indigo-800; +.gl-lg-ml-12 { + @include media-breakpoint-up(lg) { + margin-left: $gl-spacing-scale-12; + } } -.gl-border-indigo-700 { - border-color: $theme-indigo-700; +.gl-lg-mr-12 { + @include media-breakpoint-up(lg) { + margin-right: $gl-spacing-scale-12; + } } -.gl-border-gray-75 { - border-color: $gl-text-color-quaternary; +.gl-lg-ml-10 { + @include media-breakpoint-up(lg) { + margin-left: $gl-spacing-scale-10; + } } -.gl-min-h-8 { - min-height: $gl-spacing-scale-8; +.gl-lg-mr-10 { + @include media-breakpoint-up(lg) { + margin-right: $gl-spacing-scale-10; + } } -/* End gitlab-ui#1751 */ +.gl-lg-w-30p { + @include gl-media-breakpoint-up(lg) { + width: 30%; + } +} +.gl-lg-w-40p { + @include gl-media-breakpoint-up(lg) { + width: 40%; + } +} +/* END-#1825 */ |