first commit
This commit is contained in:
50
mixitup-3.3.1/demos/attribute-selectors/index.html
Normal file
50
mixitup-3.3.1/demos/attribute-selectors/index.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!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 Demo - Querying via Attribute Selectors</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="mixitup-container">
|
||||
<div class="item green" data-ref="mixitup-target"></div>
|
||||
<div class="item green" data-ref="mixitup-target"></div>
|
||||
<div class="item blue" data-ref="mixitup-target"></div>
|
||||
<div class="item pink" data-ref="mixitup-target"></div>
|
||||
<div class="item green" data-ref="mixitup-target"></div>
|
||||
<div class="item blue" data-ref="mixitup-target"></div>
|
||||
<div class="item pink" data-ref="mixitup-target"></div>
|
||||
<div class="item blue" data-ref="mixitup-target"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('[data-ref~="mixitup-container"]');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
selectors: {
|
||||
target: '[data-ref~="mixitup-target"]'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
190
mixitup-3.3.1/demos/attribute-selectors/style.css
Normal file
190
mixitup-3.3.1/demos/attribute-selectors/style.css
Normal file
@@ -0,0 +1,190 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Grid Items
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.item,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.item.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.item.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.item.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
46
mixitup-3.3.1/demos/basic-ie-8/index.html
Normal file
46
mixitup-3.3.1/demos/basic-ie-8/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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 Demo - Basic (IE8 Compatible Layout)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all"></button>
|
||||
<button type="button" class="control" data-filter=".green"></button>
|
||||
<button type="button" class="control" data-filter=".blue"></button>
|
||||
<button type="button" class="control" data-filter=".pink"></button>
|
||||
<button type="button" class="control" data-filter="none"></button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
122
mixitup-3.3.1/demos/basic-ie-8/style.css
Normal file
122
mixitup-3.3.1/demos/basic-ie-8/style.css
Normal file
@@ -0,0 +1,122 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 16px;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
height: 35px;
|
||||
min-width: 25px;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control[data-filter="all"] {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
background: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
background: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
background: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
background: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 16px;
|
||||
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;
|
||||
border-top: 8px solid transparent;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1.25%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
border-top-color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
border-top-color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
border-top-color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: 24%;
|
||||
}
|
||||
46
mixitup-3.3.1/demos/basic/index.html
Normal file
46
mixitup-3.3.1/demos/basic/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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 Demo - Basic</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
190
mixitup-3.3.1/demos/basic/style.css
Normal file
190
mixitup-3.3.1/demos/basic/style.css
Normal file
@@ -0,0 +1,190 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
108
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/index.html
Normal file
108
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/index.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!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 Demo - Checkboxes with Reset Checkbox</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<div class="checkbox-group">
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">All</label>
|
||||
<input type="checkbox" value="all" checked/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// In this example, we must bind a 'change' event handler to
|
||||
// our checkboxes, then interact with the mixer via
|
||||
// its .filter() API methods.
|
||||
|
||||
var containerEl = document.querySelector('.container');
|
||||
var checkboxGroup = document.querySelector('.checkbox-group');
|
||||
var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
|
||||
var allCheckbox = checkboxGroup.querySelector('input[value="all"]');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
checkboxGroup.addEventListener('change', function(e) {
|
||||
var selectors = [];
|
||||
var checkbox;
|
||||
var i;
|
||||
|
||||
if (e.target === allCheckbox && e.target.checked) {
|
||||
// If the "all" checkbox was checked, uncheck all other checkboxes
|
||||
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
checkbox = checkboxes[i];
|
||||
|
||||
if (checkbox !== allCheckbox) checkbox.checked = false;
|
||||
}
|
||||
} else {
|
||||
// Another checkbox was changed, uncheck "all".
|
||||
|
||||
allCheckbox.checked = false;
|
||||
}
|
||||
|
||||
// Iterate through all checkboxes, pushing the
|
||||
// values of those that are checked into an array
|
||||
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
checkbox = checkboxes[i];
|
||||
|
||||
if (checkbox.checked) selectors.push(checkbox.value);
|
||||
}
|
||||
|
||||
// If there are values in the array, join it into a string
|
||||
// using your desired logic, and send to the mixer's .filter()
|
||||
// method, otherwise filter by 'all'
|
||||
|
||||
var selectorString = selectors.length > 0 ?
|
||||
selectors.join(',') : // or '.' for AND logic
|
||||
'all';
|
||||
|
||||
mixer.filter(selectorString);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/style.css
Normal file
200
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/style.css
Normal file
@@ -0,0 +1,200 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.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-right: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.checkbox:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-input,
|
||||
.checkbox-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
color: white;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
86
mixitup-3.3.1/demos/checkboxes/index.html
Normal file
86
mixitup-3.3.1/demos/checkboxes/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 Demo - Checkboxes</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<div class="checkbox-group">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// In this example, we must bind a 'change' event handler to
|
||||
// our checkboxes, then interact with the mixer via
|
||||
// its .filter() API methods.
|
||||
|
||||
var containerEl = document.querySelector('.container');
|
||||
var checkboxGroup = document.querySelector('.checkbox-group');
|
||||
var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
checkboxGroup.addEventListener('change', function() {
|
||||
var selectors = [];
|
||||
|
||||
// Iterate through all checkboxes, pushing the
|
||||
// values of those that are checked into an array
|
||||
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
var checkbox = checkboxes[i];
|
||||
|
||||
if (checkbox.checked) selectors.push(checkbox.value);
|
||||
}
|
||||
|
||||
// If there are values in the array, join it into a string
|
||||
// using your desired logic, and send to the mixer's .filter()
|
||||
// method, otherwise filter by 'all'
|
||||
|
||||
var selectorString = selectors.length > 0 ?
|
||||
selectors.join(',') : // or '.' for AND logic
|
||||
'all';
|
||||
|
||||
mixer.filter(selectorString);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
mixitup-3.3.1/demos/checkboxes/style.css
Normal file
200
mixitup-3.3.1/demos/checkboxes/style.css
Normal file
@@ -0,0 +1,200 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.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-right: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.checkbox:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-input,
|
||||
.checkbox-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
color: white;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
226
mixitup-3.3.1/demos/dataset-empty-container/index.html
Normal file
226
mixitup-3.3.1/demos/dataset-empty-container/index.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!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 Demo - Dataset with an Empty Container</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls" data-ref="controls">
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="all">All</button>
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="green">Green</button>
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="blue">Blue</button>
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="pink">Pink</button>
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="none">None</button>
|
||||
|
||||
<button type="button" class="control control-sort" data-ref="sort" data-key="publishedDate" data-order="asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-ref="sort" data-key="publishedDate" data-order="desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container">
|
||||
<div class="gap" data-ref="first-gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mock-api.js"></script>
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Typically, our data would live in a DB and be retrieved via a JSON API, but in
|
||||
// this demo we will create a mock dataset using an array literal:
|
||||
|
||||
var items = [
|
||||
{
|
||||
id: 1,
|
||||
color: 'green',
|
||||
publishedDate: '2015-10-03'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: 'green',
|
||||
publishedDate: '2015-12-22'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
color: 'blue',
|
||||
publishedDate: '2016-02-15'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
color: 'pink',
|
||||
publishedDate: '2016-04-25'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
color: 'green',
|
||||
publishedDate: '2016-05-02'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
color: 'blue',
|
||||
publishedDate: '2016-10-07'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
color: 'pink',
|
||||
publishedDate: '2016-11-13'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
color: 'blue',
|
||||
publishedDate: '2016-12-01'
|
||||
}
|
||||
];
|
||||
|
||||
// The `Api` class is not part of MixItUp and has been created to mock
|
||||
// the asyncronous fetching of data for this demo. To use it, we must
|
||||
// create an api instance, passing in our mock data to represent the
|
||||
// contents of a DB.
|
||||
|
||||
var api = new Api(items);
|
||||
|
||||
// As we'll be building and binding our own UI, we'll start with caching
|
||||
// references to any DOM elements we'll need to work with
|
||||
|
||||
var controls = document.querySelector('[data-ref="controls"]');
|
||||
var filters = document.querySelectorAll('[data-ref="filter"]');
|
||||
var sorts = document.querySelectorAll('[data-ref="sort"]');
|
||||
var container = document.querySelector('[data-ref="container"]');
|
||||
|
||||
// "Gap" elements are used to maintain even columns in a justified grid. See our
|
||||
// "MixItUp Grid Layouts" tutorial for more information.
|
||||
|
||||
var firstGap = document.querySelector('[data-ref="first-gap"]');
|
||||
|
||||
// We'll need to keep track of our active current filter so
|
||||
// that we can sort within the current filter.
|
||||
|
||||
var activeColor = '';
|
||||
|
||||
// Instantiate and configure the mixer
|
||||
|
||||
var mixer = mixitup(container, {
|
||||
selectors: {
|
||||
target: '[data-ref="item"]' // Query targets with an attribute selector to keep our JS and styling classes seperate
|
||||
},
|
||||
layout: {
|
||||
siblingAfter: firstGap // Ensure the first "gap" element is known to mixitup incase of insertion into an empty container
|
||||
},
|
||||
data: {
|
||||
uidKey: 'id' // Our data model must have a unique id. In this case, its key is 'id'
|
||||
},
|
||||
render: { // We must provide a target render function incase we need to render new items not in the initial dataset (not used in this demo)
|
||||
target: function(item) {
|
||||
return '<div class="item ' + item.color + '" data-ref="item"><time class="published-date">' + item.publishedDate + '</time></div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* A helper function to set an active styling class on an active button,
|
||||
* and remove it from its siblings at the same time.
|
||||
*
|
||||
* @param {HTMLElement} activeButton
|
||||
* @param {HTMLELement[]} siblings
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function activateButton(activeButton, siblings) {
|
||||
var button;
|
||||
var i;
|
||||
|
||||
for (i = 0; i < siblings.length; i++) {
|
||||
button = siblings[i];
|
||||
|
||||
button.classList[button === activeButton ? 'add' : 'remove']('control-active');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A click handler to detect the type of button clicked, read off the
|
||||
* relevent attributes, call the API, and trigger a dataset operation.
|
||||
*
|
||||
* @param {HTMLElement} button
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function handleButtonClick(button) {
|
||||
// Define default values for color, sortBy and order
|
||||
// incase they are not present in the clicked button
|
||||
|
||||
var color = activeColor;
|
||||
var sortBy = 'id';
|
||||
var order = 'asc';
|
||||
|
||||
// If button is already active, or an operation is in progress, ignore the click
|
||||
|
||||
if (button.classList.contains('control-active') || mixer.isMixing()) return;
|
||||
|
||||
// Else, check what type of button it is, if any
|
||||
|
||||
if (button.matches('[data-ref="filter"]')) {
|
||||
// Filter button
|
||||
|
||||
activateButton(button, filters);
|
||||
|
||||
color = activeColor = button.getAttribute('data-color');
|
||||
} else if (button.matches('[data-ref="sort"]')) {
|
||||
// Sort button
|
||||
|
||||
activateButton(button, sorts);
|
||||
|
||||
sortBy = button.getAttribute('data-key');
|
||||
order = button.getAttribute('data-order');
|
||||
} else {
|
||||
// Not a button
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Now that we have our color filter and sorting order, we can fetch some data from the API.
|
||||
|
||||
api.get({
|
||||
color: color,
|
||||
$sort_by: sortBy,
|
||||
$order: order
|
||||
})
|
||||
.then(function(items) {
|
||||
// Our api returns an array of items which we can send
|
||||
// straight to our mixer using the .dataset() method
|
||||
|
||||
return mixer.dataset(items);
|
||||
})
|
||||
.then(function(state) {
|
||||
console.log('fetched ' + state.activeDataset.length + ' items');
|
||||
})
|
||||
.catch(console.error.bind(console));
|
||||
}
|
||||
|
||||
// We can now set up a handler to listen for "click" events on our UI buttons
|
||||
|
||||
controls.addEventListener('click', function(e) {
|
||||
handleButtonClick(e.target);
|
||||
});
|
||||
|
||||
// Set controls the active controls on startup to match the default filter and sort
|
||||
|
||||
activateButton(controls.querySelector('[data-color="all"]'), filters);
|
||||
activateButton(controls.querySelector('[data-order="asc"]'), sorts);
|
||||
|
||||
// Finally, load the full dataset into the mixer
|
||||
|
||||
mixer.dataset(items)
|
||||
.then(function(state) {
|
||||
console.log('loaded ' + state.activeDataset.length + ' items');
|
||||
});
|
||||
|
||||
// NB: Always remember to destroy the instance with mixer.destroy() when your
|
||||
// component unmounts to ensure that event handlers are unbound and the
|
||||
// instance can be garbage collected.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
199
mixitup-3.3.1/demos/dataset-empty-container/style.css
Normal file
199
mixitup-3.3.1/demos/dataset-empty-container/style.css
Normal file
@@ -0,0 +1,199 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:not(.control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-filter:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-order="desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control-filter.control-active:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control-filter + .control-sort {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control-filter[data-color="green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control-filter[data-color="blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control-filter[data-color="pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control-filter[data-color="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.item,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.item.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.item.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.item.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.item .published-date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 1rem;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
256
mixitup-3.3.1/demos/dataset-pre-rendered-targets/index.html
Normal file
256
mixitup-3.3.1/demos/dataset-pre-rendered-targets/index.html
Normal file
@@ -0,0 +1,256 @@
|
||||
<!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 Demo - Dataset with Pre-rendered Targets</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls" data-ref="controls">
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="all">All</button>
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="green">Green</button>
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="blue">Blue</button>
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="pink">Pink</button>
|
||||
<button type="button" class="control control-filter" data-ref="filter" data-color="none">None</button>
|
||||
|
||||
<button type="button" class="control control-sort" data-ref="sort" data-key="publishedDate" data-order="asc">Asc</button>
|
||||
<button type="button" class="control control-sort" data-ref="sort" data-key="publishedDate" data-order="desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container">
|
||||
<div class="item green" data-ref="item">
|
||||
<time class="published-date">2015-10-03</time>
|
||||
</div>
|
||||
|
||||
<div class="item green" data-ref="item">
|
||||
<time class="published-date">2015-12-22</time>
|
||||
</div>
|
||||
|
||||
<div class="item blue" data-ref="item">
|
||||
<time class="published-date">2016-02-15</time>
|
||||
</div>
|
||||
|
||||
<div class="item pink" data-ref="item">
|
||||
<time class="published-date">2016-04-25</time>
|
||||
</div>
|
||||
|
||||
<div class="item green" data-ref="item">
|
||||
<time class="published-date">2016-05-02</time>
|
||||
</div>
|
||||
|
||||
<div class="item blue" data-ref="item">
|
||||
<time class="published-date">2016-10-07</time>
|
||||
</div>
|
||||
|
||||
<div class="item pink" data-ref="item">
|
||||
<time class="published-date">2016-11-13</time>
|
||||
</div>
|
||||
|
||||
<div class="item blue" data-ref="item">
|
||||
<time class="published-date">2016-12-01</time>
|
||||
</div>
|
||||
|
||||
<div class="gap" data-ref="first-gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mock-api.js"></script>
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Typically, our data would live in a DB and be retrieved via a JSON API, but in
|
||||
// this demo we will create a mock dataset using an array literal.
|
||||
|
||||
// You will notice that this data exactly matches our pre-rendered targets.
|
||||
|
||||
var items = [
|
||||
{
|
||||
id: 1,
|
||||
color: 'green',
|
||||
publishedDate: '2015-10-03'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: 'green',
|
||||
publishedDate: '2015-12-22'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
color: 'blue',
|
||||
publishedDate: '2016-02-15'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
color: 'pink',
|
||||
publishedDate: '2016-04-25'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
color: 'green',
|
||||
publishedDate: '2016-05-02'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
color: 'blue',
|
||||
publishedDate: '2016-10-07'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
color: 'pink',
|
||||
publishedDate: '2016-11-13'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
color: 'blue',
|
||||
publishedDate: '2016-12-01'
|
||||
}
|
||||
];
|
||||
|
||||
// The `Api` class is not part of MixItUp and has been created to mock
|
||||
// the asyncronous fetching of data for this demo. To use it, we must
|
||||
// create an api instance, passing in our mock data to represent the
|
||||
// contents of a DB.
|
||||
|
||||
var api = new Api(items);
|
||||
|
||||
// As we'll be building and binding our own UI, we'll start with caching
|
||||
// references to any DOM elements we'll need to work with
|
||||
|
||||
var controls = document.querySelector('[data-ref="controls"]');
|
||||
var filters = document.querySelectorAll('[data-ref="filter"]');
|
||||
var sorts = document.querySelectorAll('[data-ref="sort"]');
|
||||
var container = document.querySelector('[data-ref="container"]');
|
||||
|
||||
// "Gap" elements are used to maintain even columns in a justified grid. See our
|
||||
// "MixItUp Grid Layouts" tutorial for more information.
|
||||
|
||||
var firstGap = document.querySelector('[data-ref="first-gap"]');
|
||||
|
||||
// We'll need to keep track of our active current filter so
|
||||
// that we can sort within the current filter.
|
||||
|
||||
var activeColor = '';
|
||||
|
||||
// Instantiate and configure the mixer
|
||||
|
||||
var mixer = mixitup(container, {
|
||||
selectors: {
|
||||
target: '[data-ref="item"]' // Query targets with an attribute selector to keep our JS and styling classes seperate
|
||||
},
|
||||
layout: {
|
||||
siblingAfter: firstGap // Ensure the first "gap" element is known to mixitup incase of insertion into an empty container
|
||||
},
|
||||
load: {
|
||||
dataset: items // As we have pre-rendered targets, we must "prime" MixItUp with their underlying data
|
||||
},
|
||||
data: {
|
||||
uidKey: 'id' // Our data model must have a unique id. In this case, its key is 'id'
|
||||
},
|
||||
render: { // We must provide a target render function incase we need to render new items not in the initial dataset (not used in this demo)
|
||||
target: function(item) {
|
||||
return '<div class="item ' + item.color + '" data-ref="item"><time class="published-date">' + item.publishedDate + '</time></div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* A helper function to set an active styling class on an active button,
|
||||
* and remove it from its siblings at the same time.
|
||||
*
|
||||
* @param {HTMLElement} activeButton
|
||||
* @param {HTMLELement[]} siblings
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function activateButton(activeButton, siblings) {
|
||||
var button;
|
||||
var i;
|
||||
|
||||
for (i = 0; i < siblings.length; i++) {
|
||||
button = siblings[i];
|
||||
|
||||
button.classList[button === activeButton ? 'add' : 'remove']('control-active');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A click handler to detect the type of button clicked, read off the
|
||||
* relevent attributes, call the API, and trigger a dataset operation.
|
||||
*
|
||||
* @param {HTMLElement} button
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function handleButtonClick(button) {
|
||||
// Define default values for color, sortBy and order
|
||||
// incase they are not present in the clicked button
|
||||
|
||||
var color = activeColor;
|
||||
var sortBy = 'id';
|
||||
var order = 'asc';
|
||||
|
||||
// If button is already active, or an operation is in progress, ignore the click
|
||||
|
||||
if (button.classList.contains('control-active') || mixer.isMixing()) return;
|
||||
|
||||
// Else, check what type of button it is, if any
|
||||
|
||||
if (button.matches('[data-ref="filter"]')) {
|
||||
// Filter button
|
||||
|
||||
activateButton(button, filters);
|
||||
|
||||
color = activeColor = button.getAttribute('data-color');
|
||||
} else if (button.matches('[data-ref="sort"]')) {
|
||||
// Sort button
|
||||
|
||||
activateButton(button, sorts);
|
||||
|
||||
sortBy = button.getAttribute('data-key');
|
||||
order = button.getAttribute('data-order');
|
||||
} else {
|
||||
// Not a button
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Now that we have our color filter and sorting order, we can fetch some data from the API.
|
||||
|
||||
api.get({
|
||||
color: color,
|
||||
$sort_by: sortBy,
|
||||
$order: order
|
||||
})
|
||||
.then(function(items) {
|
||||
// Our api returns an array of items which we can send
|
||||
// straight to our mixer using the .dataset() method
|
||||
|
||||
return mixer.dataset(items);
|
||||
})
|
||||
.then(function(state) {
|
||||
console.log('fetched ' + state.activeDataset.length + ' items');
|
||||
})
|
||||
.catch(console.error.bind(console));
|
||||
}
|
||||
|
||||
// We can now set up a handler to listen for "click" events on our UI buttons
|
||||
|
||||
controls.addEventListener('click', function(e) {
|
||||
handleButtonClick(e.target);
|
||||
});
|
||||
|
||||
// Set controls the active controls on startup to match the default filter and sort
|
||||
|
||||
activateButton(controls.querySelector('[data-color="all"]'), filters);
|
||||
activateButton(controls.querySelector('[data-order="asc"]'), sorts);
|
||||
|
||||
// NB: Always remember to destroy the instance with mixer.destroy() when your
|
||||
// component unmounts to ensure that event handlers are unbound and the
|
||||
// instance can be garbage collected.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
201
mixitup-3.3.1/demos/dataset-pre-rendered-targets/style.css
Normal file
201
mixitup-3.3.1/demos/dataset-pre-rendered-targets/style.css
Normal file
@@ -0,0 +1,201 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:not(.control-active):hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control-filter:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control-sort[data-order="desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control-filter.control-active:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control-filter + .control-sort {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control-filter[data-color="green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control-filter[data-color="blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control-filter[data-color="pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control-filter[data-color="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.item,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.item.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.item.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.item.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.item .published-date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 1rem;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
156
mixitup-3.3.1/demos/filtering-by-range/index.html
Normal file
156
mixitup-3.3.1/demos/filtering-by-range/index.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!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 Demo - Filtering by Range</title>
|
||||
|
||||
<!--
|
||||
This demo hooks into MixItUp's plugins API to provide a means of applying
|
||||
additional non-selector-based contraints to our filtering logic, such as a
|
||||
minimum and maximum range.
|
||||
|
||||
Although this demo uses the native <input type="range"> only, you are free to use any
|
||||
specialised range slider UI library instead (e.g. Bootstrap, jQuery UI, etc). Simply
|
||||
update the `getRange()` function to read values in from your plugin's API instead.
|
||||
|
||||
NB: REQUIRES MixItUp v3.3.0 OR LATER!
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="size:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="size:desc">Desc</button>
|
||||
|
||||
<datalist id="sizeLegend">
|
||||
<option value="0">
|
||||
<option value="1">
|
||||
<option value="2">
|
||||
<option value="3">
|
||||
<option value="4">
|
||||
<option value="6">
|
||||
<option value="7">
|
||||
<option value="8">
|
||||
<option value="9">
|
||||
<option value="10">
|
||||
</datalist>
|
||||
|
||||
<div class="range-slider">
|
||||
<label class="range-slider-label">Min</label>
|
||||
|
||||
<input name="minSize" class="range-slider-input" type="range" min="0" max="10" value="0" list="sizeLegend"/>
|
||||
</div>
|
||||
|
||||
<div class="range-slider">
|
||||
<label class="range-slider-label">Max</label>
|
||||
|
||||
<input name="maxSize" class="range-slider-input" type="range" min="0" max="10" value="10" list="sizeLegend"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container">
|
||||
<div class="mix green" data-size="1"></div>
|
||||
<div class="mix green" data-size="3"></div>
|
||||
<div class="mix blue" data-size="4"></div>
|
||||
<div class="mix pink" data-size="5"></div>
|
||||
<div class="mix green" data-size="0"></div>
|
||||
<div class="mix green" data-size="3"></div>
|
||||
<div class="mix blue" data-size="8"></div>
|
||||
<div class="mix pink" data-size="2"></div>
|
||||
<div class="mix blue" data-size="10"></div>
|
||||
<div class="mix blue" data-size="7"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var container = document.querySelector('[data-ref="container"]');
|
||||
var minSizeRangeInput = document.querySelector('[name="minSize"]');
|
||||
var maxSizeRangeInput = document.querySelector('[name="maxSize"]');
|
||||
|
||||
var mixer = mixitup(container, {
|
||||
animation: {
|
||||
duration: 350
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Reads the values from our two native range inputs, returning an object
|
||||
* with `min` and `max` numeric values.
|
||||
*
|
||||
* @return {object}
|
||||
*/
|
||||
|
||||
function getRange() {
|
||||
var min = Number(minSizeRangeInput.value);
|
||||
var max = Number(maxSizeRangeInput.value);
|
||||
|
||||
return {
|
||||
min: min,
|
||||
max: max
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensures that the mixer is re-filtered whenever the value of a range
|
||||
* input changes.
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function handleRangeInputChange() {
|
||||
mixer.filter(mixer.getState().activeFilter);
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows us to manipulate the test result (`true` or `false`) of a
|
||||
* target against the current filter selector(s) (e.g. `.blue`).
|
||||
*
|
||||
* In this case we want to apply an additional constraint of whether or not the
|
||||
* target is within an arbitrary range, and override the test result to `false`
|
||||
* if not. The function must always return the test result.
|
||||
*
|
||||
* @param {boolean} testResult
|
||||
* A boolean indicating whether or not the target is passing the current filtering criteria.
|
||||
* @param {mixitup.Target} target
|
||||
* A reference to the target being tested
|
||||
* @return {boolean}
|
||||
*/
|
||||
|
||||
function filterTestResult(testResult, target) {
|
||||
var size = Number(target.dom.el.getAttribute('data-size'));
|
||||
var range = getRange();
|
||||
|
||||
if (size < range.min || size > range.max) {
|
||||
testResult = false;
|
||||
}
|
||||
|
||||
return testResult;
|
||||
}
|
||||
|
||||
// Using the static method `registerFilter` from the MixItUp plugins API, we can
|
||||
// register the above function as a filter, to manipulate the value returned from the
|
||||
// `testResultEvaluateHideShow` hook.
|
||||
|
||||
mixitup.Mixer.registerFilter('testResultEvaluateHideShow', 'range', filterTestResult);
|
||||
|
||||
// Listen for change events from the two range inputs
|
||||
|
||||
minSizeRangeInput.addEventListener('change', handleRangeInputChange);
|
||||
maxSizeRangeInput.addEventListener('change', handleRangeInputChange);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
280
mixitup-3.3.1/demos/filtering-by-range/style.css
Normal file
280
mixitup-3.3.1/demos/filtering-by-range/style.css
Normal file
@@ -0,0 +1,280 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
.range-slider {
|
||||
margin: 0 1rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.range-slider:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.range-slider::before,
|
||||
.range-slider::after,
|
||||
.range-slider-label {
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.range-slider::before,
|
||||
.range-slider::after {
|
||||
font-size: .7rem;
|
||||
color: #aaa;
|
||||
content: '0';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0 .2rem;
|
||||
}
|
||||
|
||||
.range-slider::after {
|
||||
content: '10';
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.range-slider-label {
|
||||
display: block;
|
||||
font-size: .8rem;
|
||||
color: #ccc;
|
||||
margin-bottom: .05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.range-slider:last-child .range-slider-label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.range-slider-input {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
margin-bottom: .75rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.range-slider-input::-webkit-slider-runnable-track {
|
||||
width: 300px;
|
||||
height: 5px;
|
||||
background: #888;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.range-slider-input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #5ecdde;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.range-slider-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix[data-size]:after {
|
||||
position: absolute;
|
||||
content: attr(data-size);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
107
mixitup-3.3.1/demos/filtering-by-text-input/index.html
Normal file
107
mixitup-3.3.1/demos/filtering-by-text-input/index.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<!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 Demo - Filtering by Text Input</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
|
||||
<input type="text" class="input" data-ref="input-search" placeholder="Search by color"/>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var container = document.querySelector('[data-ref="container"]');
|
||||
var inputSearch = document.querySelector('[data-ref="input-search"]');
|
||||
var keyupTimeout;
|
||||
|
||||
var mixer = mixitup(container, {
|
||||
animation: {
|
||||
duration: 350
|
||||
},
|
||||
callbacks: {
|
||||
onMixClick: function() {
|
||||
// Reset the search if a filter is clicked
|
||||
|
||||
if (this.matches('[data-filter]')) {
|
||||
inputSearch.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Set up a handler to listen for "keyup" events from the search input
|
||||
|
||||
inputSearch.addEventListener('keyup', function() {
|
||||
var searchValue;
|
||||
|
||||
if (inputSearch.value.length < 3) {
|
||||
// If the input value is less than 3 characters, don't send
|
||||
|
||||
searchValue = '';
|
||||
} else {
|
||||
searchValue = inputSearch.value.toLowerCase().trim();
|
||||
}
|
||||
|
||||
// Very basic throttling to prevent mixer thrashing. Only search
|
||||
// once 350ms has passed since the last keyup event
|
||||
|
||||
clearTimeout(keyupTimeout);
|
||||
|
||||
keyupTimeout = setTimeout(function() {
|
||||
filterByString(searchValue);
|
||||
}, 350);
|
||||
});
|
||||
|
||||
/**
|
||||
* Filters the mixer using a provided search string, which is matched against
|
||||
* the contents of each target's "class" attribute. Any custom data-attribute(s)
|
||||
* could also be used.
|
||||
*
|
||||
* @param {string} searchValue
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function filterByString(searchValue) {
|
||||
if (searchValue) {
|
||||
// Use an attribute wildcard selector to check for matches
|
||||
|
||||
mixer.filter('[class*="' + searchValue + '"]');
|
||||
} else {
|
||||
// If no searchValue, treat as filter('all')
|
||||
|
||||
mixer.filter('all');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
202
mixitup-3.3.1/demos/filtering-by-text-input/style.css
Normal file
202
mixitup-3.3.1/demos/filtering-by-text-input/style.css
Normal file
@@ -0,0 +1,202 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
padding: .75rem;
|
||||
margin-left: .75rem;
|
||||
border-radius: 2px;
|
||||
border: 0 none;
|
||||
background: white;
|
||||
font-family: 'helvetica neue', arial, sans-serif;
|
||||
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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
116
mixitup-3.3.1/demos/filtering-by-url/index.html
Normal file
116
mixitup-3.3.1/demos/filtering-by-url/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 Demo - Filtering by URL</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// As we have no server-side application or routes, we will use
|
||||
// a URL "hash" for this demo, but we chould just as easily use
|
||||
// a URL route segment.
|
||||
|
||||
// As we will use the target selector in several parts of the demo,
|
||||
// we will declare it as a variable here.
|
||||
|
||||
var targetSelector = '.mix';
|
||||
|
||||
/**
|
||||
* Reads a hash from the URL (if present), and converts it into a class
|
||||
* selector string. E.g "#green" -> ".green". Otherwise, defaults
|
||||
* to the targetSelector, equivalent to "all"
|
||||
*
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function getSelectorFromHash() {
|
||||
var hash = window.location.hash.replace(/^#/g, '');
|
||||
|
||||
var selector = hash ? '.' + hash : targetSelector;
|
||||
|
||||
return selector;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the URL whenever the current filter changes.
|
||||
*
|
||||
* @param {mixitup.State} state
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function setHash(state) {
|
||||
var selector = state.activeFilter.selector;
|
||||
var newHash = '#' + selector.replace(/^\./g, '');
|
||||
|
||||
if (selector === targetSelector && window.location.hash) {
|
||||
// Equivalent to filter "all", remove the hash
|
||||
|
||||
history.pushState(null, document.title, window.location.pathname); // or history.replaceState()
|
||||
} else if (newHash !== window.location.hash && selector !== targetSelector) {
|
||||
// Change the hash
|
||||
|
||||
history.pushState(null, document.title, window.location.pathname + newHash); // or history.replaceState()
|
||||
}
|
||||
}
|
||||
|
||||
// Instantiate and configure the mixer
|
||||
|
||||
var mixer = mixitup('.container', {
|
||||
selectors: {
|
||||
target: targetSelector
|
||||
},
|
||||
load: {
|
||||
filter: getSelectorFromHash() // Ensure that the mixer's initial filter matches the URL on startup
|
||||
},
|
||||
callbacks: {
|
||||
onMixEnd: setHash // Call the setHash() method at the end of each operation
|
||||
}
|
||||
});
|
||||
|
||||
// Add an "onhashchange" handler to keep the mixer in sync as the user goes
|
||||
// back and forward through their history.
|
||||
|
||||
// NB: This may or may not be the desired behavior for your project. If you don't
|
||||
// want MixItUp operations to count as individual history items, simply use
|
||||
// 'replaceState()' instead of 'pushState()' within the 'setHash()' function above.
|
||||
// In which case this handler would no longer be neccessary.
|
||||
|
||||
window.onhashchange = function() {
|
||||
var selector = getSelectorFromHash();
|
||||
|
||||
if (selector === mixer.getState().activeFilter.selector) return; // no change
|
||||
|
||||
mixer.filter(selector);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
170
mixitup-3.3.1/demos/filtering-by-url/style.css
Normal file
170
mixitup-3.3.1/demos/filtering-by-url/style.css
Normal file
@@ -0,0 +1,170 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
51
mixitup-3.3.1/demos/grid-columns/index.html
Normal file
51
mixitup-3.3.1/demos/grid-columns/index.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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 Demo - Columns Grid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
|
||||
<button type="button" class="control text" data-sort="random">Shuffle</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
animation: {
|
||||
animateResizeContainer: false // required to prevent column algorithm bug
|
||||
}
|
||||
});
|
||||
|
||||
// NB: See comments in stylesheet regarding fixes for chrome and safari "flickering"
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
214
mixitup-3.3.1/demos/grid-columns/style.css
Normal file
214
mixitup-3.3.1/demos/grid-columns/style.css
Normal file
@@ -0,0 +1,214 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control.text {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0 1rem;
|
||||
font-size: .9rem;
|
||||
height: 2.7rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control.text:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
|
||||
-webkit-column-count: 1;
|
||||
-moz-column-count: 1;
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
|
||||
backface-visibility: hidden; /* prevents flicker in chrome */
|
||||
will-change: transform, opacity; /* prevents flicker in safari */
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix.pink:before {
|
||||
padding-top: 75%;
|
||||
}
|
||||
|
||||
.mix.blue:before {
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
@media screen and (min-width: 401px) {
|
||||
.container {
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.container {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.container {
|
||||
-webkit-column-count: 4;
|
||||
-moz-column-count: 4;
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.container {
|
||||
-webkit-column-count: 5;
|
||||
-moz-column-count: 5;
|
||||
column-count: 5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<!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 Demo - Flex-box Grid with Matching Heights</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="random">Shuffle</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green">
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore. Quis autem vel eum iure reprehenderit qui in ea voluptate velit similique sunt in culpa qui officia deserunt mollitia animi.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix green">
|
||||
<p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix blue">
|
||||
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.<p>
|
||||
</div>
|
||||
|
||||
<div class="mix pink">
|
||||
<p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix green">
|
||||
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.<p>
|
||||
</div>
|
||||
|
||||
<div class="mix blue">
|
||||
<p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix pink">
|
||||
<p>Magni dolores eos qui ratione voluptatem sequi nesciun.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix blue">
|
||||
<p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
|
||||
</div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
animation: {
|
||||
animateResizeTargets: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
148
mixitup-3.3.1/demos/grid-flex-box-matching-heights/style.css
Normal file
148
mixitup-3.3.1/demos/grid-flex-box-matching-heights/style.css
Normal file
@@ -0,0 +1,148 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix p {
|
||||
padding: 1rem;
|
||||
display: inline-block;
|
||||
font-size: calc(1vw + .5rem);
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
27
mixitup-3.3.1/demos/grid-flex-box/index.html
Normal file
27
mixitup-3.3.1/demos/grid-flex-box/index.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!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 Demo - Flex-box Grid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
84
mixitup-3.3.1/demos/grid-flex-box/style.css
Normal file
84
mixitup-3.3.1/demos/grid-flex-box/style.css
Normal file
@@ -0,0 +1,84 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
23
mixitup-3.3.1/demos/grid-floats/index.html
Normal file
23
mixitup-3.3.1/demos/grid-floats/index.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!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 Demo - Float-based Grid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
mixitup-3.3.1/demos/grid-floats/style.css
Normal file
73
mixitup-3.3.1/demos/grid-floats/style.css
Normal file
@@ -0,0 +1,73 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem .5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix {
|
||||
float: left;
|
||||
margin: 0 .5rem 1rem;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix {
|
||||
width: calc(50% - 1rem);
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix {
|
||||
width: calc(100%/3 - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
27
mixitup-3.3.1/demos/grid-inline-block/index.html
Normal file
27
mixitup-3.3.1/demos/grid-inline-block/index.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!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 Demo - Inline-block Grid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
87
mixitup-3.3.1/demos/grid-inline-block/style.css
Normal file
87
mixitup-3.3.1/demos/grid-inline-block/style.css
Normal file
@@ -0,0 +1,87 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
81
mixitup-3.3.1/demos/index.html
Normal file
81
mixitup-3.3.1/demos/index.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MixItUp Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>MixItUp Demos</h1>
|
||||
|
||||
<p>The following collection of demos have been designed to demonstrate MixItUp's core functionality. They are maintained as part of the <a href="https://github.com/patrickkunka/mixitup/tree/v3/demos">MixItUp Github repository</a>, and can be viewed at <a href="http://demos.kunkalabs.com/mixitup">demos.kunkalabs.com/mixitup/</a>.</p>
|
||||
|
||||
<p>Each demo is intended to be as simple and instructive as possible and therefore intentionally avoids "magic" such as SASS, ES6, modules, or external dependencies that may require compilation in order to be usable in the browser. As such, you may run and edit these demos using any basic static file webserver, online or offline.</p>
|
||||
|
||||
<p>We add new demos to this collection regularly, but please <a href="https://www.kunkalabs.com/contact-us/">contact us</a> if there's a particular piece of functionality you would like to see which is missing from this list, or if you come across an issue with an existing demo.</p>
|
||||
|
||||
<h2>Basic Functionality</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./basic/">Basic MixItUp Functionality</a></li>
|
||||
<li><a href="./attribute-selectors/">Querying via Attribute Selectors</a></li>
|
||||
<li><a href="./loading-animation/">Loading Animation</a></li>
|
||||
<li><a href="./multiple-instances-global-control-scoping/">Multiple Instances with Global Control Scoping</a></li>
|
||||
<li><a href="./multiple-instances-local-control-scoping/">Multiple Instances with Local Control Scoping</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Filtering</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./toggle-filtering-or-logic/">Toggle Filtering with OR Logic</a></li>
|
||||
<li><a href="./toggle-filtering-and-logic/">Toggle Filtering with AND Logic</a></li>
|
||||
<li><a href="./filtering-by-url/">Filtering by URL</a></li>
|
||||
<li><a href="./filtering-by-text-input/">Filtering by Text Input</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Non-standard UI</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./select-dropdowns/">Select Dropdowns</a></li>
|
||||
<li><a href="./radio-buttons/">Radio Buttons</a></li>
|
||||
<li><a href="./checkboxes/">Checkboxes</a></li>
|
||||
<li><a href="./checkboxes-with-reset-checkbox/">Checkboxes with Reset Checkbox</a></li>
|
||||
<li><a href="./filtering-by-range/">Range Sliders</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Sorting</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./sorting-by-default/">Sorting by Default</a></li>
|
||||
<li><a href="./sorting-by-attribute/">Sorting by Attribute</a></li>
|
||||
<li><a href="./sorting-by-multiple-attributes/">Sorting by Multiple Attributes</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Insertion</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./insertion-non-target-elements/">Insertion with Non-target Elements</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Removal</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./removal-by-reference/">Removal by Reference</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Dataset</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./dataset-empty-container/">Dataset with an Empty Container</a></li>
|
||||
<li><a href="./dataset-pre-rendered-targets/">Dataset with Pre-rendered Targets</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Grids</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./grid-inline-block/">Inline-block Grid (HTML/CSS only)</a></li>
|
||||
<li><a href="./grid-flex-box/">Flex-box Grid (HTML/CSS only)</a></li>
|
||||
<li><a href="./grid-floats/">Float-based Grid (HTML/CSS only)</a></li>
|
||||
<li><a href="./grid-flex-box-matching-heights/">Flex-box Grid with Matching Heights</a></li>
|
||||
<li><a href="./grid-columns/">Columns Grid</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
42
mixitup-3.3.1/demos/insertion-non-target-elements/index.html
Normal file
42
mixitup-3.3.1/demos/insertion-non-target-elements/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!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 Demo - Insertion with Non-target Elements</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container">
|
||||
<button type="button" class="item button" data-ref="button-add-new"></button>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('[data-ref="container"]');
|
||||
var buttonAddNew = document.querySelector('[data-ref="button-add-new"]');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
selectors: {
|
||||
target: '[data-ref="mixitup-target"]'
|
||||
}
|
||||
});
|
||||
|
||||
buttonAddNew.addEventListener('click', function() {
|
||||
mixer.insertAfter('<div class="item" data-ref="mixitup-target"></div>', buttonAddNew);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
174
mixitup-3.3.1/demos/insertion-non-target-elements/style.css
Normal file
174
mixitup-3.3.1/demos/insertion-non-target-elements/style.css
Normal file
@@ -0,0 +1,174 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) 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%;
|
||||
}
|
||||
|
||||
/* Grid Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.item,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #ddd;
|
||||
font-size: 4rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
box-shadow: inset 0 0 20px rgba(0,0,0, .1);
|
||||
}
|
||||
|
||||
.button:after {
|
||||
display: inline-block;
|
||||
content: '+';
|
||||
font-size: 4rem;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.item,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
71
mixitup-3.3.1/demos/loading-animation/index.html
Normal file
71
mixitup-3.3.1/demos/loading-animation/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 Demo - Basic</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
animation: {
|
||||
effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
|
||||
},
|
||||
load: {
|
||||
filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
|
||||
}
|
||||
});
|
||||
|
||||
// Add a class to the container to remove 'visibility: hidden;' from targets. This
|
||||
// prevents any flickr of content before the page's JavaScript has loaded.
|
||||
|
||||
containerEl.classList.add('mixitup-ready');
|
||||
|
||||
// Show all targets in the container
|
||||
|
||||
mixer.show()
|
||||
.then(function() {
|
||||
// Remove the stagger effect for any subsequent operations
|
||||
|
||||
mixer.configure({
|
||||
animation: {
|
||||
effects: 'fade scale'
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
198
mixitup-3.3.1/demos/loading-animation/style.css
Normal file
198
mixitup-3.3.1/demos/loading-animation/style.css
Normal file
@@ -0,0 +1,198 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mixitup-ready .mix {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
18
mixitup-3.3.1/demos/mixitup.min.js
vendored
Normal file
18
mixitup-3.3.1/demos/mixitup.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
94
mixitup-3.3.1/demos/mock-api.js
Normal file
94
mixitup-3.3.1/demos/mock-api.js
Normal file
@@ -0,0 +1,94 @@
|
||||
(function(window) {
|
||||
var Api = function(dataset) {
|
||||
var _db = [];
|
||||
|
||||
Object.defineProperties(this, {
|
||||
db: {
|
||||
get: function() {
|
||||
return _db.slice();
|
||||
},
|
||||
set: function(value) {
|
||||
if (!Array.isArray(value)) {
|
||||
throw new TypeError('[mock-api] Dataset must be an array');
|
||||
}
|
||||
|
||||
if (!value.length) {
|
||||
throw new TypeError('[mock-api] Dataset must contain one or more elements');
|
||||
}
|
||||
|
||||
_db = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.init(dataset);
|
||||
};
|
||||
|
||||
Api.prototype = {
|
||||
constructor: Api,
|
||||
|
||||
init: function(dataset) {
|
||||
this.db = dataset;
|
||||
},
|
||||
|
||||
get: function(query) {
|
||||
var self = this;
|
||||
|
||||
return Promise.resolve()
|
||||
.then(function() {
|
||||
var output;
|
||||
|
||||
query = Object.assign(new Api.Query(), query);
|
||||
|
||||
Object.freeze(query);
|
||||
|
||||
output = self.filter(self.db, query);
|
||||
|
||||
output = self.sort(output, query);
|
||||
|
||||
return output;
|
||||
});
|
||||
},
|
||||
|
||||
filter: function(input, query) {
|
||||
return input.filter(function(item) {
|
||||
var key;
|
||||
var value;
|
||||
|
||||
for (key in query) {
|
||||
if (key.match(/^\$/g)) continue;
|
||||
|
||||
value = query[key];
|
||||
|
||||
if (value === 'all') return true;
|
||||
|
||||
if (item[key] !== value) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
},
|
||||
|
||||
sort: function(input, query) {
|
||||
return input.sort(function(a, b) {
|
||||
var valueA = a[query.$sort_by];
|
||||
var valueB = b[query.$sort_by];
|
||||
|
||||
if (valueA > valueB) {
|
||||
return query.$order === 'asc' ? 1 : -1;
|
||||
} else if (valueA < valueB) {
|
||||
return query.$order === 'asc' ? -1 : 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Api.Query = function() {
|
||||
this.$sort_by = 'id';
|
||||
this.$order = 'asc';
|
||||
};
|
||||
|
||||
window.Api = Api;
|
||||
})(window);
|
||||
@@ -0,0 +1,53 @@
|
||||
<!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 Demo - Multiple Mixers with Global Control Scoping</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container-1">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container-2">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl1 = document.querySelector('[data-ref="container-1"]');
|
||||
var containerEl2 = document.querySelector('[data-ref="container-2"]');
|
||||
|
||||
var mixer1 = mixitup(containerEl1);
|
||||
var mixer1 = mixitup(containerEl2);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,184 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
font-size: 0.1px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.targets:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
<!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 Demo - Multiple Mixers with Local Control Scoping</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" data-ref="container-1">
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="targets">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container-2">
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="targets">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl1 = document.querySelector('[data-ref="container-1"]');
|
||||
var containerEl2 = document.querySelector('[data-ref="container-2"]');
|
||||
|
||||
var config = {
|
||||
controls: {
|
||||
scope: 'local'
|
||||
}
|
||||
};
|
||||
|
||||
var mixer1 = mixitup(containerEl1, config);
|
||||
var mixer1 = mixitup(containerEl2, config);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,186 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
font-size: 0.1px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.targets {
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.targets:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
93
mixitup-3.3.1/demos/radio-buttons/index.html
Normal file
93
mixitup-3.3.1/demos/radio-buttons/index.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!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 Demo - Radio Buttons</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<div class="radio-group radios-filter">
|
||||
<div class="radio">
|
||||
<label class="radio-label">All</label>
|
||||
<input name="color" type="radio" value="all" checked/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Green</label>
|
||||
<input name="color" type="radio" value=".green"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Blue</label>
|
||||
<input name="color" type="radio" value=".blue"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Pink</label>
|
||||
<input name="color" type="radio" value=".pink"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="radio-group radios-sort">
|
||||
<div class="radio">
|
||||
<label class="radio-label">Asc</label>
|
||||
<input name="order" type="radio" value="default:asc" checked/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Desc</label>
|
||||
<input name="order" type="radio" value="default:desc"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// In this example, we must bind a 'change' event handler to
|
||||
// our radios, then interact with the mixer via
|
||||
// its .filter() API methods.
|
||||
|
||||
var containerEl = document.querySelector('.container');
|
||||
var radiosFilter = document.querySelector('.radios-filter');
|
||||
var radiosSort = document.querySelector('.radios-sort');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
radiosFilter.addEventListener('change', function() {
|
||||
var checked = radiosFilter.querySelector(':checked');
|
||||
|
||||
var selector = checked ? checked.value : 'all';
|
||||
|
||||
mixer.filter(selector);
|
||||
});
|
||||
|
||||
radiosSort.addEventListener('change', function() {
|
||||
var checked = radiosSort.querySelector(':checked');
|
||||
|
||||
var order = checked.value;
|
||||
|
||||
mixer.sort(order);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
mixitup-3.3.1/demos/radio-buttons/style.css
Normal file
200
mixitup-3.3.1/demos/radio-buttons/style.css
Normal file
@@ -0,0 +1,200 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.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-right: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.radio {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.radio:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.radio-input,
|
||||
.radio-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
color: white;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
62
mixitup-3.3.1/demos/removal-by-reference/index.html
Normal file
62
mixitup-3.3.1/demos/removal-by-reference/index.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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 Demo - Removal by Reference</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
function handleTargetClick(e) {
|
||||
var targetEl;
|
||||
|
||||
if (!(targetEl = e.target).matches('.mix')) {
|
||||
// If clicked element is not a target, return
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Pass the reference to the target element to the remove method
|
||||
|
||||
mixer.remove(targetEl);
|
||||
}
|
||||
|
||||
containerEl.addEventListener('click', handleTargetClick);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
196
mixitup-3.3.1/demos/removal-by-reference/style.css
Normal file
196
mixitup-3.3.1/demos/removal-by-reference/style.css
Normal file
@@ -0,0 +1,196 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:hover {
|
||||
opacity: 0.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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
72
mixitup-3.3.1/demos/reset.css
Normal file
72
mixitup-3.3.1/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;
|
||||
}
|
||||
67
mixitup-3.3.1/demos/select-dropdowns/index.html
Normal file
67
mixitup-3.3.1/demos/select-dropdowns/index.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!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 Demo - Select Dropdowns</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<select class="select-filter">
|
||||
<option value="all">All</option>
|
||||
<option value=".green">Green</option>
|
||||
<option value=".blue">Blue</option>
|
||||
<option value=".pink">Pink</option>
|
||||
</select>
|
||||
|
||||
<select class="select-sort">
|
||||
<option value="default:asc">Ascending</option>
|
||||
<option value="default:desc">Descending</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// In this example, we must bind 'change' event handlers to
|
||||
// our <select> elements, then interact with the mixer via
|
||||
// its .filter() and .sort() API methods.
|
||||
|
||||
var containerEl = document.querySelector('.container');
|
||||
var selectFilter = document.querySelector('.select-filter');
|
||||
var selectSort = document.querySelector('.select-sort');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
selectFilter.addEventListener('change', function() {
|
||||
var selector = selectFilter.value;
|
||||
|
||||
mixer.filter(selector);
|
||||
});
|
||||
|
||||
selectSort.addEventListener('change', function() {
|
||||
var order = selectSort.value;
|
||||
|
||||
mixer.sort(order);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
111
mixitup-3.3.1/demos/select-dropdowns/style.css
Normal file
111
mixitup-3.3.1/demos/select-dropdowns/style.css
Normal file
@@ -0,0 +1,111 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.controls > select {
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
44
mixitup-3.3.1/demos/sorting-by-attribute/index.html
Normal file
44
mixitup-3.3.1/demos/sorting-by-attribute/index.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!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 Demo - Sorting by Attribute</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="published-date:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="published-date:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix" data-published-date="2016-10-12"></div>
|
||||
<div class="mix" data-published-date="2016-09-03"></div>
|
||||
<div class="mix" data-published-date="2016-05-22"></div>
|
||||
<div class="mix" data-published-date="2016-05-19"></div>
|
||||
<div class="mix" data-published-date="2016-04-30"></div>
|
||||
<div class="mix" data-published-date="2016-04-24"></div>
|
||||
<div class="mix" data-published-date="2016-03-12"></div>
|
||||
<div class="mix" data-published-date="2016-01-01"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
load: {
|
||||
sort: 'published-date:desc'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
157
mixitup-3.3.1/demos/sorting-by-attribute/style.css
Normal file
157
mixitup-3.3.1/demos/sorting-by-attribute/style.css
Normal file
@@ -0,0 +1,157 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix[data-published-date]:after {
|
||||
position: absolute;
|
||||
content: attr(data-published-date);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
40
mixitup-3.3.1/demos/sorting-by-default/index.html
Normal file
40
mixitup-3.3.1/demos/sorting-by-default/index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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 Demo - Sorting by Default</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
145
mixitup-3.3.1/demos/sorting-by-default/style.css
Normal file
145
mixitup-3.3.1/demos/sorting-by-default/style.css
Normal file
@@ -0,0 +1,145 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<!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 Demo - Sorting by Multiple Attributes</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="published-date:desc name:asc">Desc</button>
|
||||
<button type="button" class="control" data-sort="published-date:asc name:asc">Asc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix" data-published-date="2016-11-24" data-name="Oscar"><h4>Oscar</h4></div>
|
||||
<div class="mix" data-published-date="2016-10-12" data-name="Charlie"><h4>Charlie</h4></div>
|
||||
<div class="mix" data-published-date="2016-09-30" data-name="Lima"><h4>Lima</h4></div>
|
||||
<div class="mix" data-published-date="2016-09-03" data-name="Alpha"><h4>Alpha</h4></div>
|
||||
<div class="mix" data-published-date="2016-09-03" data-name="Mike"><h4>Mike</h4></div>
|
||||
<div class="mix" data-published-date="2016-09-03" data-name="Zulu"><h4>Zulu</h4></div>
|
||||
<div class="mix" data-published-date="2016-04-30" data-name="Tango"><h4>Tango</h4></div>
|
||||
<div class="mix" data-published-date="2016-04-24" data-name="Sierra"><h4>Sierra</h4></div>
|
||||
<div class="mix" data-published-date="2016-03-12" data-name="Bravo"><h4>Bravo</h4></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
load: {
|
||||
sort: 'published-date:desc name:asc'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
165
mixitup-3.3.1/demos/sorting-by-multiple-attributes/style.css
Normal file
165
mixitup-3.3.1/demos/sorting-by-multiple-attributes/style.css
Normal file
@@ -0,0 +1,165 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix[data-published-date]:after {
|
||||
position: absolute;
|
||||
content: attr(data-published-date);
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mix h4 {
|
||||
position: absolute;
|
||||
padding: 1rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
46
mixitup-3.3.1/demos/toggle-filtering-and-logic/index.html
Normal file
46
mixitup-3.3.1/demos/toggle-filtering-and-logic/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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 Demo - Toggle Filtering AND Logic</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-toggle=".green">Green</button>
|
||||
<button type="button" class="control" data-toggle=".blue">Blue</button>
|
||||
<button type="button" class="control" data-toggle=".pink">Pink</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
controls: {
|
||||
toggleLogic: 'and'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
186
mixitup-3.3.1/demos/toggle-filtering-and-logic/style.css
Normal file
186
mixitup-3.3.1/demos/toggle-filtering-and-logic/style.css
Normal file
@@ -0,0 +1,186 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after,
|
||||
.control[data-toggle]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-toggle]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"],
|
||||
.control[data-toggle=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"],
|
||||
.control[data-toggle=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"],
|
||||
.control[data-toggle=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
border-top: .5rem solid transparent;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix.pink.green:before {
|
||||
width: 100%;
|
||||
border-top-color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.green.blue:before {
|
||||
width: 100%;
|
||||
border-top-color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.blue.pink:before {
|
||||
width: 100%;
|
||||
border-top-color: #d595aa;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
42
mixitup-3.3.1/demos/toggle-filtering-or-logic/index.html
Normal file
42
mixitup-3.3.1/demos/toggle-filtering-or-logic/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!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 Demo - Toggle Filtering OR Logic</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-toggle=".green">Green</button>
|
||||
<button type="button" class="control" data-toggle=".blue">Blue</button>
|
||||
<button type="button" class="control" data-toggle=".pink">Pink</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
170
mixitup-3.3.1/demos/toggle-filtering-or-logic/style.css
Normal file
170
mixitup-3.3.1/demos/toggle-filtering-or-logic/style.css
Normal file
@@ -0,0 +1,170 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after,
|
||||
.control[data-toggle]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-toggle]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"],
|
||||
.control[data-toggle=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"],
|
||||
.control[data-toggle=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"],
|
||||
.control[data-toggle=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user