Skip to content

Instantly share code, notes, and snippets.

@iamsebastian

iamsebastian/dabblet.css

Created January 17, 2013 13:11
Show Gist options
  • Save iamsebastian/4555842 to your computer and use it in GitHub Desktop.
Save iamsebastian/4555842 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
@import url(http://fonts.googleapis.com/css?family=Roboto:400,900);
body {
background: #f06;
background: linear-gradient(0deg, #ddd, #ddd);
min-height: 100%;
font-family: 'Roboto', sans-serif;
margin: 0;
color: hsla(0,0%,100%,.9);
}
#header {
margin: 0;
height: 9999px;
background: linear-gradient(0deg, #aaa, #aaa);
float: left;
text-align: center;
}
#header h1 {
font-size: 1.4rem;
font-weight: 900;
color: #999;
padding: 0 1.5rem;
margin: 0;
text-shadow: 0 0 0 hsla(0,0%,0%,.1);
text-transform: uppercase;
}
#header svg {
padding: 0 0;
width: 92px;
}
#header ul {
margin: 0;
padding: 0;
text-align: center;
font-weight: 900;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0;
}
#header ul li {
width: 100%;
height: 96px;
padding: 24px 0 0 0;
margin: 0;
decoration: none;
list-style: none;
box-shadow: inset 0 -8px 0 0 hsla(0,0%,0%,.0);
background-color: hsla(0,0%,0%,.0);
}
#header ul li:first-child {
box-shadow: inset 0 -8px 0 0 hsla(0,0%,0%,.0),
inset 0 8px 0 0 hsla(0,0%,0%,.0);
margin-top: 48px;
}
#header ul li:nth-child(n) svg {
max-width: 48px;
max-height: 48px;
}
#header ul li:nth-child(n):hover svg * {
fill: hsla(42,30%,30%,.6);
}
#header ul li:nth-child(n) svg * {
transition: .2s;
}
#header ul li:nth-child(n):hover:after{
border: 21px solid;
border-color: transparent transparent transparent #aaa;
content: "";
position: absolute;
left: 117px;
}
#header ul li:nth-child(n):hover:before{
padding: 6px 16px 4px 32px;
margin: 4px 0 0 0;
height: 24px;
position: absolute;
left: 118px;
content: attr(title);
color: hsla(0,0%,100%,.7);
background-color: hsla(0,0%,30%,1);
opacity: 1;
}
#header ul li:last-child {
}
#headershadow {
float: left;
height: 9999px;
background-color: hsla(0,0%,0%,.4);
width: 1px;
margin: 0 2rem 0 0;
}
.clear {
clear: both;
}
#view, #new, #delete, #search {}
.content {
background-color: 0;
padding: 2rem;
font-weight: 900;
font-size: 1.2rem;
color: #444;
display: inline;
}
fieldset {
border: none;
}
.content input, .content button {
border: none;
padding: .3rem;
font-family: Roboto, sans-serif;
font-weight: 900;
font-size: .9rem;
color: hsla(0,0%,0%,.3);
margin: .2rem 1rem;
background-color: hsla(0,0%,100%,.7);
border-radius: .0rem;
border: 2px solid hsla(0,0%,0%,.15);
//box-shadow: inset 0 2px 2px 0 hsla(0,0%,0%,.1),
// inset 0 1px 1px 0 hsla(0,0%,0%,.3),
// 0 1px 0 0 hsla(0,0%,100%,1);
}
.content p {
padding: 1rem 0 1rem 1rem;
border: 4px solid hsla(0,0%,0%,.05);
border-radius: .4rem;
}
br {
margin: 0 0 1rem 0;
}
.content input:focus, .content input:focus:hover{
color: hsla(0,0%,0%,.6);
background-color: hsla(0,0%,100%,1);
border: 2px solid hsla(0,0%,0%,.05);
}
.content input:hover:active{
color: hsla(0,0%,0%,.4);
}
.content input:hover{
color: hsla(0,0%,0%,.1);
}
.content button {
border-left: 16px solid;
}
.content button:hover {
border-color: hsla(132,92%,23%,.4);
}
Raw
dabblet.html
<div id="header">
<svg id="Layer_1" xml:space="preserve" enable-background="new 0 0 99.686 56.29" viewBox="0 0 99.686 56.29" height="100px" width="100px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path fill="#999" d="M99.686,32.321l-6.606,3.964c-5.804-3.229-11.54,1.121-11.54,1.121s-7.596-10.709-20.444-10.515 c-5.702,0.086-10.333,1.318-14.076,3.104l-3.117-2.66c2.818-0.639,16.002-5.594,16.002-5.594c0.602-0.219,0.912-0.883,0.693-1.483 s-0.883-0.911-1.482-0.694l-2.922,1.06c2.291-2.601,4.432-5.608,4.785-6.11c0.369-0.522,0.242-1.244-0.279-1.613 c-0.523-0.367-1.246-0.242-1.614,0.279c-0.558,0.793-1.538,2.122-2.655,3.53c0.221-2.126,0.414-5.048,0.422-5.183 c0.043-0.639-0.439-1.188-1.078-1.23c-0.66-0.047-1.189,0.441-1.231,1.079c-0.003,0.035-0.233,3.522-0.469,5.599 c-0.161,1.406-1.248,3.452-1.791,4.359c-0.384,0.344-0.744,0.631-1.061,0.824c-2.724,1.673-9.951,3.49-10.024,3.508 c-0.42,0.105-0.748,0.438-0.847,0.859s0.046,0.863,0.375,1.146l4.094,3.494c-0.699,0.411-1.358,0.841-1.986,1.284l-6.236-5.178 c2.33-2.074,7.949-7.158,9.748-9.504c2.272-2.971,5.894-12.449,6.046-12.851c0.228-0.599-0.072-1.267-0.67-1.495 c-0.599-0.227-1.267,0.073-1.495,0.67c-0.015,0.038-0.609,1.592-1.444,3.602c-0.043-2.92-0.246-6.391-0.258-6.603 c-0.038-0.638-0.571-1.12-1.225-1.088c-0.638,0.038-1.125,0.586-1.088,1.226c0.117,1.982,0.372,7.367,0.21,9.323 c-0.487-2.106-1.704-4.823-1.762-4.952c-0.264-0.584-0.95-0.844-1.532-0.582c-0.583,0.264-0.843,0.948-0.581,1.532 c0.416,0.923,1.537,3.646,1.734,5.142c0.197,1.492,0.069,3.998,0.012,4.925c-2.373,2.905-10.158,9.739-10.239,9.812 c-0.255,0.223-0.398,0.547-0.395,0.887c0.005,0.338,0.158,0.658,0.418,0.875l6.872,5.705c-3.096,2.598-5.152,5.433-6.428,7.614 H5.247c0,0,0.573,1.14,2.363,2.224c1.997,1.213,4.726,2.033,4.726,2.033H0c0,0,2.805,2.651,7.086,4.002 c4.852,1.527,11.234,2.246,17.51,2.53L20.02,56.29h72.183c0,0,10.785-6.702,5.562-15.337L99.686,32.321z" fill="#010101"></path>
</svg>
<h1>Labor</h1>
<ul>
<li id="li-view" title="Dokument anzeigen.">
<svg style="fill:#444;" id="Layer_1" xml:space="preserve" enable-background="new 3.728 9.734 38.299 100" viewBox="3.728 9.734 38.299 100" height="100px" width="100px" y="0px" x="0px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><path d="M7.92,51.727v39.598v4.046c0,7.898,6.46,14.363,14.363,14.363h1.196c7.897,0,14.357-6.466,14.357-14.363v-4.046v-5.884 h-18.72c-0.992,0-1.793-0.802-1.793-1.795c0-0.99,0.801-1.791,1.793-1.791h18.72v-5.314H24.246c-0.992,0-1.793-0.806-1.793-1.797 c0-0.99,0.801-1.793,1.793-1.793h13.591v-5.312h-18.72c-0.992,0-1.793-0.807-1.793-1.799c0-0.99,0.801-1.792,1.793-1.792h18.72 v-5.313H24.246c-0.992,0-1.793-0.806-1.793-1.798c0-0.987,0.801-1.793,1.793-1.793h13.591v-3.415v-5.495H7.92V51.727z"></path><path d="M39.635,35.024h-1.538H7.659H6.122c-1.312,0-2.393,1.076-2.393,2.392v1.636c0,1.106,0.775,1.999,1.796,2.273 c0.195,0.05,0.386,0.121,0.597,0.121H7.92h29.917h1.798c0.21,0,0.4-0.069,0.596-0.121c1.021-0.275,1.796-1.167,1.796-2.273v-1.636 C42.027,36.1,40.951,35.024,39.635,35.024z"></path><path d="M29.398,29.311c3.469-0.131,6.176-3.048,6.045-6.516c-0.131-3.468-3.05-6.172-6.519-6.039 c-3.465,0.129-6.171,3.044-6.042,6.513C23.013,26.735,25.934,29.44,29.398,29.311z"></path><circle r="4.217" cy="13.951" cx="16.929"></circle><path d="M13.139,29.115c1.518,0,2.755-1.232,2.755-2.755c0-1.522-1.237-2.759-2.755-2.759c-1.523,0-2.761,1.237-2.761,2.759 C10.378,27.882,11.615,29.115,13.139,29.115z"></path>
</svg>
<li id="li-new" title="Dokument anlegen.">
<svg style="fill:#444;" xml:space="preserve" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g id="Captions"></g><g id="Your_Icon"><polygon points="4.399,89 93.5,89 93.5,16.1 53,16.1 53,24.2 85.399,24.2 85.399,80.899 12.5,80.899 12.5,56.601 4.399,56.601 "></polygon><polygon points="44.901,24.2 28.7,24.2 28.7,8 20.6,8 20.6,24.2 4.401,24.2 4.401,32.299 20.6,32.299 20.6,48.5 28.7,48.5 28.7,32.299 44.901,32.299 "></polygon></g>
</svg>
<li id="li-del" title="Dokument löschen.">
<svg style="fill:#444;" id="Layer_1" xml:space="preserve" enable-background="new -13.05 -6.119 100 95.545" viewBox="-13.05 -6.119 100 95.545" height="100px" width="100px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"><g><path d="M86.95-0.588c0,3.074-2.607,5.53-5.53,5.53h-0.767L64.061,89.426h-53.76L-6.135,4.942H-7.52c-3.071,0-5.53-2.457-5.53-5.53 c0-3.071,2.459-5.531,5.53-5.531H81.42C84.343-6.119,86.95-3.66,86.95-0.588z M8.151,4.942H2.312l0.921,4.916L8.151,4.942z M4.462,16.309l2.15,10.446l3.226,3.226l9.528-9.522l-9.528-9.371L4.462,16.309z M11.989,54.556l7.378-7.372l-9.528-9.371 l-0.921,0.924L11.989,54.556z M30.422,4.942H15.987l-2.305,2.15l9.522,9.522l9.522-9.522L30.422,4.942z M23.204,43.343l9.522-9.522 l-9.522-9.371l-9.522,9.371L23.204,43.343z M13.681,60.701l9.522,9.371l9.522-9.371l-9.522-9.522L13.681,60.701z M17.216,81.13 h9.213L15.066,69.763L17.216,81.13z M46.093,20.455l-9.523-9.368l-9.374,9.368l9.374,9.525L46.093,20.455z M27.196,47.184 l9.374,9.522l9.523-9.522l-9.523-9.371L27.196,47.184z M27.196,74.063l7.069,7.069h4.61l7.218-7.069l-9.523-9.521L27.196,74.063z M57.153,4.942H42.712l-2.15,2.15l9.368,9.522l9.522-9.522L57.153,4.942z M49.929,43.343l9.528-9.522l-9.528-9.371l-9.368,9.371 L49.929,43.343z M59.458,60.701l-9.528-9.522l-9.368,9.522l9.368,9.371L59.458,60.701z M46.704,81.13h10.449l2.607-12.902 L46.704,81.13z M69.747,17.384l-6.451-6.296l-9.368,9.368l9.368,9.525l4.918-4.761L69.747,17.384z M65.292,39.812l-1.996-1.996 l-9.368,9.368l8.293,8.45L65.292,39.812z M72.206,4.942h-7.218l5.988,5.836L72.206,4.942z"></path></g>
</svg>
<li id="li-search" title="Dokument suchen.">
<svg style="fill:#444" id="Layer_1" xml:space="preserve" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M88.895,11.105c-14.807-14.807-38.812-14.807-53.619,0c-14.807,14.806-14.807,38.812,0,53.619 c14.807,14.807,38.812,14.807,53.619,0S103.702,25.912,88.895,11.105z M84.662,60.492c-12.469,12.468-32.684,12.468-45.153,0 c-12.468-12.469-12.468-32.685,0-45.153c12.469-12.468,32.685-12.469,45.153,0S97.13,48.022,84.662,60.492z"></path><rect height="39.91" width="11.973" transform="matrix(0.7071 0.7071 -0.7071 0.7071 63.1103 10.9445)" y="61.701" x="12.357"></rect>
</svg>
</ul>
</div>
<div id="headershadow"></div>
<!--<div class="clear"></div>-->
<div id="view" class="content">
view
</div>
<div id="new" class="content">
<form action="/" method="POST">
<fieldset><p>Versuch<br/><input name="Versuch[Bezeichnung]" type="text" placeholder="Versuchsbezeichnung ..." class="text"></p>
<p>Fachgebiet<br/><input name="Versuch[Fachgebiet[Fachgebietsname]" type="text" placeholder="Fachgebietsname ..." class="text"></p>
<p>Verantwortlicher<br/><input name="Versuch[Fachgebiet[Verantwortlicher[Vorname]" type="text" placeholder="Vorname ..." class="text">
<input name="Versuch[Fachgebiet[Verantwortlicher[Nachname]" type="text" placeholder="Nachname ..." class="text"></p>
<p>Verantwortlicher - Adresse<br/><input name="Versuch[Fachgebiet[Verantwortlicher[Adresse[Straße]" type="text" placeholder="Straße ..." class="text">
<input name="Versuch[Fachgebiet[Verantwortlicher[Adresse[HausNr]" type="text" placeholder="HausNr ..." class="text">
<input name="Versuch[Fachgebiet[Verantwortlicher[Adresse[Stadt]" type="text" placeholder="Stadt ..." class="text">
<input name="Versuch[Fachgebiet[Verantwortlicher[Adresse[PLZ]" type="text" placeholder="PLZ ..." class="text"></p>
<p>Verantwortlicher - Kontakt<br/><input name="Versuch[Fachgebiet[Verantwortlicher[Kontakt[Mail]" type="text" placeholder="Mail ..." class="text">
<input name="Versuch[Fachgebiet[Verantwortlicher[Kontakt[Telefon]" type="text" placeholder="Telefon ..." class="text">
<input name="Versuch[Fachgebiet[Verantwortlicher[Kontakt[Fax]" type="text" placeholder="Fax ..." class="text">
<input name="Versuch[Fachgebiet[Verantwortlicher[Kontakt[SocialMedia]" type="text" placeholder="SocialMedia ..." class="text"></p>
<p>Produkt - Zutaten - Elemente<br/><input name="Versuch[Produkt[Zutaten[Elemente[Symbol]" type="text" placeholder="Symbol ..." class="text">
<input name="Versuch[Produkt[Zutaten[Elemente[PSE]" type="text" placeholder="PSE ..." class="text">
<input name="Versuch[Produkt[Zutaten[Elemente[Aggregatzustand]" type="text" placeholder="Aggregatzustand ..." class="text">
<input name="Versuch[Produkt[Zutaten[Elemente[Dichte]" type="text" placeholder="Dichte ..." class="text"></p>
<p>Produkt - Zutat<br/><input name="Versuch[Produkt[Zutaten[Aggregatszustand]" type="text" placeholder="Aggregatszustand ..." class="text">
<input name="Versuch[Produkt[Zutaten[Zutatsname]" type="text" placeholder="Zutatsname ..." class="text"></p>
<p>Produkt - Zeitaufwand<br/><input name="Versuch[Produkt[Zeitaufwand[Ausführzeit]" type="text" placeholder="Ausführzeit ..." class="text">
<input name="Versuch[Produkt[Zeitaufwand[Entwicklungszeit]" type="text" placeholder="Entwicklungszeit ..." class="text">
<input name="Versuch[Produkt[Zeitaufwand[Gesamtzeit]" type="text" placeholder="Gesamtzeit ..." class="text"></p>
<p>Produkt - Materialien<br/><input name="Versuch[Produkt[Materialien[Bekleidung]" type="text" placeholder="Bekleidung ..." class="text">
<input name="Versuch[Produkt[Materialien[Schutz]" type="text" placeholder="Schutz ..." class="text">
<input name="Versuch[Produkt[Materialien[Werkzeuge]" type="text" placeholder="Werkzeuge ..." class="text">
<input name="Versuch[Produkt[Materialien[Arbeitsmaterialien]" type="text" placeholder="Arbeitsmaterialien ..." class="text"></p>
<p>Produkt<br/><input name="Versuch[Produkt[Produktname]" type="text" placeholder="Produktname ..." class="text">
<input name="Versuch[Produkt[Zutatenanzahl]" type="text" placeholder="Zutatenanzahl ..." class="text"></p>
<p>Datum<br/><input name="Versuch[Datum]" type="text" disabled="disabled" placeholder="Automatisch." class="text"></p>
<p>Labor<br/><input name="Versuch[Labor[Laborname]" type="text" placeholder="Laborname ..." class="text">
<input name="Versuch[Labor[RaumNr]" type="text" placeholder="RaumNr ..." class="text">
<input name="Versuch[Labor[Gebäude]" type="text" placeholder="Laborgebäude ..." class="text"></p>
<button>Senden</button>
</fieldset>
</form>
</div>
<div id="delete" class="content">
delete
</div>
<div id="search" class="content">
search
</div>
Raw
dabblet.js
var lists = document.querySelectorAll('#header li');
var shows = document.querySelectorAll('.content');
var cont;
function hidedivs(){
for(var i=0;i<shows.length;i++){
shows[i].style.display = 'none';
};
}
function showdiv(that){
hidedivs();
that.style.display = 'inline';
alert(that);
}
for(var i=0;i<lists.length;i++){
cont = shows[i];
lists[i].addEventListener('click', function(){showdiv(cont);}, false);
};
Raw
settings.json
{"view":"split-vertical","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