Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 12562

4.1.2.1 active Background Color

Click the areas below to toggle the "active" state.
Set the font color of the child by setting the parent to .active. `a:c_primary`

Example s

bg_primary

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_shade

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_info

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_highlight

text color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_success

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_warning

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_alert

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5
<div class="flex p_5 is-active_toggle-function">
  <div class="flex_auto a:[modifier class]-5 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">5</div>
  <div class="flex_auto a:[modifier class]-4 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">4</div>
  <div class="flex_auto a:[modifier class]-3 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">3</div>
  <div class="flex_auto a:[modifier class]-2 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">2</div>
  <div class="flex_auto a:[modifier class]-1 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">1</div>
  <div class="flex_auto a:[modifier class]-0 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">0</div>
  <div class="flex_auto a:[modifier class]-n1 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n1</div>
  <div class="flex_auto a:[modifier class]-n2 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n2</div>
  <div class="flex_auto a:[modifier class]-n3 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n3</div>
  <div class="flex_auto a:[modifier class]-n4 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n4</div>
  <div class="flex_auto a:[modifier class]-n5 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n5</div>
</div>
Copy Code