Skip to content

Commit b3c9091

Browse files
committed
v6: Accordion Animation
Add animation for expanding/collapsing accordions. This is only available in Chromium browsers right now but coming to Firefox (any maybe Safari?) soon. Copied from demo/code for Bootstrap 5: https://code.christianoliff.com/bootstrap-accordion-no-js/
1 parent 172f106 commit b3c9091

1 file changed

Lines changed: 14 additions & 0 deletions

File tree

scss/_accordion.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,16 @@ $accordion-icon-transform: rotate(-180deg) !default;
102102
background-color: var(--accordion-bg);
103103
border: var(--accordion-border-width) solid var(--accordion-border-color);
104104

105+
@media (prefers-reduced-motion: no-preference) {
106+
interpolate-size: allow-keywords;
107+
}
108+
109+
&::details-content {
110+
block-size: 0;
111+
overflow-y: clip;
112+
@include transition(content-visibility .2s allow-discrete, block-size .2s);
113+
}
114+
105115
&:first-of-type {
106116
@include border-top-radius(var(--accordion-border-radius));
107117

@@ -129,7 +139,11 @@ $accordion-icon-transform: rotate(-180deg) !default;
129139

130140
// Open state - details[open] applies these styles
131141
&[open] {
142+
132143
border-color: var(--theme-border, var(--accordion-border-color));
144+
&::details-content {
145+
block-size: auto;
146+
}
133147

134148
> .accordion-header {
135149
color: var(--theme-text, var(--accordion-active-color));

0 commit comments

Comments
 (0)