<div class="bg-off-black">
<span class="loading-indicator tiny ghost"></span>
<span class="loading-indicator small ghost"></span>
<span class="loading-indicator medium ghost"></span>
<span class="loading-indicator large ghost"></span>
<span class="loading-indicator xlarge ghost"></span>
</div>
The .ghost-children class will invert colors of all descendants of the
element on which it is placed, but not the element itself.
<!-- All descendents of this element will be ghosted -->
<div class="bg-off-black inline-block padding-medium ghost-children">
<span class="icon icon-arrow-up"></span>
<span class="icon icon-add"></span>
<span class="icon icon-bill-due"></span>
<span class="icon icon-remove"></span>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ghosting
We assume that all components in the UI-Toolkit are designed to be used on light backgrounds by default. The provided Ghosting utilities will allow you to invert your colors seamlessly when rendering components on dark backgrounds.
Below, we will discuss the two Ghosting utility types.
Ghosting Direct Elements
The
.ghostclass will invert the colors of the element on which it is placed. *Note: since icons are technically injected as:beforecontent, the.ghost-childrenclass must be used in that scenario.