Initial v3.3.6
This commit is contained in:
116
demos/checkboxes/index.html
Normal file
116
demos/checkboxes/index.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Checkboxes</title>
|
||||
</head>
|
||||
<body>
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<fieldset data-filter-group class="checkbox-group">
|
||||
<label class="checkbox-group-label">Color</label>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Green</label>
|
||||
<input type="checkbox" value=".green"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Blue</label>
|
||||
<input type="checkbox" value=".blue"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Pink</label>
|
||||
<input type="checkbox" value=".pink"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="checkbox-group">
|
||||
<label class="checkbox-group-label">Shape</label>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Square</label>
|
||||
<input type="checkbox" value=".square"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Circle</label>
|
||||
<input type="checkbox" value=".circle"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Triangle</label>
|
||||
<input type="checkbox" value=".triangle"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="checkbox-group">
|
||||
<label class="checkbox-group-label">Size</label>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Small</label>
|
||||
<input type="checkbox" value=".small"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Medium</label>
|
||||
<input type="checkbox" value=".medium"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Large</label>
|
||||
<input type="checkbox" value=".large"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square"></div>
|
||||
<div class="mix green medium square"></div>
|
||||
<div class="mix blue large triangle"></div>
|
||||
<div class="mix pink large circle"></div>
|
||||
<div class="mix green small circle"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink medium square"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink small circle"></div>
|
||||
<div class="mix green large triangle"></div>
|
||||
<div class="mix blue small square"></div>
|
||||
<div class="mix pink small square"></div>
|
||||
<div class="mix green large square"></div>
|
||||
<div class="mix blue large circle"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
266
demos/checkboxes/style.css
Normal file
266
demos/checkboxes/style.css
Normal file
@@ -0,0 +1,266 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #2a2a2a;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.checkbox:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-input,
|
||||
.checkbox-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox-group-label,
|
||||
.checkbox-label {
|
||||
color: white;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.checkbox-group-label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
86
demos/filters-and-toggles/index.html
Normal file
86
demos/filters-and-toggles/index.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Filter and Toggle Controls</title>
|
||||
</head>
|
||||
<body>
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<fieldset data-filter-group class="control-group">
|
||||
<label class="control-group-label">Color</label>
|
||||
|
||||
<button type="button" class="control control-text" data-filter=".mix">All</button>
|
||||
<button type="button" class="control control-color" data-toggle=".green">Green</button>
|
||||
<button type="button" class="control control-color" data-toggle=".blue">Blue</button>
|
||||
<button type="button" class="control control-color" data-toggle=".pink">Pink</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="control-group">
|
||||
<label class="control-group-label">Shape</label>
|
||||
|
||||
<button type="button" class="control control-text" data-filter=".mix">All</button>
|
||||
<button type="button" class="control control-shape" data-toggle=".square">Square</button>
|
||||
<button type="button" class="control control-shape" data-toggle=".circle">Circle</button>
|
||||
<button type="button" class="control control-shape" data-toggle=".triangle">Triangle</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="control-group">
|
||||
<label class="control-group-label">Size</label>
|
||||
|
||||
<button type="button" class="control control-text" data-filter=".mix">All</button>
|
||||
<button type="button" class="control control-size" data-toggle=".small">Small</button>
|
||||
<button type="button" class="control control-size" data-toggle=".medium">Medium</button>
|
||||
<button type="button" class="control control-size" data-toggle=".large">Large</button>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square"></div>
|
||||
<div class="mix green medium square"></div>
|
||||
<div class="mix blue large triangle"></div>
|
||||
<div class="mix pink large circle"></div>
|
||||
<div class="mix green small circle"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink medium square"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink small circle"></div>
|
||||
<div class="mix green large triangle"></div>
|
||||
<div class="mix blue small square"></div>
|
||||
<div class="mix pink small square"></div>
|
||||
<div class="mix green large square"></div>
|
||||
<div class="mix blue large circle"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
301
demos/filters-and-toggles/style.css
Normal file
301
demos/filters-and-toggles/style.css
Normal file
@@ -0,0 +1,301 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-color:after,
|
||||
.control-shape:after,
|
||||
.control-size:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.control-color:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".square"]:after,
|
||||
.control-shape[data-toggle=".circle"]:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 5px);
|
||||
left: calc(50% - 5px);
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".circle"]:after {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".triangle"]:after {
|
||||
border: 6px solid transparent;
|
||||
border-bottom: 9px solid white;
|
||||
top: calc(50% - 10px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: calc(50% - 4px);
|
||||
left: calc(50% - 4px);
|
||||
border: 2px solid white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-size[data-toggle=".medium"]:after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size[data-toggle=".large"]:after {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: calc(50% - 8px);
|
||||
left: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
83
demos/filters/index.html
Normal file
83
demos/filters/index.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Filter Controls</title>
|
||||
</head>
|
||||
<body>
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<fieldset data-filter-group class="control-group">
|
||||
<label class="control-group-label">Color</label>
|
||||
|
||||
<button type="button" class="control control-color" data-filter=".green">Green</button>
|
||||
<button type="button" class="control control-color" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control control-color" data-filter=".pink">Pink</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="control-group">
|
||||
<label class="control-group-label">Shape</label>
|
||||
|
||||
<button type="button" class="control control-shape" data-filter=".square">Square</button>
|
||||
<button type="button" class="control control-shape" data-filter=".circle">Circle</button>
|
||||
<button type="button" class="control control-shape" data-filter=".triangle">Triangle</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="control-group">
|
||||
<label class="control-group-label">Size</label>
|
||||
|
||||
<button type="button" class="control control-size" data-filter=".small">Small</button>
|
||||
<button type="button" class="control control-size" data-filter=".medium">Medium</button>
|
||||
<button type="button" class="control control-size" data-filter=".large">Large</button>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square"></div>
|
||||
<div class="mix green medium square"></div>
|
||||
<div class="mix blue large triangle"></div>
|
||||
<div class="mix pink large circle"></div>
|
||||
<div class="mix green small circle"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink medium square"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink small circle"></div>
|
||||
<div class="mix green large triangle"></div>
|
||||
<div class="mix blue small square"></div>
|
||||
<div class="mix pink small square"></div>
|
||||
<div class="mix green large square"></div>
|
||||
<div class="mix blue large circle"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
300
demos/filters/style.css
Normal file
300
demos/filters/style.css
Normal file
@@ -0,0 +1,300 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-color:after,
|
||||
.control-shape:after,
|
||||
.control-size:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.control-color:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control-color[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control-color[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control-color[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control-shape[data-filter=".square"]:after,
|
||||
.control-shape[data-filter=".circle"]:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 5px);
|
||||
left: calc(50% - 5px);
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-shape[data-filter=".circle"]:after {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.control-shape[data-filter=".triangle"]:after {
|
||||
border: 6px solid transparent;
|
||||
border-bottom: 9px solid white;
|
||||
top: calc(50% - 10px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: calc(50% - 4px);
|
||||
left: calc(50% - 4px);
|
||||
border: 2px solid white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-size[data-filter=".medium"]:after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size[data-filter=".large"]:after {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: calc(50% - 8px);
|
||||
left: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
23
demos/index.html
Normal file
23
demos/index.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MixItUp Multifilter Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>MixItUp Multifilter Demos</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="./filters/">Filter Controls</a></li>
|
||||
<li><a href="./toggles/">Toggle Controls</a></li>
|
||||
<li><a href="./filters-and-toggles/">Filter and Toggle Controls</a></li>
|
||||
<li><a href="./checkboxes/">Checkboxes</a></li>
|
||||
<li><a href="./radios/">Radios</a></li>
|
||||
<li><a href="./selects/">Selects</a></li>
|
||||
<li><a href="./text-inputs/">Text Inputs</a></li>
|
||||
|
||||
<li><a href="./programmatic-filtering-on-click/">Programmatic Filtering on Click</a></li>
|
||||
<li><a href="./programmatic-filtering-by-url/">Programmatic Filtering by URL</a></li>
|
||||
<li><a href="./programmatic-filtering-by-url-with-pagination/">Programmatic Filtering by URL with Pagination (requires Pagination extension)</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
18
demos/mixitup-multifilter.min.js
vendored
Normal file
18
demos/mixitup-multifilter.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
18
demos/mixitup.min.js
vendored
Normal file
18
demos/mixitup.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
307
demos/programmatic-filtering-by-url-with-pagination/index.html
Normal file
307
demos/programmatic-filtering-by-url-with-pagination/index.html
Normal file
@@ -0,0 +1,307 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Programmatic Filtering by URL with Pagination</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
This demo will show how we can programmatically set both our multifilter UI
|
||||
and the mixer simultanesouly on page load.
|
||||
|
||||
Click on some filters to create your desired filtering then refresh the page.
|
||||
|
||||
This demo also includes functionality to include current page number in the URL,
|
||||
for those users who wish to use the Pagination and MultiFilter extensions together.
|
||||
-->
|
||||
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<!-- NB: Each filter group has been named by providing a value to the `data-filter-group` attribute -->
|
||||
|
||||
<fieldset data-filter-group="color" class="control-group">
|
||||
<label class="control-group-label">Color</label>
|
||||
|
||||
<button type="button" class="control control-color" data-toggle=".green">Green</button>
|
||||
<button type="button" class="control control-color" data-toggle=".blue">Blue</button>
|
||||
<button type="button" class="control control-color" data-toggle=".pink">Pink</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group="shape" class="control-group">
|
||||
<label class="control-group-label">Shape</label>
|
||||
|
||||
<button type="button" class="control control-shape" data-toggle=".square">Square</button>
|
||||
<button type="button" class="control control-shape" data-toggle=".circle">Circle</button>
|
||||
<button type="button" class="control control-shape" data-toggle=".triangle">Triangle</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group="size" class="control-group">
|
||||
<label class="control-group-label">Size</label>
|
||||
|
||||
<button type="button" class="control control-size" data-toggle=".small">Small</button>
|
||||
<button type="button" class="control control-size" data-toggle=".medium">Medium</button>
|
||||
<button type="button" class="control control-size" data-toggle=".large">Large</button>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square"></div>
|
||||
<div class="mix green medium square"></div>
|
||||
<div class="mix blue large triangle"></div>
|
||||
<div class="mix pink large circle"></div>
|
||||
<div class="mix green small circle"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink medium square"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink small circle"></div>
|
||||
<div class="mix green large triangle"></div>
|
||||
<div class="mix blue small square"></div>
|
||||
<div class="mix pink small square"></div>
|
||||
<div class="mix green large square"></div>
|
||||
<div class="mix blue large circle"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<div class="controls-pagination">
|
||||
<div class="mixitup-page-list"></div>
|
||||
<div class="mixitup-page-stats"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<!--
|
||||
This demo requires the Pagination premium extension. Update the following
|
||||
script tag's `src` to a valid reference on your filesystem:
|
||||
-->
|
||||
|
||||
<script src="../path/to/your/mixitup-pagination.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
var targetSelector = '.mix';
|
||||
var activeHash = '';
|
||||
var activePage = -1;
|
||||
|
||||
/**
|
||||
* Deserializes a hash segment (if present) into in an object.
|
||||
*
|
||||
* @return {object|null}
|
||||
*/
|
||||
|
||||
function deserializeHash() {
|
||||
var hash = window.location.hash.replace(/^#/g, '');
|
||||
var obj = null;
|
||||
var props = [];
|
||||
|
||||
if (!hash) return obj;
|
||||
|
||||
obj = {};
|
||||
props = hash.split('&');
|
||||
|
||||
props.forEach(function(props) {
|
||||
var pair = props.split('=');
|
||||
var propName = pair[0];
|
||||
|
||||
obj[propName] = propName === 'page' ? parseInt(pair[1]) : pair[1].split(',');
|
||||
});
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* Serializes a uiState object into a string.
|
||||
*
|
||||
* @param {object} uiState
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function serializeUiState(uiState) {
|
||||
var output = '';
|
||||
|
||||
for (var key in uiState) {
|
||||
var values = uiState[key];
|
||||
|
||||
if (Array.isArray(values) && !values.length) continue;
|
||||
|
||||
output += key + '=';
|
||||
output += Array.isArray(values) ? values.join(',') : values;
|
||||
output += '&';
|
||||
};
|
||||
|
||||
output = output.replace(/&$/g, '');
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructs a `uiState` object using the
|
||||
* `getFilterGroupSelectors()` API method.
|
||||
*
|
||||
* @return {object}
|
||||
*/
|
||||
|
||||
function getUiState() {
|
||||
var page = mixer.getState().activePagination.page;
|
||||
|
||||
// NB: You will need to rename the following keys to match the names of
|
||||
// your project's filter groups – these should match those defined
|
||||
// in your HTML.
|
||||
|
||||
var uiState = {
|
||||
color: mixer.getFilterGroupSelectors('color').map(getValueFromSelector),
|
||||
shape: mixer.getFilterGroupSelectors('shape').map(getValueFromSelector),
|
||||
size: mixer.getFilterGroupSelectors('size').map(getValueFromSelector)
|
||||
};
|
||||
|
||||
if (page > 1) {
|
||||
uiState.page = page;
|
||||
}
|
||||
|
||||
return uiState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the URL hash whenever the current UI state changes.
|
||||
*
|
||||
* @param {mixitup.State} state
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function setHash(state) {
|
||||
var selector = state.activeFilter.selector;
|
||||
|
||||
// Construct an object representing the current state of each
|
||||
// filter group
|
||||
|
||||
var uiState = getUiState();
|
||||
var page = uiState.page || 1;
|
||||
|
||||
// Create a URL hash string by serializing the uiState object
|
||||
|
||||
var newHash = '#' + serializeUiState(uiState);
|
||||
|
||||
if (selector === targetSelector && window.location.href.indexOf('#') > -1 && page === 1) {
|
||||
// Equivalent to filter "all", and a hash exists, remove the hash
|
||||
|
||||
activeHash = '';
|
||||
|
||||
history.replaceState(null, document.title, window.location.pathname);
|
||||
} else if (newHash !== window.location.hash && selector !== targetSelector || page > 1) {
|
||||
// Change the hash
|
||||
|
||||
activeHash = newHash;
|
||||
|
||||
history.replaceState(null, document.title, window.location.pathname + newHash);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the mixer to a previous UI state.
|
||||
*
|
||||
* @param {object|null} uiState
|
||||
* @param {boolean} [animate]
|
||||
* @return {Promise}
|
||||
*/
|
||||
|
||||
function syncMixerWithPreviousUiState(uiState, animate) {
|
||||
var color = (uiState && uiState.color) ? uiState.color : [];
|
||||
var size = (uiState && uiState.size) ? uiState.size : [];
|
||||
var shape = (uiState && uiState.shape) ? uiState.shape : [];
|
||||
|
||||
activePage = (uiState && uiState.page) ? uiState.page : 1;
|
||||
|
||||
mixer.setFilterGroupSelectors('color', color.map(getSelectorFromValue));
|
||||
mixer.setFilterGroupSelectors('size', size.map(getSelectorFromValue));
|
||||
mixer.setFilterGroupSelectors('shape', shape.map(getSelectorFromValue));
|
||||
|
||||
// Parse the filter groups (passing `false` will perform no animation)
|
||||
|
||||
return mixer.parseFilterGroups(animate ? true : false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a selector (e.g. '.green') into a simple value (e.g. 'green').
|
||||
*
|
||||
* @param {string} selector
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function getValueFromSelector(selector) {
|
||||
return selector.replace(/^./, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a simple value (e.g. 'green') into a selector (e.g. '.green').
|
||||
*
|
||||
* @param {string} selector
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function getSelectorFromValue(value) {
|
||||
return '.' + value;
|
||||
}
|
||||
|
||||
/**
|
||||
* A function for filtering the values of the mixitup command object
|
||||
* generated by calling the `parseFilterGroups()` method.
|
||||
*
|
||||
* @param {object} command
|
||||
* @return {object}
|
||||
*/
|
||||
|
||||
function handleParseFilterGroups(command) {
|
||||
if (activePage > 1) {
|
||||
// If an activePage greater than 1 has been parsed
|
||||
// from the URL, update the command with a pagination
|
||||
// instruction
|
||||
|
||||
command.paginate = activePage;
|
||||
}
|
||||
|
||||
return command;
|
||||
}
|
||||
|
||||
var uiState = deserializeHash();
|
||||
|
||||
// Instantiate MixItUp
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
pagination: {
|
||||
limit: 4,
|
||||
maintainActivePage: false
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
},
|
||||
callbacks: {
|
||||
onParseFilterGroups: handleParseFilterGroups,
|
||||
onMixEnd: setHash // Call the setHash() method at the end of each operation
|
||||
}
|
||||
});
|
||||
|
||||
if (uiState) {
|
||||
// If a valid uiState object is present on page load, filter the mixer
|
||||
|
||||
syncMixerWithPreviousUiState(uiState);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
378
demos/programmatic-filtering-by-url-with-pagination/style.css
Normal file
378
demos/programmatic-filtering-by-url-with-pagination/style.css
Normal file
@@ -0,0 +1,378 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-color:after,
|
||||
.control-shape:after,
|
||||
.control-size:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.control-color:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".square"]:after,
|
||||
.control-shape[data-toggle=".circle"]:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 5px);
|
||||
left: calc(50% - 5px);
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".circle"]:after {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".triangle"]:after {
|
||||
border: 6px solid transparent;
|
||||
border-bottom: 9px solid white;
|
||||
top: calc(50% - 10px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: calc(50% - 4px);
|
||||
left: calc(50% - 4px);
|
||||
border: 2px solid white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-size[data-toggle=".medium"]:after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size[data-toggle=".large"]:after {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: calc(50% - 8px);
|
||||
left: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Pagination Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls-pagination {
|
||||
padding: 1rem;
|
||||
font-size: 0.1px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.controls-pagination:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mixitup-page-list,
|
||||
.mixitup-page-stats {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mixitup-page-list {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mixitup-page-stats {
|
||||
font-size: .9rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-family: 'helvetica', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mixitup-control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #fff;
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-right: 1px;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-family: 'helvetica', arial, sans-serif;
|
||||
transition: color 150ms, border-color 150ms;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mixitup-control:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.mixitup-control:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.mixitup-control:not(.mixitup-control-active):hover {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
border-bottom-color: #91e6c7;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mixitup-control:disabled {
|
||||
background: #eaeaea;
|
||||
color: #aaa;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mixitup-control-truncation-marker {
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
line-height: 2.2em;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
257
demos/programmatic-filtering-by-url/index.html
Normal file
257
demos/programmatic-filtering-by-url/index.html
Normal file
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Programmatic Filtering by URL</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
This demo will show how we can programmatically set both our multifilter UI
|
||||
and the mixer simultanesouly on page load.
|
||||
|
||||
Click on some filters to create your desired filtering then refresh the page.
|
||||
-->
|
||||
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<!-- NB: Each filter group has been named by providing a value to the `data-filter-group` attribute -->
|
||||
|
||||
<fieldset data-filter-group="color" class="control-group">
|
||||
<label class="control-group-label">Color</label>
|
||||
|
||||
<button type="button" class="control control-color" data-toggle=".green">Green</button>
|
||||
<button type="button" class="control control-color" data-toggle=".blue">Blue</button>
|
||||
<button type="button" class="control control-color" data-toggle=".pink">Pink</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group="shape" class="control-group">
|
||||
<label class="control-group-label">Shape</label>
|
||||
|
||||
<button type="button" class="control control-shape" data-toggle=".square">Square</button>
|
||||
<button type="button" class="control control-shape" data-toggle=".circle">Circle</button>
|
||||
<button type="button" class="control control-shape" data-toggle=".triangle">Triangle</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group="size" class="control-group">
|
||||
<label class="control-group-label">Size</label>
|
||||
|
||||
<button type="button" class="control control-size" data-toggle=".small">Small</button>
|
||||
<button type="button" class="control control-size" data-toggle=".medium">Medium</button>
|
||||
<button type="button" class="control control-size" data-toggle=".large">Large</button>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square"></div>
|
||||
<div class="mix green medium square"></div>
|
||||
<div class="mix blue large triangle"></div>
|
||||
<div class="mix pink large circle"></div>
|
||||
<div class="mix green small circle"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink medium square"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink small circle"></div>
|
||||
<div class="mix green large triangle"></div>
|
||||
<div class="mix blue small square"></div>
|
||||
<div class="mix pink small square"></div>
|
||||
<div class="mix green large square"></div>
|
||||
<div class="mix blue large circle"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
var targetSelector = '.mix';
|
||||
var activeHash = '';
|
||||
|
||||
/**
|
||||
* Deserializes a hash segment (if present) into in an object.
|
||||
*
|
||||
* @return {object|null}
|
||||
*/
|
||||
|
||||
function deserializeHash() {
|
||||
var hash = window.location.hash.replace(/^#/g, '');
|
||||
var obj = null;
|
||||
var groups = [];
|
||||
|
||||
if (!hash) return obj;
|
||||
|
||||
obj = {};
|
||||
groups = hash.split('&');
|
||||
|
||||
groups.forEach(function(group) {
|
||||
var pair = group.split('=');
|
||||
var groupName = pair[0];
|
||||
|
||||
obj[groupName] = pair[1].split(',');
|
||||
});
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* Serializes a uiState object into a string.
|
||||
*
|
||||
* @param {object} uiState
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function serializeUiState(uiState) {
|
||||
var output = '';
|
||||
|
||||
for (var key in uiState) {
|
||||
var values = uiState[key];
|
||||
|
||||
if (!values.length) continue;
|
||||
|
||||
output += key + '=';
|
||||
output += values.join(',');
|
||||
output += '&';
|
||||
};
|
||||
|
||||
output = output.replace(/&$/g, '');
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructs a `uiState` object using the
|
||||
* `getFilterGroupSelectors()` API method.
|
||||
*
|
||||
* @return {object}
|
||||
*/
|
||||
|
||||
function getUiState() {
|
||||
// NB: You will need to rename the object keys to match the names of
|
||||
// your project's filter groups – these should match those defined
|
||||
// in your HTML.
|
||||
|
||||
var uiState = {
|
||||
color: mixer.getFilterGroupSelectors('color').map(getValueFromSelector),
|
||||
shape: mixer.getFilterGroupSelectors('shape').map(getValueFromSelector),
|
||||
size: mixer.getFilterGroupSelectors('size').map(getValueFromSelector)
|
||||
};
|
||||
|
||||
return uiState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the URL hash whenever the current filter changes.
|
||||
*
|
||||
* @param {mixitup.State} state
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function setHash(state) {
|
||||
var selector = state.activeFilter.selector;
|
||||
|
||||
// Construct an object representing the current state of each
|
||||
// filter group
|
||||
|
||||
var uiState = getUiState();
|
||||
|
||||
// Create a URL hash string by serializing the uiState object
|
||||
|
||||
var newHash = '#' + serializeUiState(uiState);
|
||||
|
||||
if (selector === targetSelector && window.location.href.indexOf('#') > -1) {
|
||||
// Equivalent to filter "all", and a hash exists, remove the hash
|
||||
|
||||
activeHash = '';
|
||||
|
||||
history.replaceState(null, document.title, window.location.pathname);
|
||||
} else if (newHash !== window.location.hash && selector !== targetSelector) {
|
||||
// Change the hash
|
||||
|
||||
activeHash = newHash;
|
||||
|
||||
history.replaceState(null, document.title, window.location.pathname + newHash);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the mixer to a previous UI state.
|
||||
*
|
||||
* @param {object|null} uiState
|
||||
* @param {boolean} [animate]
|
||||
* @return {Promise}
|
||||
*/
|
||||
|
||||
function syncMixerWithPreviousUiState(uiState, animate) {
|
||||
var color = (uiState && uiState.color) ? uiState.color : [];
|
||||
var size = (uiState && uiState.size) ? uiState.size : [];
|
||||
var shape = (uiState && uiState.shape) ? uiState.shape : [];
|
||||
|
||||
mixer.setFilterGroupSelectors('color', color.map(getSelectorFromValue));
|
||||
mixer.setFilterGroupSelectors('size', size.map(getSelectorFromValue));
|
||||
mixer.setFilterGroupSelectors('shape', shape.map(getSelectorFromValue));
|
||||
|
||||
// Parse the filter groups (passing `false` will perform no animation)
|
||||
|
||||
return mixer.parseFilterGroups(animate ? true : false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a selector (e.g. '.green') into a simple value (e.g. 'green').
|
||||
*
|
||||
* @param {string} selector
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function getValueFromSelector(selector) {
|
||||
return selector.replace(/^./, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a simple value (e.g. 'green') into a selector (e.g. '.green').
|
||||
*
|
||||
* @param {string} selector
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function getSelectorFromValue(value) {
|
||||
return '.' + value;
|
||||
}
|
||||
|
||||
var uiState = deserializeHash();
|
||||
|
||||
// Instantiate MixItUp
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
},
|
||||
callbacks: {
|
||||
onMixEnd: setHash // Call the setHash() method at the end of each operation
|
||||
}
|
||||
});
|
||||
|
||||
if (uiState) {
|
||||
// If a valid uiState object is present on page load, filter the mixer
|
||||
|
||||
syncMixerWithPreviousUiState(uiState);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
300
demos/programmatic-filtering-by-url/style.css
Normal file
300
demos/programmatic-filtering-by-url/style.css
Normal file
@@ -0,0 +1,300 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-color:after,
|
||||
.control-shape:after,
|
||||
.control-size:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.control-color:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".square"]:after,
|
||||
.control-shape[data-toggle=".circle"]:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 5px);
|
||||
left: calc(50% - 5px);
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".circle"]:after {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".triangle"]:after {
|
||||
border: 6px solid transparent;
|
||||
border-bottom: 9px solid white;
|
||||
top: calc(50% - 10px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: calc(50% - 4px);
|
||||
left: calc(50% - 4px);
|
||||
border: 2px solid white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-size[data-toggle=".medium"]:after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size[data-toggle=".large"]:after {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: calc(50% - 8px);
|
||||
left: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
126
demos/programmatic-filtering-on-click/index.html
Normal file
126
demos/programmatic-filtering-on-click/index.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Programmatic Filtering on Click</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
This demo will show how we can programmatically update both our multifilter UI
|
||||
and the mixer simultanesouly, using the `setFilterGroupSelectors()` and
|
||||
`parseSelectorGroups()` API methods.
|
||||
|
||||
Click on a target in the container, and the container will be filtered according
|
||||
to that target's attributes.
|
||||
-->
|
||||
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<!-- NB: Each filter group has been named by providing a value to the `data-filter-group` attribute -->
|
||||
|
||||
<fieldset data-filter-group="color" class="select-wrapper">
|
||||
<select>
|
||||
<option value="">Color</option>
|
||||
<option value=".green">Green</option>
|
||||
<option value=".blue">Blue</option>
|
||||
<option value=".pink">Pink</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group="shape" class="select-wrapper">
|
||||
<select>
|
||||
<option value="">Shape</option>
|
||||
<option value=".square">Square</option>
|
||||
<option value=".circle">Circle</option>
|
||||
<option value=".triangle">Triangle</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group="size" class="select-wrapper">
|
||||
<select>
|
||||
<option value="">Size</option>
|
||||
<option value=".small">Small</option>
|
||||
<option value=".medium">Medium</option>
|
||||
<option value=".large">Large</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square" data-color="green" data-size="small" data-shape="square"></div>
|
||||
<div class="mix green medium square" data-color="green" data-size="medium" data-shape="square"></div>
|
||||
<div class="mix blue large triangle" data-color="blue" data-size="large" data-shape="triangle"></div>
|
||||
<div class="mix pink large circle" data-color="pink" data-size="large" data-shape="circle"></div>
|
||||
<div class="mix green small circle" data-color="green" data-size="small" data-shape="circle"></div>
|
||||
<div class="mix blue medium triangle" data-color="blue" data-size="medium" data-shape="triangle"></div>
|
||||
<div class="mix pink medium square" data-color="pink" data-size="medium" data-shape="square"></div>
|
||||
<div class="mix blue medium triangle" data-color="blue" data-size="medium" data-shape="triangle"></div>
|
||||
<div class="mix pink small circle" data-color="pink" data-size="small" data-shape="circle"></div>
|
||||
<div class="mix green large triangle" data-color="green" data-size="large" data-shape="triangle"></div>
|
||||
<div class="mix blue small square" data-color="blue" data-size="small" data-shape="square"></div>
|
||||
<div class="mix pink small square" data-color="pink" data-size="small" data-shape="square"></div>
|
||||
<div class="mix green large square" data-color="green" data-size="large" data-shape="square"></div>
|
||||
<div class="mix blue large circle" data-color="blue" data-size="large" data-shape="circle"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
}
|
||||
});
|
||||
|
||||
// Add a delegated click event handler to the container
|
||||
|
||||
containerEl.addEventListener('click', handleContainerClick);
|
||||
|
||||
function handleContainerClick(e) {
|
||||
var color, size, shape;
|
||||
var target = e.target;
|
||||
|
||||
// If the clicked element is not a target, do not handle
|
||||
|
||||
if (!target.matches('.mix')) return;
|
||||
|
||||
// Build up a selector for each group using the data attributes present on the target
|
||||
|
||||
color = '.' + target.getAttribute('data-color');
|
||||
size = '.' + target.getAttribute('data-size');
|
||||
shape = '.' + target.getAttribute('data-shape');
|
||||
|
||||
// Set the active filter
|
||||
|
||||
mixer.setFilterGroupSelectors('color', color);
|
||||
mixer.setFilterGroupSelectors('size', size);
|
||||
mixer.setFilterGroupSelectors('shape', shape);
|
||||
|
||||
// Now that each group has been udpated, parse the filter groups and filter the container
|
||||
|
||||
mixer.parseFilterGroups();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
234
demos/programmatic-filtering-on-click/style.css
Normal file
234
demos/programmatic-filtering-on-click/style.css
Normal file
@@ -0,0 +1,234 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #2a2a2a;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
116
demos/radios/index.html
Normal file
116
demos/radios/index.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Radios</title>
|
||||
</head>
|
||||
<body>
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<fieldset data-filter-group class="radio-group">
|
||||
<label class="radio-group-label">Color</label>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Green</label>
|
||||
<input type="radio" name="color" value=".green"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Blue</label>
|
||||
<input type="radio" name="color" value=".blue"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Pink</label>
|
||||
<input type="radio" name="color" value=".pink"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="radio-group">
|
||||
<label class="radio-group-label">Shape</label>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Square</label>
|
||||
<input type="radio" name="shape" value=".square"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Circle</label>
|
||||
<input type="radio" name="shape" value=".circle"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Triangle</label>
|
||||
<input type="radio" name="shape" value=".triangle"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="radio-group">
|
||||
<label class="radio-group-label">Size</label>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Small</label>
|
||||
<input type="radio" name="size" value=".small"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Medium</label>
|
||||
<input type="radio" name="size" value=".medium"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Large</label>
|
||||
<input type="radio" name="size" value=".large"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square"></div>
|
||||
<div class="mix green medium square"></div>
|
||||
<div class="mix blue large triangle"></div>
|
||||
<div class="mix pink large circle"></div>
|
||||
<div class="mix green small circle"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink medium square"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink small circle"></div>
|
||||
<div class="mix green large triangle"></div>
|
||||
<div class="mix blue small square"></div>
|
||||
<div class="mix pink small square"></div>
|
||||
<div class="mix green large square"></div>
|
||||
<div class="mix blue large circle"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
266
demos/radios/style.css
Normal file
266
demos/radios/style.css
Normal file
@@ -0,0 +1,266 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #2a2a2a;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.radio {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.radio:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.radio-input,
|
||||
.radio-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.radio-group-label,
|
||||
.radio-label {
|
||||
color: white;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.radio-group-label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
72
demos/reset.css
Normal file
72
demos/reset.css
Normal file
@@ -0,0 +1,72 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
86
demos/selects/index.html
Normal file
86
demos/selects/index.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Selects</title>
|
||||
</head>
|
||||
<body>
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<fieldset data-filter-group class="select-wrapper">
|
||||
<select>
|
||||
<option value="">Color</option>
|
||||
<option value=".green">Green</option>
|
||||
<option value=".blue">Blue</option>
|
||||
<option value=".pink">Pink</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="select-wrapper">
|
||||
<select>
|
||||
<option value="">Shape</option>
|
||||
<option value=".square">Square</option>
|
||||
<option value=".circle">Circle</option>
|
||||
<option value=".triangle">Triangle</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="select-wrapper">
|
||||
<select>
|
||||
<option value="">Size</option>
|
||||
<option value=".small">Small</option>
|
||||
<option value=".medium">Medium</option>
|
||||
<option value=".large">Large</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square"></div>
|
||||
<div class="mix green medium square"></div>
|
||||
<div class="mix blue large triangle"></div>
|
||||
<div class="mix pink large circle"></div>
|
||||
<div class="mix green small circle"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink medium square"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink small circle"></div>
|
||||
<div class="mix green large triangle"></div>
|
||||
<div class="mix blue small square"></div>
|
||||
<div class="mix pink small square"></div>
|
||||
<div class="mix green large square"></div>
|
||||
<div class="mix blue large circle"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
234
demos/selects/style.css
Normal file
234
demos/selects/style.css
Normal file
@@ -0,0 +1,234 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #2a2a2a;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
71
demos/text-inputs/index.html
Normal file
71
demos/text-inputs/index.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Text Inputs</title>
|
||||
</head>
|
||||
<body>
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<fieldset data-filter-group class="text-input-wrapper">
|
||||
<input type="text" data-search-attribute="data-color" placeholder="Search by color"/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="text-input-wrapper">
|
||||
<input type="text" data-search-attribute="data-shape" placeholder="Search by shape"/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="text-input-wrapper">
|
||||
<input type="text" data-search-attribute="data-size" placeholder="Search by size"/>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square" data-color="green" data-shape="square" data-size="small"></div>
|
||||
<div class="mix green medium square" data-color="green" data-shape="square" data-size="medium"></div>
|
||||
<div class="mix blue large triangle" data-color="blue" data-shape="triangle" data-size="large"></div>
|
||||
<div class="mix pink large circle" data-color="pink" data-shape="circle" data-size="large"></div>
|
||||
<div class="mix green small circle" data-color="green" data-shape="circle" data-size="small"></div>
|
||||
<div class="mix blue medium triangle" data-color="blue" data-shape="triangle" data-size="medium"></div>
|
||||
<div class="mix pink medium square" data-color="pink" data-shape="square" data-size="medium"></div>
|
||||
<div class="mix blue medium triangle" data-color="blue" data-shape="triangle" data-size="medium"></div>
|
||||
<div class="mix pink small circle" data-color="pink" data-shape="circle" data-size="small"></div>
|
||||
<div class="mix green large triangle" data-color="green" data-shape="triangle" data-size="large"></div>
|
||||
<div class="mix blue small square" data-color="blue" data-shape="square" data-size="small"></div>
|
||||
<div class="mix pink small square" data-color="pink" data-shape="square" data-size="small"></div>
|
||||
<div class="mix green large square" data-color="green" data-shape="square" data-size="large"></div>
|
||||
<div class="mix blue large circle" data-color="blue" data-shape="circle" data-size="large"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
242
demos/text-inputs/style.css
Normal file
242
demos/text-inputs/style.css
Normal file
@@ -0,0 +1,242 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.text-input-wrapper {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #2a2a2a;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.text-input-wrapper input {
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
padding: .5em;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
83
demos/toggles/index.html
Normal file
83
demos/toggles/index.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp MultiFilter Demo - Toggle Controls</title>
|
||||
</head>
|
||||
<body>
|
||||
<form class="controls">
|
||||
<button type="reset" class="control control-text">Reset</button>
|
||||
|
||||
<fieldset data-filter-group class="control-group">
|
||||
<label class="control-group-label">Color</label>
|
||||
|
||||
<button type="button" class="control control-color" data-toggle=".green">Green</button>
|
||||
<button type="button" class="control control-color" data-toggle=".blue">Blue</button>
|
||||
<button type="button" class="control control-color" data-toggle=".pink">Pink</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="control-group">
|
||||
<label class="control-group-label">Shape</label>
|
||||
|
||||
<button type="button" class="control control-shape" data-toggle=".square">Square</button>
|
||||
<button type="button" class="control control-shape" data-toggle=".circle">Circle</button>
|
||||
<button type="button" class="control control-shape" data-toggle=".triangle">Triangle</button>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-filter-group class="control-group">
|
||||
<label class="control-group-label">Size</label>
|
||||
|
||||
<button type="button" class="control control-size" data-toggle=".small">Small</button>
|
||||
<button type="button" class="control control-size" data-toggle=".medium">Medium</button>
|
||||
<button type="button" class="control control-size" data-toggle=".large">Large</button>
|
||||
</fieldset>
|
||||
|
||||
<div class="control-group">
|
||||
<button type="button" class="control control-sort" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green small square"></div>
|
||||
<div class="mix green medium square"></div>
|
||||
<div class="mix blue large triangle"></div>
|
||||
<div class="mix pink large circle"></div>
|
||||
<div class="mix green small circle"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink medium square"></div>
|
||||
<div class="mix blue medium triangle"></div>
|
||||
<div class="mix pink small circle"></div>
|
||||
<div class="mix green large triangle"></div>
|
||||
<div class="mix blue small square"></div>
|
||||
<div class="mix pink small square"></div>
|
||||
<div class="mix green large square"></div>
|
||||
<div class="mix blue large circle"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../mixitup-multifilter.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
multifilter: {
|
||||
enable: true
|
||||
},
|
||||
animation: {
|
||||
effects: 'fade translateZ(-100px)'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
300
demos/toggles/style.css
Normal file
300
demos/toggles/style.css
Normal file
@@ -0,0 +1,300 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control-text {
|
||||
width: auto;
|
||||
font-size: .9rem;
|
||||
padding: 0 1rem;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control:not(.mixitup-control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-color:after,
|
||||
.control-shape:after,
|
||||
.control-size:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.control-color:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control-color[data-toggle=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".square"]:after,
|
||||
.control-shape[data-toggle=".circle"]:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 5px);
|
||||
left: calc(50% - 5px);
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".circle"]:after {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.control-shape[data-toggle=".triangle"]:after {
|
||||
border: 6px solid transparent;
|
||||
border-bottom: 9px solid white;
|
||||
top: calc(50% - 10px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: calc(50% - 4px);
|
||||
left: calc(50% - 4px);
|
||||
border: 2px solid white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.control-size[data-toggle=".medium"]:after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.control-size[data-toggle=".large"]:after {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: calc(50% - 8px);
|
||||
left: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.control-sort:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-sort*=":desc"]:after {
|
||||
transform: translateY(-3px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mix.square:after,
|
||||
.mix.circle:after {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mix.circle:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 3vw;
|
||||
border: 3em solid transparent;
|
||||
border-bottom: 5em solid currentColor;
|
||||
border-top: 0;
|
||||
left: calc(50% - 3em);
|
||||
top: calc(50% - 3em);
|
||||
}
|
||||
|
||||
.mix.medium:after {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.mix.small:after {
|
||||
transform: scale(.5);
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6 Columns */
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/6 - (((6 - 1) * 1rem) / 6));
|
||||
}
|
||||
|
||||
.mix.triangle:after {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user