diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-03 15:09:39 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-03 15:09:39 +0300 |
commit | f145ef4be75f3711c52a680b86d96568e9acf385 (patch) | |
tree | 5e90358a166062305cf41f73e541cf4744b76c4d /app | |
parent | 544eaa90817fa8595826fbd44f37452c76b56378 (diff) |
Add latest changes from gitlab-org/gitlab@masterCSTarun
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/blob/viewer/index.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/commits.js | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/fontawesome_custom.scss | 25 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/blocks.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/diffs.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/_pipeline_mixins.scss | 16 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 7 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/_dark.scss | 116 | ||||
-rw-r--r-- | app/models/concerns/reactive_caching.rb | 3 | ||||
-rw-r--r-- | app/views/projects/blob/_viewer_switcher.html.haml | 2 |
11 files changed, 84 insertions, 103 deletions
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index aa76364c466..01350acad0c 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -132,16 +132,16 @@ export default class BlobViewer { const newViewer = this.$fileHolder[0].querySelector(`.blob-viewer[data-type='${name}']`); if (this.activeViewer === newViewer) return; - const oldButton = document.querySelector('.js-blob-viewer-switch-btn.active'); + const oldButton = document.querySelector('.js-blob-viewer-switch-btn.selected'); const newButton = document.querySelector(`.js-blob-viewer-switch-btn[data-viewer='${name}']`); const oldViewer = this.$fileHolder[0].querySelector(`.blob-viewer:not([data-type='${name}'])`); if (oldButton) { - oldButton.classList.remove('active'); + oldButton.classList.remove('selected'); } if (newButton) { - newButton.classList.add('active'); + newButton.classList.add('selected'); newButton.blur(); } diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js index 7dd75d03ab9..b18c109937d 100644 --- a/app/assets/javascripts/commits.js +++ b/app/assets/javascripts/commits.js @@ -31,7 +31,7 @@ export default class CommitsList { const search = this.searchField.val(); if (search === this.lastSearch) return Promise.resolve(); const commitsUrl = `${form.attr('action')}?${form.serialize()}`; - this.content.fadeTo('fast', 0.5); + this.content.addClass('gl-opacity-5'); const params = form.serializeArray().reduce( (acc, obj) => Object.assign(acc, { @@ -47,7 +47,7 @@ export default class CommitsList { .then(({ data }) => { this.lastSearch = search; this.content.html(data.html); - this.content.fadeTo('fast', 1.0); + this.content.removeClass('gl-opacity-5'); // Change url so if user reload a page - search results are saved window.history.replaceState( @@ -59,7 +59,7 @@ export default class CommitsList { ); }) .catch(() => { - this.content.fadeTo('fast', 1.0); + this.content.removeClass('gl-opacity-5'); this.lastSearch = null; }); } diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss index 2f5ef142b6f..a5e357c8fda 100644 --- a/app/assets/stylesheets/fontawesome_custom.scss +++ b/app/assets/stylesheets/fontawesome_custom.scss @@ -43,10 +43,6 @@ content: '\f0eb'; } -.fa-circle::before { - content: '\f111'; -} - .fa-thumb-tack::before { content: '\f08d'; } @@ -62,24 +58,3 @@ .fa-check-square-o::before { content: '\f046'; } - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -.sr-only-focusable:active, -.sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; -} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index f42e500efa8..bfa4a640fe2 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -73,7 +73,7 @@ &.content-component-block { padding: 11px 0; - background-color: $white; + background-color: $body-bg; } .title { diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 5b4475a8000..cf9363b77be 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -56,7 +56,7 @@ left: -11px; width: 10px; height: calc(100% + 1px); - background: $white; + background: $body-bg; pointer-events: none; } diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index 499394ad960..9db3baf0fdf 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -66,7 +66,7 @@ @mixin mini-pipeline-item() { border-radius: 100px; - background-color: $white; + background-color: var(--white, $white); border-width: 1px; border-style: solid; width: $ci-action-icon-size; @@ -85,22 +85,22 @@ // Dropdown button animation in mini pipeline graph &.ci-status-icon-success { - @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700); + @include mini-pipeline-graph-color(var(--white, $white), $green-100, $green-200, $green-500, $green-600, $green-700); } &.ci-status-icon-failed { - @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700); + @include mini-pipeline-graph-color(var(--white, $white), $red-100, $red-200, $red-500, $red-600, $red-700); } &.ci-status-icon-pending, &.ci-status-icon-waiting-for-resource, &.ci-status-icon-success-with-warnings { - @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); + @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); } &.ci-status-icon-preparing, &.ci-status-icon-running { - @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); + @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); } &.ci-status-icon-canceled, @@ -108,12 +108,12 @@ &.ci-status-icon-disabled, &.ci-status-icon-not-found, &.ci-status-icon-manual { - @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black); + @include mini-pipeline-graph-color(var(--white, $white), $gray-500, $gray-700, $gray-900, $gray-950, $black); } &.ci-status-icon-created, &.ci-status-icon-skipped { - @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500); + @include mini-pipeline-graph-color(var(--white, $white), $gray-100, $gray-200, $gray-300, $gray-400, $gray-500); } } @@ -226,7 +226,7 @@ &:focus { outline: none; text-decoration: none; - background-color: $gray-darker; + background-color: var(--gray-100, $gray-50); } } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 7e9b14a545b..9c5143b4144 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -53,6 +53,7 @@ $mr-widget-min-height: 69px; position: relative; border: 1px solid $border-color; border-radius: $border-radius-default; + background: var(--white, $white); .gl-skeleton-loader { display: block; @@ -61,7 +62,7 @@ $mr-widget-min-height: 69px; .mr-widget-extension { border-top: 1px solid $border-color; - background-color: $gray-light; + background-color: $gray-50; &.clickable:hover { background-color: $gray-100; @@ -87,6 +88,7 @@ $mr-widget-min-height: 69px; border: 1px solid $border-color; border-radius: $border-radius-default; border-top: 0; + background: var(--white, $white); } .mr-widget-body, @@ -543,6 +545,7 @@ $mr-widget-min-height: 69px; border-radius: $border-radius-default; padding: $gl-padding; border: 1px solid $border-color; + background: var(--white, $white); min-height: $mr-widget-min-height; @include media-breakpoint-up(md) { @@ -761,7 +764,7 @@ $mr-widget-min-height: 69px; .epic-tabs-holder { top: $header-height; z-index: 250; - background-color: $white; + background-color: $body-bg; border-bottom: 1px solid $border-color; .with-system-header & { diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 45f8a4782e6..0e95c8a098b 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -350,7 +350,7 @@ $note-form-margin-left: 72px; left: $gl-padding-24; right: 0; bottom: 0; - background: linear-gradient(rgba($white, 0.1) -100px, $white 100%); + background: linear-gradient(rgba($white, 0.1) -100px, $body-bg 100%); } } } diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 6ab02bd5e27..7f2bea9bf26 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -1,63 +1,63 @@ $gray-10: #1f1f1f; -$gray-50: #2e2e2e; -$gray-100: #4f4f4f; -$gray-200: #707070; -$gray-300: #919191; -$gray-400: #a7a7a7; -$gray-500: #bababa; -$gray-600: #ccc; -$gray-700: #dfdfdf; -$gray-800: #f2f2f2; +$gray-50: #303030; +$gray-100: #404040; +$gray-200: #525252; +$gray-300: #5e5e5e; +$gray-400: #868686; +$gray-500: #999; +$gray-600: #bfbfbf; +$gray-700: #dbdbdb; +$gray-800: #f0f0f0; $gray-900: #fafafa; $gray-950: #fff; -$green-50: #072b15; -$green-100: #0a4020; -$green-200: #0e5a2d; -$green-300: #12753a; -$green-400: #168f48; -$green-500: #1aaa55; -$green-600: #37b96d; -$green-700: #75d09b; -$green-800: #b3e6c8; -$green-900: #dcf5e7; +$green-50: #0a4020; +$green-100: #0d532a; +$green-200: #24663b; +$green-300: #217645; +$green-400: #108548; +$green-500: #2da160; +$green-600: #52b87a; +$green-700: #91d4a8; +$green-800: #c3e6cd; +$green-900: #ecf4ee; $green-950: #f1fdf6; -$blue-50: #0a2744; -$blue-100: #0f3b66; -$blue-200: #134a81; -$blue-300: #17599c; -$blue-400: #1b69b6; -$blue-500: #1f78d1; -$blue-600: #418cd8; -$blue-700: #73afea; -$blue-800: #b8d6f4; -$blue-900: #e4f0fb; -$blue-950: #f6fafe; - -$orange-50: #592800; -$orange-100: #853c00; -$orange-200: #a35200; -$orange-300: #c26700; -$orange-400: #de7e00; -$orange-500: #fc9403; -$orange-600: #fca429; -$orange-700: #fdbc60; -$orange-800: #fed69f; -$orange-900: #fff1de; -$orange-950: #fffaf4; - -$red-50: #4b140b; -$red-100: #711e11; -$red-200: #8b2615; -$red-300: #a62d19; -$red-400: #c0341d; -$red-500: #db3b21; -$red-600: #e05842; -$red-700: #ea8271; -$red-800: #f2b4a9; -$red-900: #fbe5e1; -$red-950: #fef6f5; +$blue-50: #033464; +$blue-100: #064787; +$blue-200: #0b5cad; +$blue-300: #1068bf; +$blue-400: #1f75cb; +$blue-500: #428fdc; +$blue-600: #63a6e9; +$blue-700: #9dc7f1; +$blue-800: #cbe2f9; +$blue-900: #e9f3fc; +$blue-950: #f2f9ff; + +$orange-50: #5c2900; +$orange-100: #703800; +$orange-200: #8f4700; +$orange-300: #9e5400; +$orange-400: #ab6100; +$orange-500: #c17d10; +$orange-600: #d99530; +$orange-700: #e9be74; +$orange-800: #f5d9a8; +$orange-900: #fdf1dd; +$orange-950: #fff4e1; + +$red-50: #660e00; +$red-100: #8d1300; +$red-200: #ae1800; +$red-300: #c91c00; +$red-400: #dd2b0e; +$red-500: #ec5941; +$red-600: #f57f6c; +$red-700: #fcb5aa; +$red-800: #fdd4cd; +$red-900: #fcf1ef; +$red-950: #fff4f3; $indigo-50: #1a1a40; $indigo-100: #292961; @@ -166,14 +166,16 @@ body.gl-dark { --white: #{$white}; --black: #{$black}; + + --svg-status-bg: #{$white}; } $border-white-light: $gray-900; $border-white-normal: $gray-900; -$body-bg: $gray-50; -$input-bg: $gray-100; -$input-focus-bg: $gray-100; +$body-bg: $gray-10; +$input-bg: $white; +$input-focus-bg: $white; $input-color: $gray-900; $input-group-addon-bg: $gray-900; diff --git a/app/models/concerns/reactive_caching.rb b/app/models/concerns/reactive_caching.rb index 3470bdab5fb..dbc70ac2218 100644 --- a/app/models/concerns/reactive_caching.rb +++ b/app/models/concerns/reactive_caching.rb @@ -1,7 +1,8 @@ # frozen_string_literal: true # The usage of the ReactiveCaching module is documented here: -# https://docs.gitlab.com/ee/development/reactive_caching.md +# https://docs.gitlab.com/ee/development/reactive_caching.html +# module ReactiveCaching extend ActiveSupport::Concern diff --git a/app/views/projects/blob/_viewer_switcher.html.haml b/app/views/projects/blob/_viewer_switcher.html.haml index 8e3cf607bbf..c6b13deaece 100644 --- a/app/views/projects/blob/_viewer_switcher.html.haml +++ b/app/views/projects/blob/_viewer_switcher.html.haml @@ -8,5 +8,5 @@ = sprite_icon(simple_viewer.switcher_icon) - rich_label = "Display #{rich_viewer.switcher_title}" - %button.btn.gl-button.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }> + %button.btn.gl-button.btn-default.btn-sm.js-blob-viewer-switch-btn.gl-mr-3.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }> = sprite_icon(rich_viewer.switcher_icon) |