Source: dist/css/acc_uc.css, line 13725
2.1.1.3 Hover: Background Color
hovers can easily be added to objects by adding h: in front of the background color utility like h:bg_primary
Example s
Default styling
5
4
3
2
1
0
n1
n2
n3
n4
n5
bg_alert
background color modified light to dark
5
4
3
2
1
0
n1
n2
n3
n4
n5
bg_primary
background color modified light to dark
5
4
3
2
1
0
n1
n2
n3
n4
n5
bg_shade
background color modified light to dark
5
4
3
2
1
0
n1
n2
n3
n4
n5
bg_info
background color modified light to dark
5
4
3
2
1
0
n1
n2
n3
n4
n5
bg_highlight
background color success color
5
4
3
2
1
0
n1
n2
n3
n4
n5
bg_success
background color modified light to dark
5
4
3
2
1
0
n1
n2
n3
n4
n5
bg_warning
background color modified light to dark
5
4
3
2
1
0
n1
n2
n3
n4
n5
<div class="flex m_5">
<div class="h:[modifier class]-5 flex_auto text_center br_1 br_solid br_shade-4 p_2">5</div>
<div class="h:[modifier class]-4 flex_auto text_center br_1 br_solid br_shade-4 p_2">4</div>
<div class="h:[modifier class]-3 flex_auto text_center br_1 br_solid br_shade-4 p_2">3</div>
<div class="h:[modifier class]-2 flex_auto text_center br_1 br_solid br_shade-4 p_2">2</div>
<div class="h:[modifier class]-1 flex_auto text_center br_1 br_solid br_shade-4 p_2">1</div>
<div class="h:[modifier class]-0 flex_auto text_center br_1 br_solid br_shade-4 p_2">0</div>
<div class="h:[modifier class]-n1 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n1</div>
<div class="h:[modifier class]-n2 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n2</div>
<div class="h:[modifier class]-n3 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n3</div>
<div class="h:[modifier class]-n4 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n4</div>
<div class="h:[modifier class]-n5 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n5</div>
</div>