MISC helpers

Lists

<ul class="unstyled">
  …
</ul>
Removes styles for ul or ol. Example:
  • Normal
  • list
  • unstyled
  • list

Increase click/tap surface

<div class="relative"> <a class="increase-surface-click">
Increase link/button tap/click zone to the closest parent that has position: relative.
(used in pagination drop down)

For media print

<span class="reset4print">Lorem ipsum dolor</span>
Applies a big reset of all properties for @media print
<span class="noprint">Lorem ipsum dolor</span>
Applies display: none for @media print (element won't be printed)
<span class="onprint">Lorem ipsum dolor</span>
Applies display: block for @media print (hidden elements will be printed)

Dark Mode

For React applications, a isDarkMode (appConfigBody-darkmode for Angular) class is applied to the body when dark mode is triggered.

Then you have two helpers: hide-on-darkmode will hide something when dark mode is triggered, and display-on-darkmode (which is hidden by default) will be displayed when dark mode is triggered.

Test: Dark mode is triggered.

Test: Dark mode is not triggered.