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-3989master
parent
2ecaeb568b
commit
e4047b52cc
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue