[Docs] WIP Style Guide

Fixes #1233
Additional content; adding size classes to
input[type="text"] to allow direct application to
the input; added placeholder styling and related
thematic constants.

example/styleguide/res/templates/controls.html

@@ -104,12 +104,12 @@
     <input name="Alarm Status" type="radio" />
     <em></em>
 </label>
-<br>
+<br />
 <label class="radio custom">Orange
     <input name="Alarm Status" type="radio" checked />
     <em></em>
 </label>
-<br>
+<br />
 <label class="radio custom">Yellow
     <input name="Alarm Status" type="radio" />
     <em></em>
@@ -137,5 +137,28 @@
         </div>
     </div>
 
+    <div class="l-section">
+        <h2>Text Inputs</h2>
+        <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>
+            </div>
+<mct-example><input type="text" />
+<br /><br />
+<input type="text" placeholder="Enter a value" />
+<br /><br />
+<input type="text" value="A previously entered value" />
+<br /><br />
+<input type="text" class="numeric" value="Numeric" />
+<br /><br />
+<input type="text" class="lg" value="A large input" />
+<br /><br />
+<input type="text" class="med" value="A medium input" />
+<br /><br />
+<input type="text" class="sm" value="Small" />
+</mct-example>
+        </div>
+    </div>
 </div>
 

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -216,16 +216,25 @@ label.form-control.checkbox {
 input[type="text"],
 input[type="search"] {
     @include nice-input();
+    @include placeholder {
+        color: rgba($colorInputFg, 0.4);
+        font-style: italic;
+    }
     &.numeric {
         text-align: right;
     }
 }
 
-.l-input-lg input[type="text"] {  width: 100% !important; }
+.l-input-lg input[type="text"],
-.l-input-med input[type="text"] { width: 200px !important; }
+input[type="text"].lg {  width: 100% !important; }
-.l-input-sm input[type="text"] {  width: 50px !important; }
+.l-input-med input[type="text"],
-.l-textarea-sm textarea { position: relative; height: 50px; }
+input[type="text"].med { width: 200px !important; }
-.l-numeric input[type="text"] { text-align: right; }
+.l-input-sm input[type="text"],
+input[type="text"].sm {  width: 50px !important; }
+.l-textarea-sm textarea,
+textarea.sm { position: relative; height: 50px; }
+.l-numeric input[type="text"],
+input[type="text"].numeric { text-align: right; }
 
 .input-labeled {
     // Used in toolbar

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -92,6 +92,7 @@ $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#fff, 0.1);
 $colorInputBg: rgba(#000, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
 $colorFieldHint: pullForward($colorBodyFg, 20%);

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -92,6 +92,7 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);