Merge branch...

Merge branch '239865-convert-stylesheets-pages-projects-scss-into-page-specific-bundle' into 'master'

Prepare for converting stylesheets/pages/projects.scss into page specific bundle

See merge request gitlab-org/gitlab!44406

app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue

@@ -70,14 +70,18 @@ export default {
 </script>
 
 <template>
-  <div :data-for="name" class="project-feature-controls">
+  <div
+    :data-for="name"
+    class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0"
+  >
     <input v-if="name" :name="name" :value="value" type="hidden" />
     <project-feature-toggle
+      class="gl-flex-grow-0 gl-mr-3"
       :value="featureEnabled"
       :disabled-input="disabledInput"
       @change="toggleFeature"
     />
-    <div class="select-wrapper">
+    <div class="select-wrapper gl-flex-fill-1">
       <select
         :disabled="displaySelectInput"
         class="form-control project-repo-select select-control"

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

@@ -292,14 +292,16 @@ export default {
 
 <template>
   <div>
-    <div class="project-visibility-setting">
+    <div
+      class="project-visibility-setting gl-border-1 gl-border-solid gl-border-gray-100 gl-py-3 gl-px-7 gl-sm-pr-5 gl-sm-pl-5"
+    >
       <project-setting-row
         ref="project-visibility-settings"
         :help-path="visibilityHelpPath"
         :label="s__('ProjectSettings|Project visibility')"
       >
-        <div class="project-feature-controls">
-          <div class="select-wrapper">
+        <div class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0">
+          <div class="select-wrapper gl-flex-fill-1">
             <select
               v-model="visibilityLevel"
               :disabled="!canChangeVisibilityLevel"
@@ -327,7 +329,7 @@ export default {
           </div>
         </div>
         <span class="form-text text-muted">{{ visibilityLevelDescription }}</span>
-        <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="request-access">
+        <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="gl-line-height-28">
           <input
             :value="requestAccessEnabled"
             type="hidden"
@@ -338,7 +340,10 @@ export default {
         </label>
       </project-setting-row>
     </div>
-    <div :class="{ 'highlight-changes': highlightChangesClass }" class="project-feature-settings">
+    <div
+      :class="{ 'highlight-changes': highlightChangesClass }"
+      class="gl-border-1 gl-border-solid gl-border-t-none gl-border-gray-100 gl-mb-5 gl-py-3 gl-px-7 gl-sm-pr-5 gl-sm-pl-5 gl-bg-gray-10"
+    >
       <project-setting-row
         ref="issues-settings"
         :label="s__('ProjectSettings|Issues')"
@@ -361,7 +366,7 @@ export default {
           name="project[project_feature_attributes][repository_access_level]"
         />
       </project-setting-row>
-      <div class="project-feature-setting-group">
+      <div class="project-feature-setting-group gl-pl-7 gl-sm-pl-5">
         <project-setting-row
           ref="merge-request-settings"
           :label="s__('ProjectSettings|Merge requests')"
@@ -516,8 +521,8 @@ export default {
           )
         "
       >
-        <div class="project-feature-controls">
-          <div class="select-wrapper">
+        <div class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0">
+          <div class="select-wrapper gl-flex-fill-1">
             <select
               v-model="metricsDashboardAccessLevel"
               :disabled="metricsOptionsDropdownEnabled"

app/assets/javascripts/vue_shared/components/toggle_button.vue

@@ -59,7 +59,7 @@ export default {
 </script>
 
 <template>
-  <label class="toggle-wrapper">
+  <label class="gl-mt-2">
     <input v-if="name" :name="name" :value="value" type="hidden" />
     <button
       type="button"

app/assets/stylesheets/pages/groups.scss

@@ -95,6 +95,78 @@
   }
 }
 
+.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;

app/assets/stylesheets/pages/projects.scss

-.alert_holder {
-  margin: -16px;
-
-  .alert-link {
-    font-weight: $gl-font-weight-normal;
-  }
-}
-
 .new_project,
 .edit-project,
 .import-project {
@@ -67,38 +59,7 @@
   }
 }
 
-.classification-label {
-  background-color: $red-500;
-}
-
-.toggle-wrapper {
-  margin-top: 5px;
-}
-
-.project-feature-row > .toggle-wrapper {
-  margin: 10px 0;
-}
-
-.project-visibility-setting,
-.project-feature-settings {
-  border: 1px solid $border-color;
-  padding: 10px 32px;
-
-  @include media-breakpoint-down(xs) {
-    padding: 10px 20px;
-  }
-}
-
-.project-visibility-setting .request-access {
-  line-height: 2;
-}
-
-.project-feature-settings {
-  background: $gray-lighter;
-  border-top: 0;
-  margin-bottom: 16px;
-}
-
+// 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;
 
@@ -113,63 +74,31 @@
   }
 }
 
+// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components
 .project-feature-controls {
-  display: flex;
-  align-items: center;
-  margin: $gl-padding-8 0;
   max-width: 432px;
-
-  .toggle-wrapper {
-    flex: 0;
-    margin-right: 10px;
-  }
-
-  .select-wrapper {
-    flex: 1;
-  }
 }
 
+// INFO Scoped to settings_panel component in app/assets/javascripts/pages/projects/shared/permissions/components
 .project-feature-setting-group {
-  padding-left: 32px;
-
   .project-feature-controls {
     max-width: 400px;
   }
-
-  @include media-breakpoint-down(xs) {
-    padding-left: 20px;
-  }
 }
 
-.group-home-panel,
 .project-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;
       }
     }
   }
@@ -201,24 +130,6 @@
     }
   }
 
-  .home-panel-metadata {
-    font-weight: normal;
-    font-size: 14px;
-    line-height: $gl-btn-line-height;
-
-    .home-panel-license {
-      .btn {
-        line-height: 0;
-        border-width: 0;
-      }
-    }
-
-    .access-request-link {
-      padding-left: $gl-padding-8;
-      border-left: 1px solid $gl-text-color-secondary;
-    }
-  }
-
   .home-panel-description {
     @include media-breakpoint-up(md) {
       font-size: $gl-font-size-large;

app/views/layouts/nav/_classification_level_banner.html.haml

 - if ::Gitlab::ExternalAuthorization.enabled? && @project
   = content_for :header_content do
-    %span.badge.color-label.classification-label.has-tooltip{ title: s_('ExternalAuthorizationService|Classification label') }
+    %span.badge.color-label.gl-bg-red-500.has-tooltip{ title: s_('ExternalAuthorizationService|Classification label') }
       = sprite_icon('lock-open', size: 8, css_class: 'inline')
       = @project.external_authorization_classification_label

app/views/projects/_home_panel.html.haml

@@ -3,19 +3,19 @@
 - max_project_topic_length = 15
 - emails_disabled = @project.emails_disabled?
 
-.project-home-panel.js-show-on-project-root{ class: [("empty-project" if empty_repo)] }
+.project-home-panel.js-show-on-project-root.gl-my-5{ class: [("empty-project" if empty_repo)] }
   .row.gl-mb-3
     .home-panel-title-row.col-md-12.col-lg-6.d-flex
-      .avatar-container.rect-avatar.s64.home-panel-avatar.gl-mr-3.float-none
+      .avatar-container.rect-avatar.s64.home-panel-avatar.gl-flex-shrink-0.gl-w-11.gl-h-11.gl-mr-3.float-none
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline
-          %h1.home-panel-title.gl-mt-3.gl-mb-2{ data: { qa_selector: 'project_name_content' } }
+          %h1.home-panel-title.gl-mt-3.gl-mb-2.gl-font-size-h1.gl-line-height-24.gl-font-weight-bold{ data: { qa_selector: 'project_name_content' } }
             = @project.name
             %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
               = visibility_level_icon(@project.visibility_level, options: { class: 'icon' })
             = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project
-        .home-panel-metadata.d-flex.flex-wrap.text-secondary
+        .home-panel-metadata.d-flex.flex-wrap.text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal
           - if can?(current_user, :read_project, @project)
             %span.text-secondary
               = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
@@ -23,8 +23,8 @@
             %span.access-request-links.gl-ml-3
               = render 'shared/members/access_request_links', source: @project
           - if @project.tag_list.present?
-            %span.home-panel-topic-list.mt-2.w-100.d-inline-flex
-              = sprite_icon('tag', css_class: 'icon gl-mr-2')
+            %span.home-panel-topic-list.mt-2.w-100.d-inline-flex.gl-font-base.gl-font-weight-normal
+              = sprite_icon('tag', css_class: 'icon gl-relative gl-mr-2')
 
               - @project.topics_to_show.each do |topic|
                 - project_topics_classes = "badge badge-pill badge-secondary gl-mr-2"

app/views/shared/members/_access_request_links.html.haml

@@ -5,13 +5,13 @@
   = link_to link_text, polymorphic_path([:leave, source, :members]),
             method: :delete,
             data: { confirm: leave_confirmation_message(source), qa_selector: 'leave_group_link' },
-            class: 'access-request-link js-leave-link'
+            class: '.gl-pl-3.gl-border-l-1.gl-border-l-solid.gl-border-l-gray-500 js-leave-link'
 - elsif requester = source.requesters.find_by(user_id: current_user.id) # rubocop: disable CodeReuse/ActiveRecord
   = link_to _('Withdraw Access Request'), polymorphic_path([:leave, source, :members]),
             method: :delete,
             data: { confirm: remove_member_message(requester) },
-            class: 'access-request-link'
+            class: '.gl-pl-3.gl-border-l-1.gl-border-l-solid.gl-border-l-gray-500'
 - elsif source.request_access_enabled && can?(current_user, :request_access, source)
   = link_to _('Request Access'), polymorphic_path([:request_access, source, :members]),
             method: :post,
-            class: 'access-request-link'
+            class: '.gl-pl-3.gl-border-l-1.gl-border-l-solid.gl-border-l-gray-500'

ee/app/views/groups/saml_providers/_form.html.haml

@@ -2,12 +2,12 @@
   = form_for [group, saml_provider], url: group_saml_providers_path do |f|
     .form-group
       = form_errors(saml_provider)
-      %label.toggle-wrapper.mb-0.js-group-saml-enabled-toggle-area
+      %label.gl-mt-2.mb-0.js-group-saml-enabled-toggle-area
         = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.enabled?, label: s_("GroupSAML|Toggle SAML authentication"), class_list: "js-project-feature-toggle project-feature-toggle d-inline" do
           = f.hidden_field :enabled, { class: 'js-group-saml-enabled-input js-project-feature-toggle-input'}
         %span.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Enable SAML authentication for this group.')
     .form-group
-      %label.toggle-wrapper.mb-0.js-group-saml-enforced-sso-toggle-area
+      %label.gl-mt-2.mb-0.js-group-saml-enforced-sso-toggle-area
         = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.enforced_sso, disabled: !saml_provider.enabled?, label: s_("GroupSAML|Enforced SSO"), class_list: "js-project-feature-toggle js-group-saml-enforced-sso-toggle project-feature-toggle d-inline", data: { qa_selector: 'enforced_sso_toggle_button' } do
           = f.hidden_field :enforced_sso, { class: 'js-group-saml-enforced-sso-input js-project-feature-toggle-input'}
         %span.form-text.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Enforce SSO-only authentication for this group.')
@@ -16,7 +16,7 @@
           = s_('GroupSAML|To be able to enable enforced SSO, you first need to enable SAML authentication.')
     - if Feature.enabled?(:group_managed_accounts, group)
       .form-group
-        %label.toggle-wrapper.mb-0.js-group-saml-enforced-group-managed-accounts-toggle-area
+        %label.gl-mt-2.mb-0.js-group-saml-enforced-group-managed-accounts-toggle-area
           = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.enforced_group_managed_accounts, disabled: !saml_provider.enforced_sso?, label: s_("GroupSAML|Enforced SSO"), class_list: "js-project-feature-toggle js-group-saml-enforced-group-managed-accounts-toggle project-feature-toggle d-inline", data: { qa_selector: 'group_managed_accounts_toggle_button' } do
             = f.hidden_field :enforced_group_managed_accounts, { class: 'js-group-saml-enforced-group-managed-accounts-input js-project-feature-toggle-input'}
           %span.form-text.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Enforce users to have dedicated group managed accounts for this group.')
@@ -24,7 +24,7 @@
           %span
             = s_('GroupSAML|To be able to enable group managed accounts, you first need to enable enforced SSO.')
       .form-group
-        %label.toggle-wrapper.mb-0.js-group-saml-prohibited-outer-forks-toggle-area
+        %label.gl-mt-2.mb-0.js-group-saml-prohibited-outer-forks-toggle-area
           = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.prohibited_outer_forks, disabled: !saml_provider.enforced_group_managed_accounts?, label: s_("GroupSAML|Prohibit outer forks"), class_list: "js-project-feature-toggle js-group-saml-prohibited-outer-forks-toggle project-feature-toggle d-inline", data: { qa_selector: 'prohibited_outer_forks_toggle_button' } do
             = f.hidden_field :prohibited_outer_forks, { class: 'js-group-saml-prohibited-outer-forks-input js-project-feature-toggle-input'}
           %span.form-text.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Prohibit outer forks for this group.')