Skip to content
Snippets Groups Projects

Accordion

Merged Etienne LOUPIAS requested to merge test-accordion into dev
Files
2
/* ********************************************************************************************* */
/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
/* ********************************************************************************************* */
details.accordion {
/* accordion CSS rules */
.accordion-btn {
border: none;
border-top: solid var(--ml-neutral) 2px;
border-bottom: transparent solid 2px;
background-color: var(--ml-background);
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
summary {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 2px solid var(--ml-border-accent-primary);
border-bottom: 2px solid transparent;
cursor: pointer;
padding: 18px;
}
summary::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease-in-out;
margin-top: 2px;
flex-shrink: 0;
}
summary:hover {
background-color: var(--ml-background-button-secondary-hover);
}
}
.accordion-btn:last-of-type {
border-bottom: solid var(--ml-neutral) 2px;
details.accordion:last-of-type summary {
border-bottom-color: var(--ml-border-accent-primary);
}
.accordion-btn:hover {
background-color: var(--ml-m200);
border: none;
border-top: transparent solid 2px;
border-bottom: transparent solid 2px;
details.accordion[open] summary::after {
transform: rotate(-135deg);
}
.accordion-btn.expanded {
background-color: var(--ml-m400);
border: none;
border-top: transparent solid 2px;
border-bottom: transparent solid 2px;
details.accordion[open] summary {
background-color: var(--ml-background-button-secondary);
}
.accordion-panel {
margin: 10px 18px;
padding: 0 5px;
background-color: var(--ml-neutral);
display: none;
details.accordion > div:first-of-type {
margin: 16px;
padding: 0 8px;
background-color: var(--ml-background-accent-secondary);
overflow: hidden;
}
Loading