Move CSS to page related bundle

Security dashboard css is very specific to its own page
therefore we've decided to move it into its own bundle
in order to improve page performance

app/assets/stylesheets/framework/tables.scss

@@ -184,46 +184,3 @@ table {
     border-top: 0;
   }
 }
-
-.vulnerability-list {
-  @media (min-width: $breakpoint-sm) {
-    .checkbox {
-      padding-left: $gl-spacing-scale-4;
-      padding-right: 0;
-      width: 1px;
-
-      + td,
-      + th {
-        padding-left: $gl-spacing-scale-4;
-      }
-    }
-
-    .detected {
-      width: 9%;
-    }
-
-    .status {
-      width: 8%;
-    }
-
-    .severity {
-      width: 10%;
-    }
-
-    .description {
-      max-width: 0;
-    }
-
-    .identifier {
-      width: 16%;
-    }
-
-    .scanner {
-      width: 10%;
-    }
-
-    .activity {
-      width: 5%;
-    }
-  }
-}

config/application.rb

@@ -198,6 +198,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/pipeline_schedules.css"
     config.assets.precompile << "page_bundles/productivity_analytics.css"
     config.assets.precompile << "page_bundles/profile_two_factor_auth.css"
+    config.assets.precompile << "page_bundles/security_dashboard.css"
     config.assets.precompile << "page_bundles/terminal.css"
     config.assets.precompile << "page_bundles/todos.css"
     config.assets.precompile << "page_bundles/reports.css"

ee/app/assets/stylesheets/pages/security_dashboard.scss → ee/app/assets/stylesheets/page_bundles/security_dashboard.scss

+@import 'page_bundles/mixins_and_variables_and_functions';
+
 $security-filter-height: 90px;
 $selection-summary-height: 68px;
 
@@ -38,9 +40,60 @@ $selection-summary-height: 68px;
   @include sticky-top-positioning();
 }
 
-// Due to position: sticky not being supported on Chrome (https://caniuse.com/#feat=css-sticky),
-// the property is assigned to the th element as a workaround
+.security-dashboard-accordion > ul {
+  @include gl-display-flex;
+  @include gl-flex-fill-1;
+}
+
+.security-charts > section {
+  flex: 1 1 40%;
+  margin: 1rem;
+}
+
 .vulnerability-list {
+  @media (min-width: $breakpoint-sm) {
+    .checkbox {
+      padding-left: $gl-spacing-scale-4;
+      padding-right: 0;
+      width: 1px;
+
+      + td,
+      + th {
+        padding-left: $gl-spacing-scale-4;
+      }
+    }
+
+    .detected {
+      width: 9%;
+    }
+
+    .status {
+      width: 8%;
+    }
+
+    .severity {
+      width: 10%;
+    }
+
+    .description {
+      max-width: 0;
+    }
+
+    .identifier {
+      width: 16%;
+    }
+
+    .scanner {
+      width: 10%;
+    }
+
+    .activity {
+      width: 5%;
+    }
+  }
+
+  // Due to position: sticky not being supported on Chrome (https://caniuse.com/#feat=css-sticky),
+  // the property is assigned to the th element as a workaround
   .card,
   thead th {
     position: -webkit-sticky;
@@ -57,13 +110,3 @@ $selection-summary-height: 68px;
     @include sticky-top-positioning($security-filter-height + $selection-summary-height);
   }
 }
-
-.security-dashboard-accordion > ul {
-  @include gl-display-flex;
-  @include gl-flex-fill-1;
-}
-
-.security-charts > section {
-  flex: 1 1 40%;
-  margin: 1rem;
-}

ee/app/views/groups/security/dashboard/show.html.haml

 - breadcrumb_title _("Security Dashboard")
 - page_title _("Security Dashboard")
+- add_page_specific_style 'page_bundles/security_dashboard'
 
 #js-group-security-dashboard{ data: group_level_security_dashboard_data(@group) }

ee/app/views/groups/security/vulnerabilities/index.html.haml

 - breadcrumb_title _("Vulnerability Report")
 - page_title _("Vulnerability Report")
+- add_page_specific_style 'page_bundles/security_dashboard'
 
 #js-group-vulnerabilities{ data: group_level_security_dashboard_data(@group) }

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

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

ee/app/views/projects/security/vulnerabilities/show.html.haml

@@ -4,5 +4,6 @@
 - page_title @vulnerability.title
 - page_description @vulnerability.description
 - vulnerability_init_details = { vulnerability: vulnerability_details_json(@vulnerability, @pipeline)}
+- add_page_specific_style 'page_bundles/security_dashboard'
 
 #js-vulnerability-main{ data: vulnerability_init_details }

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

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

ee/app/views/security/dashboard/show.html.haml

 - page_title _('Security Dashboard')
+- add_page_specific_style 'page_bundles/security_dashboard'
 
 #js-security{ data: instance_security_dashboard_data }

ee/app/views/security/vulnerabilities/index.html.haml

 - page_title _('Vulnerability Report')
+- add_page_specific_style 'page_bundles/security_dashboard'
 
 #js-vulnerabilities{ data: instance_security_dashboard_data }