Mike Gerwitz

Activist for User Freedom

aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMike Gerwitz <mike.gerwitz@rtspecialty.com>2019-01-17 11:52:47 -0500
committerMike Gerwitz <mike.gerwitz@rtspecialty.com>2019-01-17 12:10:10 -0500
commite4047b52cc153450e35ed18885ef9ba33b159891 (patch)
tree7612de3456ef34317e3aabf9631edf11ff240888
parent2ecaeb568b596f569f9a17696c98fa462adc8188 (diff)
downloadliza-e4047b52cc153450e35ed18885ef9ba33b159891.tar.gz
liza-e4047b52cc153450e35ed18885ef9ba33b159891.tar.bz2
liza-e4047b52cc153450e35ed18885ef9ba33b159891.zip
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
-rw-r--r--src/css/base.css43
1 files 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);
}