Created
May 27, 2014 21:03
Revisions
-
Anonymous created this gist
May 27, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,9 @@ Animated filter --------------- design by https://dribbble.com/shots/1372856-Flat-UI-Homepage-design-for-Juiiicy?list=users&offset=5 Forked from [Igor Dobrovolsky](/idobrovolsky)'s Pen [Animated filter](/idobrovolsky/pen/EiKLI/). A [Pen](http://codepen.io/anon/pen/cxgod) by [A Non Ymous](http://codepen.io/anon) on [CodePen](http://codepen.io/). [License](http://codepen.io/anon/pen/cxgod/license). This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,65 @@ .filter %p.title Filters %p.title_items Type %ul %li %input{type: "radio", id: "all", name: "type"} %label{for: "all"} All %li %input{type: "radio", id: "website", name: "type"} %label{for: "website"} Website %li %input{type: "radio", id: "icon", name: "type"} %label{for: "icon"} Icon %li %input{type: "radio", id: "mobile", name: "type"} %label{for: "mobile"} Mobile %li %input{type: "radio", id: "logo", name: "type"} %label{for: "logo"} Logo %li %input{type: "radio", id: "print", name: "type"} %label{for: "print"} Print %li %input{type: "radio", id: "ui", name: "type"} %label{for: "ui"} UI %li %input{type: "radio", id: "illustration", name: "type"} %label{for: "illustration"} Illustration %p.title_items City %ul %li %input{type: "radio", id: "ny", name: "city"} %label{for: "ny"} New York %li %input{type: "radio", id: "va", name: "city"} %label{for: "va"} Vancouver %li %input{type: "radio", id: "la", name: "city"} %label{for: "la"} Los Angeles %li %input{type: "radio", id: "ch", name: "city"} %label{for: "ch"} Chicago %li %input{type: "radio", id: "se", name: "city"} %label{for: "se"} Seattle %li %input{type: "radio", id: "san", name: "city"} %label{for: "san"} San Francisco %li %input{type: "radio", id: "to", name: "city"} %label{for: "to"} Toronto %p.title_items Budget %ul %li %input{type: "radio", id: "small", name: "bonus"} %label{for: "small"} 100 - 300 %li %input{type: "radio", id: "medium", name: "bonus"} %label{for: "medium"} 300 - 1000 %li %input{type: "radio", id: "big", name: "bonus"} %label{for: "big"} 1000 - 3000 %li %input{type: "radio", id: "bigest", name: "bonus"} %label{for: "bigest"} more 3000 This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,24 @@ $(function() { transition_timeout = 40; $('.title_items').click(function() { current = $(this).next().find('li'); $(this).toggleClass('active'); current.toggleClass('visible'); if ($(this).hasClass('active')) { for( i = 0; i <= current.length; i++ ) { $(current[i]).css('transition-delay', transition_timeout * i + 'ms'); } } else { for( i = current.length, j = -1; i >= 0; i--, j++) { $(current[i]).css('transition-delay', transition_timeout * j + 'ms'); } } }); }); This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,164 @@ @import "compass/css3"; body { background-color: #e0eafd; } .filter { width: 220px; margin: 20px auto; font-family: 'Whitney', sans-serif; p { padding: 0 10px; } p, li { font-weight: bold; line-height: 35px; font-size: 12px; } .title { color: #fff; background-color: #1ba0eb; @include border-radius(3px 3px 0 0); } .title_items { color: #94a4c3; cursor: pointer; position: relative; background-color: #fff; border-bottom: 1px solid #e4effd; @include transition(.2s linear background-color); &:hover { background-color: #f4f4f4; } &.active + ul + .title_items { border-top: 1px solid #e4effd; } &.active:after { height: 5px; width: 5px; right: 14px; margin-top: -2.5px; } &:before, &:after { content: ""; position: absolute; @include border-radius(3px); background-color: #c3d0e8; @include transition(.3s linear all); } &:before { height: 5px; width: 13px; top: 50%; right: 10px; margin-top: -2.5px; } &:after { height: 13px; width: 5px; top: 50%; right: 14px; margin-top: -6.5px; } } ul { @include transition-property(all); @include transition-timing-function(linear); li { height: 0; @include opacity(0); color: #92a5bf; background-color: #f5f8fe; @include transition(.2s linear all); &:nth-child(odd) { @include transform(scale(.5) translateX(-150px)); } &:nth-child(even) { @include transform(scale(.5) translateX(150px)); } &.visible { height: 36px; @include opacity(1); @include transform(scale(1) translateX(0)); } &:last-child label { border-bottom: none; } &:nth-child(1) label:before, &:nth-child(1) label:after { border-color: #5db6e2; } &:nth-child(2) label:before, &:nth-child(2) label:after { border-color: #c0a2f1; } &:nth-child(3) label:before, &:nth-child(3) label:after { border-color: #f7a238; } &:nth-child(4) label:before, &:nth-child(4) label:after { border-color: #f6d04d; } &:nth-child(5) label:before, &:nth-child(5) label:after { border-color: #40c9a1; } &:nth-child(6) label:before, &:nth-child(6) label:after { border-color: #ea8b8b; } &:nth-child(7) label:before, &:nth-child(7) label:after { border-color: #fe8ae0; } &:nth-child(8) label:before, &:nth-child(8) label:after { border-color: #abb6d2; } } } input[type="radio"] { display: none; &:checked + label:after { @include opacity(1); } } label { margin: 0 15px; display: block; cursor: pointer; position: relative; padding: 0 10px 0 25px; border-bottom: 1px solid #ddebfd; &:before { content: ""; height: 10px; width: 10px; top: 50%; left: 0; margin-top: -9px; position: absolute; border-width: 3px; border-style: solid; @include border-radius(50%); } &:after { content: ""; top: 50%; left: 5px; margin-top: -4px; position: absolute; border-width: 3px; border-style: solid; @include opacity(0); @include border-radius(50%); @include transition(.2s linear all); } } }