mirror of
https://github.com/ae-utbm/sith.git
synced 2025-06-08 20:25:21 +00:00
80 lines
1.3 KiB
SCSS
80 lines
1.3 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]>summary::before {
|
|
font-family: FontAwesome;
|
|
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;
|
|
padding: 1em 2.2em;
|
|
overflow: auto;
|
|
border: 1px solid #dddddd;
|
|
border-bottom-right-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
|
|
@keyframes open {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
/* closing animation */
|
|
@keyframes close {
|
|
0% {
|
|
opacity: 1
|
|
}
|
|
|
|
100% {
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
details[open].accordion>summary~* {
|
|
animation: open 700ms;
|
|
}
|
|
|
|
details::not([open]).accordion>summary~* {
|
|
animation: open 700ms;
|
|
} |