From: Nicol <vingle@users.noreply.github.com>
Date: Wed, 6 Dec 2023 13:23:59 +0000 (+0000)
Subject: Applies theme expand/close icon to details/summary
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=a54d94cabcfc98a2d9fd8372a45325b60a6c6879;p=civicrm-core.git

Applies theme expand/close icon to details/summary

Details/summary has a browser-generated expand/close caret. This PR restores Greenwich's FontAwesome caret/triangle - and provides the class names themers would need to include to make their choice of expand/close icons & animations apply to details/summary.
---

diff --git a/css/civicrm.css b/css/civicrm.css
index feec896254..406da939ab 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -2219,6 +2219,12 @@ div.crm-master-accordion-header a.helpicon {
   border-radius: 4px 4px 0 0;
 }
 
+.crm-container summary {
+  display: list-item;
+  list-style: none;
+  cursor: pointer;
+}
+
 .crm-container .collapsed .crm-accordion-header {
   border-radius: 4px;
 }
@@ -2259,10 +2265,12 @@ div.crm-master-accordion-header a.helpicon {
 
 /* General icon settings for all collapsible things */
 .crm-container div.crm-accordion-header:before,
+.crm-container .collapsed .crm-accordion-header:before,
 .crm-container .crm-collapsible .collapsible-title:before,
 .crm-container span.collapsed:before,
 .crm-container a.collapsed:before,
-.crm-container .crm-expand-row:before {
+.crm-container .crm-expand-row:before,
+.crm-container details > summary:before {
   font-family: "FontAwesome";
   display: inline-block;
   width: 1em;
@@ -2270,21 +2278,13 @@ div.crm-master-accordion-header a.helpicon {
   font-size: 13px;
 }
 
-/* Collapsed icon */
-.crm-container .collapsed div.crm-accordion-header:before,
-.crm-container .crm-collapsible.collapsed .collapsible-title:before,
-.crm-container span.collapsed:before,
-.crm-container a.collapsed:before,
-.crm-container .crm-expand-row:before {
-  content: "\f0da";
-}
-
 /* Expanded icon */
 .crm-container div.crm-accordion-header:before,
 .crm-container .crm-collapsible .collapsible-title:before,
 .crm-container span.expanded:before,
 .crm-container a.expanded:before,
-.crm-container .crm-expand-row.expanded:before {
+.crm-container .crm-expand-row.expanded:before,
+.crm-container details[open] > summary:before  {
   font-family: "FontAwesome";
   content: "\f0d7";
 }