Remove prepend-top-default CSS class

This removes the prepend-top-default CSS
class and replaces it for the gl-mt-3
utility class from GitLab-UI

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -441,7 +441,7 @@ export default {
         :prev-page="prevPage"
         :next-page="nextPage"
         align="center"
-        class="gl-pagination prepend-top-default"
+        class="gl-pagination gl-mt-3"
         @input="handlePageChange"
       />
     </div>

app/assets/javascripts/badges/components/badge_form.vue

@@ -164,7 +164,7 @@ export default {
 <template>
   <form
     :class="{ 'was-validated': wasValidated }"
-    class="prepend-top-default gl-mb-3 needs-validation"
+    class="gl-mt-3 gl-mb-3 needs-validation"
     novalidate
     @submit.prevent.stop="onSubmit"
   >

app/assets/javascripts/batch_comments/components/preview_dropdown.vue

@@ -96,7 +96,7 @@ export default {
             <preview-item :draft="draft" :is-last="isLast(index)" />
           </li>
         </ul>
-        <gl-loading-icon v-else size="lg" class="prepend-top-default gl-mb-3" />
+        <gl-loading-icon v-else size="lg" class="gl-mt-3 gl-mb-3" />
       </div>
       <div class="dropdown-footer">
         <publish-button

app/assets/javascripts/blob/notebook/notebook_viewer.vue

@@ -62,7 +62,7 @@ export default {
 </script>
 
 <template>
-  <div class="js-notebook-viewer-mounted container-fluid md prepend-top-default gl-mb-3">
+  <div class="js-notebook-viewer-mounted container-fluid md gl-mt-3 gl-mb-3">
     <div v-if="loading && !error" class="text-center loading">
       <gl-loading-icon class="mt-5" size="lg" />
     </div>

app/assets/javascripts/blob/pdf/pdf_viewer.vue

@@ -34,7 +34,7 @@ export default {
 </script>
 
 <template>
-  <div class="js-pdf-viewer container-fluid md prepend-top-default gl-mb-3">
+  <div class="js-pdf-viewer container-fluid md gl-mt-3 gl-mb-3">
     <div v-if="loading && !error" class="text-center loading">
       <gl-loading-icon class="mt-5" size="lg" />
     </div>

app/assets/javascripts/blob/sketch/index.js

@@ -56,7 +56,7 @@ export default class SketchLoader {
   error() {
     const errorMsg = document.createElement('p');
 
-    errorMsg.className = 'prepend-top-default gl-mb-3 text-center';
+    errorMsg.className = 'gl-mt-3 gl-mb-3 text-center';
     errorMsg.textContent = __(`
       Cannot show preview. For previews on sketch files, they must have the file format
       introduced by Sketch version 43 and above.

app/assets/javascripts/environments/components/container.vue

@@ -67,12 +67,7 @@ export default {
 
 <template>
   <div class="environments-container">
-    <gl-loading-icon
-      v-if="isLoading"
-      size="md"
-      class="prepend-top-default"
-      label="Loading environments"
-    />
+    <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" label="Loading environments" />
 
     <slot name="emptyState"></slot>
 

app/assets/javascripts/groups/components/groups.vue

@@ -49,7 +49,7 @@ export default {
       <pagination-links
         :change="change"
         :page-info="pageInfo"
-        class="d-flex justify-content-center prepend-top-default"
+        class="d-flex justify-content-center gl-mt-3"
       />
     </template>
   </div>

app/assets/javascripts/ide/components/jobs/list.vue

@@ -26,7 +26,7 @@ export default {
 
 <template>
   <div>
-    <gl-loading-icon v-if="loading && !stages.length" size="lg" class="prepend-top-default" />
+    <gl-loading-icon v-if="loading && !stages.length" size="lg" class="gl-mt-3" />
     <template v-else>
       <stage
         v-for="stage in stages"

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -56,7 +56,7 @@ export default {
 </script>
 
 <template>
-  <div class="ide-stage card prepend-top-default">
+  <div class="ide-stage card gl-mt-3">
     <div
       ref="cardHeader"
       :class="{

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -154,10 +154,7 @@ export default {
           data-qa-selector="file_name_field"
           :placeholder="placeholder"
         />
-        <ul
-          v-if="isCreatingNewFile"
-          class="file-templates prepend-top-default list-inline qa-template-list"
-        >
+        <ul v-if="isCreatingNewFile" class="file-templates gl-mt-3 list-inline qa-template-list">
           <li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item">
             <button
               type="button"

app/assets/javascripts/ide/components/pipelines/list.vue

@@ -59,7 +59,7 @@ export default {
 
 <template>
   <div class="ide-pipeline">
-    <gl-loading-icon v-if="showLoadingIcon" size="lg" class="prepend-top-default" />
+    <gl-loading-icon v-if="showLoadingIcon" size="lg" class="gl-mt-3" />
     <template v-else-if="hasLoadedPipeline">
       <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
         <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" />

app/assets/javascripts/ide/components/terminal/empty_state.vue

@@ -43,7 +43,7 @@ export default {
   <div class="text-center p-3">
     <div v-if="illustrationPath" class="svg-content svg-130"><img :src="illustrationPath" /></div>
     <h4>{{ __('Web Terminal') }}</h4>
-    <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" />
     <template v-else>
       <p>{{ __('Run tests against your code live using the Web Terminal') }}</p>
       <p>

app/assets/javascripts/issue_show/components/edit_actions.vue

@@ -63,7 +63,7 @@ export default {
 </script>
 
 <template>
-  <div class="prepend-top-default gl-mb-3 clearfix">
+  <div class="gl-mt-3 gl-mb-3 clearfix">
     <button
       :class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
       :disabled="formState.updateLoading || !isSubmitEnabled"

app/assets/javascripts/jobs/components/environments_block.vue

@@ -274,7 +274,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default gl-mb-3 js-environment-container">
+  <div class="gl-mt-3 gl-mb-3 js-environment-container">
     <div class="environment-information">
       <ci-icon :status="iconStatus" />
       <p class="inline gl-mb-0" v-html="environment"></p>

app/assets/javascripts/jobs/components/erased_block.vue

@@ -27,7 +27,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default js-build-erased">
+  <div class="gl-mt-3 js-build-erased">
     <div class="erased alert alert-warning">
       <template v-if="isErasedByUser">
         {{ s__('Job|Job has been erased by') }}

app/assets/javascripts/jobs/components/job_app.vue

@@ -270,7 +270,7 @@ export default {
         <div
           v-if="job.archived"
           ref="sticky"
-          class="js-archived-job prepend-top-default archived-job"
+          class="js-archived-job gl-mt-3 archived-job"
           :class="{ 'sticky-top border-bottom-0': hasTrace }"
         >
           <icon name="lock" class="align-text-bottom" />
@@ -280,7 +280,7 @@ export default {
         <div
           v-if="hasTrace"
           class="build-trace-container position-relative"
-          :class="{ 'prepend-top-default': !job.archived }"
+          :class="{ 'gl-mt-3': !job.archived }"
         >
           <log-top-bar
             :class="{

app/assets/javascripts/jobs/components/manual_variables_form.vue

@@ -172,7 +172,7 @@ export default {
         </div>
       </div>
     </div>
-    <div class="d-flex prepend-top-default justify-content-center">
+    <div class="d-flex gl-mt-3 justify-content-center">
       <p class="text-muted" v-html="helpText"></p>
     </div>
     <div class="d-flex justify-content-center">

app/assets/javascripts/pipelines/components/header_component.vue

@@ -108,7 +108,7 @@ export default {
       />
     </ci-header>
 
-    <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default gl-mb-3" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3 gl-mb-3" />
 
     <gl-modal
       :modal-id="$options.DELETE_MODAL_ID"

app/assets/javascripts/pipelines/components/test_reports/test_reports.vue

@@ -45,7 +45,7 @@ export default {
 
 <template>
   <div v-if="isLoading">
-    <gl-loading-icon size="lg" class="prepend-top-default js-loading-spinner" />
+    <gl-loading-icon size="lg" class="gl-mt-3 js-loading-spinner" />
   </div>
 
   <div
@@ -73,7 +73,7 @@ export default {
   </div>
 
   <div v-else>
-    <div class="row prepend-top-default">
+    <div class="row gl-mt-3">
       <div class="col-12">
         <p class="js-no-tests-to-show">{{ s__('TestReports|There are no tests to show.') }}</p>
       </div>

app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue

@@ -36,7 +36,7 @@ export default {
 
 <template>
   <div>
-    <div class="row prepend-top-default">
+    <div class="row gl-mt-3">
       <div class="col-12">
         <h4>{{ heading }}</h4>
       </div>

app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue

@@ -40,7 +40,7 @@ export default {
 
 <template>
   <div>
-    <div class="row prepend-top-default">
+    <div class="row gl-mt-3">
       <div class="col-12">
         <h4>{{ heading }}</h4>
       </div>

app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue

@@ -28,7 +28,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default">
+  <div class="gl-mt-3">
     <p>
       <slot></slot>
     </p>

app/assets/javascripts/releases/components/app_show.vue

@@ -21,7 +21,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default">
+  <div class="gl-mt-3">
     <gl-skeleton-loading v-if="isFetchingRelease" />
 
     <release-block v-else-if="!fetchError" :release="release" />

app/assets/javascripts/releases/components/evidence_block.vue

@@ -59,7 +59,7 @@ export default {
 
 <template>
   <div>
-    <div class="card-text prepend-top-default">
+    <div class="card-text gl-mt-3">
       <b>{{ __('Evidence collection') }}</b>
     </div>
     <div v-for="(evidence, index) in evidences" :key="evidenceTitle(index)" class="mb-2">

app/assets/javascripts/releases/components/release_block.vue

@@ -108,7 +108,7 @@ export default {
       <release-block-assets v-if="shouldRenderAssets" :assets="assets" />
       <evidence-block v-if="hasEvidence && shouldShowEvidence" :release="release" />
 
-      <div ref="gfm-content" class="card-text prepend-top-default">
+      <div ref="gfm-content" class="card-text gl-mt-3">
         <div class="md" v-html="release.descriptionHtml"></div>
       </div>
     </div>

app/assets/javascripts/releases/components/release_block_assets.vue

@@ -96,7 +96,7 @@ export default {
 </script>
 
 <template>
-  <div class="card-text prepend-top-default">
+  <div class="card-text gl-mt-3">
     <template v-if="glFeatures.releaseAssetLinkType">
       <gl-button
         data-testid="accordion-button"

app/assets/javascripts/serverless/components/functions.vue

@@ -75,7 +75,7 @@ export default {
 
 <template>
   <section id="serverless-functions" class="flex-grow">
-    <gl-loading-icon v-if="checkingInstalled" size="lg" class="prepend-top-default gl-mb-3" />
+    <gl-loading-icon v-if="checkingInstalled" size="lg" class="gl-mt-3 gl-mb-3" />
 
     <div v-else-if="isInstalled">
       <div v-if="hasFunctionData">
@@ -91,11 +91,7 @@ export default {
             </ul>
           </div>
         </template>
-        <gl-loading-icon
-          v-if="isLoading"
-          size="lg"
-          class="prepend-top-default gl-mb-3 js-functions-loader"
-        />
+        <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3 gl-mb-3 js-functions-loader" />
       </div>
       <div v-else class="empty-state js-empty-state">
         <div class="text-content">

app/assets/javascripts/vue_merge_request_widget/components/loading.vue

@@ -9,7 +9,7 @@ export default {
 </script>
 
 <template>
-  <div class="prepend-top-default">
+  <div class="gl-mt-3">
     <div class="mr-widget-heading p-3">
       <gl-skeleton-loader :width="577" :height="12">
         <rect width="86" height="12" rx="2" />

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -365,7 +365,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="mr" class="mr-state-widget prepend-top-default">
+  <div v-if="mr" class="mr-state-widget gl-mt-3">
     <mr-widget-header :mr="mr" />
     <mr-widget-suggest-pipeline
       v-if="shouldSuggestPipelines"

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -231,7 +231,7 @@ export default {
 <template>
   <div
     ref="gl-form"
-    :class="{ 'prepend-top-default gl-mb-3': addSpacingClasses }"
+    :class="{ 'gl-mt-3 gl-mb-3': addSpacingClasses }"
     class="js-vue-markdown-field md-area position-relative"
   >
     <markdown-header

app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue

@@ -64,7 +64,7 @@ export default {
 <template>
   <gl-pagination
     v-if="showPagination"
-    class="justify-content-center prepend-top-default"
+    class="justify-content-center gl-mt-3"
     v-bind="$attrs"
     :value="pageInfo.page"
     :per-page="pageInfo.perPage"

app/assets/stylesheets/framework/common.scss

@@ -399,7 +399,6 @@ img.emoji {
 .prepend-top-5 { margin-top: 5px; }
 .prepend-top-10 { margin-top: 10px; }
 .prepend-top-15 { margin-top: 15px; }
-.prepend-top-default { margin-top: $gl-padding !important; }
 .prepend-top-16 { margin-top: 16px; }
 .prepend-top-20 { margin-top: 20px; }
 .prepend-left-5 { margin-left: 5px; }

app/helpers/projects_helper.rb

@@ -565,7 +565,7 @@ module ProjectsHelper
   end
 
   def project_child_container_class(view_path)
-    view_path == "projects/issues/issues" ? "prepend-top-default" : "project-show-#{view_path}"
+    view_path == "projects/issues/issues" ? "gl-mt-3" : "project-show-#{view_path}"
   end
 
   def project_issues(project)

app/views/admin/appearances/_form.html.haml

 - parsed_with_gfm = "Content parsed with #{link_to('GitLab Flavored Markdown', help_page_path('user/markdown'), target: '_blank')}.".html_safe
 
-= form_for @appearance, url: admin_appearances_path, html: { class: 'prepend-top-default' } do |f|
+= form_for @appearance, url: admin_appearances_path, html: { class: 'gl-mt-3' } do |f|
   = form_errors(@appearance)
 
 
@@ -100,7 +100,7 @@
           .hint
             = parsed_with_gfm
 
-      .prepend-top-default.gl-mb-3
+      .gl-mt-3.gl-mb-3
         = f.submit 'Update appearance settings', class: 'btn btn-success'
         - if @appearance.persisted? || @appearance.updated_at
           .mt-4

app/views/admin/dashboard/index.html.haml

@@ -10,7 +10,7 @@
       dismissible: true.to_s } }
       = notice[:message].html_safe
 
-.admin-dashboard.prepend-top-default
+.admin-dashboard.gl-mt-3
   .row
     .col-sm-4
       .info-well.dark-well

app/views/admin/groups/index.html.haml

 - page_title _("Groups")
 
 .top-area
-  .prepend-top-default.gl-mb-3
+  .gl-mt-3.gl-mb-3
     = form_tag admin_groups_path, method: :get, class: 'js-search-form' do |f|
       = hidden_field_tag :sort, @sort
       .search-holder

app/views/admin/hook_logs/_index.html.haml

-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       Recent Deliveries

app/views/admin/hooks/_form.html.haml

@@ -16,7 +16,7 @@
         System hook will be triggered on set of events like creating project
         or adding ssh key. But you can also enable extra triggers like Push events.
 
-    .prepend-top-default
+    .gl-mt-3
       = form.check_box :repository_update_events, class: 'float-left'
       .prepend-left-20
         = form.label :repository_update_events, class: 'list-label' do

app/views/admin/hooks/edit.html.haml

 - add_to_breadcrumbs @hook.pluralized_name, admin_hooks_path
 - page_title _('Edit System Hook')
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-3
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 

app/views/admin/hooks/index.html.haml

 - page_title @hook.pluralized_name
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 

app/views/admin/impersonation_tokens/index.html.haml

@@ -6,7 +6,7 @@
 
 = render 'admin/users/head'
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-12
     - if @new_impersonation_token
       = render 'shared/access_tokens/created_container',

app/views/admin/requests_profiles/index.html.haml

@@ -9,7 +9,7 @@
   to profile the request
 
 - if @profiles.present?
-  .prepend-top-default
+  .gl-mt-3
     - @profiles.each do |path, profiles|
       .card.card-small
         .card-header

app/views/admin/sessions/new.html.haml

@@ -15,7 +15,7 @@
 
         -# Show a message if none of the mechanisms above are enabled
         - if !allow_admin_mode_password_authentication_for_web? && !ldap_sign_in_enabled? && !omniauth_enabled?
-          .prepend-top-default.center
+          .gl-mt-3.center
             = _('No authentication methods configured.')
 
         - if omniauth_enabled? && button_based_providers_enabled?

app/views/admin/system_info/show.html.haml

 - page_title _('System Info')
 
-.prepend-top-default
+.gl-mt-3
 .row
   .col-sm
     .bg-light.light-well
@@ -11,7 +11,7 @@
         - else
           = icon('warning', class: 'text-warning')
           = _('Unable to collect CPU info')
-    .bg-light.light-well.prepend-top-default
+    .bg-light.light-well.gl-mt-3
       %h4= _('Memory Usage')
       .data
         - if @memory
@@ -19,7 +19,7 @@
         - else
           = icon('warning', class: 'text-warning')
           = _('Unable to collect memory info')
-    .bg-light.light-well.prepend-top-default
+    .bg-light.light-well.gl-mt-3
       %h4= _('Uptime')
       .data
         %h2= distance_of_time_in_words_to_now(Rails.application.config.booted_at)

app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml

 - link = link_to(s_('ClusterIntegration|sign up'), 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
-.bs-callout.gcp-signup-offer.alert.alert-block.alert-dismissable.prepend-top-default.gl-mb-3{ role: 'alert', data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }
+.bs-callout.gcp-signup-offer.alert.alert-block.alert-dismissable.gl-mt-3.gl-mb-3{ role: 'alert', data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }
   %button.close.js-close{ type: "button" }  ×
   .gcp-signup-offer--content
     .gcp-signup-offer--icon.gl-mr-3

app/views/clusters/clusters/new.html.haml

@@ -6,7 +6,7 @@
 
 = render_gcp_signup_offer
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-md-3
     = render 'sidebar'
   .col-md-9.js-toggle-container

app/views/doorkeeper/applications/_form.html.haml

@@ -25,5 +25,5 @@
     = f.label :scopes, class: 'label-bold'
     = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
 
-  .prepend-top-default
+  .gl-mt-3
     = f.submit _('Save application'), class: "btn btn-success"

app/views/doorkeeper/applications/index.html.haml

 - page_title _("Applications")
 - @content_class = "limit-container-width" unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title

app/views/groups/_home_panel.html.haml

@@ -27,7 +27,7 @@
           - new_project_label = _("New project")
           - new_subgroup_label = _("New subgroup")
           - if can_create_projects and can_create_subgroups
-            .btn-group.new-project-subgroup.droplab-dropdown.home-panel-action-button.prepend-top-default.js-new-project-subgroup.qa-new-project-or-subgroup-dropdown{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
+            .btn-group.new-project-subgroup.droplab-dropdown.home-panel-action-button.gl-mt-3.js-new-project-subgroup.qa-new-project-or-subgroup-dropdown{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
               %input.btn.btn-success.dropdown-primary.js-new-group-child.qa-new-in-group-button{ type: "button", value: new_project_label, data: { action: "new-project" } }
               %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle.qa-new-project-or-subgroup-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown", 'display' => 'static' } }
                 = sprite_icon("chevron-down", css_class: "icon dropdown-btn-icon")
@@ -48,9 +48,9 @@
                         %strong= new_subgroup_label
                         %span= s_("GroupsTree|Create a subgroup in this group.")
           - elsif can_create_projects
-            = link_to new_project_label, new_project_path(namespace_id: @group.id), class: "btn btn-success prepend-top-default"
+            = link_to new_project_label, new_project_path(namespace_id: @group.id), class: "btn btn-success gl-mt-3"
           - elsif can_create_subgroups
-            = link_to new_subgroup_label, new_group_path(parent_id: @group.id), class: "btn btn-success prepend-top-default"
+            = link_to new_subgroup_label, new_group_path(parent_id: @group.id), class: "btn btn-success gl-mt-3"
 
   - if @group.description.present?
     .group-home-desc.mt-1

app/views/groups/group_members/index.html.haml

@@ -4,7 +4,7 @@
 - pending_active = params[:search_invited].present?
 - total_count = @members.count + @group.shared_with_group_links.count
 
-.project-members-page.prepend-top-default
+.project-members-page.gl-mt-3
   %h4
     = _("Group members")
   %hr

app/views/groups/new.html.haml

@@ -4,7 +4,7 @@
 - header_title  _("Groups"), dashboard_groups_path
 - active_tab = local_assigns.fetch(:active_tab, 'create')
 
-.group-edit-container.prepend-top-default
+.group-edit-container.gl-mt-3
   .row
     .col-lg-3.group-settings-sidebar
       %h4.prepend-top-0

app/views/groups/projects.html.haml

 - breadcrumb_title _("Projects")
 - page_title _("Projects")
 
-.card.prepend-top-default
+.card.gl-mt-3
   .card-header
     %strong= @group.name
     projects:

app/views/groups/settings/_general.html.haml

@@ -19,7 +19,7 @@
 
   = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :group
 
-  .form-group.prepend-top-default.append-bottom-20
+  .form-group.gl-mt-3.append-bottom-20
     .avatar-container.rect-avatar.s90
       = group_icon(@group, alt: '', class: 'avatar group-avatar s90')
     = f.label :avatar, _('Group avatar'), class: 'label-bold d-block'

app/views/groups/settings/_permissions.html.haml

@@ -40,4 +40,4 @@
     = render_if_exists 'groups/personal_access_token_expiration_policy', f: f, group: @group
     = render_if_exists 'groups/member_lock_setting', f: f, group: @group
 
-  = f.submit _('Save changes'), class: 'btn btn-success prepend-top-default js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }
+  = f.submit _('Save changes'), class: 'btn btn-success gl-mt-3 js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }

app/views/groups/settings/ci_cd/_form.html.haml

-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-12
     = form_for group, url: group_settings_ci_cd_path(group, anchor: 'js-general-pipeline-settings') do |f|
       = form_errors(group)

app/views/help/index.html.haml

 %div
 - if Gitlab::CurrentSettings.help_page_text.present?
-  .prepend-top-default.md
+  .gl-mt-3.md
     = markdown_field(Gitlab::CurrentSettings.current_application_settings, :help_page_text)
   %hr
 
@@ -28,7 +28,7 @@
 %p= link_to 'Check the current instance configuration ', help_instance_configuration_url
 %hr
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-md-8
     .documentation-index.md
       = markdown(@help_index)

app/views/help/show.html.haml

 - page_title @path.split("/").reverse.map(&:humanize)
 - @content_class = "limit-container-width" unless fluid_layout
 
-.documentation.md.prepend-top-default
+.documentation.md.gl-mt-3
   = markdown @markdown

app/views/instance_statistics/dev_ops_score/_callout.html.haml

-.prepend-top-default
+.gl-mt-3
 .user-callout{ data: { uid: 'dev_ops_score_intro_callout_dismissed' } }
   .bordered-box.landing.content-block
     %button.btn.btn-default.close.js-close-callout{ type: 'button',

app/views/instance_statistics/dev_ops_score/index.html.haml

@@ -5,7 +5,7 @@
   - if usage_ping_enabled && show_callout?('dev_ops_score_intro_callout_dismissed')
     = render 'callout'
 
-  .prepend-top-default
+  .gl-mt-3
   - if !usage_ping_enabled
     = render 'disabled'
   - elsif @metric.blank?

app/views/kaminari/gitlab/_paginator.html.haml

@@ -6,7 +6,7 @@
 -#    remote:        data-remote
 -#    paginator:     the paginator that renders the pagination tags inside
 = paginator.render do
-  .gl-pagination.prepend-top-default
+  .gl-pagination.gl-mt-3
     %ul.pagination.justify-content-center
       = prev_page_tag
       - each_page do |page|

app/views/kaminari/gitlab/_without_count.html.haml

-.gl-pagination.prepend-top-default
+.gl-pagination.gl-mt-3
   %ul.pagination.justify-content-center
     - if previous_path
       %li.page-item.prev

app/views/profiles/accounts/show.html.haml

@@ -5,7 +5,7 @@
   .alert.alert-info
     = s_('Profiles|Some options are unavailable for LDAP accounts')
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = s_('Profiles|Two-Factor Authentication')
@@ -22,7 +22,7 @@
 
 %hr
 - if display_providers_on_profile?
-  .row.prepend-top-default
+  .row.gl-mt-3
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_('Profiles|Social sign-in')
@@ -32,7 +32,7 @@
       = render 'providers', providers: button_based_providers, group_saml_identities: local_assigns[:group_saml_identities]
   %hr
 - if current_user.can_change_username?
-  .row.prepend-top-default
+  .row.gl-mt-3
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0.warning-title
         = s_('Profiles|Change username')
@@ -45,7 +45,7 @@
       #update-username{ data: data }
   %hr
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0.danger-title
       = s_('Profiles|Delete account')

app/views/profiles/active_sessions/index.html.haml

 - page_title _('Active Sessions')
 - @content_class = "limit-container-width" unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title

app/views/profiles/audit_log.html.haml

 - page_title _('Authentication log')
 - @content_class = "limit-container-width" unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title

app/views/profiles/chat_names/index.html.haml

 - page_title _('Chat')
 - @content_class = "limit-container-width" unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title

app/views/profiles/emails/index.html.haml

 - page_title _('Emails')
 - @content_class = "limit-container-width" unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title
@@ -14,7 +14,7 @@
       .form-group
         = f.label :email, _('Email'), class: 'label-bold'
         = f.text_field :email, class: 'form-control', data: { qa_selector: 'email_address_field' }
-      .prepend-top-default
+      .gl-mt-3
         = f.submit _('Add email address'), class: 'btn btn-success', data: { qa_selector: 'add_email_address_button' }
     %hr
     %h4.gl-mt-0

app/views/profiles/gpg_keys/_form.html.haml

@@ -6,5 +6,5 @@
       = f.label :key, s_('Profiles|Key'), class: 'label-bold'
       = f.text_area :key, class: "form-control", rows: 8, required: true, placeholder: _("Don't paste the private part of the GPG key. Paste the public part which begins with '-----BEGIN PGP PUBLIC KEY BLOCK-----'.")
 
-    .prepend-top-default
+    .gl-mt-3
       = f.submit s_('Profiles|Add key'), class: "btn btn-success"

app/views/profiles/gpg_keys/index.html.haml

 - page_title _('GPG Keys')
 - @content_class = "limit-container-width" unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title

app/views/profiles/keys/_form.html.haml

@@ -23,5 +23,5 @@
 
       %button.btn.btn-success.js-add-ssh-key-validation-confirm-submit= _("Yes, add it")
 
-    .prepend-top-default
+    .gl-mt-3
       = f.submit s_('Profiles|Add key'), class: "btn btn-success js-add-ssh-key-validation-original-submit qa-add-key-button"

app/views/profiles/keys/_key_details.html.haml

 - is_admin = defined?(admin) ? true : false
-.row.prepend-top-default
+.row.gl-mt-3
   .col-md-4
     .card
       .card-header

app/views/profiles/keys/index.html.haml

 - page_title _('SSH Keys')
 - @content_class = "limit-container-width" unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title

app/views/profiles/notifications/show.html.haml

@@ -9,7 +9,7 @@
           %li= msg
 
   = hidden_field_tag :notification_type, 'global'
-  .row.prepend-top-default
+  .row.gl-mt-3
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = page_title
@@ -21,7 +21,7 @@
       %h5.gl-mt-0
         = _('Global notification settings')
 
-      = form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications prepend-top-default' } do |f|
+      = form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications gl-mt-3' } do |f|
         = render_if_exists 'profiles/notifications/email_settings', form: f
 
       = label_tag :global_notification_level, "Global notification level", class: "label-bold"

app/views/profiles/passwords/edit.html.haml

@@ -2,7 +2,7 @@
 - page_title _('Password')
 - @content_class = "limit-container-width" unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title
@@ -29,7 +29,7 @@
       .form-group
         = f.label :password_confirmation, _('Password confirmation'), class: 'label-bold'
         = f.password_field :password_confirmation, required: true, class: 'form-control', data: { qa_selector: 'confirm_password_field' }
-      .prepend-top-default.gl-mb-3
+      .gl-mt-3.gl-mb-3
         = f.submit _('Save password'), class: "btn btn-success append-right-10", data: { qa_selector: 'save_password_button' }
         - unless @user.password_automatically_set?
           = link_to _('I forgot my password'), reset_profile_password_path, method: :put

app/views/profiles/personal_access_tokens/index.html.haml

@@ -4,7 +4,7 @@
 - type_plural = _('personal access tokens')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title
@@ -33,7 +33,7 @@
         revoke_route_helper: ->(token) { revoke_profile_personal_access_token_path(token) }
 
 %hr
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = s_('AccessTokens|Feed token')
@@ -51,7 +51,7 @@
 
 - if incoming_email_token_enabled?
   %hr
-  .row.prepend-top-default
+  .row.gl-mt-3
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_('AccessTokens|Incoming email token')
@@ -69,7 +69,7 @@
 
 - if static_objects_external_storage_enabled?
   %hr
-  .row.prepend-top-default
+  .row.gl-mt-3
     .col-lg-4
       %h4.gl-mt-0
         = s_('AccessTokens|Static object token')

app/views/profiles/preferences/show.html.haml

 - page_title _('Preferences')
 - @content_class = "limit-container-width" unless fluid_layout
 
-= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
+= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row gl-mt-3 js-preferences-form' } do |f|
   .col-lg-4.application-theme
     %h4.gl-mt-0
       = s_('Preferences|Navigation theme')

app/views/profiles/show.html.haml

@@ -3,7 +3,7 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - gravatar_link = link_to Gitlab.config.gravatar.host, 'https://' + Gitlab.config.gravatar.host
 
-= bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user prepend-top-default js-quick-submit gl-show-field-errors' }, authenticity_token: true do |f|
+= bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user gl-mt-3 js-quick-submit gl-show-field-errors' }, authenticity_token: true do |f|
   = form_errors(@user)
 
   .row
@@ -118,7 +118,7 @@
       = f.check_box :include_private_contributions, label: s_('Profiles|Include private contributions on my profile'), wrapper_class: 'mb-2', inline: true
       .help-block
         = s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")
-      .prepend-top-default.gl-mb-3
+      .gl-mt-3.gl-mb-3
         = f.submit s_("Profiles|Update profile settings"), class: 'btn btn-success'
         = link_to _("Cancel"), user_path(current_user), class: 'btn btn-cancel'
 

app/views/profiles/two_factor_auths/show.html.haml

@@ -3,7 +3,7 @@
 - @content_class = "limit-container-width" unless fluid_layout
 
 .js-two-factor-auth{ 'data-two-factor-skippable' => "#{two_factor_skippable?}", 'data-two_factor_skip_url' => skip_profile_two_factor_auth_path }
-  .row.prepend-top-default
+  .row.gl-mt-3
     .col-lg-4
       %h4.gl-mt-0
         = _('Register Two-Factor Authenticator')
@@ -50,12 +50,12 @@
           .form-group
             = label_tag :pin_code, _('Pin code'), class: "label-bold"
             = text_field_tag :pin_code, nil, class: "form-control", required: true
-          .prepend-top-default
+          .gl-mt-3
             = submit_tag _('Register with two-factor app'), class: 'btn btn-success'
 
   %hr
 
-  .row.prepend-top-default
+  .row.gl-mt-3
     .col-lg-4
       %h4.gl-mt-0
         = _('Register Universal Two-Factor (U2F) Device')

app/views/projects/_wiki.html.haml

 - if @wiki_home.present?
   %div{ class: container_class }
-    .md.prepend-top-default.gl-mb-3
+    .md.gl-mt-3.gl-mb-3
       = render_wiki_content(@wiki_home)
 - else
   - can_create_wiki = can?(current_user, :create_wiki, @project)

app/views/projects/blob/viewers/_loading.html.haml

-.text-center.prepend-top-default.gl-mb-3
+.text-center.gl-mt-3.gl-mb-3
   = icon('spinner spin 2x', 'aria-hidden' => 'true', 'aria-label' => 'Loading content…', class: 'qa-spinner')

app/views/projects/blob/viewers/_sketch.html.haml

 .file-content#js-sketch-viewer{ data: { endpoint: blob_raw_path } }
-  .js-loading-icon.text-center.prepend-top-default.gl-mb-3.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
+  .js-loading-icon.text-center.gl-mt-3.gl-mb-3.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
     = icon('spinner spin 2x', 'aria-hidden' => 'true');

app/views/projects/blob/viewers/_stl.html.haml

 .file-content.is-stl-loading
   .text-center#js-stl-viewer{ data: { endpoint: blob_raw_path } }
-    = icon('spinner spin 2x', class: 'prepend-top-default gl-mb-3', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
-  .text-center.prepend-top-default.gl-mb-3.stl-controls
+    = icon('spinner spin 2x', class: 'gl-mt-3 gl-mb-3', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
+  .text-center.gl-mt-3.gl-mb-3.stl-controls
     .btn-group
       %button.btn.btn-default.btn-sm.js-material-changer{ data: { type: 'wireframe' } }
         Wireframe

app/views/projects/environments/_form.html.haml

-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       = _("Environments")

app/views/projects/find_file/show.html.haml

@@ -23,5 +23,5 @@
               = _('There are no matching files')
             %p.text-secondary
               = _('Try using a different search term to find the file you are looking for.')
-      .text-center.prepend-top-default.loading
+      .text-center.gl-mt-3.loading
         .spinner.spinner-md

app/views/projects/forks/_fork_button.html.haml

@@ -2,17 +2,17 @@
 - can_create_project = current_user.can?(:create_projects, namespace)
 
 - if forked_project = namespace.find_fork_of(@project)
-  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.gl-mb-3.forked
+  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.gl-mt-3.gl-mb-3.forked
     = link_to project_path(forked_project) do
       - if /no_((\w*)_)*avatar/.match(avatar)
         = group_icon(namespace, class: "avatar rect-avatar s100 identicon mx-auto")
       - else
         .avatar-container.s100.mx-auto
           = image_tag(avatar, class: "avatar s100")
-      %h5.prepend-top-default
+      %h5.gl-mt-3
         = namespace.human_name
 - else
-  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.gl-mb-3{ class: ("disabled" unless can_create_project) }
+  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.gl-mt-3.gl-mb-3{ class: ("disabled" unless can_create_project) }
     = link_to project_forks_path(@project, namespace_key: namespace.id),
         method: "POST",
         class: ("disabled has-tooltip" unless can_create_project),
@@ -22,5 +22,5 @@
       - else
         .avatar-container.s100.mx-auto
           = image_tag(avatar, class: "avatar s100")
-      %h5.prepend-top-default{ data: { qa_selector: 'fork_namespace_content', qa_name: namespace.human_name } }
+      %h5.gl-mt-3{ data: { qa_selector: 'fork_namespace_content', qa_name: namespace.human_name } }
         = namespace.human_name

app/views/projects/forks/new.html.haml

 - page_title _("Fork project")
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-3
     %h4.gl-mt-0
       = _("Fork project")
@@ -16,6 +16,6 @@
     - else
       %strong
         = _("No available namespaces to fork the project.")
-      %p.prepend-top-default
+      %p.gl-mt-3
         = _("You must have permission to create a project in a namespace before forking.")
 

app/views/projects/hook_logs/show.html.haml

@@ -2,7 +2,7 @@
 - add_to_breadcrumbs _('Webhook Settings'), namespace_project_hooks_path
 - page_title _('Webhook Logs')
 
-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       Request details

app/views/projects/hooks/edit.html.haml

@@ -2,7 +2,7 @@
 - add_to_breadcrumbs _('Webhook Settings'), namespace_project_hooks_path
 - page_title _('Webhook')
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-3
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 

app/views/projects/hooks/index.html.haml

@@ -2,7 +2,7 @@
 - breadcrumb_title _('Webhook Settings')
 - page_title _('Webhooks')
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 

app/views/projects/merge_requests/diffs/_commit_widget.html.haml

@@ -3,7 +3,7 @@
   - `assets/javascripts/diffs/components/commit_widget.vue`
 -#-----------------------------------------------------------------
 - if @commit
-  .info-well.d-none.d-sm-block.prepend-top-default
+  .info-well.d-none.d-sm-block.gl-mt-3
     .well-segment
       %ul.blob-commit-info
         = render 'projects/commits/commit', commit: @commit, merge_request: @merge_request, view_details: true

app/views/projects/milestones/show.html.haml

@@ -9,10 +9,10 @@
 = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
 
 - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count.zero?
-  .alert.alert-success.prepend-top-default
+  .alert.alert-success.gl-mt-3
     %span= _('Assign some issues to this milestone.')
 - elsif @milestone.complete? && @milestone.active?
-  .alert.alert-success.prepend-top-default
+  .alert.alert-success.gl-mt-3
     %span= _('All issues for this milestone are closed. You may close this milestone now.')
 
 = render 'shared/milestones/tabs', milestone: @milestone

app/views/projects/mirrors/_instructions.html.haml

-.account-well.prepend-top-default.gl-mb-3
+.account-well.gl-mt-3.gl-mb-3
   %ul
     %li
       = _('The repository must be accessible over <code>http://</code>,

app/views/projects/mirrors/_ssh_host_keys.html.haml

@@ -28,6 +28,6 @@
         = _('Input host keys manually')
       %span.label-hide
         = _('Hide host keys manual input')
-  .js-ssh-known-hosts.collapse.prepend-top-default
+  .js-ssh-known-hosts.collapse.gl-mt-3
     = f.label :ssh_known_hosts, _('SSH host keys'), class: 'label-bold'
     = f.text_area :ssh_known_hosts, class: 'form-control known-hosts js-known-hosts', rows: '10'

app/views/projects/network/show.html.haml

@@ -16,5 +16,5 @@
 
     - if @commit
       .network-graph{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
-        .text-center.prepend-top-default
+        .text-center.gl-mt-3
           .spinner.spinner-md

app/views/projects/new.html.haml

@@ -4,7 +4,7 @@
 - header_title  _("Projects"), dashboard_projects_path
 - active_tab = local_assigns.fetch(:active_tab, 'blank')
 
-.project-edit-container.prepend-top-default
+.project-edit-container.gl-mt-3
   .project-edit-errors
     = render 'projects/errors'
 

app/views/projects/project_members/index.html.haml

 - page_title _("Members")
 - can_admin_project_members = can?(current_user, :admin_project_member, @project)
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-12
     - if project_can_be_shared?
       %h4

app/views/projects/protected_branches/show.html.haml

 - page_title @protected_ref.name, _("Protected Branches")
 
-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0.ref-name
       = @protected_ref.name

app/views/projects/protected_tags/show.html.haml

 - page_title @protected_ref.name, _("Protected Tags")
 
-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0.ref-name
       = @protected_ref.name

app/views/projects/services/_form.html.haml

-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-4
     %h4.gl-mt-0
       = @service.title

app/views/projects/services/prometheus/_configuration_banner.html.haml

@@ -12,14 +12,14 @@
           .svg-container
             = image_tag 'illustrations/monitoring/getting_started.svg'
         .col-sm-10
-          %p.text-success.prepend-top-default
+          %p.text-success.gl-mt-3
             = s_('PrometheusService|Prometheus is being automatically managed on your clusters')
           = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'btn'
       - else
         .col-sm-2
           = image_tag 'illustrations/monitoring/loading.svg'
         .col-sm-10
-          %p.prepend-top-default
+          %p.gl-mt-3
             = s_('PrometheusService|Automatically deploy and configure Prometheus on your clusters to monitor your project’s environments')
           = link_to s_('PrometheusService|Install Prometheus on clusters'), project_clusters_path(project), class: 'btn btn-success'