Source: dist/css/acc_uc.css, line
10056
8.1.1.1
Background Color Tint
Background colors can be shifted by appending a modifier of n5 through 5. The negative(n) numbers mix the color with black and the positive numbers mix the color with white.
Classes | Effect |
---|
.bg_(color)-0, .bg_(color) | pure color |
.bg_(color)-1 | color with 15% white mixed in |
.bg_(color)-2 | color with 37% white mixed in |
.bg_(color)-3 | color with 60% white mixed in |
.bg_(color)-4 | color with 78% white mixed in |
.bg_(color)-5 | color with 90% white mixed in |
.bg_(color)-n1 | color with 10% black mixed in |
.bg_(color)-n2 | color with 25% black mixed in |
.bg_(color)-n3 | color with 45% black mixed in |
.bg_(color)-n4 | color with 58% black mixed in |
.bg_(color)-n5 | color with 75% black mixed in |
<div class="bg_white flex_auto text_center p_2 p-y_5 ">white</div>
<div class="[modifier class]-5 flex_auto text_center p_2 p-y_5">5</div>
<div class="[modifier class]-4 flex_auto text_center p_2 p-y_5">4</div>
<div class="[modifier class]-3 flex_auto text_center p_2 p-y_5">3</div>
<div class="[modifier class]-2 flex_auto text_center p_2 p-y_5">2</div>
<div class="[modifier class]-1 flex_auto text_center c_white p_2 p-y_5">1</div>
<div class="[modifier class]-0 flex_auto text_center c_white p_2 p-y_5">0</div>
<div class="[modifier class]-n1 flex_auto text_center c_white p_2 p-y_5">n1</div>
<div class="[modifier class]-n2 flex_auto text_center c_white p_2 p-y_5">n2</div>
<div class="[modifier class]-n3 flex_auto text_center c_white p_2 p-y_5">n3</div>
<div class="[modifier class]-n4 flex_auto text_center c_white p_2 p-y_5">n4</div>
<div class="[modifier class]-n5 flex_auto text_center c_white p_2 p-y_5">n5</div>
<div class="bg_black flex_auto text_center c_white p_2 p-y_5">black</div>