Extract groups and projects SCSS to page bundles

app/assets/stylesheets/page_bundles/group.scss

+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.group-home-panel {
+  margin-top: $gl-padding;
+  margin-bottom: $gl-padding;
+
+  .home-panel-avatar {
+    width: $home-panel-title-row-height;
+    height: $home-panel-title-row-height;
+    flex-shrink: 0;
+    flex-basis: $home-panel-title-row-height;
+  }
+
+  .home-panel-title {
+    font-size: 20px;
+    line-height: $gl-line-height-24;
+    font-weight: bold;
+
+    .icon {
+      vertical-align: -1px;
+    }
+
+    .home-panel-topic-list {
+      font-size: $gl-font-size;
+      font-weight: $gl-font-weight-normal;
+
+      .icon {
+        position: relative;
+        top: 3px;
+        margin-right: $gl-padding-4;
+      }
+    }
+  }
+
+  .home-panel-title-row {
+    @include media-breakpoint-down(sm) {
+      .home-panel-avatar {
+        width: $home-panel-avatar-mobile-size;
+        height: $home-panel-avatar-mobile-size;
+        flex-basis: $home-panel-avatar-mobile-size;
+
+        .avatar {
+          font-size: 20px;
+          line-height: 46px;
+        }
+      }
+
+      .home-panel-title {
+        margin-top: 4px;
+        margin-bottom: 2px;
+        font-size: $gl-font-size;
+        line-height: $gl-font-size-large;
+      }
+
+      .home-panel-topic-list,
+      .home-panel-metadata {
+        font-size: $gl-font-size-small;
+      }
+    }
+  }
+
+  .home-panel-metadata {
+    font-weight: normal;
+    font-size: 14px;
+    line-height: $gl-btn-line-height;
+  }
+
+  .home-panel-description {
+    @include media-breakpoint-up(md) {
+      font-size: $gl-font-size-large;
+    }
+  }
+}
+
+.group-nav-container .nav-controls {
+  .group-filter-form {
+    flex: 1 1 auto;
+    margin-right: $gl-padding-8;
+  }
+
+  .dropdown-menu-right {
+    margin-top: 0;
+  }
+
+  @include media-breakpoint-down(sm) {
+    .dropdown,
+    .dropdown .dropdown-toggle,
+    .btn-success {
+      display: block;
+    }
+
+    .group-filter-form,
+    .dropdown {
+      margin-bottom: 10px;
+      margin-right: 0;
+    }
+
+    &,
+    .group-filter-form,
+    .group-filter-form-field,
+    .dropdown,
+    .dropdown .dropdown-toggle,
+    .btn-success {
+      width: 100%;
+    }
+  }
+}

app/assets/stylesheets/page_bundles/project.scss

+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.project-home-panel {
+  .home-panel-avatar {
+    flex-basis: $home-panel-title-row-height;
+  }
+
+  .home-panel-title {
+    .icon {
+      vertical-align: -1px;
+    }
+
+    .home-panel-topic-list {
+      .icon {
+        top: 3px;
+      }
+    }
+  }
+
+  .home-panel-title-row {
+    @include media-breakpoint-down(sm) {
+      .home-panel-avatar {
+        width: $home-panel-avatar-mobile-size;
+        height: $home-panel-avatar-mobile-size;
+        flex-basis: $home-panel-avatar-mobile-size;
+
+        .avatar {
+          font-size: 20px;
+          line-height: 46px;
+        }
+      }
+
+      .home-panel-title {
+        margin-top: 4px;
+        margin-bottom: 2px;
+        font-size: $gl-font-size;
+        line-height: $gl-font-size-large;
+      }
+    }
+  }
+
+  .home-panel-description {
+    @include media-breakpoint-up(md) {
+      font-size: $gl-font-size-large;
+    }
+  }
+}
+
+.project-repo-buttons {
+  .btn {
+    svg {
+      fill: $gray-500;
+    }
+  }
+
+  .download-button {
+    @include media-breakpoint-down(md) {
+      margin-left: 0;
+    }
+  }
+
+  .project-clone-holder {
+    display: inline-block;
+    margin: $gl-padding 0 0;
+
+    input {
+      height: $input-height;
+    }
+  }
+
+  .clone-options-dropdown {
+    min-width: 240px;
+
+    .dropdown-menu-inner-content {
+      min-width: 320px;
+    }
+  }
+
+  .mobile-git-clone {
+    margin-top: $gl-padding-8;
+  }
+}

app/assets/stylesheets/pages/groups.scss

-.milestone-row {
-  @include str-truncated(90%);
-}
-
 .dashboard .side .card .card-header .input-group {
   .form-control {
     height: 42px;
@@ -49,195 +45,6 @@
   color: $gray-700;
 }
 
-.group-nav-container .nav-controls {
-  .group-filter-form {
-    flex: 1 1 auto;
-    margin-right: $gl-padding-8;
-  }
-
-  .dropdown-menu-right {
-    margin-top: 0;
-  }
-
-  @include media-breakpoint-down(sm) {
-    .dropdown,
-    .dropdown .dropdown-toggle,
-    .btn-success {
-      display: block;
-    }
-
-    .group-filter-form,
-    .dropdown {
-      margin-bottom: 10px;
-      margin-right: 0;
-    }
-
-    &,
-    .group-filter-form,
-    .group-filter-form-field,
-    .dropdown,
-    .dropdown .dropdown-toggle,
-    .btn-success {
-      width: 100%;
-    }
-  }
-}
-
-.group-home-panel {
-  margin-top: $gl-padding;
-  margin-bottom: $gl-padding;
-
-  .home-panel-avatar {
-    width: $home-panel-title-row-height;
-    height: $home-panel-title-row-height;
-    flex-shrink: 0;
-    flex-basis: $home-panel-title-row-height;
-  }
-
-  .home-panel-title {
-    font-size: 20px;
-    line-height: $gl-line-height-24;
-    font-weight: bold;
-
-    .icon {
-      vertical-align: -1px;
-    }
-
-    .home-panel-topic-list {
-      font-size: $gl-font-size;
-      font-weight: $gl-font-weight-normal;
-
-      .icon {
-        position: relative;
-        top: 3px;
-        margin-right: $gl-padding-4;
-      }
-    }
-  }
-
-  .home-panel-title-row {
-    @include media-breakpoint-down(sm) {
-      .home-panel-avatar {
-        width: $home-panel-avatar-mobile-size;
-        height: $home-panel-avatar-mobile-size;
-        flex-basis: $home-panel-avatar-mobile-size;
-
-        .avatar {
-          font-size: 20px;
-          line-height: 46px;
-        }
-      }
-
-      .home-panel-title {
-        margin-top: 4px;
-        margin-bottom: 2px;
-        font-size: $gl-font-size;
-        line-height: $gl-font-size-large;
-      }
-
-      .home-panel-topic-list,
-      .home-panel-metadata {
-        font-size: $gl-font-size-small;
-      }
-    }
-  }
-
-  .home-panel-metadata {
-    font-weight: normal;
-    font-size: 14px;
-    line-height: $gl-btn-line-height;
-  }
-
-  .home-panel-description {
-    @include media-breakpoint-up(md) {
-      font-size: $gl-font-size-large;
-    }
-  }
-}
-
-.home-panel-buttons {
-  .home-panel-action-button {
-    vertical-align: top;
-  }
-
-  .new-project-subgroup {
-    .dropdown-primary {
-      min-width: 115px;
-    }
-
-    .dropdown-toggle {
-      .dropdown-btn-icon {
-        pointer-events: none;
-        color: inherit;
-        margin-left: 0;
-      }
-    }
-
-    .dropdown-menu {
-      min-width: 280px;
-      margin-top: 2px;
-    }
-
-    li:not(.divider) {
-      padding: 0;
-
-      &.droplab-item-selected {
-        .icon-container {
-          .list-item-checkmark {
-            visibility: visible;
-          }
-        }
-      }
-
-      .menu-item {
-        padding: 8px 4px;
-
-        &:hover {
-          background-color: $gray-darker;
-          color: $gray-900;
-        }
-      }
-
-      .icon-container {
-        float: left;
-        padding-left: 6px;
-
-        .list-item-checkmark {
-          visibility: hidden;
-        }
-      }
-
-      .description {
-        font-size: 14px;
-
-        strong {
-          display: block;
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-
-      @include media-breakpoint-down(sm) {
-        display: flex;
-        align-items: flex-start;
-
-        .dropdown-primary {
-          flex: 1;
-        }
-
-        .dropdown-toggle {
-          width: auto;
-        }
-
-        .dropdown-menu {
-          width: 100%;
-          max-width: inherit;
-          min-width: inherit;
-        }
-      }
-    }
-  }
-}
-
 .card {
   .shared_runners_limit_under_quota {
     color: $green-500;
@@ -269,28 +76,10 @@
   }
 }
 
-.user-settings-pipeline-quota {
-  margin-top: $gl-padding;
-
-  .pipeline-quota {
-    border-top: 0;
-  }
-}
-
 table.pipeline-project-metrics tr td {
   padding: $gl-padding;
 }
 
-.mattermost-team-name {
-  color: $gl-text-color-secondary;
-}
-
-.mattermost-info {
-  display: block;
-  color: $gl-text-color-secondary;
-  margin-top: 10px;
-}
-
 .explore-groups.landing {
   .inner-content {
     padding: 0;

app/assets/stylesheets/pages/projects.scss

@@ -79,91 +79,10 @@
   }
 }
 
-.project-home-panel {
-  .home-panel-avatar {
-    flex-basis: $home-panel-title-row-height;
-  }
-
-  .home-panel-title {
-    .icon {
-      vertical-align: -1px;
-    }
-
-    .home-panel-topic-list {
-      .icon {
-        top: 3px;
-      }
-    }
-  }
-
-  .home-panel-title-row {
-    @include media-breakpoint-down(sm) {
-      .home-panel-avatar {
-        width: $home-panel-avatar-mobile-size;
-        height: $home-panel-avatar-mobile-size;
-        flex-basis: $home-panel-avatar-mobile-size;
-
-        .avatar {
-          font-size: 20px;
-          line-height: 46px;
-        }
-      }
-
-      .home-panel-title {
-        margin-top: 4px;
-        margin-bottom: 2px;
-        font-size: $gl-font-size;
-        line-height: $gl-font-size-large;
-      }
-    }
-  }
-
-  .home-panel-description {
-    @include media-breakpoint-up(md) {
-      font-size: $gl-font-size-large;
-    }
-  }
-}
-
 .nav > .project-buttons {
   margin-top: 0;
 }
 
-.project-repo-buttons {
-  .btn {
-    svg {
-      fill: $gray-500;
-    }
-  }
-
-  .download-button {
-    @include media-breakpoint-down(md) {
-      margin-left: 0;
-    }
-  }
-
-  .project-clone-holder {
-    display: inline-block;
-    margin: $gl-padding 0 0;
-
-    input {
-      height: $input-height;
-    }
-  }
-
-  .clone-options-dropdown {
-    min-width: 240px;
-
-    .dropdown-menu-inner-content {
-      min-width: 320px;
-    }
-  }
-
-  .mobile-git-clone {
-    margin-top: $gl-padding-8;
-  }
-}
-
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
@@ -855,13 +774,6 @@ pre.light-well {
   }
 }
 
-.project-tip-command {
-  > .input-group-prepend:first-child,
-  > .input-group-append:first-child {
-    width: auto;
-  }
-}
-
 .protected-branches-list,
 .protected-tags-list {
   margin-bottom: 30px;
@@ -887,8 +799,7 @@ pre.light-well {
   }
 }
 
-.project-refs-form .dropdown-menu,
-.dropdown-menu-projects {
+.project-refs-form .dropdown-menu {
   width: 300px;
 
   @include media-breakpoint-up(sm) {

app/views/groups/show.html.haml

 - @content_class = "limit-container-width" unless fluid_layout
 - page_itemtype    'https://schema.org/Organization'
 - @skip_current_level_breadcrumb = true
+- add_page_specific_style 'page_bundles/group'
 
 - if show_thanks_for_purchase_banner?
   = render_if_exists 'shared/thanks_for_purchase_banner', plan_title: plan_title, quantity: params[:purchased_quantity].to_i

app/views/projects/show.html.haml

@@ -2,6 +2,7 @@
 - add_page_startup_graphql_call('repository/path_last_commit', { projectPath: @project.full_path, ref: current_ref, path: current_route_path || "" })
 - @content_class = "limit-container-width" unless fluid_layout
 - @skip_current_level_breadcrumb = true
+- add_page_specific_style 'page_bundles/project'
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_path(@project, rss_url_options), title: "#{@project.name} activity")

config/application.rb

@@ -200,6 +200,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/epics.css"
     config.assets.precompile << "page_bundles/error_tracking_details.css"
     config.assets.precompile << "page_bundles/error_tracking_index.css"
+    config.assets.precompile << "page_bundles/group.css"
     config.assets.precompile << "page_bundles/ide.css"
     config.assets.precompile << "page_bundles/import.css"
     config.assets.precompile << "page_bundles/incident_management_list.css"
@@ -218,6 +219,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/pipelines.css"
     config.assets.precompile << "page_bundles/productivity_analytics.css"
     config.assets.precompile << "page_bundles/profile_two_factor_auth.css"
+    config.assets.precompile << "page_bundles/project.css"
     config.assets.precompile << "page_bundles/reports.css"
     config.assets.precompile << "page_bundles/roadmap.css"
     config.assets.precompile << "page_bundles/security_dashboard.css"