Skip to content

Instantly share code, notes, and snippets.

@mr-stezz

mr-stezz/dabblet.css

Created August 17, 2012 12:48
Show Gist options
  • Save mr-stezz/3378515 to your computer and use it in GitHub Desktop.
Save mr-stezz/3378515 to your computer and use it in GitHub Desktop.
Download ZIP
filter object abstractions
Raw
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;
margin-bottom:1.6923076923076923em;
}
.vehicle-search{
width:50%;
}
.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,
.jumbo .filter-container{
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,
.jumbo .input-select + .input-select,
.jumbo .filter-footer{
border-top:1px solid #dedfdf;
}
.filter-footer{
padding:0.9230769230769231em 0.9230769230769231em 0.6153846153846154em 0.9230769230769231em;
}
.filter-description,
.filter-colours > .island,
.jumbo .input-select{width:100%;}
.filter-commodity > .island,
.mini .filter-find > .filter,
.mini .filter-options > .islet{width:50%;}
.filter-find > .filter,
.filter-find > .islet,
.filter-performance > .island,
.filter-type > .filter,
.filter-commodity > .islet,
.filter-new-driver > .island,
.filter-location > .filter,
.mini .filter-expense > .island,
.mini .filter-performance > .island,
.mini .filter-type > .filter{width:25%;}
.input-select.filter{float:left;}
.input-label{
display:block;
font-weight:bold;
color:#999;
margin:0;
}
.filter-label{
text-align:center;
}
.jumbo .form-fancy .input-select{
font-size:1.2307692307692308em;
}
.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;
}
/* jumbo vehicle search tool */
/*-- 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;
}
Raw
dabblet.html
<div class="mini vehicle-search 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>
<div class="vehicle-search search-tool">
<div class="row filter-header is-hidden for-mobile">
<div class="island">
<h2>Search Results</h2>
<p>Search for any <strong>Audi A4</strong> with&hellip; <a href="#js-mobile-filters-collapsed" title="">Open</a>.</p>
</div>
</div>
<form class="row filter-container form-fancy is-collapsed for-desktop">
<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">
<option selected>Range</option>
</select>
<select class="input-select filter derivative" disabled>
<option selected>Select a Range first.</option>
</select>
<label class="islet filter input-label inline-checkbox disable-if-new">
<input type="checkbox" class="input-checkbox" disabled>
Manufacturer Approved Only
</label>
</div>
<div class="row filter-performance">
<div class="island filter sf-price range-slider" title="">
</div>
<div class="island filter sf-mileage range-slider" title="">
</div>
<div class="island filter sf-mpg range-slider" title="">
</div>
<div class="island filter sf-emissions range-slider" title="">
</div>
</div>
<div class="row filter-type">
<select class="input-select filter style">
<option selected>Style</option>
</select>
<select class="input-select filter fuel">
<option selected>Fuel</option>
</select>
<select class="input-select filter transmission">
<option selected>Gearbox</option>
</select>
<select class="input-select filter doors">
<option selected>Doors</option>
</select>
</div>
<div class="row filter-commodity">
<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>
<label class="islet filter input-label inline-checkbox" for="has-photos">
<input type="checkbox" class="input-checkbox">
Has Photos
</label>
<label class="islet filter input-label inline-checkbox" for="has-video">
<input type="checkbox" class="input-checkbox">
Has Videos
</label>
</div>
<fieldset class="is-collapsed">
<div class="row filter-new-driver">
<div class="island filter sf-insurance range-slider">
</div>
<div class="island filter sf-bhp range-slider">
</div>
<div class="island filter sf-engine-size range-slider">
</div>
<div class="island filter sf-no-of-gears range-slider">
</div>
</div>
<div class="row filter-location disable-if-new">
<select class="input-select filter town">
<option selected>Town</option>
</select>
<select class="input-select filter county">
<option selected>county</option>
</select>
<select class="input-select filter reg-year-from">
<option selected>Physical Age</option>
</select>
<select class="input-select filter added-within-weeks">
<option selected>Days in stock</option>
</select>
</div>
</fieldset>
<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 New Cars</a>. View <a href="" title="">More Filters</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>
<div class="row filter-expander is-hidden for-mobile">
<a href="#js-form-collapse" title="" class="" data-classtoggle-class="mobile-filters-collapsed">Close</a>
</div>
</fieldset>
</form>
</div>
<div class="jumbo vehicle-search search-tool">
<div class="row filter-container form-fancy">
<select class="input-select">
<option selected>Any Manufacturer</option>
</select>
<select class="input-select">
<option selected>Select a manufacturer first</option>
</select>
<select class="input-select">
<option selected>Any Monthly Payment</option>
</select>
<select class="input-select">
<option selected>Any Contract Length</option>
</select>
<select class="input-select">
<option selected>Any Annual Mileage</option>
</select>
<fieldset class="island">
<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>
</div>
</div>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment