Merge branch 'patrickhlauke-fix-accordion-jump' of https://github.com/twbs/bootstrap into patrickhlauke-fix-accordion-jump

Make bottom border transparent instead of width 0
trying out @ffoodd's suggestion
2020-11-25 12:03:24 +00:00 · 2020-11-25 11:57:24 +00:00 · 2020-11-25 09:25:02 +00:00 · 2020-11-24 23:16:30 +00:00
2 changed files with 9 additions and 5 deletions
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@ -16,10 +16,6 @@
  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;
@ -80,6 +76,14 @@
      @include border-bottom-radius($accordion-border-radius);
    }
  }
+
+  &:not(:last-of-type) {
+    .accordion-button {
+      &.collapsed {
+        border-bottom-color: transparent;
+      }
+    }
+  }
 }

 .accordion-collapse {
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@ -1028,7 +1028,7 @@ $accordion-button-padding-y:              $accordion-padding-y !default;
 $accordion-button-padding-x:              $accordion-padding-x !default;
 $accordion-button-color:                  $accordion-color !default;
 $accordion-button-bg:                     $accordion-bg !default;
-$accordion-transition:                    $btn-transition, border-radius .15s ease !default;
+$accordion-transition:                    $btn-transition, border-radius .15s ease, border .35s ease !default; // border transition matches speed of transition-collapse
 $accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;
 $accordion-button-active-color:           shade-color($primary, 10%) !default;
Author	SHA1	Message	Date
Patrick H. Lauke	4c14aa2d12	Merge branch 'patrickhlauke-fix-accordion-jump' of https://github.com/twbs/bootstrap into patrickhlauke-fix-accordion-jump	2020-11-25 12:03:24 +00:00
Patrick H. Lauke	d440ad5411	Make bottom border transparent instead of width 0 trying out @ffoodd's suggestion	2020-11-25 11:57:24 +00:00
Patrick H. Lauke	1583a91770	Merge branch 'main' into patrickhlauke-fix-accordion-jump	2020-11-25 09:25:02 +00:00
Patrick H. Lauke	0129fd4aef	Add border to transitioned properties of accordion-button open accordion button has a border of 1px, but a closed one suppresses the `border-bottom-width:0`. this caused an odd 1px jump on the accordion panel. now, the border width is transitioned at the same pace as the panel opening/closing transition, so no more perceptible jump	2020-11-24 23:16:30 +00:00