Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

4.1.2.5 active Black n White

Click the areas below to toggle the "active" state.
Set the background to full white or black when the parent has a class of "active".

Example s

bg_white

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default

bg_black

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default
<div class="flex p_5 bg_primary m_5 is-active_toggle-function">
  <div class="flex_auto a:[modifier class] bg_[modifier class]-0 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">0</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-1 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">1</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-2 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">2</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-3 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">3</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-4 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">4</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-5 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">5</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-6 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-7 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-8 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-9 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="flex_auto  a:[modifier class] bg_[modifier class]-0 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">default</div>
</div>
Copy Code