Source: dist/css/acc_uc.css, line 16846
4.7 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 fa-solid 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 fa-regular 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 fa-light 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>