Merge branch 'jivanvl-replace-prepend-top-10' into 'master'

Replace prepend-top-10 css class

See merge request gitlab-org/gitlab!37505

app/assets/javascripts/boards/components/board_new_issue.vue

@@ -119,7 +119,7 @@ export default {
           autocomplete="off"
         />
         <project-select v-if="groupId" :group-id="groupId" :list="list" />
-        <div class="clearfix prepend-top-10">
+        <div class="clearfix gl-mt-3">
           <gl-button
             ref="submit-button"
             :disabled="disabled"

app/assets/javascripts/boards/components/modal/tabs.vue

@@ -19,7 +19,7 @@ export default {
 };
 </script>
 <template>
-  <div class="top-area prepend-top-10 gl-mb-3">
+  <div class="top-area gl-mt-3 gl-mb-3">
     <ul class="nav-links issues-state-filters">
       <li :class="{ active: activeTab == 'all' }">
         <a href="#" role="button" @click.prevent="changeTab('all')">

app/assets/javascripts/boards/components/project_select.vue

@@ -97,7 +97,7 @@ export default {
 
 <template>
   <div>
-    <label class="label-bold prepend-top-10">{{ __('Project') }}</label>
+    <label class="label-bold gl-mt-3">{{ __('Project') }}</label>
     <div ref="projectsDropdown" class="dropdown dropdown-projects">
       <button
         class="dropdown-menu-toggle wide"

app/assets/javascripts/clusters/components/application_row.vue

@@ -335,7 +335,7 @@ export default {
         <div>
           <slot name="description"></slot>
         </div>
-        <div v-if="hasError" class="cluster-application-error text-danger prepend-top-10">
+        <div v-if="hasError" class="cluster-application-error text-danger gl-mt-3">
           <p class="js-cluster-application-general-error-message gl-mb-0">
             {{ generalErrorDescription }}
           </p>

app/assets/javascripts/clusters/components/applications.vue

@@ -181,7 +181,7 @@ export default {
       <gl-link :href="helpPath">{{ __('More information') }}</gl-link>
     </p>
 
-    <div class="cluster-application-list prepend-top-10">
+    <div class="cluster-application-list gl-mt-3">
       <application-row
         v-if="!managedAppsLocalTillerEnabled"
         id="helm"

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -208,7 +208,7 @@ export default {
       <div v-if="canRenderPipelineButton" class="nav justify-content-end">
         <gl-button
           variant="success"
-          class="js-run-mr-pipeline prepend-top-10 btn-wide-on-xs"
+          class="js-run-mr-pipeline gl-mt-3 btn-wide-on-xs"
           :disabled="state.isRunningMergeRequestPipeline"
           @click="tryRunPipeline"
         >

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -172,7 +172,7 @@ export default {
       :diff-file="diffFile"
       :show-suggest-popover="showSuggestPopover"
       save-button-title="Comment"
-      class="diff-comment-form prepend-top-10"
+      class="diff-comment-form gl-mt-3"
       @handleFormUpdateAddToReview="addToReview"
       @cancelForm="handleCancelCommentForm"
       @handleFormUpdate="handleSaveNote"

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

@@ -202,7 +202,7 @@ export default {
           />
 
           <div :key="`sub-div-${i}`">
-            <div class="text-center prepend-top-10">
+            <div class="text-center gl-mt-3">
               <a :href="folderUrl(model)" class="btn btn-default">
                 {{ s__('Environments|Show all') }}
               </a>

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

@@ -94,7 +94,7 @@ export default {
       :title="modifiedTooltip"
       data-container="body"
       data-placement="left"
-      class="prepend-top-10 gl-mb-3"
+      class="gl-mt-3 gl-mb-3"
     >
       <icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
     </div>

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

@@ -48,7 +48,7 @@ export default {
         )
       }}</span>
     </p>
-    <div class="btn-group d-flex prepend-top-10" role="group">
+    <div class="btn-group d-flex gl-mt-3" role="group">
       <gl-link
         v-if="artifact.keep_path"
         :href="artifact.keep_path"

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

@@ -182,7 +182,7 @@ export default {
             :markdown-preview-path="markdownPreviewPath"
             :markdown-docs-path="markdownDocsPath"
             :add-spacing-classes="false"
-            class="prepend-top-10 gl-mb-3"
+            class="gl-mt-3 gl-mb-3"
           >
             <template #textarea>
               <textarea

app/assets/javascripts/reports/components/modal.vue

@@ -33,7 +33,7 @@ export default {
         v-for="(field, key, index) in modalData"
         v-if="field.value"
         :key="index"
-        class="row prepend-top-10 gl-mb-3"
+        class="row gl-mt-3 gl-mb-3"
       >
         <strong class="col-sm-3 text-right"> {{ field.text }}: </strong>
 

app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue

@@ -39,7 +39,7 @@ export default {
 <template>
   <div class="file-container">
     <div class="file-content">
-      <p class="prepend-top-10 file-info">
+      <p class="gl-mt-3 file-info">
         {{ fileName }}
         <template v-if="fileSize > 0">
           ({{ fileSizeReadable }})

app/assets/stylesheets/framework/common.scss

@@ -396,7 +396,6 @@ img.emoji {
   🚨 Do not use these classes — they are deprecated and being removed. 🚨
   See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
 **/
-.prepend-top-10 { margin-top: 10px; }
 .prepend-top-15 { margin-top: 15px; }
 .prepend-top-20 { margin-top: 20px; }
 .prepend-left-15 { margin-left: 15px; }

app/views/admin/application_settings/_account_and_limit.html.haml

@@ -52,7 +52,7 @@
         = f.check_box :user_default_external, class: 'form-check-input'
         = f.label :user_default_external, class: 'form-check-label' do
           = _('Newly registered users will by default be external')
-      .prepend-top-10
+      .gl-mt-3
         = _('Internal users')
       = f.text_field :user_default_internal_regex, placeholder: _('Regex pattern'), class: 'form-control gl-mt-2'
       .help-block

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

@@ -112,7 +112,7 @@
           = form_tag admin_group_members_update_path(@group), id: "new_project_member", class: "bulk_import", method: :put do
             %div
               = users_select_tag(:user_ids, multiple: true, email_user: true, skip_ldap: @group.ldap_synced?, scope: :all)
-            .prepend-top-10
+            .gl-mt-3
               = select_tag :access_level, options_for_select(GroupMember.access_level_roles), class: "project-access-select select2"
             %hr
             = button_tag _('Add users to group'), class: "btn btn-success"

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

@@ -7,7 +7,7 @@
     %p
   #{ s_('HealthCheck|Access token is') }
   %code#health-check-token= Gitlab::CurrentSettings.health_check_access_token
-  .prepend-top-10
+  .gl-mt-3
     = button_to _("Reset health check access token"), reset_health_check_token_admin_application_settings_path,
       method: :put, class: 'btn btn-default',
       data: { confirm: _('Are you sure you want to reset the health check token?') }

app/views/ci/runner/_how_to_setup_runner.html.haml

@@ -13,7 +13,7 @@
     = _("Use the following registration token during setup:")
     %code#registration_token= registration_token
     = clipboard_button(target: '#registration_token', title: _("Copy token"), class: "btn-transparent btn-clipboard")
-    .prepend-top-10.gl-mb-3
+    .gl-mt-3.gl-mb-3
       = button_to _("Reset runners registration token"), reset_token_url,
       method: :put, class: 'btn btn-default',
       data: { confirm: _("Are you sure you want to reset registration token?") }

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

 = form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
   = render_if_exists 'shared/pages/max_pages_size_input', form: f
 
-  .prepend-top-10
+  .gl-mt-3
     = f.submit s_('GitLabPages|Save'), class: 'btn btn-success'

app/views/projects/branches/_panel.html.haml

@@ -7,7 +7,7 @@
 
 - return unless branches.any?
 
-.card.prepend-top-10
+.card.gl-mt-3
   .card-header
     = panel_title
   %ul.content-list.all-branches.qa-all-branches

app/views/projects/ci/lints/show.html.haml

@@ -15,9 +15,9 @@
           #ci-editor.ci-editor= @content
         = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
       .col-sm-12
-        .float-left.prepend-top-10
+        .float-left.gl-mt-3
           = submit_tag(_('Validate'), class: 'btn btn-success submit-yml')
-        .float-right.prepend-top-10
+        .float-right.gl-mt-3
           = button_tag(_('Clear'), type: 'button', class: 'btn btn-default clear-yml')
 
   .row.prepend-top-20

app/views/projects/issues/_service_desk_info_content.html.haml

@@ -11,7 +11,7 @@
     .svg-content
       = render svg_path
 
-    %div{ class: is_empty_state ? "text-content" : "prepend-top-10 gl-ml-3" }
+    %div{ class: is_empty_state ? "text-content" : "gl-mt-3 gl-ml-3" }
       - if is_empty_state
         %h4= title_text
       - else
@@ -26,7 +26,7 @@
       = link_to _('Read more'), help_page_path('user/project/service_desk')
 
       - if can_edit_project_settings && !service_desk_enabled
-        %div{ class: is_empty_state ? "text-center" : "prepend-top-10" }
+        %div{ class: is_empty_state ? "text-center" : "gl-mt-3" }
           = link_to _("Turn on Service Desk"), edit_project_path(@project), class: 'btn btn-success'
 - else
   .empty-state

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

@@ -8,7 +8,7 @@
   #promote-label-modal
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
-  .labels-container.prepend-top-10
+  .labels-container.gl-mt-3
     - if can_admin_label && search.blank?
       %p.text-muted
         = _('Labels can be applied to issues and merge requests.')
@@ -18,7 +18,7 @@
     -# Only show it in the first page
     - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
     .prioritized-labels{ class: [('hide' if hide), ('is-not-draggable' unless can_admin_label)] }
-      %h5.prepend-top-10= _('Prioritized Labels')
+      %h5.gl-mt-3= _('Prioritized Labels')
       .content-list.manage-labels-list.js-prioritized-labels{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
         #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty? && search.blank?}" }
           = render 'shared/empty_states/priority_labels'

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

@@ -6,7 +6,7 @@
   %button.btn.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
     .js-spinner.d-none.spinner.mr-1
     = _('Detect host keys')
-  .fingerprint-ssh-info.js-fingerprint-ssh-info.prepend-top-10.gl-mb-3{ class: ('collapse' unless mirror.ssh_mirror_url?) }
+  .fingerprint-ssh-info.js-fingerprint-ssh-info.gl-mt-3.gl-mb-3{ class: ('collapse' unless mirror.ssh_mirror_url?) }
     %label.label-bold
       = _('Fingerprints')
     .fingerprints-list.js-fingerprints-list{ data: { qa_selector: 'fingerprints_list' } }

app/views/projects/pages/_pages_settings.html.haml

@@ -9,5 +9,5 @@
           %strong
             = s_('GitLabPages|Force HTTPS (requires valid certificates)')
 
-    .prepend-top-10
+    .gl-mt-3
       = f.submit s_('GitLabPages|Save'), class: 'btn btn-success'

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

@@ -27,7 +27,7 @@
           = render 'ci/variables/variable_row', form_field: 'schedule', variable: variable, only_key_value: true
         = render 'ci/variables/variable_row', form_field: 'schedule', only_key_value: true
       - if @schedule.variables.size > 0
-        %button.btn.btn-info.btn-inverted.prepend-top-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@schedule.variables.size == 0}" } }
+        %button.btn.btn-info.btn-inverted.gl-mt-3.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@schedule.variables.size == 0}" } }
           - if @schedule.variables.size == 0
             = n_('Hide value', 'Hide values', @schedule.variables.size)
           - else

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

@@ -23,7 +23,7 @@
         .form-text.text-muted
           = s_("Pipeline|Existing branch name or tag")
 
-      .col-sm-12.prepend-top-10.js-ci-variable-list-section
+      .col-sm-12.gl-mt-3.js-ci-variable-list-section
         %label
           = s_('Pipeline|Variables')
         %ul.ci-variable-list

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

@@ -34,7 +34,7 @@
                 - elsif !has_base_domain
                   %p.settings-message.text-center
                     = s_('CICD|You must add a %{base_domain_link_start}base domain%{link_end} to your %{kubernetes_cluster_link_start}Kubernetes cluster%{link_end} in order for your deployment strategy to work.').html_safe % { base_domain_link_start: base_domain_link_start, kubernetes_cluster_link_start: kubernetes_cluster_link_start, link_end: link_end }
-                %label.prepend-top-10
+                %label.gl-mt-3
                   %strong= s_('CICD|Deployment strategy')
                 .form-check
                   = form.radio_button :deploy_strategy, 'continuous', class: 'form-check-input'

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

@@ -22,7 +22,7 @@
                   = link_to filter_starrer_path(sort: value), class: ("is-active" if @sort == value) do
                     = title
 - if @starrers.size > 0
-  .row.prepend-top-10
+  .row.gl-mt-3
     = render partial: 'starrer', collection: @starrers, as: :starrer
   = paginate @starrers, theme: 'gitlab'
 - else

app/views/search/_results.html.haml

@@ -22,7 +22,7 @@
         = _("in group %{link_to_group}").html_safe % { link_to_group: link_to_group }
   = render_if_exists 'shared/promotions/promote_advanced_search'
 
-  .results.prepend-top-10
+  .results.gl-mt-3
     - if @scope == 'commits'
       %ul.content-list.commit-list
         = render partial: "search/results/commit", collection: @search_objects

app/views/shared/_group_form.html.haml

@@ -34,7 +34,7 @@
     %p.validation-pending.gl-field-error-ignore.field-validation.hide= _('Checking group path availability...')
 
     - if @group.persisted?
-      .alert.alert-warning.prepend-top-10
+      .alert.alert-warning.gl-mt-3
         = _('Changing group path can have unintended side effects.')
         = succeed '.' do
           = link_to _('Learn more'), help_page_path('user/group/index', anchor: 'changing-a-groups-path'), target: '_blank'

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

@@ -76,7 +76,7 @@
       = form.submit 'Save changes', class: 'btn btn-success'
 
   - if !issuable.persisted? && !issuable.project.empty_repo? && (guide_url = issuable.project.present.contribution_guide_path)
-    .inline.prepend-top-10
+    .inline.gl-mt-3
       Please review the
       %strong= link_to('contribution guidelines', guide_url)
       for this project.

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

@@ -111,10 +111,7 @@ export default {
       <div v-if="isSignedIn && hasProjects" class="inline">
         <strong>{{ __('Select GitLab project to link with your Slack team') }}</strong>
 
-        <select
-          v-model="selectedProjectId"
-          class="js-project-select form-control prepend-top-10 gl-mb-3"
-        >
+        <select v-model="selectedProjectId" class="js-project-select form-control gl-mt-3 gl-mb-3">
           <option v-for="project in projects" :key="project.id" :value="project.id">
             {{ project.name }}
           </option>

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

@@ -118,7 +118,7 @@ export default {
       v-else-if="isLoading && !hasError"
       :label="s__('SubscriptionTable|Loading subscriptions')"
       size="lg"
-      class="prepend-top-10 gl-mb-3"
+      class="gl-mt-3 gl-mb-3"
     />
   </div>
 </template>

ee/app/assets/javascripts/epic/components/epic_create.vue

@@ -118,7 +118,7 @@ export default {
           :loading="epicCreateInProgress"
           category="primary"
           variant="success"
-          class="prepend-top-10 qa-create-epic-button"
+          class="gl-mt-3 qa-create-epic-button"
           @click.stop="createEpic"
           >{{ buttonLabel }}</gl-button
         >

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue

@@ -267,7 +267,7 @@ export default {
         v-tooltip
         :title="dateFromMilestonesTooltip"
         :class="{ 'is-option-selected': !selectedDateIsFixed }"
-        class="value-type-dynamic text-secondary d-flex prepend-top-10"
+        class="value-type-dynamic text-secondary d-flex gl-mt-3"
         data-placement="bottom"
         data-html="true"
       >

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

@@ -30,7 +30,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="d-flex justify-content-between bold prepend-top-10 gl-mb-3">
+    <div class="d-flex justify-content-between bold gl-mt-3 gl-mb-3">
       <div class="js-selected-plan">
         {{ sprintf($options.i18n.selectedPlanText, { selectedPlanText }) }}
         <span v-if="usersPresent" class="js-number-of-users">{{

ee/app/assets/javascripts/vue_shared/license_compliance/components/set_approval_status_modal.vue

@@ -47,13 +47,13 @@ export default {
     @cancel="resetLicenseInModal"
   >
     <slot v-if="currentLicenseInModal">
-      <div class="row prepend-top-10 gl-mb-3 js-license-name">
+      <div class="row gl-mt-3 gl-mb-3 js-license-name">
         <label class="col-sm-3 text-right font-weight-bold">
           {{ s__('LicenseCompliance|License') }}:
         </label>
         <div class="col-sm-9 text-secondary">{{ currentLicenseInModal.name }}</div>
       </div>
-      <div v-if="currentLicenseInModal.url" class="row prepend-top-10 gl-mb-3 js-license-url">
+      <div v-if="currentLicenseInModal.url" class="row gl-mt-3 gl-mb-3 js-license-url">
         <label class="col-sm-3 text-right font-weight-bold">
           {{ s__('LicenseCompliance|URL') }}:
         </label>
@@ -63,7 +63,7 @@ export default {
           }}</gl-link>
         </div>
       </div>
-      <div class="row prepend-top-10 gl-mb-3 js-license-packages">
+      <div class="row gl-mt-3 gl-mb-3 js-license-packages">
         <label class="col-sm-3 text-right font-weight-bold">
           {{ s__('LicenseCompliance|Packages') }}:
         </label>

ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue

@@ -9,40 +9,25 @@ import { REPORT_TYPES } from 'ee/security_dashboard/store/constants';
 
 export default {
   name: 'VulnerabilityDetails',
-  components: {
-    CodeBlock,
-    GlFriendlyWrap,
-    SeverityBadge,
-    VulnerabilityDetail,
-    GlLink,
-  },
-  props: {
-    vulnerability: {
-      type: Object,
-      required: true,
-    },
-  },
+  components: { CodeBlock, GlFriendlyWrap, SeverityBadge, VulnerabilityDetail, GlLink },
+  props: { vulnerability: { type: Object, required: true } },
   computed: {
     url() {
       return this.vulnerability.request?.url || getFileLocation(this.vulnerability.location);
     },
     file() {
       const file = this.vulnerability?.location?.file;
-
       if (!file) {
         return null;
       }
-
       let lineSuffix = '';
       const { start_line: startLine, end_line: endLine } = this.vulnerability.location;
-
       if (startLine) {
         lineSuffix += `:${startLine}`;
         if (endLine && startLine !== endLine) {
           lineSuffix += `-${endLine}`;
         }
       }
-
       return `${file}${lineSuffix}`;
     },
     identifiers() {
@@ -91,7 +76,6 @@ export default {
       if (!this.scannerVersion) {
         return this.scannerName;
       }
-
       return sprintf(s__('Vulnerability|%{scannerName} (version %{scannerVersion})'), {
         scannerName: this.scannerName,
         scannerVersion: this.scannerVersion,
@@ -114,7 +98,6 @@ export default {
   },
 };
 </script>
-
 <template>
   <div class="border-white mb-0 px-3">
     <vulnerability-detail
@@ -123,35 +106,28 @@ export default {
     >
       <gl-friendly-wrap :text="vulnerability.description" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="vulnerability.project" :label="s__('Vulnerability|Project')">
       <gl-link ref="projectLink" :href="vulnerability.project.full_path" target="_blank">
         <gl-friendly-wrap :text="vulnerability.project.full_name" />
       </gl-link>
     </vulnerability-detail>
-
     <vulnerability-detail v-if="methodName" :label="s__('Vulnerability|Method')">
       <gl-friendly-wrap :text="methodName" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="url" :label="__('URL')">
       <gl-link ref="urlLink" :href="url" target="_blank">
         <gl-friendly-wrap :text="url" />
       </gl-link>
     </vulnerability-detail>
-
     <vulnerability-detail v-if="requestHeaders" :label="__('Request Headers')">
       <code-block ref="requestHeaders" :code="requestHeaders" max-height="225px" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="responseStatusCode" :label="__('Response Status')">
       <gl-friendly-wrap ref="responseStatusCode" :text="responseStatusCode" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="responseHeaders" :label="__('Response Headers')">
       <code-block ref="responseHeaders" :code="responseHeaders" max-height="225px" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="file" :label="s__('Vulnerability|File')">
       <gl-link
         v-if="vulnerability.blob_path"
@@ -163,19 +139,15 @@ export default {
       </gl-link>
       <gl-friendly-wrap v-else :text="file" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="vulnerability.evidence" :label="s__('Vulnerability|Evidence')">
       <gl-friendly-wrap :text="vulnerability.evidence" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="crashAddress" :label="s__('Vulnerability|Crash Address')">
       <gl-friendly-wrap ref="crashAddress" :text="crashAddress" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="stacktraceSnippet" :label="s__('Stacktrace snippet')">
       <code-block ref="stacktraceSnippet" :code="stacktraceSnippet" max-height="225px" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="identifiers" :label="s__('Vulnerability|Identifiers')">
       <span v-for="(identifier, i) in identifiers" :key="i">
         <gl-link
@@ -191,34 +163,27 @@ export default {
         <span v-if="hasMoreValues(i, identifiers)">,&nbsp;</span>
       </span>
     </vulnerability-detail>
-
     <vulnerability-detail v-if="vulnerability.severity" :label="s__('Vulnerability|Severity')">
       <severity-badge :severity="vulnerability.severity" class="d-inline" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="vulnerability.report_type" :label="s__('Vulnerability|Scanner')">
       <gl-friendly-wrap :text="scannerType" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="scannerProvider" :label="s__('Vulnerability|Scanner Provider')">
       <gl-link v-if="scannerUrl" ref="scannerLink" :href="scannerUrl" target="_blank">
         <gl-friendly-wrap :text="scannerProvider" />
       </gl-link>
       <gl-friendly-wrap v-else :text="scannerProvider" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="className" :label="s__('Vulnerability|Class')">
       <gl-friendly-wrap :text="className" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="image" :label="s__('Vulnerability|Image')">
       <gl-friendly-wrap :text="image" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="namespace" :label="s__('Vulnerability|Namespace')">
       <gl-friendly-wrap :text="namespace" />
     </vulnerability-detail>
-
     <vulnerability-detail v-if="links" :label="s__('Vulnerability|Links')">
       <span v-for="(link, i) in links" :key="i">
         <gl-link ref="linksLink" :href="link.url" target="_blank">

ee/app/assets/stylesheets/pages/promotions.scss

 .user-callout.promotion-callout {
   margin: 20px 0 0;
 
-  &.prepend-top-10 {
-    margin-top: 10px;
-  }
-
   &.append-bottom-20 {
     margin-bottom: 20px;
   }

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

@@ -17,7 +17,7 @@
       = s_('License|You do not have a license.')
     - if License.eligible_for_trial?
       %p.trial-description= s_('License|You can start a free trial of GitLab Ultimate without any obligation or payment details.')
-      = link_to 'Start free trial', new_trial_url, target: '_blank', class: "btn btn-success btn-start-trial prepend-top-10"
+      = link_to 'Start free trial', new_trial_url, target: '_blank', class: "btn btn-success btn-start-trial gl-mt-3"
     - else
       %p.trial-description
         = s_('License|Your free trial of GitLab Ultimate expired on %{trial_ends_on}.').html_safe % {trial_ends_on: License.trial_ends_on}

ee/app/views/groups/dependency_proxies/_url.html.haml

@@ -8,5 +8,5 @@
     = clipboard_button(text: "#{proxy_url}", title: _("Copy %{proxy_url}") % { proxy_url: proxy_url })
 
 .row
-  .col-12.help-block.prepend-top-10
+  .col-12.help-block.gl-mt-3
     = _('Contains %{count} blobs of images (%{size})') % { count: @blobs_count, size: number_to_human_size(@blobs_total_size) }

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

-%section.saml-settings.prepend-top-10
+%section.saml-settings.gl-mt-3
   .well-segment
     %p= _("To set up SAML authentication for your group through an identity provider like Azure, Okta, Onelogin, Ping Identity, or your custom SAML 2.0 provider:")
     %ol

ee/spec/frontend/billings/components/__snapshots__/subscription_table_spec.js.snap

@@ -47,7 +47,7 @@ Array [
 exports[`SubscriptionTable component when created matches the snapshot 1`] = `
 <div>
   <gl-loading-icon-stub
-    class="prepend-top-10 gl-mb-3"
+    class="gl-mt-3 gl-mb-3"
     color="orange"
     label="Loading subscriptions"
     size="lg"

ee/spec/frontend/epic/components/sidebar_items/__snapshots__/sidebar_date_picker_spec.js.snap

@@ -75,7 +75,7 @@ exports[`SidebarDatePicker renders expected template 1`] = `
     </div>
      
     <abbr
-      class="value-type-dynamic text-secondary d-flex prepend-top-10"
+      class="value-type-dynamic text-secondary d-flex gl-mt-3"
       data-html="true"
       data-original-title="Select an issue with milestone to set date"
       data-placement="bottom"