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 feec896254929293c20d775bdc209fdcd876b42d..406da939ab389443768461e54c35f9aa9ceeca3a 100644 (file)
--- 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";
 }