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'
 

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

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

app/views/projects/settings/access_tokens/index.html.haml

@@ -4,7 +4,7 @@
 - type_plural = _('project 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

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

-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-12
     = form_for @project, url: project_settings_ci_cd_path(@project, anchor: 'js-general-pipeline-settings') do |f|
       = form_errors(@project)
@@ -147,5 +147,5 @@
 
 %hr
 
-.row.prepend-top-default
+.row.gl-mt-3
   = render partial: 'badge', collection: @badges

app/views/projects/settings/integrations/show.html.haml

@@ -3,7 +3,7 @@
 - page_title _('Integrations')
 
 - if show_webhooks_moved_alert?
-  .gl-alert.gl-alert-info.js-webhooks-moved-alert.prepend-top-default{ role: 'alert', data: { feature_id: UserCalloutsHelper::WEBHOOKS_MOVED, dismiss_endpoint: user_callouts_path } }
+  .gl-alert.gl-alert-info.js-webhooks-moved-alert.gl-mt-3{ role: 'alert', data: { feature_id: UserCalloutsHelper::WEBHOOKS_MOVED, dismiss_endpoint: user_callouts_path } }
     = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
     %button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss') }
       = sprite_icon('close', size: 16, css_class: 'gl-icon')

app/views/projects/settings/operations/_configuration_banner.html.haml

@@ -12,13 +12,13 @@
           .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'

app/views/projects/tags/_tag.html.haml

@@ -26,7 +26,7 @@
         = _("Release")
         = link_to release.name, project_releases_path(@project, anchor: release.tag), class: 'tag-release-link'
       - if release.description.present?
-        .md.prepend-top-default
+        .md.gl-mt-3
           = markdown_field(release, :description)
 
   .row-fixed-content.controls.flex-row

app/views/projects/tags/releases/edit.html.haml

@@ -14,6 +14,6 @@
     = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here…"
     = render 'shared/notes/hints'
   .error-alert
-  .prepend-top-default
+  .gl-mt-3
     = f.submit 'Save changes', class: 'btn btn-success'
     = link_to "Cancel", project_tag_path(@project, @tag.name), class: "btn btn-default btn-cancel"

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

@@ -59,7 +59,7 @@
     %pre.wrap{ data: { qa_selector: 'tag_message_content' } }
       = strip_signature(@tag.message)
 
-.gl-mb-3.prepend-top-default
+.gl-mb-3.gl-mt-3
   - if @release.description.present?
     .description.md{ data: { qa_selector: 'tag_release_notes_content' } }
       = markdown_field(@release, :description)

app/views/projects/triggers/_index.html.haml

-.row.prepend-top-default.gl-mb-3.triggers-container
+.row.gl-mt-3.gl-mb-3.triggers-container
   .col-lg-12
     .card
       .card-header
@@ -38,7 +38,7 @@
           %code REF_NAME
           with the trigger token and the branch or tag name respectively.
 
-        %h5.prepend-top-default
+        %h5.gl-mt-3
           Use cURL
 
         %p.light
@@ -51,7 +51,7 @@
                  -F token=TOKEN \
                  -F ref=REF_NAME \
                  #{builds_trigger_url(@project.id)}
-        %h5.prepend-top-default
+        %h5.gl-mt-3
           Use .gitlab-ci.yml
 
         %p.light
@@ -66,7 +66,7 @@
               stage: deploy
               script:
                 - "curl -X POST -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
-        %h5.prepend-top-default
+        %h5.gl-mt-3
           Use webhook
 
         %p.light
@@ -76,7 +76,7 @@
         %pre
           :plain
              #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN
-        %h5.prepend-top-default
+        %h5.gl-mt-3
           Pass job variables
 
         %p.light

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

 - page_title _("Trigger")
 
-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-12
     %h4.gl-mt-0
       Update trigger

app/views/search/show.html.haml

@@ -7,7 +7,7 @@
     = _('Search')
   = render_if_exists 'search/form_elasticsearch', attrs: { class: 'ml-sm-auto' }
 
-.prepend-top-default
+.gl-mt-3
   = render 'search/form'
 - if @search_term
   = render 'search/category'

app/views/shared/access_tokens/_form.html.haml

@@ -30,5 +30,5 @@
     = f.label :scopes, _('Scopes'), class: 'label-bold'
     = render 'shared/tokens/scopes_form', prefix: prefix, token: token, scopes: scopes
 
-  .prepend-top-default
+  .gl-mt-3
     = f.submit _('Create %{type}') % { type: type }, class: 'btn btn-success', data: { qa_selector: 'create_token_button' }

app/views/shared/dashboard/_no_filter_selected.html.haml

 .row.empty-state.text-center
   .col-12
-    .svg-130.prepend-top-default
+    .svg-130.gl-mt-3
       = image_tag 'illustrations/issue-dashboard_results-without-filter.svg'
   .col-12
     .text-content

app/views/shared/deploy_tokens/_form.html.haml

@@ -45,5 +45,5 @@
         = label_tag ("deploy_token_write_package_registry"), 'write_package_registry', class: 'label-bold form-check-label'
         .text-secondary= s_('DeployTokens|Allows write access to the package registry')
 
-  .prepend-top-default
+  .gl-mt-3
     = f.submit s_('DeployTokens|Create deploy token'), class: 'btn btn-success qa-create-deploy-token'

app/views/shared/file_hooks/_index.html.haml

 - file_hooks = Gitlab::FileHook.files
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-4
     %h4.gl-mt-0
       = _('File Hooks')

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

@@ -4,7 +4,7 @@
 
 - return if requesters.empty?
 
-.card.prepend-top-default{ class: ('card-mobile' if force_mobile_view ) }
+.card.gl-mt-3{ class: ('card-mobile' if force_mobile_view ) }
   .card-header
     = _("Users requesting access to")
     %strong= membership_source.name

app/views/shared/milestones/_issues_tab.html.haml

@@ -6,7 +6,7 @@
     .flash-warning#milestone-issue-count-warning
       = milestone_issues_count_message(@milestone)
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-md-4
     = render 'shared/milestones/issuables', args.merge(title: s_('Milestones|Unstarted Issues (open and unassigned)'), issuables: issues.opened.unassigned, id: 'unassigned', show_counter: true)
   .col-md-4

app/views/shared/milestones/_merge_requests_tab.haml

 - args = { show_project_name: local_assigns.fetch(:show_project_name, false),
            show_full_project_name: local_assigns.fetch(:show_full_project_name, false) }
 
-.row.prepend-top-default
+.row.gl-mt-3
   .col-md-3
     = render 'shared/milestones/issuables', args.merge(title: _('Work in progress (open and unassigned)'), issuables: merge_requests.opened.unassigned, id: 'unassigned', show_counter: true)
   .col-md-3

app/views/shared/milestones/_tab_loading.html.haml

-.text-center.prepend-top-default
+.text-center.gl-mt-3
   .spinner.spinner-md

app/views/shared/milestones/_top.html.haml

@@ -7,7 +7,7 @@
 = render 'shared/milestones/description', milestone: milestone
 
 - if milestone.complete? && milestone.active?
-  .alert.alert-success.prepend-top-default
+  .alert.alert-success.gl-mt-3
     %span
       = _('All issues for this milestone are closed.')
       = group ? _('You may close the milestone now.') : _('Navigate to the project to close the milestone.')

app/views/shared/notes/_notes_with_form.html.haml

@@ -18,12 +18,12 @@
         .timeline-content.timeline-content-form
           = render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
 - elsif !current_user
-  .disabled-comment.text-center.prepend-top-default
+  .disabled-comment.text-center.gl-mt-3
     - link_to_register = link_to(_("register"), new_session_path(:user, redirect_to_referer: 'yes', anchor: 'register-pane'), class: 'js-register-link')
     - link_to_sign_in = link_to(_("sign in"), new_session_path(:user, redirect_to_referer: 'yes'), class: 'js-sign-in-link')
     = _("Please %{link_to_register} or %{link_to_sign_in} to comment").html_safe % { link_to_register: link_to_register, link_to_sign_in: link_to_sign_in }
 - elsif discussion_locked
-  .disabled-comment.text-center.prepend-top-default
+  .disabled-comment.text-center.gl-mt-3
     %span.issuable-note-warning
       = sprite_icon('lock', size: 16, css_class: 'icon')
       %span

app/views/shared/notifications/_new_button.html.haml

@@ -8,7 +8,7 @@
   - else
     - button_title = _("Notification setting - %{notification_title}") % { notification_title: notification_title(notification_setting.level) }
 
-  .js-notification-dropdown.notification-dropdown.home-panel-action-button.prepend-top-default.gl-mr-3.dropdown.inline
+  .js-notification-dropdown.notification-dropdown.home-panel-action-button.gl-mt-3.gl-mr-3.dropdown.inline
     = form_for notification_setting, remote: true, html: { class: "inline notification-form no-label" } do |f|
       = hidden_setting_source_input(notification_setting)
       = hidden_field_tag "hide_label", true

app/views/shared/runners/_runner_description.html.haml

-.light.prepend-top-default
+.light.gl-mt-3
   %p
     = _("You can set up as many Runners as you need to run your jobs.")
     %br

app/views/shared/web_hooks/_index.html.haml

@@ -10,5 +10,5 @@
       - hooks.each do |hook|
         = render 'shared/web_hooks/hook', hook: hook
   - else
-    %p.text-center.prepend-top-default.gl-mb-3
+    %p.text-center.gl-mt-3.gl-mb-3
       = _('No webhooks found, add one in the form above.')

app/views/shared/wikis/_form.html.haml

-- form_classes = %w[wiki-form common-note-form prepend-top-default js-quick-submit]
+- form_classes = %w[wiki-form common-note-form gl-mt-3 js-quick-submit]
 
 - if @page.persisted?
   - form_action = wiki_page_path(@wiki, @page)

app/views/shared/wikis/show.html.haml

@@ -25,7 +25,7 @@
     - history_link = link_to s_("WikiHistoricalPage|history"), wiki_page_path(@wiki, @page, action: :history)
     = (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe
 
-.prepend-top-default.gl-mb-3
+.gl-mt-3.gl-mb-3
   .md{ data: { qa_selector: 'wiki_page_content' } }
     = render_wiki_content(@page)
 

app/views/sherlock/file_samples/show.html.haml

@@ -12,7 +12,7 @@
     = t('sherlock.file_sample')
     = @file_sample.id
 
-.prepend-top-default
+.gl-mt-3
   %p
     %span.light
       #{t('sherlock.time')}:

app/views/sherlock/queries/_backtrace.html.haml

-.prepend-top-default
+.gl-mt-3
   .card
     .card-header
       %strong

app/views/sherlock/queries/_general.html.haml

-.prepend-top-default
+.gl-mt-3
   .card
     .card-header
       %strong

app/views/sherlock/transactions/_general.html.haml

-.prepend-top-default
+.gl-mt-3
   .card
     .card-header
       %strong

app/views/snippets/new.html.haml

@@ -6,5 +6,5 @@
 .page-title-holder.d-flex.align-items-center
   %h1.page-title= _('New Snippet')
 
-.prepend-top-default
+.gl-mt-3
   = render "shared/snippets/form", url: snippets_path(@snippet)

app/views/users/_overview.html.haml

 .row
   .col-12
-    .calendar-block.prepend-top-default.gl-mb-3
+    .calendar-block.gl-mt-3.gl-mb-3
       .user-calendar.d-none.d-sm-block{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
         %h4.center.light
           .spinner.spinner-md

ee/app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue

@@ -99,11 +99,7 @@ export default {
       <img :src="slackLogoPath" class="gitlab-slack-logo" />
     </div>
 
-    <button
-      type="button"
-      class="btn btn-red mx-auto js-popup-button prepend-top-default"
-      @click="togglePopup"
-    >
+    <button type="button" class="btn btn-red mx-auto js-popup-button gl-mt-3" @click="togglePopup">
       {{ __('Add GitLab to Slack') }}
     </button>
 
@@ -154,7 +150,7 @@ export default {
           Shows the issue with id <strong>&lt;id&gt;</strong>
         </span>
 
-        <div class="prepend-top-default">
+        <div class="gl-mt-3">
           <a v-once :href="docsPath">{{ __('More Slack commands') }}</a>
         </div>
       </div>

ee/app/assets/javascripts/analytics/productivity_analytics/components/mr_table.vue

@@ -109,7 +109,7 @@ export default {
       v-if="showPagination"
       :change="onPageChange"
       :page-info="pageInfo"
-      class="justify-content-center prepend-top-default"
+      class="justify-content-center gl-mt-3"
     />
   </div>
 </template>

ee/app/assets/javascripts/billings/components/subscription_table.vue

@@ -86,7 +86,7 @@ export default {
   <div>
     <div
       v-if="!isLoading && !hasError"
-      class="card prepend-top-default subscription-table js-subscription-table"
+      class="card gl-mt-3 subscription-table js-subscription-table"
     >
       <div class="js-subscription-header card-header">
         <strong>{{ subscriptionHeader }}</strong>

ee/app/assets/javascripts/codequality_report/codequality_report.vue

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

ee/app/assets/javascripts/dependencies/components/paginated_dependencies_table.vue

@@ -47,7 +47,7 @@ export default {
       v-if="shouldShowPagination"
       :change="fetchPage"
       :page-info="module.pageInfo"
-      class="justify-content-center prepend-top-default"
+      class="justify-content-center gl-mt-3"
     />
   </div>
 </template>

ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue

@@ -174,11 +174,11 @@ export default {
         </template>
       </gl-sprintf>
     </p>
-    <div class="prepend-top-default">
+    <div class="gl-mt-3">
       <div v-if="projects.length">
         <div v-for="project in projects" :key="project.id">
           <project-header :project="project" @remove="removeProject" />
-          <div class="row prepend-top-default no-gutters mx-n2">
+          <div class="row gl-mt-3 no-gutters mx-n2">
             <environment
               v-for="environment in project.environments"
               :key="environment.id"

ee/app/assets/javascripts/feature_flags/components/form.vue

@@ -372,7 +372,7 @@ export default {
             </template>
           </gl-sprintf>
 
-          <div class="js-scopes-table prepend-top-default">
+          <div class="js-scopes-table gl-mt-3">
             <div class="gl-responsive-table-row table-row-header" role="row">
               <div class="table-section section-30" role="columnheader">
                 {{ s__('FeatureFlags|Environment Spec') }}

ee/app/assets/javascripts/insights/components/insights.vue

@@ -90,7 +90,7 @@ export default {
 };
 </script>
 <template>
-  <div class="insights-container prepend-top-default">
+  <div class="insights-container gl-mt-3">
     <div class="mb-3">
       <h3>{{ __('Insights') }}</h3>
     </div>

ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue

@@ -150,12 +150,12 @@ export default {
         {{ s__('OperationsDashboard|Add projects') }}
       </gl-button>
     </div>
-    <div class="prepend-top-default">
+    <div class="gl-mt-3">
       <vue-draggable
         v-if="projects.length"
         v-model="projects"
         group="dashboard-projects"
-        class="row prepend-top-default dashboard-cards"
+        class="row gl-mt-3 dashboard-cards"
       >
         <div v-for="project in projects" :key="project.id" class="col-12 col-md-6 col-xl-4 px-2">
           <dashboard-project :project="project" />

ee/app/assets/javascripts/packages/details/components/maven_installation.vue

@@ -53,7 +53,7 @@ export default {
         :tracking-action="$options.trackingActions.COPY_MAVEN_XML"
       />
 
-      <p class="prepend-top-default font-weight-bold">
+      <p class="gl-mt-3 font-weight-bold">
         {{ s__('PackageRegistry|Maven Command') }}
       </p>
       <code-instruction

ee/app/assets/javascripts/packages/details/components/npm_installation.vue

@@ -51,7 +51,7 @@ export default {
         :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
       />
 
-      <p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
+      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
       <code-instruction
         :instruction="yarnCommand"
         :copy-text="s__('PackageRegistry|Copy yarn command')"
@@ -69,7 +69,7 @@ export default {
         :tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
       />
 
-      <p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
+      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
       <code-instruction
         :instruction="yarnSetupCommand"
         :copy-text="s__('PackageRegistry|Copy yarn setup command')"

ee/app/assets/javascripts/packages/details/components/pypi_installation.vue

@@ -34,7 +34,7 @@ export default {
 <template>
   <installation-tabs :tracking-label="$options.trackingLabel">
     <template #installation>
-      <p class="prepend-top-default font-weight-bold">
+      <p class="gl-mt-3 font-weight-bold">
         {{ s__('PackageRegistry|Pip Command') }}
       </p>
       <code-instruction

ee/app/assets/javascripts/pages/groups/saml_providers/saml_members/index.vue

@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default">
+  <div class="gl-mt-3">
     <gl-skeleton-loading v-if="isInitialLoadInProgress" />
     <gl-table v-else :items="members" :fields="$options.fields">
       <template #cell(name)="{ item }">

ee/app/assets/javascripts/requirements/components/requirements_root.vue

@@ -573,7 +573,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>

ee/app/assets/javascripts/security_dashboard/components/project_security_dashboard.vue

@@ -86,7 +86,7 @@ export default {
 <template>
   <div>
     <template v-if="hasPipelineData">
-      <div class="card security-dashboard prepend-top-default">
+      <div class="card security-dashboard gl-mt-3">
         <div class="card-header border-bottom-0">
           <span class="js-security-dashboard-left">
             <gl-sprintf

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue

@@ -119,7 +119,7 @@ export default {
         v-if="showPagination"
         :change="fetchPage"
         :page-info="pageInfo"
-        class="justify-content-center prepend-top-default"
+        class="justify-content-center gl-mt-3"
       />
     </template>
   </div>

ee/app/assets/javascripts/subscriptions/new/components/order_summary/summary_details.vue

@@ -55,7 +55,7 @@ export default {
       }}
     </div>
     <div v-if="taxRate">
-      <div class="border-bottom prepend-top-default gl-mb-3"></div>
+      <div class="border-bottom gl-mt-3 gl-mb-3"></div>
       <div class="d-flex justify-content-between text-secondary">
         <div>{{ $options.i18n.subtotal }}</div>
         <div class="js-total-ex-vat">{{ formatAmount(totalExVat, usersPresent) }}</div>
@@ -65,7 +65,7 @@ export default {
         <div class="js-vat">{{ formatAmount(vat, usersPresent) }}</div>
       </div>
     </div>
-    <div class="border-bottom prepend-top-default gl-mb-3"></div>
+    <div class="border-bottom gl-mt-3 gl-mb-3"></div>
     <div class="d-flex justify-content-between bold gl-font-lg">
       <div>{{ $options.i18n.total }}</div>
       <div class="js-total-amount">{{ formatAmount(totalAmount, usersPresent) }}</div>

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -272,7 +272,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"

ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue

@@ -107,7 +107,7 @@ export default {
       </template>
 
       <template v-if="isAdmin" #subheader>
-        <div v-if="formIsOpen" class="prepend-top-default gl-mb-3">
+        <div v-if="formIsOpen" class="gl-mt-3 gl-mb-3">
           <add-license-form
             :managed-licenses="managedLicenses"
             :loading="isAddingNewLicense"

ee/app/views/admin/licenses/_breakdown.html.haml

@@ -17,7 +17,7 @@
 - true_up_link_start = '<a href="%{url}">'.html_safe % { url: true_up_url }
 - link_end = '</a>'.html_safe
 
-.license-panel.prepend-top-default
+.license-panel.gl-mt-3
   .d-flex.pb-2
     .col-sm-6.d-flex.pl-0
       .info-well.dark-well

ee/app/views/groups/hooks/edit.html.haml

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

ee/app/views/groups/hooks/index.html.haml

 - page_title @hook.pluralized_name
 
 - if @group.feature_available?(:group_webhooks)
-  .row.prepend-top-default
+  .row.gl-mt-3
     .col-lg-3
       = render 'shared/web_hooks/title_and_docs', hook: @hook
 

ee/app/views/groups/packages/_legacy_package_list.haml

@@ -3,7 +3,7 @@
 
 - if @packages.any?
   .d-flex.justify-content-end
-    .dropdown.inline.prepend-top-default.gl-mb-3.package-sort-dropdown
+    .dropdown.inline.gl-mt-3.gl-mb-3.package-sort-dropdown
       .btn-group{ role: 'group' }
         .btn-group{ role: 'group' }
           %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static', 'qa-selector': 'sort-dropdown-button' }, class: 'btn btn-default' }

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

-%section.saml_provider#js-saml-settings-form.prepend-top-default
+%section.saml_provider#js-saml-settings-form.gl-mt-3
   = form_for [group, saml_provider], url: group_saml_providers_path do |f|
     .form-group
       = form_errors(saml_provider)

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

 - scim_token_not_present = @scim_token_url.nil?
-.prepend-top-default.js-generate-scim-token-container{ class: "#{ 'd-none' unless scim_token_not_present}" }
+.gl-mt-3.js-generate-scim-token-container{ class: "#{ 'd-none' unless scim_token_not_present}" }
   %p= s_('GroupSAML|Generate a SCIM token to set up your System for Cross-Domain Identity Management.')
   %button.btn.btn_default.btn-white.js-generate-scim-token{ type: 'button' }
     = s_('GroupSAML|Generate a SCIM token')
-.prepend-top-default.js-scim-token-container{ class: "#{ 'd-none' if scim_token_not_present}" }
+.gl-mt-3.js-scim-token-container{ class: "#{ 'd-none' if scim_token_not_present}" }
   .well-segment.borderless.mb-3.col-12.col-lg-9.p-0
     = render 'scim_row', value: '********************', field: 'scim_token', label_text: s_('GroupSAML|Your SCIM token'), show_clipboard: false
     .form-text.text-muted.js-scim-token-helper-text
@@ -15,5 +15,5 @@
         = s_("GroupSAML|Make sure you save this token — you won't be able to access it again.")
   .well-segment.borderless.col-12.col-lg-9.p-0
     = render 'scim_row', value: @scim_token_url, field: 'scim_endpoint_url', label_text: s_('GroupSAML|SCIM API endpoint URL'), show_clipboard: true
-.prepend-top-default.text-center.js-scim-loading-container.d-none
+.gl-mt-3.text-center.js-scim-loading-container.d-none
   .spinner

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

 - page_title s_('GroupSAML|SAML Single Sign On Settings')
-%section.row.prepend-top-default
+%section.row.gl-mt-3
   .col-lg-3.gl-mb-3
     %h4.page-title
       = s_("GroupSAML|SAML Single Sign On")
@@ -35,7 +35,7 @@
     %h4.page-title
       = s_('GroupSAML|Members')
   .col-lg-9
-    .js-saml-members.prepend-top-default{ data: { group_id: @group.id } }
+    .js-saml-members.gl-mt-3{ data: { group_id: @group.id } }
       .animation-container
         .skeleton-line-1
         .skeleton-line-2

ee/app/views/projects/_merge_request_approvals_settings_form.html.haml

@@ -14,7 +14,7 @@
     'allow_multi_rule': @project.multiple_approval_rules_available?.to_s,
     'eligible_approvers_docs_path': help_page_path('user/project/merge_requests/merge_request_approvals', anchor: 'eligible-approvers'),
     'security_approvals_help_page_path': help_page_path('user/application_security/index.html', anchor: 'security-approvals-in-merge-requests-ultimate')} }
-    .text-center.prepend-top-default
+    .text-center.gl-mt-3
       = sprite_icon('spinner', size: 24, css_class: 'gl-spinner')
 
 - if project.code_owner_approval_required_available?

ee/app/views/projects/commits/_mirror_status.html.haml

 - if @project.mirror?
-  .prepend-top-default.gray-content-block.second-block.clearfix
+  .gl-mt-3.gray-content-block.second-block.clearfix
     - import_url = @project.safe_import_url
     .oneline.project-mirror-text
       This project is mirrored from #{link_to import_url, import_url}.

ee/app/views/projects/packages/packages/_legacy_package_list.html.haml

@@ -3,7 +3,7 @@
 
 - if @packages.any?
   .d-flex.justify-content-end
-    .dropdown.inline.prepend-top-default.gl-mb-3.package-sort-dropdown
+    .dropdown.inline.gl-mt-3.gl-mb-3.package-sort-dropdown
       .btn-group{ role: 'group' }
         .btn-group{ role: 'group' }
           %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }

ee/app/views/projects/settings/slacks/edit.html.haml

 - page_title _('Edit Slack integration')
 
-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       Edit project alias

ee/app/views/projects/settings/subscriptions/_index.html.haml

-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-12
     = form_with url: project_subscriptions_path(@project), id: 'pipeline-subscriptions-form', method: :post, authenticity_token: true do |f|
       %fieldset
@@ -8,14 +8,14 @@
           = f.text_field :upstream_project_path, class: "form-control"
         = f.submit _('Subscribe'), class: "btn btn-success float-right"
 
-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
   .col-lg-12
     %h5
       = _("Subscriptions")
       %span.badge.badge-pill
         = @project.upstream_projects.count + @project.downstream_projects.count
 
-    %table.table.prepend-top-default
+    %table.table.gl-mt-3
       %thead
         %tr
           %th= _("Project")

ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap

@@ -63,7 +63,7 @@ exports[`dashboard should match the snapshot 1`] = `
   </p>
    
   <div
-    class="prepend-top-default"
+    class="gl-mt-3"
   >
     <gl-empty-state-stub
       svgpath="/assets/illustrations/operations-dashboard_empty.svg"

spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`IDE pipeline stage renders stage details & icon 1`] = `
 <div
-  class="ide-stage card prepend-top-default"
+  class="ide-stage card gl-mt-3"
 >
   <div
     class="card-header"

spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`PipelinesAreaChart matches the snapshot 1`] = `
 <div
-  class="prepend-top-default"
+  class="gl-mt-3"
 >
   <p>
     Some title