IBK: Filters Toggle
JADE
mixin filter-toggle(id)
.btn-group(id=id)
block
mixin filter-option(href,withimage,type)
a.btn(href=href)
- if (withimage)
- if (type='visa')
i.i-card.i-card-visa VISA
- else if (type='mastercard')
i.i-card.i-card-mastercard MASTERCARD
- else if (type='amex')
i.i-card.i-card-amex AMERICAN EXPRESS
- else
span
block
- else
span
block
+filter-toggle(options)
+filter-option("#")
| Opción 1
+filter-option("#")
| Opción 2
br
+filter-toggle(cards)
+filter-option("#",true,"visa")
+filter-option("#",true,"mastercard")
+filter-option("#",true,"amex")
SCSS
.btn {
border: solid 1px #e7e7e7;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
padding: 0 26px;
height: 48px;
line-height: 45px;
color: #333;
font-family: 'Omnes';
font-weight: 500;
font-size: 16px;
display: inline-block;
}
.btn.selected:hover,
.btn:hover {
background-color: #fafafa;
}
.btn:active {
transform: translateY(1px);
}
.btn.selected {
background-color: #f7f7f7;
}
.btn.no-selected {
color: #c1c1c1;
}
.btn-group {
display: inline-block;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.btn-group .btn {
float: left;
border-radius: 0;
box-shadow: none;
}
.btn-group .btn span {
display: inline-block;
}
.btn-group .btn:active {
transform: none;
}
.btn-group .btn:active span {
transform: translateY(1px);
}
.btn-group .btn:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.btn-group .btn:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.btn-group .btn + .btn {
border-left: none;
}
.i-card {
text-indent: -500px;
overflow: hidden;
display: inline-block;
width: 48px;
height: 48px;
background-image: url(cards.png);
}
a:active .i-card {
transform: translateY(1px);
}
.btn.no-selected:hover .i-card-visa,
.i-card-visa {
background-position: 0 0;
}
.btn.no-selected .i-card-visa {
background-position: 0 -48px;
}
.btn.no-selected:hover .i-card-mastercard,
.i-card-mastercard {
background-position: -48px 0;
}
.btn.no-selected .i-card-mastercard {
background-position: -48px -48px;
}
.btn.no-selected:hover .i-card-amex,
.i-card-amex {
background-position: -96px 0;
}
.btn.no-selected .i-card-amex {
background-position: -96px -48px;
}
.cards .btn-group .btn {
width: 82px;
padding-left: 0;
padding-right: 0;
}
JAVASCRIPT
$(function(){
var SELECTED = 'selected';
var NOSELECTED = 'no-selected';
$('.btn-group').each(function(){
var $btn_group = $(this);
var $btns = $('.btn', $btn_group);
$btns.on('click', function(e){
e.preventDefault();
var $btn = $(this);
var $btn_group = $btn.parent();
if ($('.btn.' + SELECTED, $btn_group).length == 1 && $btn.hasClass(SELECTED)) {
$('.btn', $btn_group)
.removeClass(SELECTED)
.removeClass(NOSELECTED);
} else {
if ($btn.hasClass(SELECTED)) {
$btn.removeClass(SELECTED);
$btn.addClass(NOSELECTED);
} else {
$btn.addClass(SELECTED);
$btn.removeClass(NOSELECTED);
}
$('.btn:not(.'+ SELECTED +')', $btn_group).addClass(NOSELECTED);
}
});
});
});
