From 0129fd4aef709c150585a319f9a1d22eaef5d1d0 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Tue, 24 Nov 2020 23:10:52 +0000
Subject: [PATCH 1/2] 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
---
scss/_variables.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 31c0a1fae2..9a8b95e1c2 100644
--- 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;
--
GitLab
From d440ad5411a45617a2be5712aacd6e234edcde8e Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 25 Nov 2020 11:30:57 +0000
Subject: [PATCH 2/2] Make bottom border transparent instead of width 0
trying out @ffoodd's suggestion
---
scss/_accordion.scss | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index a68aaa70e3..ed78ba011c 100644
--- 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 {
--
GitLab