Remove append-bottom-default CSS class

This removes the append-bottom-default CSS
class and replaces it for the gl-mb-3 utility
class from GitLab-UI

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

@@ -164,7 +164,7 @@ export default {
 <template>
   <form
     :class="{ 'was-validated': wasValidated }"
-    class="prepend-top-default append-bottom-default needs-validation"
+    class="prepend-top-default 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 append-bottom-default" />
+        <gl-loading-icon v-else size="lg" class="prepend-top-default gl-mb-3" />
       </div>
       <div class="dropdown-footer">
         <publish-button

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

@@ -62,9 +62,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="js-notebook-viewer-mounted container-fluid md prepend-top-default append-bottom-default"
-  >
+  <div class="js-notebook-viewer-mounted container-fluid md prepend-top-default 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 append-bottom-default">
+  <div class="js-pdf-viewer container-fluid md prepend-top-default 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 append-bottom-default text-center';
+    errorMsg.className = 'prepend-top-default 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/deploy_keys/components/app.vue

@@ -115,7 +115,7 @@ export default {
 </script>
 
 <template>
-  <div class="append-bottom-default deploy-keys">
+  <div class="gl-mb-3 deploy-keys">
     <gl-loading-icon
       v-if="isLoading && !hasKeys"
       :label="s__('DeployKeys|Loading deploy keys')"

app/assets/javascripts/issuable_suggestions/components/app.vue

@@ -84,7 +84,7 @@ export default {
           v-for="(suggestion, index) in issues"
           :key="suggestion.id"
           :class="{
-            'append-bottom-default': index !== issues.length - 1,
+            'gl-mb-3': index !== issues.length - 1,
           }"
         >
           <suggestion :suggestion="suggestion" />

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

@@ -63,7 +63,7 @@ export default {
 </script>
 
 <template>
-  <div class="prepend-top-default append-bottom-default clearfix">
+  <div class="prepend-top-default 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 append-bottom-default js-environment-container">
+  <div class="prepend-top-default 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/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 append-bottom-default" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default gl-mb-3" />
 
     <gl-modal
       :modal-id="$options.DELETE_MODAL_ID"

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

@@ -38,7 +38,7 @@ export default {
       </div>
     </div>
 
-    <div v-if="hasSuites" class="test-reports-table append-bottom-default js-test-cases-table">
+    <div v-if="hasSuites" class="test-reports-table gl-mb-3 js-test-cases-table">
       <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold fgray">
         <div role="rowheader" class="table-section section-20">
           {{ __('Class') }}

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

@@ -46,7 +46,7 @@ export default {
       </div>
     </div>
 
-    <div v-if="hasSuites" class="test-reports-table append-bottom-default js-test-suites-table">
+    <div v-if="hasSuites" class="test-reports-table gl-mb-3 js-test-suites-table">
       <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold">
         <div role="rowheader" class="table-section section-25 pl-3">
           {{ __('Suite') }}

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

@@ -71,7 +71,7 @@ export default {
 <template>
   <section id="serverless-function-details">
     <h3 class="serverless-function-name">{{ name }}</h3>
-    <div class="append-bottom-default serverless-function-description">
+    <div class="gl-mb-3 serverless-function-description">
       <div v-for="(line, index) in description.split('\n')" :key="index">{{ line }}</div>
     </div>
     <url :uri="funcUrl" />

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

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

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

@@ -77,7 +77,7 @@ export default {
 };
 </script>
 <template>
-  <div class="d-flex mr-source-target append-bottom-default">
+  <div class="d-flex mr-source-target gl-mb-3">
     <mr-widget-icon name="git-merge" />
     <div class="git-merge-container d-flex">
       <div class="normal">

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

@@ -34,7 +34,7 @@ export default {
 };
 </script>
 <template>
-  <div :id="$options.popoverContainer" class="d-flex mr-pipeline-suggest append-bottom-default">
+  <div :id="$options.popoverContainer" class="d-flex mr-pipeline-suggest gl-mb-3">
     <mr-widget-icon :name="$options.iconName" />
     <div :id="$options.popoverTarget">
       <gl-sprintf

app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue

@@ -29,7 +29,7 @@ export default {
       <textarea
         :id="inputId"
         :value="value"
-        class="form-control js-gfm-input append-bottom-default commit-message-edit"
+        class="form-control js-gfm-input gl-mb-3 commit-message-edit"
         dir="auto"
         required="required"
         rows="7"

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

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

app/assets/stylesheets/framework/common.scss

@@ -421,7 +421,6 @@ img.emoji {
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }
 .append-bottom-20 { margin-bottom: 20px; }
-.append-bottom-default { margin-bottom: $gl-padding; }
 .prepend-bottom-32 { margin-bottom: 32px; }
 .ml-10 { margin-left: 4.5rem; }
 .inline { display: inline-block; }

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

@@ -100,7 +100,7 @@
           .hint
             = parsed_with_gfm
 
-      .prepend-top-default.append-bottom-default
+      .prepend-top-default.gl-mb-3
         = f.submit 'Update appearance settings', class: 'btn btn-success'
         - if @appearance.persisted? || @appearance.updated_at
           .mt-4

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

 - page_title _("Groups")
 
 .top-area
-  .prepend-top-default.append-bottom-default
+  .prepend-top-default.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.append-bottom-default
+.row.prepend-top-default.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       Recent Deliveries

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

@@ -5,7 +5,7 @@
   .col-lg-3
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
-  .col-lg-9.append-bottom-default
+  .col-lg-9.gl-mb-3
     = form_for @hook, as: :hook, url: admin_hook_path do |f|
       = render partial: 'form', locals: { form: f, hook: @hook }
       .form-actions

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

@@ -4,7 +4,7 @@
   .col-lg-4
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
-  .col-lg-8.append-bottom-default
+  .col-lg-8.gl-mb-3
     = form_for @hook, as: :hook, url: admin_hooks_path do |f|
       = render partial: 'form', locals: { form: f, hook: @hook }
       = f.submit _('Add system hook'), class: 'btn btn-success'

app/views/admin/users/_head.html.haml

@@ -28,4 +28,4 @@
     = link_to "Identities", admin_user_identities_path(@user)
   = nav_link(controller: :impersonation_tokens) do
     = link_to "Impersonation Tokens", admin_user_impersonation_tokens_path(@user)
-.append-bottom-default
+.gl-mb-3

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.append-bottom-default{ role: 'alert', data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }
+.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 } }
   %button.close.js-close{ type: "button" }  ×
   .gcp-signup-offer--content
     .gcp-signup-offer--icon.gl-mr-3

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

@@ -49,7 +49,7 @@
         - else
           .settings-message.text-center
             = _("You don't have any applications")
-    .oauth-authorized-applications.prepend-top-20.append-bottom-default
+    .oauth-authorized-applications.prepend-top-20.gl-mb-3
       - if user_oauth_applications?
         %h5
           = _("Authorized applications (%{size})") % { size: @authorized_apps.size + @authorized_anonymous_tokens.size }

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

@@ -5,7 +5,7 @@
 
 %p= s_('Check the %{docs_link_start}documentation%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }
 
-.form-group.append-bottom-default
+.form-group.gl-mb-3
   .form-check
     = f.check_box :lfs_enabled, checked: @group.lfs_enabled?, class: 'form-check-input', data: { qa_selector: 'lfs_checkbox' }
     = f.label :lfs_enabled, class: 'form-check-label' do

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

@@ -7,7 +7,7 @@
     .form-group
       = render 'shared/allow_request_access', form: f
 
-    .form-group.append-bottom-default
+    .form-group.gl-mb-3
       .form-check
         = f.check_box :share_with_group_lock, disabled: !can_change_share_with_group_lock?(@group), class: 'form-check-input'
         = f.label :share_with_group_lock, class: 'form-check-label' do
@@ -16,14 +16,14 @@
             = s_('GroupSettings|Prevent sharing a project within %{group} with other groups').html_safe % { group: group_link }
           %span.js-descr.text-muted= share_with_group_lock_help_text(@group)
 
-    .form-group.append-bottom-default
+    .form-group.gl-mb-3
       .form-check
         = f.check_box :emails_disabled, checked: @group.emails_disabled?, disabled: !can_disable_group_emails?(@group), class: 'form-check-input'
         = f.label :emails_disabled, class: 'form-check-label' do
           %span.d-block= s_('GroupSettings|Disable email notifications')
           %span.text-muted= s_('GroupSettings|This setting will override user notification preferences for all members of the group, subgroups, and projects.')
 
-    .form-group.append-bottom-default
+    .form-group.gl-mb-3
       .form-check
         = f.check_box :mentions_disabled, checked: @group.mentions_disabled?, class: 'form-check-input'
         = f.label :mentions_disabled, class: 'form-check-label' do

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

@@ -72,4 +72,4 @@
       - else
         %p
           = s_("Profiles|You don't have access to delete this user.")
-.append-bottom-default
+.gl-mb-3

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

@@ -8,7 +8,7 @@
     %p
       = _('This is a list of devices that have logged into your account. Revoke any sessions that you do not recognize.')
   .col-lg-8
-    .append-bottom-default
+    .gl-mb-3
 
       .card.border-0
         %ul.list-group.list-group-flush

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

@@ -19,7 +19,7 @@
     %hr
     %h4.gl-mt-0
       = _('Linked emails (%{email_count})') % { email_count: @emails.load.size + 1 }
-    .account-well.append-bottom-default
+    .account-well.gl-mb-3
       %ul
         %li
           = _('Your Primary Email will be used for avatar detection.')

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

@@ -17,5 +17,5 @@
     %hr
     %h5
       = _('Your GPG keys (%{count})') % { count:@gpg_keys.count}
-    .append-bottom-default
+    .gl-mb-3
       = render 'key_table'

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

@@ -20,5 +20,5 @@
     %hr
     %h5
       = _('Your SSH keys (%{count})') % { count:@keys.count }
-    .append-bottom-default
+    .gl-mb-3
       = render 'key_table'

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

@@ -47,7 +47,7 @@
         = _('Projects (%{count})') % { count: @project_notifications.size }
       %p.account-well
         = _('To specify the notification level per project of a group you belong to, you need to visit project page and change notification level there.')
-      .append-bottom-default
+      .gl-mb-3
         %ul.bordered-list
           - @project_notifications.each do |setting|
             = render 'project_settings', setting: setting, project: setting.source

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

@@ -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.append-bottom-default
+      .prepend-top-default.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/show.html.haml

@@ -24,7 +24,7 @@
           .md
             = brand_profile_image_guidelines
     .col-lg-8
-      .clearfix.avatar-image.append-bottom-default
+      .clearfix.avatar-image.gl-mb-3
         = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
           = image_tag avatar_icon_for_user(@user, 160), alt: '', class: 'avatar s160'
       %h5.gl-mt-0= s_("Profiles|Upload new avatar")
@@ -117,7 +117,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.append-bottom-default
+      .prepend-top-default.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/projects/_files.html.haml

@@ -15,7 +15,7 @@
     = render 'shared/commit_well', commit: commit, ref: ref, project: project
 
   - if is_project_overview
-    .project-buttons.append-bottom-default{ class: ("js-show-on-project-root" if vue_file_list_enabled?) }
+    .project-buttons.gl-mb-3{ class: ("js-show-on-project-root" if vue_file_list_enabled?) }
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout)
 
   - if vue_file_list_enabled?

app/views/projects/_wiki.html.haml

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

app/views/projects/blob/_editor.html.haml

@@ -2,7 +2,7 @@
 - file_name = params[:id].split("/").last ||= ""
 - is_markdown = Gitlab::MarkupHelper.gitlab_markdown?(file_name)
 
-.file-holder-bottom-radius.file-holder.file.append-bottom-default
+.file-holder-bottom-radius.file-holder.file.gl-mb-3
   .js-file-title.file-title.align-items-center.clearfix{ data: { current_action: action } }
     .editor-ref.block-truncated
       = sprite_icon('fork', size: 12)

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

-.text-center.prepend-top-default.append-bottom-default
+.text-center.prepend-top-default.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.append-bottom-default.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
+  .js-loading-icon.text-center.prepend-top-default.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 append-bottom-default', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
-  .text-center.prepend-top-default.append-bottom-default.stl-controls
+    = 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
     .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.append-bottom-default
+.row.prepend-top-default.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       = _("Environments")

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

@@ -2,7 +2,7 @@
 - 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.append-bottom-default.forked
+  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.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")
@@ -12,7 +12,7 @@
       %h5.prepend-top-default
         = namespace.human_name
 - else
-  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.append-bottom-default{ class: ("disabled" unless can_create_project) }
+  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.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),

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

-.row.gl-mt-7.append-bottom-default
+.row.gl-mt-7.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       Recent Deliveries

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.append-bottom-default
+.row.prepend-top-default.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
       Request details

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

@@ -6,7 +6,7 @@
   .col-lg-3
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
-  .col-lg-9.append-bottom-default
+  .col-lg-9.gl-mb-3
     = form_for [@project.namespace.becomes(Namespace), @project, @hook], as: :hook, url: project_hook_path(@project, @hook) do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
 

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

@@ -6,7 +6,7 @@
   .col-lg-4
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
-  .col-lg-8.append-bottom-default
+  .col-lg-8.gl-mb-3
     = form_for @hook, as: :hook, url: polymorphic_path([@project.namespace.becomes(Namespace), @project, :hooks]) do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
       = f.submit 'Add webhook', class: 'btn btn-success'

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

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

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

 - page_title @protected_ref.name, "Protected Branches"
 
-.row.prepend-top-default.append-bottom-default
+.row.prepend-top-default.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.append-bottom-default
+.row.prepend-top-default.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.append-bottom-default
+.row.prepend-top-default.gl-mb-3
   .col-lg-4
     %h4.gl-mt-0
       = @service.title

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

 - if @project
   = render 'projects/services/prometheus/configuration_banner', project: @project, service: @service
 
-%h4.append-bottom-default
+%h4.gl-mb-3
   = s_('PrometheusService|Manual configuration')
 %p
   = s_('PrometheusService|Select the Active checkbox to override the Auto Configuration with custom settings. If unchecked, Auto Configuration settings are used.')

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

@@ -3,7 +3,7 @@
     %h4.gl-mt-0
       = s_('PrometheusService|Metrics')
 
-.row.append-bottom-default.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring
+.row.gl-mb-3.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring
   = render 'projects/services/prometheus/metrics', project: @project
 
 = render 'projects/services/prometheus/external_alerts', project: @project

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

@@ -11,7 +11,7 @@
     - if @project
       = render 'projects/settings/operations/configuration_banner', project: @project, service: service
 
-    %b.append-bottom-default
+    %b.gl-mb-3
       = s_('PrometheusService|Manual configuration')
     %p
       = s_('PrometheusService|Select the Active checkbox to override the Auto Configuration with custom settings. If unchecked, Auto Configuration settings are used.')

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

@@ -59,7 +59,7 @@
     %pre.wrap
       = strip_signature(@tag.message)
 
-.append-bottom-default.prepend-top-default
+.gl-mb-3.prepend-top-default
   - if @release.description.present?
     .description.md
       = markdown_field(@release, :description)

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

-.row.prepend-top-default.append-bottom-default.triggers-container
+.row.prepend-top-default.gl-mb-3.triggers-container
   .col-lg-12
     .card
       .card-header
@@ -21,7 +21,7 @@
                 %th
               = render partial: 'projects/triggers/trigger', collection: @triggers, as: :trigger
         - else
-          %p.settings-message.text-center.append-bottom-default
+          %p.settings-message.text-center.gl-mb-3
             No triggers have been created yet. Add one using the form above.
 
       .card-footer

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

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

app/views/shared/_commit_well.html.haml

-.info-well.d-none.d-sm-block.project-last-commit.append-bottom-default
+.info-well.d-none.d-sm-block.project-last-commit.gl-mb-3
   .well-segment
     %ul.blob-commit-info
       = render 'projects/commits/commit', commit: commit, ref: ref, project: project

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

@@ -9,7 +9,7 @@
       = link_to _('For more information, see the File Hooks documentation.'), help_page_path('administration/file_hooks')
 
 
-  .col-lg-8.append-bottom-default
+  .col-lg-8.gl-mb-3
     - if file_hooks.any?
       .card
         .card-header

app/views/shared/issuable/form/_merge_params.html.haml

@@ -9,7 +9,7 @@
       = _('Merge options')
   .col-sm-10
     - if issuable.can_remove_source_branch?(current_user)
-      .form-check.append-bottom-default
+      .form-check.gl-mb-3
         = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
         = check_box_tag 'merge_request[force_remove_source_branch]', '1', issuable.force_remove_source_branch?, class: 'form-check-input'
         = label_tag 'merge_request[force_remove_source_branch]', class: 'form-check-label' do

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.append-bottom-default
+    %p.text-center.prepend-top-default.gl-mb-3
       = _('No webhooks found, add one in the form above.')

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

 %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
   .sidebar-container
-    .block.wiki-sidebar-header.append-bottom-default.w-100
+    .block.wiki-sidebar-header.gl-mb-3.w-100
       %a.gutter-toggle.float-right.d-block.d-sm-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" }
         = icon('angle-double-right')
 

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.append-bottom-default
+.prepend-top-default.gl-mb-3
   .md{ data: { qa_selector: 'wiki_page_content' } }
     = render_wiki_content(@page)
 

app/views/users/_overview.html.haml

 .row
   .col-12
-    .calendar-block.prepend-top-default.append-bottom-default
+    .calendar-block.prepend-top-default.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/packages/details/components/installation_tabs.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <template>
-  <div class="append-bottom-default">
+  <div class="gl-mb-3">
     <gl-tabs @input="trackInstallationTabChange">
       <gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
         <div class="prepend-left-default append-right-default">

ee/app/assets/javascripts/subscriptions/new/components/checkout/step_header.vue

@@ -26,6 +26,6 @@ export default {
       :aria-label="title"
       name="check-circle"
     />
-    <h5 class="gl-mt-0 append-bottom-default">{{ title }}</h5>
+    <h5 class="gl-mt-0 gl-mb-3">{{ title }}</h5>
   </div>
 </template>

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 append-bottom-default"></div>
+      <div class="border-bottom prepend-top-default 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 append-bottom-default"></div>
+    <div class="border-bottom prepend-top-default 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_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 append-bottom-default">
+        <div v-if="formIsOpen" class="prepend-top-default gl-mb-3">
           <add-license-form
             :managed-licenses="managedLicenses"
             :loading="isAddingNewLicense"

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

@@ -5,7 +5,7 @@
   .col-lg-3
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
-  .col-lg-9.append-bottom-default
+  .col-lg-9.gl-mb-3
     = form_for [@group, @hook], as: :hook, url: group_hook_path(@group, @hook) do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
 

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

@@ -5,7 +5,7 @@
     .col-lg-3
       = render 'shared/web_hooks/title_and_docs', hook: @hook
 
-    .col-lg-9.append-bottom-default
+    .col-lg-9.gl-mb-3
       = form_for @hook, as: :hook, url: polymorphic_path([@group, :hooks]) do |f|
         = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
         = f.submit _('Add webhook'), class: 'btn btn-success'

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.append-bottom-default.package-sort-dropdown
+    .dropdown.inline.prepend-top-default.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/show.html.haml

 - page_title s_('GroupSAML|SAML Single Sign On Settings')
 %section.row.prepend-top-default
-  .col-lg-3.append-bottom-default
+  .col-lg-3.gl-mb-3
     %h4.page-title
       = s_("GroupSAML|SAML Single Sign On")
     %p
@@ -11,7 +11,7 @@
   .col-lg-9
     = render 'info'
 %section.row.border-top.mt-4
-  .col-lg-3.append-bottom-default
+  .col-lg-3.gl-mb-3
     %h4.page-title
       = s_('GroupSAML|Configuration')
   .col-lg-9
@@ -19,19 +19,19 @@
 - if @saml_response_check
   #response.pt-3
     %section.row.border-top.mt-4
-      .col-lg-3.append-bottom-default
+      .col-lg-3.gl-mb-3
         %h4.page-title
           = s_('GroupSAML|SAML Response Output')
       .col-lg-9
         = render 'response_debug'
 %section.row.border-top.mt-4
-  .col-lg-3.append-bottom-default
+  .col-lg-3.gl-mb-3
     %h4.page-title
       = s_('GroupSAML|SCIM Token')
   .col-lg-9
     = render 'scim_token'
 %section.row.border-top.mt-4
-  .col-lg-3.append-bottom-default
+  .col-lg-3.gl-mb-3
     %h4.page-title
       = s_('GroupSAML|Members')
   .col-lg-9

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.append-bottom-default.package-sort-dropdown
+    .dropdown.inline.prepend-top-default.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.append-bottom-default
+.row.prepend-top-default.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.append-bottom-default
+.row.prepend-top-default.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,7 +8,7 @@
           = f.text_field :upstream_project_path, class: "form-control"
         = f.submit _('Subscribe'), class: "btn btn-success float-right"
 
-.row.prepend-top-default.append-bottom-default
+.row.prepend-top-default.gl-mb-3
   .col-lg-12
     %h5
       = _("Subscriptions")

ee/app/views/shared/_mirror_update_button.html.haml

 - if @project.mirror? && can?(current_user, :push_code, @project)
-  .append-bottom-default
+  .gl-mb-3
     - if @project.import_state.mirror_update_due?
       %span.btn.disabled
         = icon("refresh spin")

spec/features/admin/admin_users_spec.rb

@@ -512,14 +512,14 @@ RSpec.describe "Admin::Users" do
     end
 
     it "lists group projects" do
-      within(:css, '.append-bottom-default + .card') do
+      within(:css, '.gl-mb-3 + .card') do
         expect(page).to have_content 'Group projects'
         expect(page).to have_link group.name, href: admin_group_path(group)
       end
     end
 
     it 'allows navigation to the group details' do
-      within(:css, '.append-bottom-default + .card') do
+      within(:css, '.gl-mb-3 + .card') do
         click_link group.name
       end
       within(:css, 'h3.page-title') do
@@ -529,7 +529,7 @@ RSpec.describe "Admin::Users" do
     end
 
     it 'shows the group access level' do
-      within(:css, '.append-bottom-default + .card') do
+      within(:css, '.gl-mb-3 + .card') do
         expect(page).to have_content 'Developer'
       end
     end

spec/features/triggers_spec.rb

@@ -85,7 +85,7 @@ RSpec.describe 'Triggers', :js do
       end
 
       expect(page.find('.flash-notice')).to have_content 'Trigger removed'
-      expect(page).to have_selector('p.settings-message.text-center.append-bottom-default')
+      expect(page).to have_selector('p.settings-message.text-center.gl-mb-3')
     end
   end
 

spec/frontend/issuable_suggestions/components/app_spec.js

@@ -89,7 +89,7 @@ describe('Issuable suggestions app component', () => {
           wrapper
             .findAll('li')
             .at(0)
-            .is('.append-bottom-default'),
+            .is('.gl-mb-3'),
         ).toBe(true);
       });
     });
@@ -102,7 +102,7 @@ describe('Issuable suggestions app component', () => {
           wrapper
             .findAll('li')
             .at(1)
-            .is('.append-bottom-default'),
+            .is('.gl-mb-3'),
         ).toBe(false);
       });
     });