diff --git a/demo/demo.css b/demo/demo.css index 9e5ce3d..b52bc5e 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -49,14 +49,14 @@ h2 { } h2.section { -margin: 0; -padding: 20px 0 20px; -cursor: pointer; -border-top: 1px dotted #ccc; --webkit-transition: color 0.15s linear; + margin: 0; + padding: 20px 0px 0px 0px; + cursor: pointer; + border-top: 1px dotted #ccc; + -webkit-transition: color 0.15s linear; } h2.section:hover { -color: #00aeff; + color: #00aeff; } div.collapsed h2, div.expanded h2 { @@ -67,6 +67,13 @@ div.collapsed h2, div.expanded h2 { cursor: pointer; } +div.trans { + border-top: 1px dotted #ccc; + margin: 0px 0px 20px 0px; +} +ol#secrets { + padding: 0px 0px 20px 0px; +} div.expanded h2:before { content: '-'; } @@ -83,16 +90,25 @@ div.expanded h2:before, div.collapsed h2:before { font-family: Monaco, monospace; } +div.collapsable { + overflow: hidden; + clear: both; + margin-bottom: 20px; + -moz-transition: height .2s ease-out; + -webkit-transition: height .2s ease-out; + transition: height .2s ease-out; +} + +div.collapsable div { + height: auto; +} + div.collapsed .collapsable { overflow: hidden; clear: both; height: 0; } -div.expanded .collapsable { - overflow: hidden; - clear: both; - height: auto; -} + div.expanded { cursor: pointer; } #helvetica-demo { diff --git a/gui.css b/gui.css index f05ca69..63f79be 100644 --- a/gui.css +++ b/gui.css @@ -100,7 +100,7 @@ a.guidat-toggle:hover { border: 0; color: #1ed36f; margin-right: 2px; -width: 148px; + width: 148px; } .guidat-controller.boolean { diff --git a/index.html b/index.html index 13ccbc5..3877700 100644 --- a/index.html +++ b/index.html @@ -62,10 +62,15 @@ function toggle(e) { - if(this.className == 'collapsed') { + var collapsable = this.childNodes[3], + wrapper = collapsable.childNodes[1]; + + if (this.className === 'collapsed') { this.className = 'expanded'; + collapsable.style.height = wrapper.clientHeight + 'px'; } else { this.className = 'collapsed'; + collapsable.style.height = '0px'; } } @@ -176,20 +181,22 @@ window.onload = function() { - -