Filters
<div class="filters">
<ul class="filters-active-list">
<li>
<a href="#" class="filters-active-item"> <i class="fa fa-close"></i> Active Filter #1</a>
</li>
<li>
<a href="#" class="filters-active-item"> <i class="fa fa-close"></i> Active Filter #2</a>
</li>
<li>
<a href="#" class="btn btn-link">Reset Filters</a>
</li>
</ul>
<div class="filters-trigger">
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-info filter-btn hidden-lg">
<i class="fa fa-filter"></i>
</button>
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-info btn-lg filter-btn visible-lg-inline-block">
FILTERS
<i class="fa fa-arrow-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right js-allow-focus">
<li>
<div class="filter-group">
<h3 class="filter-title">Checkbox Type</h3>
<ul>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
<span class="checkbox__custom-text">Filter option 1</span>
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
<span class="checkbox__custom-text">Lorem ipsum dolor sit amet consectetur adipisicing elit omnis sunt</span>
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
<span class="checkbox__custom-text">Filter option 3</span>
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
<span class="checkbox__custom-text">Filter option 4</span>
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
<span class="checkbox__custom-text">Filter option 5</span>
</label>
</div>
</li>
<li>
<a href="" class="btn btn-link btn-sm"> See More <i class="fa fa-plus"></i> </a>
</li>
</ul>
</div>
</li>
<li>
<div class="filter-group">
<h3 class="filter-title">Radio Type</h3>
<ul>
<li>
<div class="radio">
<label>
<input type="radio" name="o3" value="" />
<span class="radio__custom">
<i class="radio__custom-icon fa fa-circle"></i>
</span>
<span class="radio__custom-text">Filter option 1</span>
</label>
</div>
</li>
<li>
<div class="radio">
<label>
<input type="radio" name="o3" value="" />
<span class="radio__custom">
<i class="radio__custom-icon fa fa-circle"></i>
</span>
<span class="radio__custom-text">Lorem ipsum dolor sit amet consectetur adipisicing elit omnis sunt</span>
</label>
</div>
</li>
<li>
<div class="radio">
<label>
<input type="radio" name="o3" value="" />
<span class="radio__custom">
<i class="radio__custom-icon fa fa-circle"></i>
</span>
<span class="radio__custom-text">Filter option 3</span>
</label>
</div>
</li>
<li>
<div class="radio">
<label>
<input type="radio" name="o3" value="" />
<span class="radio__custom">
<i class="radio__custom-icon fa fa-circle"></i>
</span>
<span class="radio__custom-text">Filter option 4</span>
</label>
</div>
</li>
<li>
<div class="radio">
<label>
<input type="radio" name="o3" value="" />
<span class="radio__custom">
<i class="radio__custom-icon fa fa-circle"></i>
</span>
<span class="radio__custom-text">Filter option 5</span>
</label>
</div>
</li>
<li>
<a href="" class="btn btn-link btn-sm"> See More <i class="fa fa-plus"></i> </a>
</li>
</ul>
</div>
</li>
<li>
<div class="filter-group">
<h3 class="filter-title">Select Type</h3>
<ul>
<li>
<div class="custom-select">
<i class="fa fa-location-arrow custom-select__icon"></i>
<select name="" id="">
<option value="">Select a location</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
<option value="">Option 5</option>
</select>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="filter-group">
<h3 class="filter-title">Date Type</h3>
<ul>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Past
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Future
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Custom
</label>
</div>
<div class="form-inline">
<div class="form-group">
<label for="start" class="sr-only">Start</label>
<div class="input-group date js-datepicker">
<input type="text" class="form-control" id="start" size="6" />
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
<span>to</span>
<div class="form-group">
<label for="end" class="sr-only">End</label>
<div class="input-group date js-datepicker">
<input type="text" class="form-control" id="end" size="6" />
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="filter-group">
<h3 class="filter-title">Nested Groups</h3>
<ul>
<li>
<div class="checkbox has-toggle" id="accordion" data-target="collapseExample-0">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Parent Item
</label>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseExample-0" aria-expanded="false" aria-controls="collapseExample-0" class="toggle-icon pull-right"></a>
</div>
<div class="collapse" id="collapseExample-0">
<div class="filter-group">
<ul>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Child Item
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Child Item
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Child Item
</label>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="checkbox has-toggle" id="accordion" data-target="collapseExample-1">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Parent Item
</label>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1" class="toggle-icon pull-right"></a>
</div>
<div class="collapse" id="collapseExample-1">
<div class="filter-group">
<ul>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Child Item
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Child Item
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
<span class="checkbox__custom">
<i class="checkbox__custom-icon fa fa-check"></i>
</span>
Child Item
</label>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="filter-group">
<h3 class="filter-title">Theme Tags</h3>
<div class="tags-list"><button type="button" class="btn tag" data-toggle="button" aria-pressed="false">Theme Tag 1</button><button type="button" class="btn tag" data-toggle="button" aria-pressed="false">Theme Tag 2</button><button type="button" class="btn tag" data-toggle="button" aria-pressed="false">Theme Tag 3</button><button type="button" class="btn tag" data-toggle="button" aria-pressed="false">Theme Tag 4</button></div>
</div>
</li>
</ul>
</div>
</div>
</div>
.filters {
display: flex;
align-items: center;
.filters-active-list {
flex: 1;
list-style: none;
padding-left: 0;
margin-bottom: 0;
display: flex;
align-items: center;
overflow: auto;
}
.filters-active-item {
@include typeBody(true);
display: inline-block;
white-space: nowrap;
padding: 0.8rem;
color: $color-base-blue;
background-color: $color-base-grey;
margin-right: 0.8rem;
@media (min-width: $breakpoint-desktop) {
@include typeSubheader(true);
padding: 1.2rem;
}
&:hover {
text-decoration: none;
color: $color-blue-medium;
background-color: $color-base-white;
}
}
.dropdown-menu {
padding: 2.4rem;
ul {
padding-left: 0;
list-style: none;
}
a {
color: $color-blue-medium;
font-weight: bold;
&:hover {
color: $color-blue-dark;
background-color: transparent;
}
}
.dropdown.open > .dropdown-menu {
max-height: calc(100vh - 5.4rem);
overflow: auto;
min-width: 32rem;
}
.filter-title {
@include typeBody(true);
color: $color-blue-medium;
margin: 0.8rem 0;
}
}
.filter-group {
margin-bottom: 2.4rem;
.filter-group {
margin-left: 2.4rem;
margin-bottom: 0;
}
}
.tags-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.tag {
@include typeCaption;
background-color: $color-base-grey;
color: $color-base-blue;
&.active {
background-color: $color-blue-medium;
color: $color-base-white;
}
}
.has-toggle {
margin-bottom: 0;
}
a.toggle-icon {
font-family: "FontAwesome";
text-decoration: none;
&[aria-expanded="false"]::before {
content: "\f078";
}
&[aria-expanded="true"]::before {
content: "\f077";
}
}
}
$(document).on("click", ".js-allow-focus", function (e) {
e.stopPropagation();
});
$(document).ready(function () {
$(".js-daterange input").datepicker({});
$(".js-datepicker").datepicker({
format: "M-dd",
todayHighlight: true,
});
});