Skip to content

Instantly share code, notes, and snippets.

@mr-stezz

mr-stezz/dabblet.css

Created January 21, 2013 11:31
Show Gist options
  • Save mr-stezz/4585437 to your computer and use it in GitHub Desktop.
Save mr-stezz/4585437 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
*{padding:0;margin:0;box-sizing:border-box;}
body{font:81.25%/2 sans-serif;}
input,select,textarea{display:inline-block;padding:0.077em 0.308em;}
.is-accessible,.accessibility,.is-semantic{position:absolute;left:-99999px;}
.filter-colours{border-top:0.077em solid rgba(0,0,0,.10);}
.filter-colours>.filter{padding:0 0.9230769230769231em;}
[class*="filter-"]{overflow:hidden;}
.filter-description,.filter-colours>.filter{width:100%;}
.filter-label{font-weight:bold;font-size:.846em;text-align:center;color:#888;}
.input-label{display:block;margin:0;}
.filter{float:left;}
.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:not(#foo) > .input-label > input[type="checkbox"]{width:1.7692307692307692em;height:1.7692307692307692em;float:left;opacity:0;margin:0;}
.colour-picker > li:not(#foo) > .input-label > input[type="checkbox"]:checked + label{background-position:-23px 0;}
.colour-picker > li:not(#foo) > .input-label > input[type="checkbox"] + label{background-image:url(http://st2.listers.co.uk/img/ui/colour-tick.svg);background-repeat:no-repeat;background-size:auto 23px;background-position:0 0;}
.colour-label{display:block;width:2.090909090909091em;height:2.090909090909091em;cursor:pointer;border-radius:0.18181818181818182em;box-shadow:inset 0 0 0 0.09090909090909091em rgba(0,0,0,.1),0 0.09090909090909091em 0 #fff;padding:0.36363636363636365em;margin:0;}
.colour-black{background-color:#121212;}
.colour-brown{background-color:#6b4424;}
.colour-checkbox:focus ~ .colour-label{outline:1px solid rgba(0,0,0,0.5);}
Raw
dabblet.html
<div class="filter-colours SF_Colour disableIfNew">
<div class="filter">
<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="input-label"><input id="black-colour-checkbox" name="SF_Colour" type="checkbox" value="Black" class="colour-checkbox"><label class="colour-label colour-black dark" for="black-colour-checkbox"><span class="accessibility">Black</span></label></span></li>
<li><span class="input-label"><input id="brown-colour-checkbox" name="SF_Colour" type="checkbox" value="Brown" class="colour-checkbox"><label class="colour-label colour-brown dark" for="brown-colour-checkbox"><span class="accessibility">Brown</span></label></span></li>
<li><span class="input-label"><input id="red-colour-checkbox" name="SF_Colour" type="checkbox" value="Red" class="colour-checkbox"><label class="colour-label colour-red dark" for="red-colour-checkbox"><span class="accessibility">Red</span></label></span></li>
<li><span class="input-label"><input id="orange-colour-checkbox" name="SF_Colour" type="checkbox" value="Orange" class="colour-checkbox"><label class="colour-label colour-orange dark" for="orange-colour-checkbox"><span class="accessibility">Orange</span></label></span></li>
<li><span class="input-label"><input id="yellow-colour-checkbox" name="SF_Colour" type="checkbox" value="Yellow" class="colour-checkbox"><label class="colour-label colour-yellow light" for="yellow-colour-checkbox"><span class="accessibility">Yellow</span></label></span></li>
<li><span class="input-label"><input id="gold-colour-checkbox" name="SF_Colour" type="checkbox" value="Gold" class="colour-checkbox"><label class="colour-label colour-gold dark" for="gold-colour-checkbox"><span class="accessibility">Gold</span></label></span></li>
<li><span class="input-label"><input id="beige-colour-checkbox" name="SF_Colour" type="checkbox" value="Beige" class="colour-checkbox"><label class="colour-label colour-beige light" for="beige-colour-checkbox"><span class="accessibility">Beige</span></label></span></li>
<li><span class="input-label"><input id="green-colour-checkbox" name="SF_Colour" type="checkbox" value="Green" class="colour-checkbox"><label class="colour-label colour-green dark" for="green-colour-checkbox"><span class="accessibility">Green</span></label></span></li>
<li><span class="input-label"><input id="blue-colour-checkbox" name="SF_Colour" type="checkbox" value="Blue" class="colour-checkbox"><label class="colour-label colour-blue dark" for="blue-colour-checkbox"><span class="accessibility">Blue</span></label></span></li>
<li><span class="input-label"><input id="purple-colour-checkbox" name="SF_Colour" type="checkbox" value="Purple" class="colour-checkbox"><label class="colour-label colour-purple dark" for="purple-colour-checkbox"><span class="accessibility">Purple</span></label></span></li>
<li><span class="input-label"><input id="white-colour-checkbox" name="SF_Colour" type="checkbox" value="White" class="colour-checkbox"><label class="colour-label colour-white light" for="white-colour-checkbox"><span class="accessibility">White</span></label></span></li>
<li><span class="input-label"><input id="silver-colour-checkbox" name="SF_Colour" type="checkbox" value="Silver" class="colour-checkbox"><label class="colour-label colour-silver light" for="silver-colour-checkbox"><span class="accessibility">Silver</span></label></span></li>
<li><span class="input-label"><input id="grey-colour-checkbox" name="SF_Colour" type="checkbox" value="Grey" class="colour-checkbox"><label class="colour-label colour-grey dark" for="grey-colour-checkbox"><span class="accessibility">Grey</span></label></span></li>
</ul>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment