Move reports.scss out of application bundle

And into a page specific bundle which is imported in the
merge requests page.

app/assets/stylesheets/_page_specific_files.scss

@@ -40,7 +40,6 @@
 @import './pages/profiles/preferences';
 @import './pages/projects';
 @import './pages/prometheus';
-@import './pages/reports';
 @import './pages/runners';
 @import './pages/search';
 @import './pages/service_desk';

app/assets/stylesheets/page_bundles/pipeline.scss

@@ -385,3 +385,44 @@
   right: 13px;
   top: 8px;
 }
+
+
+.split-report-section {
+  border-bottom: 1px solid var(--gray-50, $gray-50);
+
+  .report-block-container {
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  .space-children,
+  .space-children > span {
+    display: flex;
+    align-self: center;
+  }
+
+  .media {
+    align-items: center;
+    padding: 10px;
+    line-height: 20px;
+
+    /*
+    This fixes the wrapping div of the icon in the report header.
+    Apparently the borderless status icons are half the size of the status icons with border.
+    This means we have to double the size of the wrapping div for borderless icons.
+    */
+    .space-children:first-child {
+      width: 32px;
+      height: 32px;
+      align-items: center;
+      justify-content: center;
+      margin-right: 5px;
+      margin-left: 1px;
+    }
+  }
+
+  .code-text {
+    width: 100%;
+    flex: 1;
+  }
+}

app/assets/stylesheets/pages/reports.scss → app/assets/stylesheets/page_bundles/reports.scss

-.split-report-section {
-  border-bottom: 1px solid $gray-darker;
-
-  .report-block-container {
-    max-height: 500px;
-    overflow: auto;
-  }
-
-  .space-children,
-  .space-children > span {
-    display: flex;
-    align-self: center;
-  }
-
-  .media {
-    align-items: center;
-    padding: 10px;
-    line-height: 20px;
-
-    /*
-    This fixes the wrapping div of the icon in the report header.
-    Apparently the borderless status icons are half the size of the status icons with border.
-    This means we have to double the size of the wrapping div for borderless icons.
-    */
-    .space-children:first-child {
-      width: 32px;
-      height: 32px;
-      align-items: center;
-      justify-content: center;
-      margin-right: 5px;
-      margin-left: 1px;
-    }
-  }
-
-  .code-text {
-    width: 100%;
-    flex: 1;
-  }
-}
+@import 'mixins_and_variables_and_functions';
 
 .mr-widget-grouped-section {
   .report-block-container {
@@ -69,15 +31,15 @@
   display: flex;
 
   &.failed svg {
-    color: $red-500;
+    color: var(--red-500, $red-500);
   }
 
   &.success svg {
-    color: $green-500;
+    color: var(--green-500, $green-500);
   }
 
   &.neutral svg {
-    color: $gray-500;
+    color: var(--gray-500, $gray-500);
   }
 
   .ci-status-icon {

app/views/projects/merge_requests/show.html.haml

@@ -9,6 +9,7 @@
 - number_of_pipelines = @pipelines.size
 - mr_action = j(params[:tab].presence || 'show')
 - add_page_specific_style 'page_bundles/pipelines'
+- add_page_specific_style 'page_bundles/reports'
 
 .merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
   = render "projects/merge_requests/mr_title"

app/views/projects/pipelines/show.html.haml

@@ -3,6 +3,7 @@
 - page_title _('Pipeline')
 - pipeline_has_errors = @pipeline.builds.empty? && @pipeline.yaml_errors.present?
 - add_page_specific_style 'page_bundles/pipeline'
+- add_page_specific_style 'page_bundles/reports'
 
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
   #js-pipeline-header-vue.pipeline-header-container{ data: {full_path: @project.full_path, retry_path: retry_project_pipeline_path(@pipeline.project, @pipeline), cancel_path: cancel_project_pipeline_path(@pipeline.project, @pipeline), delete_path: project_pipeline_path(@pipeline.project, @pipeline), pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id} }

config/application.rb

@@ -184,6 +184,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/pipeline.css"
     config.assets.precompile << "page_bundles/pipelines.css"
     config.assets.precompile << "page_bundles/todos.css"
+    config.assets.precompile << "page_bundles/reports.css"
     config.assets.precompile << "page_bundles/xterm.css"
     config.assets.precompile << "lazy_bundles/cropper.css"
     config.assets.precompile << "performance_bar.css"

ee/app/views/projects/security/dashboard/index.html.haml

 - breadcrumb_title _("Security Dashboard")
 - page_title _("Security Dashboard")
+- add_page_specific_style 'page_bundles/reports'
 
 #js-security-report-app{ data: project_security_dashboard_config(@project) }