Source: dist/css/library_boot.css, line 9155
10.14.1 Search Filter Rail
The filter box on the search page.
Example
Default styling
-
Type Ahead FilterFiltering Bycollapse
-
-
Primary Categorycollapse
-
-
Drugs Genericcollapse
-
<div id="filterZone" class="{aspect_1_1:md} {nav-mined} nav-maxed self_start bg_black-3 br_1 br_black-2 br_radius br_solid flex_auto p_2 p_3:md shadow_emboss-light transition_3 flex flex_column ">
<nav id="FilterNavContainer" class="flex_auto overflow_hidden self_stretch font_4:lg font_3:md font_2 font_display font_display">
<ul class="flex flex_column:md flex_row gap_3 justify_start:md ul_none w_100 w_auto:md">
<li class="a:bg_primary a:c_white a:shadow_overlap-light {aspect_1_1:md} br_radius c_white-8 flex_none grid h:bg_black-7 h:c_white h:shadow_overlap-light nav-item p_0:md p_3">
<a class="c_inherit-all h:undecorated p_3 lh_1 m-x_n1">
<i class="far fa-filter p-x_2:md p-y_3 p-y_0:md"></i>
<span class="font-size_down label lh_0 lowercase self_center font_medium {display_none:md}">Filter</span>
</a>
</li>
</ul>
</nav>
<ul id="filterFacets" class="ul_none font_n1 {display_none} opacity_none transition_3 min-h_30:md">
<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter1">
<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_3996" id="checkfacetfacet_3996" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_3996" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_3996</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_4867" id="checkfacetfacet_4867" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_4867" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_4867</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> <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter2" >
<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">Primary Category </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="#CollapseFacetGroupPrimaryID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupPrimaryID">
<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="CollapseFacetGroupPrimaryID" 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="checkfacet_5951" id="checkfacet_5951" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5951" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5951ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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="checkfacet_5064" id="checkfacet_5064" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5064" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5064ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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="checkfacet_3910" id="checkfacet_3910" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_3910" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_3910ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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="checkfacet_2895" id="checkfacet_2895" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2895" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2895ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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="checkfacet_0761" id="checkfacet_0761" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0761" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0761ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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> <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter3" >
<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">Drugs Generic </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="#CollapseFacetGroupID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupID">
<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="CollapseFacetGroupID" 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="checkfacet_7865" id="checkfacet_7865" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7865" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7865ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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="checkfacet_2499" id="checkfacet_2499" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2499" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2499ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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="checkfacet_7156" id="checkfacet_7156" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7156" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7156ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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="checkfacet_1153" id="checkfacet_1153" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_1153" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_1153ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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="checkfacet_9786" id="checkfacet_9786" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9786" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9786ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></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> </ul>
<script>
let filterZone = document.getElementById("filterZone");
let filterZoneNav = filterZone.querySelector("nav");
let filterFacets = filterZone.querySelector("#filterFacets");
let filterZoneExpanded = true;
filterZoneNav.addEventListener("click", function () {
if (filterZoneExpanded) {
filterFacets.classList.toggle("opacity_0");
filterFacets.classList.toggle("opacity_none");
setTimeout(function () {
filterFacets.classList.toggle("{display_none}");
filterFacets.classList.toggle("display_none");
filterFacets.classList.toggle("min-h_0:md");
filterFacets.classList.toggle("min-h_30:md");
filterZone.classList.remove("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
filterZone.classList.add("aspect_1_1:md", "nav-mined", "{nav-maxed}");
filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
filterZoneExpanded = false;
}, 300);
return;
} else {
filterZone.classList.add("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
filterZone.classList.remove("aspect_1_1:md", "nav-mined", "{nav-maxed}");
filterFacets.classList.toggle("min-h_0:md");
filterFacets.classList.toggle("min-h_30:md");
filterFacets.classList.toggle("{display_none}");
filterFacets.classList.toggle("display_none");
setTimeout(function () {
filterFacets.classList.toggle("opacity_0");
filterFacets.classList.toggle("opacity_none");
filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
filterZoneExpanded = true;
}, 300);
return;
}
});
</script>
</div>