Merge branch 'jivanvl-remove-append-bottom-default' into 'master'

Remove append-bottom-default CSS class See merge request gitlab-org/gitlab!34872

Merge branch 'jivanvl-remove-append-bottom-default' into 'master'
Remove append-bottom-default CSS class See merge request gitlab-org/gitlab!34872
2b0eb8b5 · Enrique Alcántara · 56d3e472 · 429434f4 · 2b0eb8b5 · 2b0eb8b5
Commit 2b0eb8b5 authored Jun 22, 2020 by Enrique Alcántara
81 changed files
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/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"
  >

--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/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

--- a/app/assets/javascripts/blob/notebook/notebook_viewer.vue
+++ b/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>

--- a/app/assets/javascripts/blob/pdf/pdf_viewer.vue
+++ b/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>

--- a/app/assets/javascripts/blob/sketch/index.js
+++ b/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.

--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/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')"

--- a/app/assets/javascripts/issuable_suggestions/components/app.vue
+++ b/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" />

--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/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"

--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/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>

--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/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"

--- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
@@ -42,7 +42,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') }}

--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
+++ b/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') }}

--- a/app/assets/javascripts/serverless/components/function_details.vue
+++ b/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" />

--- a/app/assets/javascripts/serverless/components/functions.vue
+++ b/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">

--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/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">

--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
+++ b/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

--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
+++ b/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"

--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -231,7 +231,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

--- a/app/assets/stylesheets/framework/common.scss
+++ b/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; }

--- a/app/views/admin/appearances/_form.html.haml
+++ b/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

--- a/app/views/admin/groups/index.html.haml
+++ b/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

--- a/app/views/admin/hook_logs/_index.html.haml
+++ b/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

--- a/app/views/admin/hooks/edit.html.haml
+++ b/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

--- a/app/views/admin/hooks/index.html.haml
+++ b/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'

--- a/app/views/admin/users/_head.html.haml
+++ b/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
--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/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" }  &times;
  .gcp-signup-offer--content
    .gcp-signup-offer--icon.gl-mr-3

--- a/app/views/doorkeeper/applications/index.html.haml
+++ b/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 }

--- a/app/views/groups/settings/_lfs.html.haml
+++ b/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

--- a/app/views/groups/settings/_permissions.html.haml
+++ b/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

--- a/app/views/profiles/accounts/show.html.haml
+++ b/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
--- a/app/views/profiles/active_sessions/index.html.haml
+++ b/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

--- a/app/views/profiles/emails/index.html.haml
+++ b/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.')

--- a/app/views/profiles/gpg_keys/index.html.haml
+++ b/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'
--- a/app/views/profiles/keys/index.html.haml
+++ b/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'
--- a/app/views/profiles/notifications/show.html.haml
+++ b/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
--- a/app/views/profiles/passwords/edit.html.haml
+++ b/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
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -25,7 +25,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")
@@ -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.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'


--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -18,7 +18,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?

--- a/app/views/projects/_wiki.html.haml
+++ b/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)

--- a/app/views/projects/blob/_editor.html.haml
+++ b/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)

--- a/app/views/projects/blob/viewers/_loading.html.haml
+++ b/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')
--- a/app/views/projects/blob/viewers/_sketch.html.haml
+++ b/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');
--- a/app/views/projects/blob/viewers/_stl.html.haml
+++ b/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

--- a/app/views/projects/environments/_form.html.haml
+++ b/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")

--- a/app/views/projects/forks/_fork_button.html.haml
+++ b/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),

--- a/app/views/projects/hook_logs/_index.html.haml
+++ b/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

--- a/app/views/projects/hook_logs/show.html.haml
+++ b/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

--- a/app/views/projects/hooks/edit.html.haml
+++ b/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 }


--- a/app/views/projects/hooks/index.html.haml
+++ b/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'

--- a/app/views/projects/mirrors/_instructions.html.haml
+++ b/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>,

--- a/app/views/projects/protected_branches/show.html.haml
+++ b/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

--- a/app/views/projects/protected_tags/show.html.haml
+++ b/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

--- a/app/views/projects/services/_form.html.haml
+++ b/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

--- a/app/views/projects/services/prometheus/_help.html.haml
+++ b/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.')
--- a/app/views/projects/services/prometheus/_show.html.haml
+++ b/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
--- a/app/views/projects/settings/operations/_prometheus.html.haml
+++ b/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.')
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -59,7 +59,7 @@
    %pre.wrap{ data: { qa_selector: 'tag_message_content' } }
      = strip_signature(@tag.message)

-.append-bottom-default.prepend-top-default
+.gl-mb-3.prepend-top-default
  - if @release.description.present?
    .description.md{ data: { qa_selector: 'tag_release_notes_content' } }
      = markdown_field(@release, :description)

--- a/app/views/projects/triggers/_index.html.haml
+++ b/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

--- a/app/views/projects/triggers/edit.html.haml
+++ b/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

--- a/app/views/shared/_commit_well.html.haml
+++ b/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
--- a/app/views/shared/file_hooks/_index.html.haml
+++ b/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

--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/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

--- a/app/views/shared/web_hooks/_index.html.haml
+++ b/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.')
--- a/app/views/shared/wikis/_sidebar.html.haml
+++ b/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')


--- a/app/views/shared/wikis/show.html.haml
+++ b/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)


--- a/app/views/users/_overview.html.haml
+++ b/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

--- a/ee/app/assets/javascripts/packages/details/components/installation_tabs.vue
+++ b/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">

--- a/ee/app/assets/javascripts/subscriptions/new/components/checkout/step_header.vue
+++ b/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>
--- a/ee/app/assets/javascripts/subscriptions/new/components/order_summary/summary_details.vue
+++ b/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>

--- a/ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue
+++ b/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"

--- a/ee/app/views/groups/hooks/edit.html.haml
+++ b/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 }


--- a/ee/app/views/groups/hooks/index.html.haml
+++ b/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'

--- a/ee/app/views/groups/packages/_legacy_package_list.haml
+++ b/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' }

--- a/ee/app/views/groups/saml_providers/show.html.haml
+++ b/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

--- a/ee/app/views/projects/packages/packages/_legacy_package_list.html.haml
+++ b/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' }

--- a/ee/app/views/projects/settings/slacks/edit.html.haml
+++ b/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

--- a/ee/app/views/projects/settings/subscriptions/_index.html.haml
+++ b/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")

--- a/ee/app/views/shared/_mirror_update_button.html.haml
+++ b/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")

--- a/spec/features/admin/admin_users_spec.rb
+++ b/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

--- a/spec/features/triggers_spec.rb
+++ b/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


--- a/spec/frontend/issuable_suggestions/components/app_spec.js
+++ b/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);
      });
    });