Treat legend term pairs as single wrapping elements

This commit is contained in:
Michael Lange 2020-10-15 10:30:34 -07:00
parent 97510a8397
commit 649873745f
2 changed files with 11 additions and 5 deletions

View File

@ -20,8 +20,14 @@
margin-left: 0.5em;
}
dd + dt {
margin-left: 1.5em;
.legend-term {
display: inline-block;
whitespace: nowrap;
margin-right: 1.5em;
&:last-child {
margin-right: 0;
}
}
}
}

View File

@ -16,9 +16,9 @@
<div class="legend">
<h3 class="legend-label">Allocation Status</h3>
<dl class="legend-terms">
<dt><span class="color-swatch is-wide running" title="Running" /></dt><dd>Running</dd>
<dt><span class="color-swatch is-wide failed" title="Failed" /></dt><dd>Failed</dd>
<dt><span class="color-swatch is-wide pending" title="Starting" /></dt><dd>Starting</dd>
<div class="legend-term"><dt><span class="color-swatch is-wide running" title="Running" /></dt><dd>Running</dd></div>
<div class="legend-term"><dt><span class="color-swatch is-wide failed" title="Failed" /></dt><dd>Failed</dd></div>
<div class="legend-term"><dt><span class="color-swatch is-wide pending" title="Starting" /></dt><dd>Starting</dd></div>
</dl>
</div>
</div>