From 563b02bb1d90f71d181613b7bdba6e8fb9eb533e Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 30 Jan 2017 15:57:55 -0800
Subject: [PATCH] [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.
---
 .../styleguide/res/templates/controls.html    | 27 +++++++++++++++++--
 .../general/res/sass/controls/_controls.scss  | 19 +++++++++----
 .../themes/espresso/res/sass/_constants.scss  |  1 +
 .../themes/snow/res/sass/_constants.scss      |  1 +
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html
index 1878eaa59f..a24d597094 100644
--- a/example/styleguide/res/templates/controls.html
+++ b/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>
 
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index f74ce22ac3..b490a1dc59 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/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-med input[type="text"] { width: 200px !important; }
-.l-input-sm input[type="text"] {  width: 50px !important; }
-.l-textarea-sm textarea { position: relative; height: 50px; }
-.l-numeric input[type="text"] { text-align: right; }
+.l-input-lg input[type="text"],
+input[type="text"].lg {  width: 100% !important; }
+.l-input-med input[type="text"],
+input[type="text"].med { width: 200px !important; }
+.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
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 4e34d335f1..d54c6b3763 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/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%);
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index cdc9aaa859..d9d08a57ac 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/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%);