You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.7 KiB
HTML
78 lines
2.7 KiB
HTML
---
|
|
layout: default
|
|
title: Shuffle Compound Filters Demo
|
|
description: A demo with compound filtering
|
|
image: /demos/adaptive.jpg
|
|
extraJS: [ "demos/compound-filters.js" ]
|
|
prism: true
|
|
---
|
|
|
|
<section class="container">
|
|
<div class="row">
|
|
<h2 class="col-12@sm">Compound Filters</h2>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container">
|
|
|
|
<div class="filter-options filter-options--compound row">
|
|
|
|
<div class="col-6@sm">
|
|
<div class="filter-group filter-group--compound js-colors">
|
|
<h5 class="filter-group__label filter-group__label--compound">Colors</h5>
|
|
<button class="btn btn--go" data-value="green"><span class="visuallyhidden">Green</span></button>
|
|
<button class="btn btn--primary" data-value="blue"><span class="visuallyhidden">Blue</span></button>
|
|
<button class="btn btn--danger" data-value="red"><span class="visuallyhidden">Red</span></button>
|
|
<button class="btn btn--warning" data-value="orange"><span class="visuallyhidden">Orange</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6@sm">
|
|
<div class="filter-group filter-group--compound js-shapes">
|
|
<h5 class="filter-group__label filter-group__label--compound">Shapes</h5>
|
|
<span class="ib">
|
|
<input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
|
|
</span>
|
|
<span class="ib">
|
|
<input type="checkbox" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
|
|
</span>
|
|
<span class="ib">
|
|
<input type="checkbox" value="square" id="cb-square"> <label for="cb-square">Square</label>
|
|
</span>
|
|
<span class="ib">
|
|
<input type="checkbox" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="shape-shuffle-container js-shuffle">
|
|
{% for shape in site.shapes %}
|
|
<div class="col-3@xs col-3@sm shape shape--{{ shape.shape }} shape--{{ shape.color }}" data-shape="{{ shape.shape }}" data-color="{{ shape.color }}">
|
|
<div class="aspect">
|
|
<div class="aspect__inner">
|
|
<div class="shape__space"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<div class="the-sizer col-1@xs col-1@sm"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div class="container has-code-block">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Source code for this demo</h2>
|
|
<p>Link to <a href="{{ site.baseurl }}/js/demos/compound-filters.js">demo source</a></p>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript" data-src="{{ site.baseurl }}/js/demos/compound-filters.js"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|