Merge branch 'cngo-projects-page-bundle-css' into 'master'

Move projects css to page bundles

See merge request gitlab-org/gitlab!79842

app/assets/stylesheets/page_bundles/project.scss

@@ -80,3 +80,134 @@
     margin-top: $gl-padding-8;
   }
 }
+
+.project-stats,
+.project-buttons {
+  .scrolling-tabs-container {
+    .scrolling-tabs {
+      margin-top: $gl-padding-8;
+      margin-bottom: $gl-padding-8 - $browser-scrollbar-size;
+      padding-bottom: $browser-scrollbar-size;
+      flex-wrap: wrap;
+      border-bottom: 0;
+    }
+
+    .fade-left,
+    .fade-right {
+      top: 0;
+      height: calc(100% - #{$browser-scrollbar-size});
+
+      svg {
+        top: 50%;
+        margin-top: -$gl-padding-8;
+      }
+    }
+
+    .nav {
+      flex-basis: 100%;
+
+      + .nav {
+        margin: $gl-padding-8 0;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+
+      .nav {
+        flex-wrap: nowrap;
+      }
+
+      .nav:first-child {
+        margin-right: $gl-padding-8;
+      }
+    }
+  }
+
+  .nav {
+    > li {
+      display: inline-block;
+
+      &:not(:last-child) {
+        margin-right: $gl-padding;
+      }
+
+      &.right {
+        vertical-align: top;
+        margin-top: 0;
+
+        @include media-breakpoint-up(lg) {
+          float: right;
+        }
+      }
+    }
+
+    .stat-text,
+    .stat-link {
+      padding: $gl-btn-vert-padding 0;
+      background-color: transparent;
+      font-size: $gl-font-size;
+      line-height: $gl-btn-line-height;
+      color: $gl-text-color-secondary;
+      white-space: pre-wrap;
+    }
+
+    .stat-link {
+      border-bottom: 0;
+      color: $black;
+
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+        border-bottom: 0;
+      }
+
+      .project-stat-value {
+        color: $gl-text-color;
+      }
+
+      .icon {
+        color: $gl-text-color-secondary;
+      }
+
+      .add-license-link {
+        &,
+        .icon {
+          color: $blue-600;
+        }
+      }
+    }
+
+    .btn {
+      margin-bottom: $gl-padding-8;
+      padding: $gl-btn-vert-padding $gl-btn-padding;
+      line-height: $gl-btn-line-height;
+
+      .icon {
+        top: 0;
+      }
+    }
+  }
+}
+
+.project-buttons {
+  .nav > li:not(:last-child) {
+    margin-right: $gl-padding-8;
+  }
+}
+
+.git-empty {
+  margin-bottom: 7px;
+
+  h5 {
+    color: $gl-text-color;
+  }
+
+  .light-well {
+    border-radius: 2px;
+
+    color: $well-light-text-color;
+    font-size: 13px;
+    line-height: 1.6em;
+  }
+}

app/assets/stylesheets/page_bundles/projects_edit.scss

+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.project-repo-select {
+  transition: background 2s ease-out;
+
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .highlight-changes & {
+    background: $highlight-changes-color;
+    transition: none;
+  }
+}
+
+.project-feature-controls {
+  max-width: 432px;
+}
+
+.project-feature-setting-group {
+  .project-feature-controls {
+    max-width: 400px;
+  }
+}

app/assets/stylesheets/pages/projects.scss

@@ -52,37 +52,6 @@
   }
 }
 
-// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components
-.project-repo-select {
-  transition: background 2s ease-out;
-
-  &:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  .highlight-changes & {
-    background: $highlight-changes-color;
-    transition: none;
-  }
-}
-
-// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components
-.project-feature-controls {
-  max-width: 432px;
-}
-
-// INFO Scoped to settings_panel component in app/assets/javascripts/pages/projects/shared/permissions/components
-.project-feature-setting-group {
-  .project-feature-controls {
-    max-width: 400px;
-  }
-}
-
-.nav > .project-buttons {
-  margin-top: 0;
-}
-
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
@@ -317,121 +286,6 @@
   }
 }
 
-.project-stats,
-.project-buttons {
-  .scrolling-tabs-container {
-    .scrolling-tabs {
-      margin-top: $gl-padding-8;
-      margin-bottom: $gl-padding-8 - $browser-scrollbar-size;
-      padding-bottom: $browser-scrollbar-size;
-      flex-wrap: wrap;
-      border-bottom: 0;
-    }
-
-    .fade-left,
-    .fade-right {
-      top: 0;
-      height: calc(100% - #{$browser-scrollbar-size});
-
-      svg {
-        top: 50%;
-        margin-top: -$gl-padding-8;
-      }
-    }
-
-    .nav {
-      flex-basis: 100%;
-
-      + .nav {
-        margin: $gl-padding-8 0;
-      }
-    }
-
-    @include media-breakpoint-down(md) {
-      flex-direction: column;
-
-      .nav {
-        flex-wrap: nowrap;
-      }
-
-      .nav:first-child {
-        margin-right: $gl-padding-8;
-      }
-    }
-  }
-
-  .nav {
-    > li {
-      display: inline-block;
-
-      &:not(:last-child) {
-        margin-right: $gl-padding;
-      }
-
-      &.right {
-        vertical-align: top;
-        margin-top: 0;
-
-        @include media-breakpoint-up(lg) {
-          float: right;
-        }
-      }
-    }
-
-    .stat-text,
-    .stat-link {
-      padding: $gl-btn-vert-padding 0;
-      background-color: transparent;
-      font-size: $gl-font-size;
-      line-height: $gl-btn-line-height;
-      color: $gl-text-color-secondary;
-      white-space: pre-wrap;
-    }
-
-    .stat-link {
-      border-bottom: 0;
-      color: $black;
-
-      &:hover,
-      &:focus {
-        text-decoration: underline;
-        border-bottom: 0;
-      }
-
-      .project-stat-value {
-        color: $gl-text-color;
-      }
-
-      .icon {
-        color: $gl-text-color-secondary;
-      }
-
-      .add-license-link {
-        &,
-        .icon {
-          color: $blue-600;
-        }
-      }
-    }
-
-    .btn {
-      margin-bottom: $gl-padding-8;
-      padding: $gl-btn-vert-padding $gl-btn-padding;
-      line-height: $gl-btn-line-height;
-
-      .icon {
-        top: 0;
-      }
-    }
-  }
-}
-
-.project-buttons {
-  .nav > li:not(:last-child) {
-    margin-right: $gl-padding-8;
-  }
-}
-
 .repository-languages-bar {
   height: 8px;
   margin-bottom: $gl-padding-8;
@@ -460,22 +314,6 @@ pre.light-well {
   border-color: $well-light-border;
 }
 
-.git-empty {
-  margin-bottom: 7px;
-
-  h5 {
-    color: $gl-text-color;
-  }
-
-  .light-well {
-    border-radius: 2px;
-
-    color: $well-light-text-color;
-    font-size: 13px;
-    line-height: 1.6em;
-  }
-}
-
 /*
  * Projects list rendered on dashboard and user page
  */

app/views/projects/edit.html.haml

 - breadcrumb_title _("General Settings")
 - page_title _("General")
+- add_page_specific_style 'page_bundles/projects_edit'
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = expanded_by_default?
 - reduce_visibility_form_id = 'reduce-visibility-form'

config/application.rb

@@ -284,6 +284,7 @@ module Gitlab
     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/projects_edit.css"
     config.assets.precompile << "page_bundles/reports.css"
     config.assets.precompile << "page_bundles/roadmap.css"
     config.assets.precompile << "page_bundles/security_dashboard.css"