Add popup code viewer to patterns page

Author: bradfrost

public/styleguide/css/styleguide.css

@@ -529,7 +529,7 @@
   padding: 1em; }
 
 /* Annotations */
-#sg-annotation-container {
+#sg-annotation-container, #sg-code-container {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -550,10 +550,10 @@
   -ms-transition: bottom 0.3s ease-out;
   -o-transition: bottom 0.3s ease-out;
   transition: bottom 0.3s ease-out; }
-  #sg-annotation-container a {
+  #sg-annotation-container a, #sg-code-container a {
     color: #dddddd; }
 
-#sg-annotation-close-btn {
+#sg-annotation-close-btn, #sg-code-close-btn {
   color: #fff;
   position: absolute;
   top: 1em;

public/styleguide/css/styleguide.scss

@@ -767,7 +767,7 @@ $animate-quick: 0.2s;
 
 
 /* Annotations */
-#sg-annotation-container {
+#sg-annotation-container, #sg-code-container {
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
@@ -794,7 +794,7 @@ $animate-quick: 0.2s;
     }
 }
 
-#sg-annotation-close-btn {
+#sg-annotation-close-btn, #sg-code-close-btn {
 	color: #fff;
 	position: absolute;
 	top: 1em;
@@ -808,7 +808,6 @@ $animate-quick: 0.2s;
 	cursor: help !important;
 }
 
-
 // Icon Font
 
 @font-face {

public/styleguide/js/code-viewer.js

@@ -16,7 +16,6 @@ var codeViewer = {
 
 		$('body').addClass('code-ready');
 		$('#sg-t-code').click(function(e) {
-			
 			e.preventDefault();
 
 			// make sure the annotations overlay is off
@@ -56,7 +55,7 @@ var codeViewer = {
 	codeContainerInit: function() {
 
 		if (document.getElementById("sg-code-container") == undefined) {
-			$('<div id="sg-code-container" style="display: none;"></div>').html('<a href="#" id="sg-code-close-btn">Close</a><div id="sg-code-lineage" style="display: none;"><h2>Lineage</h2><p>This pattern contains the following patterns: <span id="sg-code-lineage-fill"></span></p></div><div id="sg-code-html"><h2>HTML</h2><pre><code id="sg-code-html-fill" class="language-markup"></code></pre></div><div id="sg-code-css" style="display: none;"><h2>CSS</h2><pre><code id="sg-code-css-fill" class="language-css"></code></pre></div>').appendTo('body').css('bottom',-$(document).outerHeight());
+			$('<div id="sg-code-container" style="display: none;"></div>').html('<a href="#" id="sg-code-close-btn">Close</a><div id="sg-code-lineage" style="display: none;"><h2>Lineage</h2><p>This pattern contains the following patterns: <span id="sg-code-lineage-fill"></span></p></div><div id="sg-code-html"><h2>HTML</h2><pre><code id="sg-code-html-fill" class="language-markup"></code></pre></div>').appendTo('body').css('bottom',-$(document).outerHeight());
 		}
 
 		if (codeViewer.sw < codeViewer.breakpoint) {