Merge branch...

Merge branch '282301-convert-ee-app-assets-stylesheets-pages-roadmap-scss-into-page-specific-bundle' into 'master'

Move roadmap.scss into page bundle

See merge request gitlab-org/gitlab!47604

config/application.rb

@@ -199,6 +199,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/terminal.css"
     config.assets.precompile << "page_bundles/todos.css"
     config.assets.precompile << "page_bundles/reports.css"
+    config.assets.precompile << "page_bundles/roadmap.css"
     config.assets.precompile << "page_bundles/wiki.css"
     config.assets.precompile << "page_bundles/xterm.css"
     config.assets.precompile << "page_bundles/alert_management_settings.css"

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

+@import 'page_bundles/mixins_and_variables_and_functions';
+
 $header-item-height: 60px;
 $item-height: 50px;
 $details-cell-width: px-to-rem(320px);
 $timeline-cell-height: 32px;
 $timeline-cell-width: 180px;
-$border-style: 1px solid $border-gray-normal;
+$border-style: 1px solid var(--gray-100, $gray-100);
 $roadmap-gradient-dark-gray: rgba(0, 0, 0, 0.15);
 $roadmap-gradient-gray: rgba(255, 255, 255, 0.001);
 $scroll-top-gradient: linear-gradient(to bottom, $roadmap-gradient-dark-gray 0%, $roadmap-gradient-gray 100%);
@@ -12,11 +14,11 @@ $column-right-gradient: linear-gradient(to right, $roadmap-gradient-dark-gray 0%
 
 @keyframes colorTransitionDetailsCell {
   from {
-    background-color: $blue-100;
+    background-color: var(--blue-100, $blue-100);
   }
 
   to {
-    background-color: $white;
+    background-color: var(--white, $white);
   }
 }
 
@@ -70,7 +72,7 @@ html.group-epics-roadmap-html {
       border-left: 0;
 
       &:hover {
-        border-color: $gray-darkest;
+        border-color: var(--gray-darkest, $gray-darkest);
       }
     }
 
@@ -170,7 +172,7 @@ html.group-epics-roadmap-html {
     float: left;
     height: $header-item-height;
     border-bottom: $border-style;
-    background-color: $white;
+    background-color: var(--white, $white);
   }
 
   .timeline-header-blank {
@@ -195,7 +197,7 @@ html.group-epics-roadmap-html {
 
     .item-label,
     .item-sublabel .sublabel-value {
-      color: $gray-400;
+      color: var(--gray-400, $gray-400);
       font-weight: 400;
 
       &.label-dark {
@@ -231,7 +233,7 @@ html.group-epics-roadmap-html {
       bottom: 0;
       height: $gl-vert-padding;
       width: $gl-vert-padding;
-      background-color: $red-500;
+      background-color: var(--red-500, $red-500);
       border-radius: 50%;
       transform: translateX(-3px);
     }
@@ -243,7 +245,7 @@ html.group-epics-roadmap-html {
     position: absolute;
     left: 0;
     bottom: -$grid-size;
-    border-top: 1px solid $white;
+    border-top: 1px solid var(--white, $white);
     background: $scroll-top-gradient;
   }
 }
@@ -256,7 +258,7 @@ html.group-epics-roadmap-html {
   &:hover {
     .epic-details-cell,
     .epic-timeline-cell {
-      background-color: $gray-50;
+      background-color: var(--gray-50, $gray-50);
     }
   }
 
@@ -266,7 +268,7 @@ html.group-epics-roadmap-html {
     &:hover {
       .epic-details-cell,
       .epic-timeline-cell {
-        background-color: $white;
+        background-color: var(--white, $white);
       }
     }
 
@@ -298,7 +300,7 @@ html.group-epics-roadmap-html {
   line-height: 1.3;
   width: $details-cell-width;
   font-size: $code-font-size;
-  background-color: $white;
+  background-color: var(--white, $white);
   z-index: 10;
 
   &::after {
@@ -330,12 +332,12 @@ html.group-epics-roadmap-html {
   position: absolute;
   top: 5px;
   height: 40px;
-  background-color: $blue-600;
+  background-color: var(--blue-600, $blue-600);
   will-change: width, left;
   z-index: 5;
 
   &:hover {
-    background-color: $blue-700;
+    background-color: var(--blue-700, $blue-700);
   }
 }
 
@@ -343,7 +345,7 @@ html.group-epics-roadmap-html {
   position: sticky;
   position: -webkit-sticky;
   left: $details-cell-width;
-  color: $white;
+  color: var(--white, $white);
 }
 
 .epic-bar-title {
@@ -351,40 +353,40 @@ html.group-epics-roadmap-html {
 }
 
 .epic-bar-progress {
-  background-color: $blue-300;
+  background-color: var(--blue-300, $blue-300);
 
   .progress-bar {
-    background-color: $white;
+    background-color: var(--white, $white);
   }
 }
 
 .epic-bar-child-epic {
-  background-color: $white;
-  border: 1px solid $blue-600;
+  background-color: var(--white, $white);
+  border: 1px solid var(--blue-600, $blue-600);
 
   &:hover {
-    background-color: $white;
-    border: 1px solid $blue-700;
+    background-color: var(--white, $white);
+    border: 1px solid var(--blue-700, $blue-700);
     text-decoration: none;
 
     .epic-bar-progress .progress-bar {
-      background-color: $blue-700;
+      background-color: var(--blue-700, $blue-700);
     }
   }
 
   .epic-bar-inner {
-    color: $blue-600;
+    color: var(--blue-600, $blue-600);
 
     &:hover {
-      color: $blue-700;
+      color: var(--blue-700, $blue-700);
     }
   }
 
   .epic-bar-progress {
-    background-color: $blue-200;
+    background-color: var(--blue-200, $blue-200);
 
     .progress-bar {
-      background-color: $blue-600;
+      background-color: var(--blue-600, $blue-600);
     }
   }
 }
@@ -403,7 +405,7 @@ html.group-epics-roadmap-html {
     top: -1px;
     width: 2px;
     height: calc(100% + 1px);
-    background-color: $red-500;
+    background-color: var(--red-500, $red-500);
     pointer-events: none;
   }
 }
@@ -417,13 +419,13 @@ html.group-epics-roadmap-html {
 
     .timeline-bar-wrapper {
       height: $timeline-cell-height;
-      color: $gray-500;
+      color: var(--gray-500, $gray-500);
     }
 
     .milestone-start-and-end {
       display: none;
-      border-left: 2px dotted $gray-900;
-      border-right: 2px dotted $gray-900;
+      border-left: 2px dotted var(--gray-900, $gray-900);
+      border-right: 2px dotted var(--gray-900, $gray-900);
       opacity: 0.5;
       top: 1px;
     }
@@ -447,18 +449,18 @@ html.group-epics-roadmap-html {
       max-width: 100%;
 
       &:hover {
-        color: $gray-900;
+        color: var(--gray-900, $gray-900);
         cursor: pointer;
 
         .timeline-bar {
-          background-color: $gray-900;
+          background-color: var(--gray-900, $gray-900);
 
           &::before {
-            background-color: $gray-900;
+            background-color: var(--gray-900, $gray-900);
           }
 
           &::after {
-            border-color: $gray-900;
+            border-color: var(--gray-900, $gray-900);
           }
         }
       }
@@ -508,7 +510,7 @@ html.group-epics-roadmap-html {
 
     .timeline-bar {
       width: 100%;
-      background-color: $gray-500;
+      background-color: var(--gray-500, $gray-500);
       height: 2px;
       z-index: 1;
       bottom: 4px;
@@ -523,15 +525,15 @@ html.group-epics-roadmap-html {
 
       &::before {
         width: 2px;
-        background-color: $gray-500;
+        background-color: var(--gray-500, $gray-500);
       }
 
       &::after {
         right: -3px;
         width: 8px;
-        border: 2px solid $gray-500;
+        border: 2px solid var(--gray-500, $gray-500);
         border-radius: 4px;
-        background-color: $white;
+        background-color: var(--white, $white);
       }
     }
   }
@@ -541,7 +543,7 @@ html.group-epics-roadmap-html {
     left: 0;
     width: $details-cell-width;
     font-size: $code-font-size;
-    background-color: $white;
+    background-color: var(--white, $white);
     z-index: 2;
 
     &::after {
@@ -557,6 +559,6 @@ html.group-epics-roadmap-html {
 }
 
 .milestone-item-date {
-  color: $gray-500;
+  color: var(--gray-500, $gray-500);
   padding-top: $gl-spacing-scale-1;
 }

ee/app/views/groups/epics/show.html.haml

@@ -17,6 +17,7 @@
 
 - page_card_attributes @epic.card_attributes
 - add_page_specific_style 'page_bundles/epics'
+- add_page_specific_style 'page_bundles/roadmap'
 
 #epic-app-root{ data: epic_show_app_data(@epic),
   'data-allow-sub-epics' => allow_sub_epics }

ee/app/views/groups/roadmap/show.html.haml

@@ -9,6 +9,7 @@
 - sub_epics_feature_available = @group.feature_available?(:subepics)
 - allow_sub_epics = sub_epics_feature_available ? 'true' : 'false'
 - page_title _("Epics Roadmap")
+- add_page_specific_style 'page_bundles/roadmap'
 
 - has_filters_applied = params[:label_name].present? || params[:author_username].present? || params[:search].present?