accordion triangle styling

nwspk · Feb 12, 2024 · 7cb4970 · 7cb4970
1 parent 911a7de
commit 7cb4970
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -519,3 +519,20 @@ label {
 .event-actions {
   margin-top: 1em;
 }
+
+/* Accordion triangle styling */
+
+details summary::-webkit-details-marker {
+  display: none; /* Hide default triangle marker for WebKit browsers */
+}
+
+details summary::before {
+  content: '\25B6'; /* Unicode character for right-pointing triangle */
+  display: inline-block;
+  margin-right: 0.5em; /* Adjust spacing between marker and text */
+}
+
+/* Change triangle marker when details are open */
+details[open] summary::before {
+  content: '\25BC'; /* Unicode character for down-pointing triangle */
+}