live coder labels & accordion helper

app/assets/stylesheets/molecules/_accordions.scss

@@ -0,0 +1,54 @@
+.accordion {
+  margin-bottom: 0.75em;
+
+  [type="checkbox"]:checked + label,
+  [type="checkbox"]:checked ~ label:after,
+  [type="checkbox"]:not(:checked) + label,
+  [type="checkbox"]:not(:checked) ~ label:after,
+  [type="radio"]:checked + label,
+  [type="radio"]:checked ~ label:after,
+  [type="radio"]:not(:checked) + label,
+  [type="radio"]:not(:checked) ~ label:after {
+    content: "";
+    border: 0;
+    background-color: transparent;
+  }
+
+  [type="checkbox"]:hover:not(:disabled) + label:before,
+  [type="radio"]:hover:not(:disabled) + label:before,
+  [type="radio"]:not(:checked) ~ label:before,
+  [type="checkbox"]:not(:checked) ~ label:before,
+  [type="radio"]:checked ~ label:before,
+  [type="checkbox"]:checked ~ label:before {
+    background-color: transparent;
+    border: 0;
+    content: "+";
+    font-size: 1.3em;
+    line-height: 1;
+  }
+
+  [type="checkbox"]:hover:checked + label:before,
+  [type="radio"]:hover:checked + label:before,
+  [type="radio"]:checked ~ label:before,
+  [type="checkbox"]:checked ~ label:before {
+    background-color: transparent;
+    content: "-";
+  }
+
+  [type="radio"]:not(:checked) + label,
+  [type="checkbox"]:not(:checked) + label,
+  [type="radio"]:checked + label,
+  [type="checkbox"]:checked + label {
+    padding-left: 20px;
+  }
+
+  .accordion__copy {
+    display: none;
+    margin-top: 0.75em;
+  }
+
+  .accordion__toggle:checked ~ .accordion__copy {
+    display: block;
+  }
+
+}

app/assets/stylesheets/molecules/_livecoder.scss

@@ -31,8 +31,15 @@
   background-color: #fff;
 }
 
-fieldset:disabled .results {
-  border-color: #bbb;
+fieldset:disabled {
+  .results {
+    border-color: #bbb;
+  }
+
+  .code-results,
+  .code-input label {
+    display: block;
+  }
 }
 
 iframe {