From e9f4c0da5651649d548bfdb213676deb77927f8c Mon Sep 17 00:00:00 2001
From: Andrew Hunt <andrew@aghstrategies.com>
Date: Fri, 8 May 2020 22:09:51 -0400
Subject: [PATCH] Replaced collapse/expand icon with Font Awesome

---
 css/civicrm.css   | 151 ++++++++++++++++++++++++----------------------
 css/dashboard.css |  19 ------
 2 files changed, 80 insertions(+), 90 deletions(-)

diff --git a/css/civicrm.css b/css/civicrm.css
index be8af43c42..c8bb674f05 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -2232,73 +2232,110 @@ div.crm-master-accordion-header a.helpicon {
 
 /* accordion styles */
 
-.crm-container .crm-accordion-header {
-  background-image: url("../i/TreeMinusWhite.gif");
-  background-repeat: no-repeat;
-  background-position: 2px center;
+.crm-container .crm-accordion-header,
+.crm-container .crm-collapsible .collapsible-title,
+.crm-container span.collapsed,
+.crm-container a.collapsed,
+.crm-container .crm-expand-row {
   cursor: pointer;
+}
+
+.crm-container .crm-accordion-wrapper {
+  margin-bottom: 4px;
+}
+
+/* Specific types of headers */
+
+#crm-container .widget-content .crm-accordion-header {
+  background-color: #EFEFE5;
+  color: #080808;
+}
+
+.crm-container a.crm-expand-row:before,
+.crm-container a.crm-expand-row:link::before,
+.crm-container a.crm-expand-row:visited::before {
+  color: #3E3E3E;
+}
+
+.crm-container .crm-accordion-header {
   color: #F5F6F1;
   font-weight: normal;
-  padding: 4px 8px 4px 20px;
+  padding: 4px 8px;
   background-color: #5D677B;
+  border-radius: 4px 4px 0 0;
 }
 
-.crm-container .crm-accordion-header:hover {
-  background-color: #32414f;
+.crm-container .collapsed .crm-accordion-header {
+  border-radius: 4px;
 }
 
-.crm-container .collapsed .crm-accordion-header {
-  background-image: url("../i/TreePlusWhite.gif");
+.crm-container .crm-accordion-header.active {
+  font-weight: bold;
+  background-color: #3E3E3E;
 }
 
-.crm-container .collapsed .crm-accordion-body,
-.crm-container .crm-collapsible.collapsed .collapsible-title + * {
-  display: none;
+.crm-container .crm-accordion-header:hover {
+  background-color: #2F2F2E;
 }
 
-.crm-container .crm-expand-row {
-  min-width: 16px;
-  min-height: 16px;
-  display: inline-block;
+#crm-container .widget-content .crm-accordion-header:hover {
+  background-color: #e8e8de;
 }
 
-.crm-container .crm-accordion-inner .crm-accordion-header,
-.crm-container .crm-accordion-wrapper .crm-master-accordion-header,
-.crm-container .crm-collapsible .collapsible-title {
-  background-image: url("../i/TreeMinus.gif");
+.crm-container .crm-accordion-wrapper .crm-master-accordion-header {
   background-color: transparent;
   color: #3E3E3E;
 }
 
-.crm-container .crm-accordion-inner.collapsed .crm-accordion-header,
-.crm-container .crm-accordion-wrapper.collapsed .crm-master-accordion-header,
-.crm-container .crm-collapsible.collapsed .collapsible-title {
-  background-image: url("../i/TreePlus.gif");
-}
-
 .crm-container .crm-accordion-wrapper .crm-master-accordion-header {
-  background-color: transparent;
   font-size: 16px;
-  color: #3e3e3e;
-  margin-bottom: 0;
 }
 
-.crm-container .crm-accordion-inner .crm-accordion-header {
-  font-size: 13px;
+.crm-container .crm-master-accordion-header.crm-accordion-header:hover,
+.crm-container .crm-collapsible .collapsible-title:hover {
+  color: #121A2D;
 }
 
-.crm-container .crm-accordion-wrapper {
-  margin-bottom: 4px;
+.crm-container .collapsed .crm-accordion-body,
+.crm-container .crm-collapsible.collapsed .collapsible-title + * {
+  display: none;
 }
 
-.crm-container .crm-accordion-header {
-  border-radius: 4px 4px 0 0;
+/* Collapse icon */
+
+/* General icon settings for all collapsible things */
+.crm-container .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 {
+  font-family: "FontAwesome";
+  display: inline-block;
+  width: 1em;
+  content: "\f0da";
+  font-size: 13px;
 }
 
-.crm-container .collapsed .crm-accordion-header {
-  border-radius: 4px;
+/* Collapsed icon */
+.crm-container .collapsed .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 .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 {
+  content: "\f0d7";
+}
+
+/* Accordion bodies */
+
 .crm-container .crm-accordion-body {
   border-radius: 0 0 4px 4px;
   border: 1px solid #70716B;
@@ -2306,12 +2343,8 @@ div.crm-master-accordion-header a.helpicon {
   padding: 4px 0;
 }
 
-.crm-container .crm-collapsible .collapsible-title {
-  padding-left: 19px;
-  text-decoration: none;
-  background-repeat: no-repeat;
-  background-position: 0 center;
-  cursor: pointer;
+#crm-container .widget-content .crm-accordion-body {
+  border-color: #e8e8de;
 }
 
 .crm-container .crm-master-accordion-header+.crm-accordion-body {
@@ -2319,19 +2352,10 @@ div.crm-master-accordion-header a.helpicon {
   padding: 0;
 }
 
-.crm-container .crm-accordion-header.active {
-  font-weight: bold;
-  background-color: #41477E;
-}
-
-.crm-container .crm-accordion-header.active:hover {
-  background-color: #2E3471;
-}
-
-.crm-container .crm-master-accordion-header.crm-accordion-header:hover,
-.crm-container .crm-collapsible .collapsible-title:hover {
-  background-color: transparent;
-  color: #0200A0;
+#crm-container .widget-content .crm-accordion-body,
+.crm-container .crm-accordion-body.padded {
+  padding-left: .5em;
+  padding-right: .5em;
 }
 
 .crm-container .crm-child-row > td {
@@ -3497,21 +3521,6 @@ span.crm-select-item-color {
   padding-left: 20px;
 }
 
-.crm-container span.collapsed,
-.crm-container a.collapsed,
-.crm-container .crm-expand-row {
-  background: url("../i/TreePlus.gif") no-repeat 0 0;
-  padding-left: 19px;
-  cursor: pointer;
-}
-
-.crm-container span.expanded,
-.crm-container a.expanded {
-  background: url("../i/TreeMinus.gif") no-repeat 0 0;
-  padding-left: 19px;
-  cursor: pointer;
-}
-
 /* Notifications */
 #crm-notification-container {
   width: 350px;
diff --git a/css/dashboard.css b/css/dashboard.css
index cf2f34e815..7f783555fd 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -71,25 +71,6 @@
   min-height: 10em;
 }
 
-#crm-container .widget-content .crm-accordion-header {
-  background-color: #EFEFE5;
-  background-image: url("../i/TreeMinus.gif");
-  color: #080808;
-}
-
-#crm-container .widget-content .crm-accordion-wrapper.collapsed .crm-accordion-header {
-  background-image: url("../i/TreePlus.gif");
-}
-
-#crm-container .widget-content .crm-accordion-header:hover {
-  background-color: #e8e8de;
-}
-
-#crm-container .widget-content .crm-accordion-body {
-  border-color: #e8e8de;
-  padding: 4px .5em;
-}
-
 #crm-container .widget-controls {
   background-color: #5D677B;
   /* Standards-browsers do this anyway because all inner block elements are floated.  IE doesn't because it's crap. */
-- 
2.25.1