klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-06-14 15:15:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support animation with calc-size and detect browser features

Browse Source
This commit is contained in:
Antoine Bartuccio 2025-06-11 01:21:53 +02:00
parent 96f91138dd
commit 9905253926
Signed by: klmp200
GPG Key ID: E7245548C53F904B
1 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
core/static/core/accordion.scss
View File

@ -38,8 +38,6 @@ details[open].accordion>summary::before {
content: '\f0d7'; content: '\f0d7';
} }
// ::details-content isn't available on firefox yet
// we use .accordion-content as a workaround
details.accordion>.accordion-content { details.accordion>.accordion-content {
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
@ -47,27 +45,43 @@ details.accordion>.accordion-content {
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
opacity: 0;
overflow: hidden; overflow: hidden;
} }
details[open].accordion>.accordion-content { @mixin animation($selector) {
opacity: 1; details.accordion#{$selector} {
// Setting a transition on all states of the content opacity: 0;
// will create a strange behavior where the transition
// continues without being shown, creating inconsistenties @supports (max-height: calc-size(max-content, size)) {
transition: all 300ms ease-out; max-height: 0px;
}
}
details[open].accordion#{$selector} {
opacity: 1;
// Setting a transition on all states of the content
// will create a strange behavior where the transition
// continues without being shown, creating inconsistenties
transition: all 300ms ease-out;
@supports (max-height: calc-size(max-content, size)) {
max-height: calc-size(max-content, size);
}
}
} }
// For some reason, it's still not enough for chrome // ::details-content isn't available on firefox yet
// We repeat duplicate the transition again but only for chrome // we use .accordion-content as a workaround
// And since everything with ::details-content crashes firefox // But we need to use ::details-content for chrome because it's
// we put this at the end so it doesn't break the previous code // not working correctly otherwise
details.accordion::details-content { // it only happen in chrome, not safari or firefox
opacity: 0; // Note: `selector` is not supported by scss so we comment it out to
// avoid compiling it and sending it straight to the css
@supports #{'selector(details::details-content)'} {
@include animation("::details-content")
} }
details[open].accordion::details-content { @supports #{'not selector(details::details-content)'} {
opacity: 1; @include animation(">.accordion-content")
transition: all 300ms ease-out;
} }