Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

4.1.2.4 active font 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

c_primary

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_shade

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_info

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_highlight

text color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_success

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_warning

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_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 c_white">
  <div class="flex_auto a:[modifier class]-5 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">5</div>
  <div class="flex_auto a:[modifier class]-4 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">4</div>
  <div class="flex_auto a:[modifier class]-3 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">3</div>
  <div class="flex_auto a:[modifier class]-2 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">2</div>
  <div class="flex_auto a:[modifier class]-1 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">1</div>
  <div class="flex_auto a:[modifier class]-0 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">0</div>
  <div class="flex_auto a:[modifier class]-n1 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n1</div>
  <div class="flex_auto a:[modifier class]-n2 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n2</div>
  <div class="flex_auto a:[modifier class]-n3 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n3</div>
  <div class="flex_auto a:[modifier class]-n4 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n4</div>
  <div class="flex_auto a:[modifier class]-n5 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n5</div>
</div>
Copy Code