employer
/
liza
1
0
Fork 0
Code Releases Activity

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
master
Mike Gerwitz 2019-01-17 11:52:47 -05:00
parent 2ecaeb568b
commit e4047b52cc
1 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/css/base.css
View File

@ -1,7 +1,7 @@
/** /**
* Base CSS for the Liza Data Collection Framework * 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. * This file is part of the Liza Data Collection Framework.
* *
@ -159,15 +159,46 @@
* *
* TODO: These need liza-* prefixes. * 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; border-top: 0px;
font-weight: bold; font-weight: bold;
} }
.stepGroup dl.stacked:not(:first-child) dt.stack-header { /* Upper margins should not appear for accordions, because they should*/
margin-top: 2em; /* 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);
} }