Source: dist/css/virtual_boot.css, line 14881
10.1.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
Default styling
- FA Solid [modifier] active
- FA Regular [modifier] active
- FA Light [modifier] active
.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="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]"></i>
<span class="flex_auto ">FA Solid [modifier]</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]"></i>
<span class="flex_auto ">FA Regular [modifier]</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]"></i>
<span class="flex_auto">FA Light [modifier]</span>
<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
</li>
</ul>