Merge branch '268212-move-css-to-page-specific-bundle' into 'master'

Move CSS to page related bundle

See merge request gitlab-org/gitlab!48792

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 }