This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/
Source: dist/css/virtual_boot.css, line 9060
A type ahead search that adds a selected faceted filter to the search page. This is used when filters are exceptionally long and could be difficult to read when listed out. Authors, and mesh terms can use this pattern to add them as a filter to the search page.
<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md ">
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_0 lh_1 font-size_up font_medium">Type Ahead Filter</div>
</header>
<main class="p_1 collapse show">
<div class="p_3 flex flex_row">
<input class="br-tr_square br-br_square" type="text" name="" id="" placeholder="Filter Name">
<button class="btn btn-secondary br-tl_square br-bl_square"><i class="fas fa-users"></i></button>
</div>
</main>
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_2 lh_1 font-size_down font_bold opacity_8">Filtering By</div>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#collapseTypeAhead" role="button" aria-expanded="true" aria-controls="#collapseTypeAhead">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </header>
<main id="collapseTypeAhead" class="p_1 collapse show" style="">
<ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
<li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_6001" id="checkfacetfacet_6001" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_6001" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_6001</span></label></div>
<div class="">
<button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
</div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_8722" id="checkfacetfacet_8722" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_8722" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_8722</span></label></div>
<div class="">
<button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
</div>
<!---->
</div>
</li> </ul>
<footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
</main>
</li>