ITL utility_classes

ITL utility_classes

Source: _colors.scss, line 1

2.2 Background-colors

To change the background-colors of elements use these classes

  • .bg-<color>: changes the background color
  • .bg-lighten: ligthens the entire element Also lightens the fonts
  • .bg-darken: darkens the element Also darkens the fonts
  • .bg-shaded (only for nested elements): darkens the element Also darkens the fonts
  • <ANY>--faded: lowers the opacity of the color

Example

Red div
White div
Blue div
Blue faded div
Purple div
Shaded div
Purple div
Darkend div
Darkened Blue div
Lightend Blue div
<div class="bg-grad-red p16">Red div</div>
<div class="bg-white p16">White div</div>
<div class="bg-blue p16">Blue div</div>
<div class="bg-blue--faded p16">Blue faded div</div>
<div class="bg-purple p16">Purple div<div class="bg-shaded p4">Shaded div</div></div>
<div class="bg-purple p16">Purple div<div class="bg-darken p4">Darkend div</div></div>
<div class="bg-blue bg-darken p16">Darkened Blue div</div>
<div class="bg-blue bg-lighten p16">Lightend Blue div</div>