Treat legend term pairs as single wrapping elements
This commit is contained in:
parent
97510a8397
commit
649873745f
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue