style(rxForm): add valid/invalid border colors; closes #359

src/rxForm/docs/rxForm.html

@@ -1,9 +1,23 @@
 <div class="forms" ng-controller="rxFormDemoCtrl">
-    <h3>Example of simple text input</h3>
-    <rx-form-item label="Display Name" description="<a href='#'>Here</a> is my <b>HTML</b>" prefix="$" suffix="GB">
-        <input type="text" ng-model="volume.name" ng-required="true" />
+    <h3>Example of required text input w/ validation pattern</h3>
+    <rx-form-item label="Volume Name" description="Must be 2-5 letter palindrome (e.g. 'dewed')">
+        <input type="text" ng-model="volume.name" ng-required="volume.isNameRequired" ng-pattern="/^\b(\w)?(\w)\w?\2\1$/" />
     </rx-form-item>
-    <p>Bound Value: {{volume.name}}</p>
+
+    <rx-form-item label="Name Field Required?" class="clear">
+        <input type="checkbox" ng-model="volume.isNameRequired" />
+    </rx-form-item>
+
+    <p class="clear">Bound Value: {{volume.name}}</p>
+
+    <hr >
+
+    <h3>Example with prefix/suffix</h3>
+    <rx-form-item label="Monthly Cost" prefix="$" suffix="million">
+        <input type="number" ng-model="volume.cost" />
+    </rx-form-item>
+
+    <hr >
 
     <h3>Select Box</h3>
     <rx-form-item label="Type" prefix="$" description="Bound Value: {{volume.type}}">

src/rxForm/docs/rxForm.js

@@ -11,7 +11,7 @@ function rxFormDemoCtrl ($scope) {
     ];
 
     $scope.volume = {
-        name: 'Volume-1',
+        isNameRequired: true,
         type: _.first($scope.types).value, // select the first type by default
         checked: [true, 'unchecked'] //example with first checkbox automatically checked
     };

src/rxForm/rxForm.less

@@ -107,6 +107,14 @@ field-prefix, field-suffix and field-description are optional.
         color: @inputColor;
         font-size: 1.2em;
         border-radius: 0;
+
+        &.ng-valid.ng-dirty {
+            border-color: @inputBorderValid;
+        }
+
+        &.ng-invalid.ng-dirty {
+            border-color: @inputBorderInvalid;
+        }
     }
 
     input,

src/styles/vars.less

@@ -18,6 +18,8 @@
 // Borders
 @pageDivider: #e6e6e5;
 @inputBorder: #ccc;
+@inputBorderValid: #00afec;
+@inputBorderInvalid: #ff2400;
 @tableBorder: @pageDivider;
 @tableHeaderBorder: #6e6e6e;
 @appHelpBorder: #424242;