filter object abstractions

dabblet.css

/* filter object abstractions */
*{
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
html{ padding:1em; }
body{ font:13px/22px helvetica,sans-serif; }

label{
	display:block;
}

fieldset{
	border:0;
	padding:0;
	margin:0;
}

/* boundaries */
.row:before,
.row:after{
	content:"";
	display:table;
}

.row:after{
	clear:both;
}

.row{
	max-width:75.6923076923077em;
	position:relative;
	margin:0 auto 0.8461538461538461em auto;
}

	.row > .island,
	.row > .islet{
		width:100%;
	}

	.row .row{
		width:auto;
		max-width:none;
		min-width:0;
		margin:0 -0.9230769230769231em;
	}

.island,
.islet{
	display:block;
	float:left;
	padding:0 0.9230769230769231em;
}

/*-- layout --*/
.nav{
	list-style:none;
	/* margin-left:0; disabled for the sake of this demo */
}

	.nav > li,
		.nav a{
			display:inline-block;
			vertical-align:vertical-align;
		}

/*-- modules --*/
/* search tool */
.search-tool{
	overflow:hidden;
	background-color:#fff;
	border:0.07692307692307693em solid #dedfdf;
	border-radius:0.3076923076923077em;
}

.odometer{
	display:inline-block;
	height:1.625em;
	overflow:hidden;
	float:right;
	font-weight:bold;
	font-size:1.2307692307692308em;
	line-height:1.625;
	color:#fff;
	text-shadow:0 -0.07692307692307693em 0 #1d1d1d;
	background-color:#282828;
	background-image:-webkit-linear-gradient(#282828 0%,#565656 20%,#464646 80%,#282828 100%);
	background-image:-moz-linear-gradient(#282828 0%,#565656 20%,#464646 80%,#282828 100%);
	background-image:-o-linear-gradient(#282828 0%,#565656 20%,#464646 80%,#282828 100%);
	background-image:linear-gradient(#282828 0%,#565656 20%,#464646 80%,#282828 100%);
	border-radius:0.15384615384615385em;
	border:0.07692307692307693em solid #333333;
	border-top-color:#151515;
	border-bottom-color:#1b1b1b;
}
.digits{
	width:1.25em;
	float:left;
	box-shadow:
	inset 0.07142857142857142em 0 0 rgba(255,255,255,.06),
	inset -0.07142857142857142em 0 0 rgba(255,255,255,.06);
	padding:0;
	margin:0;
}
.odometer > ol + ol{
	border-left:0.07142857142857142em solid rgba(0,0,0,.2);
}
.digits > li{
	line-height:1.625;
	font-family:Consolas,"Lucida Console",Courier,monospace;
	text-align:center;
	vertical-align:baseline;
	position:relative;
	bottom:0;
	-webkit-transition:position 1000ms ease-in-out;
	-moz-transition:position 1000ms ease-in-out;
	transition:position 1000ms ease-in-out;
}
.digits:nth-child(2) li[class*="number"]{-webkit-transition-delay:250ms;-moz-transition-delay:250ms;-o-transition-delay:250ms;transition-delay:250ms;}
.digits:nth-child(3) li[class*="number"]{-webkit-transition-delay:500ms;-moz-transition-delay:500ms;-o-transition-delay:500ms;transition-delay:500ms;}
.digits:nth-child(4) li[class*="number"]{-webkit-transition-delay:750ms;-moz-transition-delay:750ms;-o-transition-delay:750ms;transition-delay:750ms;}

/* multiples of 26px */
.digit0 > li{bottom:0;}
.digit1 > li{bottom:1.625em;}
.digit2 > li{bottom:3.25em;}
.digit3 > li{bottom:4.875em;}
.digit4 > li{bottom:6.5em;}
.digit5 > li{bottom:8.125em;}
.digit6 > li{bottom:9.75em;}
.digit7 > li{bottom:11.375em;}
.digit8 > li{bottom:13em;}
.digit9 > li{bottom:14.625em;}

.filter-header,
.filter-footer,
.filter-container .row{
	background-color:#fff;
	background-image:-webkit-linear-gradient(#ffffff 50%,#f4f4f4);
	background-image:-moz-linear-gradient(#ffffff 50%,#f4f4f4);
	background-image:-o-linear-gradient(#ffffff 50%,#f4f4f4);
	background-image:linear-gradient(#ffffff 50%,#f4f4f4);
	margin-bottom:0;
}
.filter-container .row + .row{
	border-top:1px solid #dedfdf;
}
.filter-footer{
	padding:0.9230769230769231em 0.9230769230769231em 0.6153846153846154em 0.9230769230769231em;
}

.filter-description,
.filter-colours > .island{width:100%;}

.filter-find > .input-select,
.filter-options > .islet{width:50%;}

.filter-expense > .island,
.filter-performance > .island,
.filter-type > .input-select{width:25%;}

.input-select.filter{float:left;}
.input-label{
	display:block;
	font-weight:bold;
	color:#999;
	margin:0;
}
.filter-label{
	text-align:center;
}
.inline-checkbox{
	height:3.090909090909091em;
	float:left;
	line-height:3.090909090909091;
	padding:0 0 0 2.727272727272727em;
}
.inline-checkbox > .checkbox{
	width:auto;
	float:left;
	margin:0 0 0 -1.6363636363636365em;
}

.colour-picker{
	width:100%;
	overflow:hidden;
	padding:0.23076923076923078em 0 0.46153846153846156em 0;
	margin:0;
}
.colour-picker > li{display:block;float:left;}
.colour-picker > li + li{margin-left:0.38461538461538464em;}
.colour-checkbox{
	width:2.090909090909091em;
	height:2.090909090909091em;
	-webkit-appearance:none;
	-moz-appearance:none;
	cursor:pointer;
	border-radius:0.18181818181818182em;
	box-shadow:inset 0 0 0 0.09090909090909091em rgba(0,0,0,.1),0 0.09090909090909091em 0 #fff;
	margin:0;
}

/*-- themes -- */
.form-fancy{
	margin-bottom:0;
}

    .form-fancy fieldset{
    	border-bottom:0.07692307692307693em solid #e9e9e9;
    }
    
    .filter-container fieldset{
        border-bottom:0;
    }
	
	.form-fancy .input-select,
	.form-fancy .input-text{
		display:inline;
		height:2.625em;
		position:relative;
		font-weight:200;
		font-size:1em;
		color:#333;
		/* strip formatting */
		-webkit-appearance:none;
		-moz-appearance:none;
		border:0;
		border-radius:0;
		box-shadow:none;
		padding:0.46153846153846156em 0.7692307692307693em;
		margin-bottom:0;
	}
	
	.form-fancy .input-select{
		background-color:transparent;
		background-image:url(/img/ui/select-arrow.png);	
		background-image:url(/img/ui/select-arrow.svg);
		background-repeat:no-repeat, repeat-x;
		background-position:right center, left top;
		
	}
	
	.form-fancy .input-select[disabled],
	.form-fancy .input-select.disabled{
	    opacity:.4;
	}
	
	.form-fancy .prefix{
		width:3.5em;
		border-right:0.07692307692307693em solid #e9e9e9;
	}
	
.form-fancy label{
	font-size:0.8461538461538461em;
	color:#888;
}


.form-fancy .checkbox + .checkbox,
.form-fancy .toggle + .toggle{
	border-right:0.07692307692307693em solid #e9e9e9;
}


.form-fancy label.checkbox,
.form-fancy label.toggle{
	display:block;
	height:4.125em;
	float:left;
	font-weight:200;
	font-size:1.2307692307692308em;
	text-align:center;
	color:#333;
	padding:0.375em 0.8125em 0.8125em 0.8125em;
	margin:0;
}


.form-fancy label.checkbox{
	width:4.5625em;
}


.form-fancy label.checkbox input[type="checkbox"]{
	float:none;
	margin:0 auto;
}


.form-fancy .toggle{
	z-index:1;
}

/*-- states --*/
/* text pushed off screen, but still present for accessibility */
.is-semantic{
	position:absolute;
	left:-769.1538461538462em;
}

dabblet.html

<div class="search-tool">
<form class="row filter-container form-fancy">
	<fieldset class="island">
		<div class="row filter-find">
			<select class="input-select filter manufacturer">
				<option selected>Manufacturer Brand</option>
			</select>
			<select class="input-select filter range" disabled>
				<option selected>Range</option>
			</select>
			<noscript>
				<input type="submit" value="Update Ranges" class="noscript-btn">
			</noscript>
		</div>
		<div class="row filter-options disable-if-new">
			<label class="islet input-label inline-checkbox">
				<input type="checkbox" class="input-checkbox approved-checkbox">
				Manufacturer Approved Only
			</label>
			<label class="islet input-label inline-checkbox">
				<input type="checkbox" class="input-checkbox has-images-checkbox">
				Photographed Only
			</label>
		</div>
		<div class="row filter-expense">
			<div class="filter island sf-price range-slider">
			</div>
			<div class="filter island sf-mileage range-slider disable-if-new">
			</div>
		</div>
		<div class="row filter-performance">
			<div class="filter island sf-mpg range-slider">
			</div>
			<div class="filter island sf-emissions range-slider">
			</div>
		</div>
		<div class="row filter-type">
			<select class="input-select filter style disable-if-new">
				<option selected>Style</option>
			</select>
			<select class="input-select filter fuel disable-if-new">
				<option selected>Fuel</option>
			</select>
			<select class="input-select filter transmission disable-if-new">
				<option selected>Gearbox</option>
			</select>
			<select class="input-select filter doors disable-if-new">
				<option selected>Doors</option>
			</select>
		</div>
		<div class="row filter-colours">
			<div class="filter island">
				<div class="filter-description">
					<label class="input-label filter-label">Please select your desired colours:</label>
				</div>
				<ul class="filter nav colour-picker">
					<li>
						<span class="is-semantic">Black</span>
						<input type="checkbox" name="sf-colour" value="black" title="black" class="colour-checkbox black dark">
					</li>
					<li>
						<span class="is-semantic">Brown</span>
						<input type="checkbox" name="sf-colour" value="brown" title="brown" class="colour-checkbox brown dark">
					</li>
					<li>
						<span class="is-semantic">Red</span>
						<input type="checkbox" name="sf-colour" value="red" title="red" class="colour-checkbox red dark">
					</li>
					<li>	
						<span class="is-semantic">Orange</span>
						<input type="checkbox" name="sf-colour" value="orange" title="orange" class="colour-checkbox orange dark">
					</li>
					<li>							
						<span class="is-semantic">Yellow</span>
						<input type="checkbox" name="sf-colour" value="yellow" title="yellow" class="colour-checkbox yellow light">
					</li>
					<li>	
						<span class="is-semantic">Beige</span>
						<input type="checkbox" name="sf-colour" value="beige" title="beige" class="colour-checkbox beige light">
					</li>
					<li>
						<span class="is-semantic">Green</span>
						<input type="checkbox" name="sf-colour" value="green" title="green" class="colour-checkbox green dark">
					</li>
					<li>
						<span class="is-semantic">Blue</span>
						<input type="checkbox" name="sf-colour" value="blue" title="blue" class="colour-checkbox blue dark">
					</li>
					<li>
						<span class="is-semantic">Purple</span>
						<input type="checkbox" name="sf-colour" value="purple" title="purple" class="colour-checkbox purple dark">
					</li>
					<li>	
						<span class="is-semantic">White</span>
						<input type="checkbox" name="sf-colour" value="white" title="white" class="colour-checkbox white light">
					</li>
					<li>
						<span class="is-semantic">Silver</span>
						<input type="checkbox" name="sf-colour" value="silver" title="silver" class="colour-checkbox silver light">
					</li>
					<li>
						<span class="is-semantic">Grey</span>
						<input type="checkbox" name="sf-colour" value="grey" title="grey" class="colour-checkbox grey light">
					</li>
				</ul>
			</div>
		</div>
		<div class="row filter-footer">
			<div class="odometer">
				<ol class="digits nav stacked digitundefined digit2">
					<li class="numberZero">0</li>
					<li class="numberOne">1</li>
					<li class="numberTwo">2</li>
					<li class="numberThree">3</li>
					<li class="numberFour">4</li>
					<li class="numberFive">5</li>
					<li class="numberSix">6</li>
					<li class="numberSeven">7</li>
					<li class="numberEight">8</li> 
					<li class="numberNine">9</li>
				</ol>
				<ol class="digits nav stacked digitundefined digit1">
					<li class="numberZero">0</li>
					<li class="numberOne">1</li>
					<li class="numberTwo">2</li>
					<li class="numberThree">3</li>
					<li class="numberFour">4</li>
					<li class="numberFive">5</li>
					<li class="numberSix">6</li>
					<li class="numberSeven">7</li>
					<li class="numberEight">8</li> 
					<li class="numberNine">9</li>
				</ol>
				<ol class="digits nav stacked digit1">
					<li class="numberZero">0</li>
					<li class="numberOne">1</li>
					<li class="numberTwo">2</li>
					<li class="numberThree">3</li>
					<li class="numberFour">4</li>
					<li class="numberFive">5</li>
					<li class="numberSix">6</li>
					<li class="numberSeven">7</li>
					<li class="numberEight">8</li> 
					<li class="numberNine">9</li>
				</ol>
				<ol class="digits nav stacked digit0">
					<li class="numberZero">0</li>
					<li class="numberOne">1</li>
					<li class="numberTwo">2</li>
					<li class="numberThree">3</li>
					<li class="numberFour">4</li>
					<li class="numberFive">5</li>
					<li class="numberSix">6</li>
					<li class="numberSeven">7</li>
					<li class="numberEight">8</li> 
					<li class="numberNine">9</li>
				</ol>
			</div>
			<label class="is-semantic">Submit Form:</label>
			<input type="submit" value="Search" class="btn btn-gloss search-button">
			or <a href="" title="">view all Used Cars</a>.
			<span class="is-hidden is-updating" style="display:none">
				<img src="http://static.listers.pcstezz/img/s/ajax-spinner-2.gif" height="16" width="16">
			</span>
		</div>
	</fieldset>
</form>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}