soc-core
Version:
Core sass framework based on Bootstrap
71 lines (67 loc) • 2.52 kB
HTML
<div class="soc-sidebar-wrapper">
<div class="soc-search">
<div class="soc-search-filterbar">
<div class="soc-search-filter filter1">
<!-- <span class="fa-stack">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-times fa-stack-1x"></i>
</span> -->
<i class="fa fa-times fa-lg"></i>
</div>
<div class="soc-search-filter filter2">
<i class="fa fa-check fa-lg"></i>
</div>
<div class="soc-search-filter filter3">
<i class="fa fa-times fa-lg"></i>
</div>
<div class="soc-search-filter filter4">
<i class="fa fa-times fa-lg"></i>
</div>
<div class="soc-search-filter filter5">
<i class="fa fa-check fa-lg"></i>
</div>
</div>
<div class="soc-search-form">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<form>
<div class="form-group">
<label for="firstnameSearch">First name</label>
<input type="text" class="form-control" id="firstnameSearch" placeholder="First name">
</div>
<div class="form-group">
<label for="nameSearch">Name</label>
<input type="text" class="form-control" id="nameSearch" placeholder="Name">
</div>
<div class="form-group">
<p class="soc-searchinfo">Make sure you fill both fields</p>
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
</div>
</div>
</div>
<div class="btn soc-search-button">
<i class="fa fa-filter" aria-hidden="true"></i> Filter & zoek
</div>
</div>
<div class="soc-sidebar-content">
<div class="soc-searchitem filter2 searchContent2"></div>
<div class="soc-searchitem filter1 searchContent1"></div>
<div class="soc-searchitem filter3 searchContent2"></div>
<div class="soc-searchitem filter3 searchContent3"></div>
<div class="soc-searchitem filter5 searchContent1"></div>
<div class="soc-searchitem searchContent3"></div>
<div class="soc-searchitem filter5 searchContent2"></div>
</div>
<div class="soc-searchresult">
<div class="badge badge-info">6</div>
</div>
<div class="soc-actionbar">
<button class="soc-actionbutton">
<i class="fa fa-plus" aria-hidden="true"></i><br>Nieuw
</button>
</div>
</div>