Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix accordion "jump" #32251

Closed
wants to merge 8 commits into from
Closed

Fix accordion "jump" #32251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0129fd4
Add border to transitioned properties of accordion-button
patrickhlauke Nov 24, 2020
1583a91
Merge branch 'main' into patrickhlauke-fix-accordion-jump
patrickhlauke Nov 25, 2020
d440ad5
Make bottom border transparent instead of width 0
patrickhlauke Nov 25, 2020
4c14aa2
Merge branch 'patrickhlauke-fix-accordion-jump' of https://github.com…
patrickhlauke Nov 25, 2020
fe27c89
Merge branch 'main' into patrickhlauke-fix-accordion-jump
patrickhlauke Feb 9, 2021
b646caf
Merge branch 'main' into patrickhlauke-fix-accordion-jump
XhmikosR Feb 11, 2021
50df986
Merge branch 'main' into patrickhlauke-fix-accordion-jump
patrickhlauke Feb 11, 2021
4c82fa3
Merge branch 'main' into patrickhlauke-fix-accordion-jump
XhmikosR Feb 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions scss/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,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;
Expand Down Expand Up @@ -81,6 +77,14 @@
@include border-bottom-radius($accordion-border-radius);
}
}

&:not(:last-of-type) {
.accordion-button {
&.collapsed {
border-bottom-color: transparent;
}
}
}
}

.accordion-collapse {
Expand Down
2 changes: 1 addition & 1 deletion scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1113,7 +1113,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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think border transition here should be dropped or tweaked since border-color is already in transitioned in $btn-transition with .15s.

That may be causing the jump.

I tried a fw things without seeing anything so I'm not quite sure about this, but maybe using $btn-transition overlaps with this custom border transition.

Copy link
Member Author

@patrickhlauke patrickhlauke Nov 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well adding this was needed initially to fix the issue when the border was not transparent and going from a width of 1 to a width of 0. the issue may have been the fact that it's transitioning at .15s, but the height was transitioning at .35s, leading to one perceptible jump

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

now that it's just a colour change that particular part is likely not causing a jump, but there's some fundamental other jump going on somewhere for the accordion as a whole now (i.e. it's not the panel content itself that's jumping visibly anymore, but everything else is...)

$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
$accordion-button-active-color: shade-color($primary, 10%) !default;

Expand Down