Merge branch 'mw-cleanup-fa-spinner-styles' into 'master'

Remove deprecated fa-spinner styles

See merge request gitlab-org/gitlab!48590

app/assets/stylesheets/fontawesome_custom.scss

@@ -51,35 +51,6 @@
   text-align: center;
 }
 
-.fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-  animation: fa-spin 2s infinite linear;
-}
-
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-
-@keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-
 .fa-inverse {
   color: $white;
 }
@@ -97,10 +68,6 @@
   content: '\f071';
 }
 
-.fa-spinner::before {
-  content: '\f110';
-}
-
 .fa-caret-right::before {
   content: '\f0da';
 }

app/assets/stylesheets/framework/dropdowns.scss

@@ -143,15 +143,9 @@
 
   .fa {
     position: absolute;
-
-    &.fa-spinner {
-      font-size: 16px;
-      margin-top: -3px;
-    }
   }
 
-  .fa-chevron-down,
-  .fa-spinner {
+  .fa-chevron-down {
     position: absolute;
     top: 11px;
     right: 8px;

app/assets/stylesheets/framework/toggle.scss

@@ -4,22 +4,22 @@
 * @usage
 *  ### Active and Inactive text should be provided as data attributes:
 *  <button type="button" class="project-feature-toggle" data-enabled-text="Enabled" data-disabled-text="Disabled">
-*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+*  <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
 *  </button>
 
 *  ### Checked should have `is-checked` class
 *  <button type="button" class="project-feature-toggle is-checked" data-enabled-text="Enabled" data-disabled-text="Disabled">
-*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+*  <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
 *  </button>
 
 *  ### Disabled should have `is-disabled` class
 *  <button type="button" class="project-feature-toggle is-disabled" data-enabled-text="Enabled" data-disabled-text="Disabled" disabled="true">
-*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+*  <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
 *  </button>
 
 *  ### Loading should have `is-loading` and an icon with `loading-icon` class
 *  <button type="button" class="project-feature-toggle is-loading" data-enabled-text="Enabled" data-disabled-text="Disabled">
-*  <i class="fa fa-spinner fa-spin loading-icon"></i>
+*  <span class="gl-spinner loading-icon" aria-label="Loading"></span>
 *  </button>
 */
 .project-feature-toggle {

app/assets/stylesheets/page_bundles/merge_conflicts.scss

@@ -255,10 +255,6 @@ $colors: (
     }
   }
 
-  .btn-success .fa-spinner {
-    color: var(--white, $white);
-  }
-
   .editor-wrap {
     &.is-loading {
       .editor {

app/assets/stylesheets/pages/commits.scss

@@ -174,12 +174,6 @@
 }
 
 .commit-actions {
-  @include media-breakpoint-up(sm) {
-    .fa-spinner {
-      font-size: 12px;
-    }
-  }
-
   .ci-status-icon svg {
     vertical-align: text-bottom;
   }

app/assets/stylesheets/pages/notes.scss

@@ -190,8 +190,7 @@ $note-form-margin-left: 72px;
         border: 1px solid darken($gray-100, 25%);
       }
 
-      .note-headline-light,
-      .fa-spinner {
+      .note-headline-light {
         margin-left: 3px;
       }
     }
@@ -249,16 +248,6 @@ $note-form-margin-left: 72px;
     .note-emoji-button {
       position: relative;
       line-height: 1;
-
-      .fa-spinner {
-        display: none;
-      }
-
-      &.is-loading {
-        .fa-spinner {
-          display: inline-block;
-        }
-      }
     }
   }