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,7 +433,13 @@
 }
 
 // All disabled buttons, regardless of color, type, etc
-%disabled {
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn,
+.dropdown-toggle[disabled],
+[disabled].dropdown-menu-toggle {
+  &,
+  &:hover {
     background-color: $gray-light;
     border-color: $gray-100;
     color: $gl-text-color-disabled;
@@ -448,17 +454,6 @@
     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;
   }
 
   &.btn-link {