From e4047b52cc153450e35ed18885ef9ba33b159891 Mon Sep 17 00:00:00 2001
From: Mike Gerwitz <mike.gerwitz@rtspecialty.com>
Date: Thu, 17 Jan 2019 11:52:47 -0500
Subject: [PATCH] src/css/base.css: Style Accordion group

Note that this permits animation if you just add:

  transition: transform 0.25s;

for example to `dt.stack-header::before'.  I didn't add that because nothing
else is animated atm, and so it seems out-of-place.

* src/css/base.css: Add styling for Accordion group.

DEV-3989
---
 src/css/base.css | 43 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/css/base.css b/src/css/base.css
index d1164a8..2a48204 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -1,7 +1,7 @@
 /**
  * Base CSS for the Liza Data Collection Framework
  *
- *  Copyright (C) 2017 R-T Specialty, LLC.
+ *  Copyright (C) 2017, 2019 R-T Specialty, LLC.
  *
  *  This file is part of the Liza Data Collection Framework.
  *
@@ -159,15 +159,46 @@
  *
  * TODO: These need liza-* prefixes.
  *
- * Stacked Group
- * ~~~~~~~~~~~~~
+ * Stacked and Accordion Groups
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * Note that the Accordion group is an extended styling of the Stacked group.
  */
 
-.stepGroup dl.stacked dt.stack-header {
+.stepGroup dl > dt.stack-header {
   border-top:  0px;
   font-weight: bold;
 }
 
-.stepGroup dl.stacked:not(:first-child) dt.stack-header {
-  margin-top: 2em;
+/* Upper margins should not appear for accordions, because they should*/
+/* appear flush when collapsed. */
+.stepGroup dl.stacked:not(:first-child) > dt.stack-header {
+  margin-bottom: 2em;
+}
+
+/* Accordions are generalized into a `liza-collapsable' class.  Colllapsable
+/* groups can have their children hidden when collapsed.
+ */
+.stepGroup dl.liza-collapsable > dt.stack-header {
+  cursor: pointer;
+}
+
+.stepGroup dl.liza-collapsable.liza-collapsed > dt:not(.stack-header),
+.stepGroup dl.liza-collapsable.liza-collapsed > dd {
+  display: none;
+}
+
+/* Arrows indicate expanded/collapsed status.  A downward-facing arrow*/
+/* indicates that content is expanded (appearing in the direction of the
+ * arrow), and rightward-facing indicates collapsed (as if into the header).
+ */
+.stepGroup dl.liza-collapsable > dt.stack-header::before {
+  display: inline-block;
+  margin-right: 0.25em;
+  content: "▼";
+}
+/* Rotation is used for the collapse arrow rather than the character `►'
+/* because this allows for easy animation via `transition'.
+ */
+.stepGroup dl.liza-collapsable.liza-collapsed > dt.stack-header::before {
+  transform: rotate(-90deg);
 }