Mirrors
/
Vestride_Shuffle
mirror of https://github.com/Vestride/Shuffle.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Filter button states

Browse Source
pull/56/head
Glen Cheney 11 years ago
parent 2735047267
commit 53152b4adb
12 changed files with 194 additions and 59 deletions
Show Stats Download Patch File Download Diff File

10
_config.yml
Unescape Escape View File

@ -18,12 +18,12 @@ demos:
screenshot: removing.webp
- url: 'demos/2013-05-02-adaptive'
slug: adaptive
label: Twitter bootstrap adaptive masonry with compounded filters
label: Adaptive bootstrap grid with compound filters
screenshot: adaptive.webp
- url: 'demos/2013-05-03-responsive'
slug: responsive
label: Responsive?
screenshot: responsive.webp
- url: 'demos/2013-05-03-images'
slug: images
label: Using images
screenshot: images.webp
shapes:
- shape: circle

8
_posts/demos/2013-05-02-adaptive.html
Unescape Escape View File

@ -19,10 +19,10 @@ extraCSS: [ "/css/gallery.css" ]
<div class="span6">
<div class="filter-group filter--colors js-colors">
<h5 class="filter__label">Colors</h5>
<button class="green" data-filter-value="green"><span class="visuallyhidden">Green</span></button>
<button class="blue" data-filter-value="blue"><span class="visuallyhidden">Blue</span></button>
<button class="red" data-filter-value="red"><span class="visuallyhidden">Red</span></button>
<button class="orange" data-filter-value="orange"><span class="visuallyhidden">Orange</span></button>
<button class="btn btn--go" data-filter-value="green"><span class="visuallyhidden">Green</span></button>
<button class="btn btn--primary" data-filter-value="blue"><span class="visuallyhidden">Blue</span></button>
<button class="btn btn--danger" data-filter-value="red"><span class="visuallyhidden">Red</span></button>
<button class="btn btn--warning" data-filter-value="orange"><span class="visuallyhidden">Orange</span></button>
</div>
</div>

0
_posts/demos/2013-05-03-responsive.html → _posts/demos/2013-05-03-images.html
Unescape Escape View File

112
_scss/_buttons.scss
Unescape Escape View File

@ -31,8 +31,8 @@ button {
transition: .2s ease-out;
&:hover {
background-color: lighten($wetAsphalt, 10);
box-shadow: 0 2px 0 0 darken($wetAsphalt, 5);
background-color: lighten($wetAsphalt, 12);
// box-shadow: 0 2px 0 0 darken($wetAsphalt, 5);
}
&.active,
@ -46,19 +46,115 @@ button {
}
}
.btn--filter {
.btn--warning {
background-color: $carrot;
&:hover {
background-color: lighten($carrot, 5);
box-shadow: 0 2px 0 0 darken($carrot, 5);
background-color: lighten($carrot, 8);
}
&.active,
&:active {
background-color: $pumpkin;
// background-color: $pumpkin;
background-color: $carrot;
}
}
.btn--sort {
}
.btn--primary {
background-color: $river;
&:hover {
background-color: lighten($river, 8);
}
&.active,
&:active {
// background-color: $belizeHole;
background-color: $river;
}
}
.btn--danger {
background-color: $alizarin;
&:hover {
background-color: lighten($alizarin, 8);
}
&.active,
&:active {
// background-color: $pomegranate;
background-color: $alizarin;
}
}
.btn--go {
background-color: $emerald;
&:hover {
background-color: lighten($emerald, 8);
}
&.active,
&:active {
// background-color: $nephritis;
background-color: $emerald;
}
}
.filter-group .btn {
position: relative;
$size: 20px;
// Circle and check
&.active::before,
&.active::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: $size;
height: $size;
margin-left: -$size / 2;
margin-top: -$size / 2;
opacity: 0;
transition: .2s;
}
// Circle
&::before {
background-color: $gray10;
border-radius: 50%;
}
// Check
&::after {
background-size: 60%;
background-position: center center;
background-repeat: no-repeat;
background-image: url(../img/check.svg);
}
&.active::before,
&.active::after {
opacity: 1;
}
}

2
_scss/_variables.scss
Unescape Escape View File

@ -1,4 +1,4 @@
// Some colors from Flat UI
// Colors from Flat UI
$turqoise: #1ABC9C;
$greenSea: #16A085;

14
_scss/gallery.scss
Unescape Escape View File

@ -15,19 +15,7 @@
button {
width: 40px;
height: 40px;
}
.blue {
background-color: $river;
}
.red {
background-color: $alizarin;
}
.orange {
background-color: $orange;
}
.green {
background-color: $emerald;
padding: 0;
}
}

13
css/gallery.css
Unescape Escape View File

@ -9,18 +9,7 @@
.filter-group button {
width: 40px;
height: 40px;
}
.filter-group .blue {
background-color: #3498db;
}
.filter-group .red {
background-color: #e74c3c;
}
.filter-group .orange {
background-color: #f39c12;
}
.filter-group .green {
background-color: #2ecc71;
padding: 0;
}
.shape {

73
css/style.css
Unescape Escape View File

@ -1941,8 +1941,7 @@ button {
}
.btn:hover,
button:hover {
background-color: #46627f;
box-shadow: 0 2px 0 0 #2b3c4e;
background-color: #4a6885;
}
.btn.active, .btn:active,
button.active,
@ -1955,15 +1954,73 @@ button:active {
transition: none;
}
.btn--filter {
.btn--warning {
background-color: #e67e22;
}
.btn--filter:hover {
background-color: #e98b39;
box-shadow: 0 2px 0 0 #d67118;
.btn--warning:hover {
background-color: #ea9347;
}
.btn--filter.active, .btn--filter:active {
background-color: #d35400;
.btn--warning.active, .btn--warning:active {
background-color: #e67e22;
}
.btn--primary {
background-color: #3498db;
}
.btn--primary:hover {
background-color: #57aae1;
}
.btn--primary.active, .btn--primary:active {
background-color: #3498db;
}
.btn--danger {
background-color: #e74c3c;
}
.btn--danger:hover {
background-color: #eb6d60;
}
.btn--danger.active, .btn--danger:active {
background-color: #e74c3c;
}
.btn--go {
background-color: #2ecc71;
}
.btn--go:hover {
background-color: #4cd787;
}
.btn--go.active, .btn--go:active {
background-color: #2ecc71;
}
.filter-group .btn {
position: relative;
}
.filter-group .btn.active::before, .filter-group .btn.active::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
transition: .2s;
}
.filter-group .btn::before {
background-color: #2c3e50;
border-radius: 50%;
}
.filter-group .btn::after {
background-size: 60%;
background-position: center center;
background-repeat: no-repeat;
background-image: url(../img/check.svg);
}
.filter-group .btn.active::before, .filter-group .btn.active::after {
opacity: 1;
}
.ib {

5
img/check.svg
Unescape Escape View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="38.953 38.347 20 20" enable-background="new 38.953 38.347 20 20" xml:space="preserve">
<path fill="#FFFFFF" d="M46.137,55.759l-6.184-6.224l3.003-3.022l3.269,3.287l8.812-8.865l2.916,2.935L46.137,55.759z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 519 B

8
index.html
Unescape Escape View File

@ -30,10 +30,10 @@ includeHeader: true
<div class="span9">
<p class="filter__label">Filter:</p>
<div class="filter-options btn-group">
<button class="btn btn--filter" data-group="wallpaper">Wallpapers</button>
<button class="btn btn--filter" data-group="graphics">Graphic Design</button>
<button class="btn btn--filter" data-group="photography">Photography</button>
<button class="btn btn--filter" data-group="3d">3D Renders</button>
<button class="btn btn--warning" data-group="wallpaper">Wallpapers</button>
<button class="btn btn--warning" data-group="graphics">Graphic Design</button>
<button class="btn btn--warning" data-group="photography">Photography</button>
<button class="btn btn--warning" data-group="3d">3D Renders</button>
</div>
</div>
<div class="span3">

6
js/demos/homepage.js
Unescape Escape View File

@ -3,6 +3,7 @@ var DEMO = (function( $ ) {
var $grid = $('#grid'),
$filterOptions = $('.filter-options'),
$sizer = $grid.find('.shuffle__sizer'),
init = function() {
setupFilters();
@ -12,7 +13,7 @@ var DEMO = (function( $ ) {
// instantiate the plugin
$grid.shuffle({
itemSelector: '.picture-item',
columnWidth: $grid.find('.shuffle__sizer')
columnWidth: $sizer
});
// Destroy it! o_O
@ -52,8 +53,7 @@ var DEMO = (function( $ ) {
setupSorting = function() {
// Sorting options
$('.sort-options').on('change', function() {
var $this = $(this),
sort = this.value,
var sort = this.value,
opts = {};
// We're given the element wrapped in jQuery

2
js/jquery.shuffle.js
Unescape Escape View File

@ -1021,7 +1021,7 @@ Shuffle.prototype = {
// Overrideable options
Shuffle.options = {
group : 'all', // Filter group
speed : 300, // Transition/animation speed (milliseconds)
speed : 250, // Transition/animation speed (milliseconds)
easing : 'ease-out', // css easing function to use
itemSelector: '', // e.g. '.gallery-item'
gutterWidth : 0, // a static number or function that tells the plugin how wide the gutters between columns are (in pixels)

Write Preview
Loading…
Cancel
Save