mirror of
https://github.com/ae-utbm/sith.git
synced 2025-06-15 07:35:18 +00:00
89 lines
2.2 KiB
SCSS
89 lines
2.2 KiB
SCSS
details.accordion>summary {
|
|
margin: 2px 0 0 0;
|
|
padding: .5em .5em .5em .7em;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
display: block;
|
|
|
|
border-top-right-radius: 3px;
|
|
border-top-left-radius: 3px;
|
|
}
|
|
|
|
details[open].accordion>summary {
|
|
border: 1px solid #003eff;
|
|
background: #007fff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
|
|
details:not([open]).accordion>summary {
|
|
border-bottom-right-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
|
|
border: 1px solid #c5c5c5;
|
|
background: #f6f6f6;
|
|
color: #454545;
|
|
}
|
|
|
|
details.accordion>summary::before {
|
|
font-family: FontAwesome;
|
|
content: '\f0da';
|
|
margin-right: 5px;
|
|
transition: 700ms;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
details[open].accordion>summary::before {
|
|
font-family: FontAwesome;
|
|
content: '\f0d7';
|
|
}
|
|
|
|
details.accordion>.accordion-content {
|
|
background: #ffffff;
|
|
color: #333333;
|
|
padding: 1em 2.2em;
|
|
border: 1px solid #dddddd;
|
|
border-bottom-right-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ::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
|
|
// This is a trick that comes from here :
|
|
// https://stackoverflow.com/questions/62665318/using-supports-selector-despite-sass-not-supporting-it
|
|
@supports #{'selector(details::details-content)'} {
|
|
@include animation("::details-content")
|
|
}
|
|
|
|
@supports #{'not selector(details::details-content)'} {
|
|
@include animation(">.accordion-content")
|
|
} |