[Frontend] WIP Style Guide

Fixes #1233
Adds to text inputs content;
Mods to MCTExample to allow a padded
wrapper around <pre> element;
Fixed snow theme css file reference;

example/styleguide/bundle.js

@@ -67,7 +67,7 @@ define([
                     "theme": "espresso"
                 },
                 {
-                    "stylesheetUrl": "css/time-conductor-snow.css",
+                    "stylesheetUrl": "css/style-guide-snow.css",
                     "theme": "snow"
                 }
             ]

example/styleguide/res/sass/_style-guide-base.scss

@@ -41,24 +41,32 @@
         text-transform: uppercase;
     }
 
+    .w-markup {
+        //Wrap markup example "pre" element
+        background-color: $colorCode;
+        border-radius: $interiorMargin;
+        display: block;
+        padding: $interiorMargin $interiorMarginLg;
+        position: relative;
+    }
+
     code,
     pre {
-        background-color: pushBack($colorBodyBg, 20%);
-        display: inline-block;
         font-size: 0.8rem;
     }
 
     code {
+        background-color: $colorCode;
         border-radius: $controlCr;
+        display: inline-block;
         padding: 1px $interiorMargin;
     }
 
     pre {
-        border-radius: $interiorMargin;
         display: block;
         margin: 0;
         overflow: auto;
-        padding: $interiorMargin $interiorMarginLg;
+        padding-bottom: $interiorMarginLg;
         white-space: pre;
     }
 
@@ -129,8 +137,7 @@
             width: $d;
             text-align: left;
             .glyph {
-                //@include test();
+                color: $colorGlyphExample;
-                color: pullForward($colorBodyFg, 30%);
                 font-size: 5em;
                 margin: $interiorMarginLg 0;
                 text-align: center;
@@ -140,7 +147,6 @@
                 color: pushBack($colorBodyFg, 10%);
                 text-transform: uppercase;
                 white-space: nowrap;
-                //width: 33%;
             }
         }
     }

example/styleguide/res/sass/style-guide-espresso.scss

@@ -28,6 +28,7 @@
 @import "../../../../platform/commonUI/general/res/sass/icons";
 
 // Thematic constants
-//$colorHeaders: pullForward($colorBodyFg, 30%);
+$colorCode: rgba(black, 0.1);
+$colorGlyphExample: #fff;
 
 @import "style-guide-base";

example/styleguide/res/sass/style-guide-snow.scss

@@ -28,6 +28,7 @@
 @import "../../../../platform/commonUI/general/res/sass/icons";
 
 // Thematic constants
-//$colorHeaders: pullForward($colorBodyFg, 30%);
+$colorCode: rgba(black, 0.1);
+$colorGlyphExample: darken($colorBodyBg, 30%);
 
 @import "style-guide-base";

example/styleguide/res/templates/input.html

@@ -31,21 +31,19 @@
         <div class="cols cols1-1">
             <div class="col">
                 <p>Text inputs have a consistent look-and-feel across the application. The input's <code>placeholder</code> is styled to appear visually different from an entered value.</p>
-                <p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
+                <p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
             </div>
-<mct-example><input type="text" />
+<mct-example><input type="text" placeholder="Enter a value" />
 <br /><br />
-<input type="text" placeholder="Enter a value" />
+<input type="text" placeholder="Enter a value" value="An entered value" />
 <br /><br />
-<input type="text" placeholder="Enter a value" value="A previously entered value" />
+<input type="text" placeholder="Enter a value" class="sm" value="Small" />
-<br /><br />
-<input type="text" placeholder="Enter a value" class="numeric" value="Numeric" />
-<br /><br />
-<input type="text" placeholder="Enter a value" class="lg" value="A large input" />
 <br /><br />
 <input type="text" placeholder="Enter a value" class="med" value="A medium input" />
 <br /><br />
-<input type="text" placeholder="Enter a value" class="sm" value="Small" />
+<input type="text" placeholder="Enter a value" class="lg" value="A large input" />
+<br /><br />
+<input type="text" placeholder="Enter a value" class="sm numeric" value="10.9" />
 </mct-example>
         </div>
     </div>
@@ -62,14 +60,14 @@
 </div>
 <br />
 <div style="position: relative; height: 100px">
-    <textarea placeholder="Enter a value">A previously entered value</textarea>
+    <textarea placeholder="Enter a value">An entered value</textarea>
 </div>
 <br /><br />
-<textarea placeholder="Enter a value" class="sm">A sm textarea</textarea>
+<textarea placeholder="Enter a value" class="sm">A small textarea</textarea>
 <br /><br />
-<textarea placeholder="Enter a value" class="med">A med textarea</textarea>
+<textarea placeholder="Enter a value" class="med">A medium textarea</textarea>
 <br /><br />
-<textarea placeholder="Enter a value" class="lg">A lg textarea</textarea>
+<textarea placeholder="Enter a value" class="lg">A large textarea</textarea>
 </mct-example>
         </div>
     </div>

example/styleguide/res/templates/mct-example.html

@@ -1,6 +1,8 @@
 <div class="col">
-   <h3>Markup</h3>
+    <h3>Markup</h3>
-   <pre><code></code></pre>
+    <span class="w-markup">
-   <h3>Example</h3>
+        <pre></pre>
-   <div></div>
+    </span>
+    <h3>Example</h3>
+    <div></div>
 </div>

example/styleguide/src/MCTExample.js

@@ -6,7 +6,7 @@ define([
 
     function MCTExample() {
         function link($scope, $element, $attrs, controller, $transclude) {
-            var codeEl = $element.find('code');
+            var codeEl = $element.find('pre');
             var exampleEl = $element.find('div');
 
             $transclude(function (clone) {