Move experimental_separate_sign_up.scss to a page bundle

Moves the file to a page specific bundle and includes
it on the relevant pages. Also combines
experience_level.scss into the new page bundle.

app/assets/stylesheets/_page_specific_files.scss

@@ -11,8 +11,6 @@
 @import './pages/editor';
 @import './pages/environment_logs';
 @import './pages/events';
-@import './pages/experience_level';
-@import './pages/experimental_separate_sign_up';
 @import './pages/groups';
 @import './pages/help';
 @import './pages/import';

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

+@import 'mixins_and_variables_and_functions';
+
 .signup-page {
   .page-wrap {
-    background-color: $gray-light;
+    background-color: var(--gray-10, $gray-10);
   }
 
   .signup-box-container {
@@ -8,22 +10,22 @@
   }
 
   .signup-box {
-    background-color: $white;
-    box-shadow: 0 0 0 1px $border-color;
+    background-color: var(--white, $white);
+    box-shadow: 0 0 0 1px var(--border-color, $border-color);
     border-radius: $border-radius;
   }
 
   .form-control {
     &:active,
     &:focus {
-      background-color: $white;
+      background-color: var(--white, $white);
     }
   }
 
   .devise-errors {
     h2 {
       font-size: $gl-font-size;
-      color: $red-700;
+      color: var(--red-700, $red-700);
     }
   }
 
@@ -32,7 +34,7 @@
     &::after {
       content: '';
       flex: 1;
-      border-bottom: 1px solid $gray-dark;
+      border-bottom: 1px solid var(--gray-100, $gray-100);
       margin: $gl-padding-24 0;
     }
 
@@ -62,3 +64,33 @@
     width: 350px;
   }
 }
+
+.signup-page[data-page^='registrations:experience_levels'] {
+  $card-shadow-color: rgba(var(--black, $black), 0.2);
+
+  .page-wrap {
+    background-color: var(--white, $white);
+  }
+
+  .card-deck {
+    max-width: 828px;
+  }
+
+  .card {
+    transition: box-shadow 0.3s ease-in-out;
+  }
+
+  .card:hover {
+    box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color;
+  }
+
+  @media (min-width: $breakpoint-sm) {
+    .card-deck .card {
+      margin: 0 $gl-spacing-scale-3;
+    }
+  }
+
+  .stretched-link:hover {
+    text-decoration: none;
+  }
+}

app/assets/stylesheets/pages/experience_level.scss

-.signup-page[data-page^='registrations:experience_levels'] {
-  $card-shadow-color: rgba($black, 0.2);
-
-  .page-wrap {
-    background-color: $white;
-  }
-
-  .card-deck {
-    max-width: 828px;
-  }
-
-  .card {
-    transition: box-shadow 0.3s ease-in-out;
-  }
-
-  .card:hover {
-    box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color;
-  }
-
-  @media (min-width: $breakpoint-sm) {
-    .card-deck .card {
-      margin: 0 $gl-spacing-scale-3;
-    }
-  }
-
-  .stretched-link:hover {
-    text-decoration: none;
-  }
-}

app/views/layouts/devise_experimental_onboarding_issues.html.haml

 !!! 5
 %html.devise-layout-html.navless{ class: system_message_class }
+  - add_page_specific_style 'page_bundles/experimental_separate_sign_up'
   = render "layouts/head"
   %body.ui-indigo.signup-page{ class: "#{client_class_list}", data: { page: body_data_page, qa_selector: 'signup_page' } }
     = render "layouts/header/logo_with_title"

app/views/layouts/devise_experimental_separate_sign_up_flow.html.haml

 !!! 5
 %html.devise-layout-html.navless{ class: system_message_class }
+  - add_page_specific_style 'page_bundles/experimental_separate_sign_up'
   = render "layouts/head"
   %body.ui-indigo.signup-page{ class: "#{client_class_list}", data: { page: body_data_page, qa_selector: 'signup_page' } }
     = render "layouts/header/logo_with_title"

config/application.rb

@@ -179,6 +179,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/environments.css"
     config.assets.precompile << "page_bundles/error_tracking_details.css"
     config.assets.precompile << "page_bundles/error_tracking_index.css"
+    config.assets.precompile << "page_bundles/experimental_separate_sign_up.css"
     config.assets.precompile << "page_bundles/ide.css"
     config.assets.precompile << "page_bundles/issues_list.css"
     config.assets.precompile << "page_bundles/jira_connect.css"