ITL utility_classes

ITL utility_classes

Source: _colors.scss, line 41

2.3 Background-style

@mixin bgStyle([shaded, darken, lighten, shadow]) To change the background-colors of elements use these classes

  • .bg-lighten: ligthens the entire element Also lightens the fonts
  • .bg-darken: darkens the entire 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

Purple div
Shaded div
Purple div
Darkend div
Darkened Blue div
Lightend Blue 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>