Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 9819

6.5.4 Is Active Toggle

Many momment there are needs for toggles of icon when the parent is in the state of active. Used in tree navs, dropdowns, and collapsing areas.

Example s

.icon-toggle_plus-minus

Toggle between plus and minus square

  • FA Solid icon-toggle_plus-minus active
  • FA Regular icon-toggle_plus-minus active
  • FA Light icon-toggle_plus-minus active

.icon-toggle_chevron-up-down

Toggle a chevron pointing up and then down.

  • FA Solid icon-toggle_chevron-up-down active
  • FA Regular icon-toggle_chevron-up-down active
  • FA Light icon-toggle_chevron-up-down active

.icon-toggle_chevron-double-up-down

Toggle the double chevron to point up when active

  • FA Solid icon-toggle_chevron-double-up-down active
  • FA Regular icon-toggle_chevron-double-up-down active
  • FA Light icon-toggle_chevron-double-up-down active

.icon-toggle_chevron-double-left-right

Toggle chevron left and right

  • FA Solid icon-toggle_chevron-double-left-right active
  • FA Regular icon-toggle_chevron-double-left-right active
  • FA Light icon-toggle_chevron-double-left-right active

.icon-toggle_arrow-circle

Toggle the arrow to have a circle when active.

  • FA Solid icon-toggle_arrow-circle active
  • FA Regular icon-toggle_arrow-circle active
  • FA Light icon-toggle_arrow-circle active

.icon-toggle_bars-times

Toggle between bars and times

  • FA Solid icon-toggle_bars-times active
  • FA Regular icon-toggle_bars-times active
  • FA Light icon-toggle_bars-times active

.icon-toggle_check-sqaure

Check Marks toggle on and off

  • FA Solid icon-toggle_check-sqaure active
  • FA Regular icon-toggle_check-sqaure active
  • FA Light icon-toggle_check-sqaure active

.icon-toggle_check-circle

Check Marks toggle on and off

  • FA Solid icon-toggle_check-circle active
  • FA Regular icon-toggle_check-circle active
  • FA Light icon-toggle_check-circle active

.icon-toggle_check

Check Marks toggle on and off

  • FA Solid icon-toggle_check active
  • FA Regular icon-toggle_check active
  • FA Light icon-toggle_check active
<ul data-style="[modifier class]" class="ul_none m_0 p_0">
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fas fa-fw [modifier class]"></i>
			<span class="flex_auto ">FA Solid [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 far  fa-fw [modifier class]"></i>
			<span class="flex_auto ">FA Regular [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fal fa-fw [modifier class]"></i>
			<span class="flex_auto">FA Light [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
</ul>
Copy Code