From 53152b4adb26e111d02a478a138f3bca1faf630c Mon Sep 17 00:00:00 2001 From: Glen Cheney Date: Wed, 26 Jun 2013 18:30:09 -0700 Subject: [PATCH] Filter button states --- _config.yml | 10 +- _posts/demos/2013-05-02-adaptive.html | 8 +- ...responsive.html => 2013-05-03-images.html} | 0 _scss/_buttons.scss | 112 ++++++++++++++++-- _scss/_variables.scss | 2 +- _scss/gallery.scss | 14 +-- css/gallery.css | 13 +- css/style.css | 73 ++++++++++-- img/check.svg | 5 + index.html | 8 +- js/demos/homepage.js | 6 +- js/jquery.shuffle.js | 2 +- 12 files changed, 194 insertions(+), 59 deletions(-) rename _posts/demos/{2013-05-03-responsive.html => 2013-05-03-images.html} (100%) create mode 100644 img/check.svg diff --git a/_config.yml b/_config.yml index 4ebe1fd..24f3b42 100644 --- a/_config.yml +++ b/_config.yml @@ -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 diff --git a/_posts/demos/2013-05-02-adaptive.html b/_posts/demos/2013-05-02-adaptive.html index 8e432bd..833a9b8 100644 --- a/_posts/demos/2013-05-02-adaptive.html +++ b/_posts/demos/2013-05-02-adaptive.html @@ -19,10 +19,10 @@ extraCSS: [ "/css/gallery.css" ]
Colors
- - - - + + + +
diff --git a/_posts/demos/2013-05-03-responsive.html b/_posts/demos/2013-05-03-images.html similarity index 100% rename from _posts/demos/2013-05-03-responsive.html rename to _posts/demos/2013-05-03-images.html diff --git a/_scss/_buttons.scss b/_scss/_buttons.scss index 02da1b0..971df5a 100644 --- a/_scss/_buttons.scss +++ b/_scss/_buttons.scss @@ -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 { -} \ No newline at end of file +.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; + } +} + + + + + + + + + + + + + + + + + diff --git a/_scss/_variables.scss b/_scss/_variables.scss index d5ac6a5..7c8aa1c 100644 --- a/_scss/_variables.scss +++ b/_scss/_variables.scss @@ -1,4 +1,4 @@ -// Some colors from Flat UI +// Colors from Flat UI $turqoise: #1ABC9C; $greenSea: #16A085; diff --git a/_scss/gallery.scss b/_scss/gallery.scss index 8f2816f..dd214c5 100644 --- a/_scss/gallery.scss +++ b/_scss/gallery.scss @@ -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; } } diff --git a/css/gallery.css b/css/gallery.css index 61b7143..171d774 100644 --- a/css/gallery.css +++ b/css/gallery.css @@ -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 { diff --git a/css/style.css b/css/style.css index 09947cc..ce378c5 100644 --- a/css/style.css +++ b/css/style.css @@ -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 { diff --git a/img/check.svg b/img/check.svg new file mode 100644 index 0000000..388df9a --- /dev/null +++ b/img/check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.html b/index.html index d67231c..9093c95 100644 --- a/index.html +++ b/index.html @@ -30,10 +30,10 @@ includeHeader: true

Filter:

- - - - + + + +
diff --git a/js/demos/homepage.js b/js/demos/homepage.js index 3d61534..2f2fe72 100644 --- a/js/demos/homepage.js +++ b/js/demos/homepage.js @@ -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 diff --git a/js/jquery.shuffle.js b/js/jquery.shuffle.js index c9acf9d..31e362c 100644 --- a/js/jquery.shuffle.js +++ b/js/jquery.shuffle.js @@ -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)