Revamp accordion borders to fix pixel jumping (#33149)

- Pushes the borders to the .accordion-item
- Simplifies the .accordion-flush
- Recreates the .accordion-button border-bottom with an inset box-shadow
- Updates background-color to solid to match other components like list group and prevent stacked translucent borders
- Use negative margin to overlap the consecutive items

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 298a553e01d324099d2570de92596a568793ac0d..294d5229be76c7cdefdcd8630cdaf85da7708d91 100644 (file)
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -12,18 +12,15 @@
   color: $accordion-button-color;
   text-align: left; // Reset button style
   background-color: $accordion-button-bg;
-  border: $accordion-border-width solid $accordion-border-color;
+  border: 0;
   @include border-radius(0);
   overflow-anchor: none;
   @include transition($accordion-transition);
 
-  &.collapsed {
-    border-bottom-width: 0;
-  }
-
   &:not(.collapsed) {
     color: $accordion-button-active-color;
     background-color: $accordion-button-active-bg;
+    box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
 
     &::after {
       background-image: escape-svg($accordion-button-active-icon);
@@ -61,33 +58,35 @@
 }
 
 .accordion-item {
+  margin-bottom: -$accordion-border-width;
+  background-color: $accordion-bg;
+  border: $accordion-border-width solid $accordion-border-color;
+
   &:first-of-type {
+    @include border-top-radius($accordion-border-radius);
+
     .accordion-button {
-      @include border-top-radius($accordion-border-radius);
+      @include border-top-radius($accordion-inner-border-radius);
     }
   }
 
+  // Only set a border-radius on the last item if the accordion is collapsed
   &:last-of-type {
+    margin-bottom: 0;
+    @include border-bottom-radius($accordion-border-radius);
+
     .accordion-button {
-      // Only set a border-radius on the last item if the accordion is collapsed
       &.collapsed {
-        border-bottom-width: $accordion-border-width;
-        @include border-bottom-radius($accordion-border-radius);
+        @include border-bottom-radius($accordion-inner-border-radius);
       }
     }
 
     .accordion-collapse {
-      border-bottom-width: $accordion-border-width;
       @include border-bottom-radius($accordion-border-radius);
     }
   }
 }
 
-.accordion-collapse {
-  border: solid $accordion-border-color;
-  border-width: 0 $accordion-border-width;
-}
-
 .accordion-body {
   padding: $accordion-body-padding-y $accordion-body-padding-x;
 }
@@ -98,29 +97,17 @@
 // Remove borders and border-radius to keep accordion items edge-to-edge.
 
 .accordion-flush {
-  .accordion-button {
-    border-right: 0;
-    border-left: 0;
-    @include border-radius(0);
-  }
-
   .accordion-collapse {
     border-width: 0;
   }
 
   .accordion-item {
-    &:first-of-type {
-      .accordion-button {
-        border-top-width: 0;
-        @include border-top-radius(0);
-      }
-    }
+    @include border-radius(0);
 
-    &:last-of-type {
-      .accordion-button.collapsed {
-        border-bottom-width: 0;
-        @include border-bottom-radius(0);
-      }
+    .accordion-button {
+      border-right: 0;
+      border-left: 0;
+      @include border-radius(0);
     }
   }
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2668a790cb778042c1826d0dc69144b143f83406..7558224f9dce7e768541739e6b8dabbdd6c896d8 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1101,10 +1101,11 @@ $card-group-margin:                 $grid-gutter-width / 2 !default;
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
 $accordion-color:                         $body-color !default;
-$accordion-bg:                            transparent !default;
+$accordion-bg:                            $body-bg !default;
 $accordion-border-width:                  $border-width !default;
 $accordion-border-color:                  rgba($black, .125) !default;
 $accordion-border-radius:                 $border-radius !default;
+$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
 
 $accordion-body-padding-y:                $accordion-padding-y !default;
 $accordion-body-padding-x:                $accordion-padding-x !default;