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

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

@ -38,8 +38,6 @@ details[open].accordion>summary::before {
content: '\f0d7';
}
// ::details-content isn't available on firefox yet
// we use .accordion-content as a workaround
details.accordion>.accordion-content {
background: #ffffff;
color: #333333;
@ -47,27 +45,43 @@ details.accordion>.accordion-content {
border: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
opacity: 0;
overflow: hidden;
}
details[open].accordion>.accordion-content {
@mixin animation($selector) {
details.accordion#{$selector} {
opacity: 0;
@supports (max-height: calc-size(max-content, size)) {
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
// We repeat duplicate the transition again but only for chrome
// And since everything with ::details-content crashes firefox
// we put this at the end so it doesn't break the previous code
details.accordion::details-content {
opacity: 0;
// ::details-content isn't available on firefox yet
// we use .accordion-content as a workaround
// But we need to use ::details-content for chrome because it's
// not working correctly otherwise
// it only happen in chrome, not safari or firefox
// 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 {
opacity: 1;
transition: all 300ms ease-out;
@supports #{'not selector(details::details-content)'} {
@include animation(">.accordion-content")
}