Support accordion styles that don't use .crm-accordion-wrapper or .crm-accordion-header
There are two large PRs to change over 60 accordions to <details><summary>
. Given the amount of testing required, this would be a good moment to also remove the CSS classes .crm-accordion-wrapper
and .crm-accordion-header
as they can be targeted now with details
and summary
respectively (with utility classes on details to change the look of the header/summary).
However to do that the changes described here need implementing further, similar to how they have been in Greenwich, Finsbury Park & CAU Radstock. This means describing summary and details without those classes. E.g. Greenwich now includes (mixed in with other classes):
.crm-container summary {
display: list-item;
list-style: none;
cursor: pointer;
font-size: 1rem;
padding: 0.5rem;
font-weight: bold;
}
/* default dark bg accordion header style common in Civi */
.crm-container .crm-accordion-bold > summary {
color: #f5f6f1;
font-weight: normal;
padding: 4px 8px;
background-color: #5d677b;
border-radius: 4px;
}
.crm-container .crm-accordion-bold[open] > summary { /* open state */
border-radius: 4px 4px 0 0;
}
.crm-container .crm-accordion-bold > summary.active { /* active state */
font-weight: bold;
background-color: #3e3e3e;
}
.crm-container .crm-accordion-bold > summary:hover,
.crm-container .crm-accordion-bold > summary:focus { /* hover state */
background-color: #2f2f2e;
}
/* transparent bg accordion used in combination*/
.crm-container .crm-accordion-light > summary {
background-color: transparent;
font-weight: normal;
color: #3e3e3e;
}
.crm-container .crm-accordion-light > summary:hover,
.crm-container .crm-accordion-light > summary:focus { /* hover state */
color: #121a2d;
}
NB: .crm-accordion-light
applies the same style that .crm-master-accordion-header
does - a transparent background header used on the contact dashboard, and in combination with the main, dark bg style, such as on the Advanced Search page. .crm-accordion-bold
applies Civi's main accordion style.
I looked at making a quick PR here around this but couldn't find the accordion-header
mixin and then got a bit lost by how things were implemented.