klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-11-03 18:43:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve accordion icon

Browse Source
This commit is contained in:
Antoine Bartuccio
2025-06-03 11:47:23 +02:00
parent 3892e1cee2
commit fb3fd9536e
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,22 @@
details.accordion summary { details.accordion>summary {
margin: 2px 0 0 0; margin: 2px 0 0 0;
padding: .5em .5em .5em .7em; padding: .5em .5em .5em .7em;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
display: block;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
details[open].accordion summary { details[open].accordion>summary {
border: 1px solid #003eff; border: 1px solid #003eff;
background: #007fff; background: #007fff;
color: #ffffff; color: #ffffff;
} }
details:not([open]).accordion summary { details:not([open]).accordion>summary {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@@ -25,6 +25,18 @@ details:not([open]).accordion summary {
color: #454545; 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 // ::details-content isn't available on firefox yet
// we use .accordion-content as a workaround // we use .accordion-content as a workaround
@@ -59,10 +71,10 @@ details.accordion>.accordion-content {
} }
} }
details[open].accordion summary~* { details[open].accordion>summary~* {
animation: open 700ms; animation: open 700ms;
} }
details::not([open]).accordion summary~* { details::not([open]).accordion>summary~* {
animation: open 700ms; animation: open 700ms;
} }