[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/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: pullForward($colorBodyFg, 30%);
+                color: $colorGlyphExample;
                 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";