Merge branch 'psi-dont-extend' into 'master'

Start removing extends from SCSS

See merge request gitlab-org/gitlab!55447

app/assets/stylesheets/bootstrap_migration.scss

@@ -192,7 +192,15 @@ table {
 }
 
 .divider {
-  @extend .dropdown-divider;
+  // copied rules from node_modules/bootstrap/scss/_dropdown.scss:116
+  // this might be safe to just remove instead
+  // most places that use divider add overrides to undo these things
+  // there is also a probably-unintentional use in deprecated_dropdown_divider.scss
+  // so we would end up with .gl-dropdown .dropdown-divider
+  height: 0;
+  margin: 4px 0;
+  overflow: hidden;
+  border-top: 1px solid $border-color;
 }
 
 .info-well {
@@ -225,12 +233,9 @@ table {
 }
 
 .card {
-  &.card-without-border {
-    @extend .border-0;
-  }
-
+  &.card-without-border,
   &.bg-light {
-    @extend .border-0;
+    border: 0 !important;
   }
 }
 

app/assets/stylesheets/components/avatar.scss

@@ -70,7 +70,8 @@ $avatar-sizes: (
 $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal,
   $identicon-orange, $identicon-gray;
 
-%avatar-circle {
+.avatar,
+.avatar-container {
   float: left;
   margin-right: $gl-padding;
   border-radius: $avatar-radius;
@@ -84,7 +85,6 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
 }
 
 .avatar {
-  @extend %avatar-circle;
   transition-property: none;
 
   width: 40px;
@@ -151,7 +151,6 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
 }
 
 .avatar-container {
-  @extend %avatar-circle;
   overflow: hidden;
   display: flex;
 

app/assets/stylesheets/framework/buttons.scss

@@ -433,32 +433,27 @@
 }
 
 // All disabled buttons, regardless of color, type, etc
-%disabled {
-  background-color: $gray-light;
-  border-color: $gray-100;
-  color: $gl-text-color-disabled;
-  opacity: 1;
-  text-decoration: none;
-  cursor: default;
-
-  &.cursor-not-allowed {
-    cursor: not-allowed;
-  }
-
-  i {
-    color: $gl-text-color-disabled;
-  }
-}
-
 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn,
 .dropdown-toggle[disabled],
 [disabled].dropdown-menu-toggle {
-  @extend %disabled;
-
+  &,
   &:hover {
-    @extend %disabled;
+    background-color: $gray-light;
+    border-color: $gray-100;
+    color: $gl-text-color-disabled;
+    opacity: 1;
+    text-decoration: none;
+    cursor: default;
+
+    &.cursor-not-allowed {
+      cursor: not-allowed;
+    }
+
+    i {
+      color: $gl-text-color-disabled;
+    }
   }
 
   &.btn-link {