From ad6dd09548585d079d89a8da194c604e24f3298b Mon Sep 17 00:00:00 2001
From: Nash Vail <nishantve1@gmail.com>
Date: Sat, 30 Jul 2016 11:36:26 +0530
Subject: [PATCH] Inputs: added multiple sizes, removed table layout

---
 demos/demos.css                |  32 +++
 demos/inputs.html              | 432 +++++++++++++++++++++++++++++----
 scss/atoms/inputs/_mixins.scss |  12 +-
 scss/variables/inputs.js       |  19 +-
 4 files changed, 435 insertions(+), 60 deletions(-)

diff --git a/demos/demos.css b/demos/demos.css
index c20ae8e..cfe6171 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -1,3 +1,14 @@
+.clearfix:after {
+	visibility: hidden;
+	display: block;
+	font-size: 0;
+	content: " ";
+	clear: both;
+	height: 0;
+	}
+* html .clearfix             { zoom: 1; } /* IE6 */
+*:first-child+html .clearfix { zoom: 1; } /* IE7 */
+
 body {
 	max-width: 900px;
 	margin: 3em auto;
@@ -9,3 +20,24 @@ ul {
 	padding: 0;
 	list-style-type: none;
 }
+
+.inputs-container {
+	box-sizing: border-box
+	width: 100%;
+}
+
+.inputs-row {
+	width: 100%;
+}
+
+.inputs-label {
+	width: 10%;
+	float: left;
+	padding: 0.25em 1em 0.25em 0;
+	text-align: right;
+}
+
+.inputs-input {
+	width: 85%;
+	float: right;
+}
\ No newline at end of file
diff --git a/demos/inputs.html b/demos/inputs.html
index f35c4d5..5333d2e 100644
--- a/demos/inputs.html
+++ b/demos/inputs.html
@@ -73,40 +73,45 @@ <h3>Checkboxes and Radios</h3>
 
 		<h3>Inputs - Inline</h3>
 
-		<table style="width:100%">
-			<tr>
-				<td style="text-align: right">
+		<div class="inputs-container">
+			<div class="inputs-row clearfix">
+				<div class="inputs-label">
 					<label class="input-label input-label-xs">Name </label>
-				</td>
-				<td>
+				</div>
+				<div class="inputs-input">
 					<input class="input input-xs" type="text" placeholder="Enter your Name"/>
-				</td>
-			</tr>
-			<tr>
-				<td style="text-align: right">
+				</div>
+			</div>
+
+			<div class="inputs-row clearfix">
+				<div class="inputs-label">
 					<label class="input-label">Name </label>
-				</td>
-				<td>
+				</div>
+				<div class="inputs-input">
 					<input class="input" type="text" placeholder="Enter your Name"/>
-				</td>
-			</tr>
-			<tr>
-				<td style="text-align: right">
+				</div>
+			</div>
+
+			<div class="inputs-row clearfix">
+				<div class="inputs-label">
 					<label class="input-label input-label-md">Name </label>
-				</td>
-				<td>
+				</div>
+				<div class="inputs-input">
 					<input class="input input-md" type="text" placeholder="Enter your Name"/>
-				</td>
-			</tr>
-			<tr>
-				<td style="text-align: right">
+				</div>
+			</div>
+
+			<div class="inputs-row clearfix">
+				<div class="inputs-label">
 					<label class="input-label input-label-lg">Name </label>
-				</td>
-				<td>
+				</div>
+				<div class="inputs-input">
 					<input class="input input-lg" type="text" placeholder="Enter your Name"/>
-				</td>
-			</tr>
-		</table>
+				</div>
+			</div>
+		</div>
+
+		<!-- Small(normal) sized inputs -->
 
 		<h3>Inputs</h3>
 
@@ -122,83 +127,408 @@ <h3>Inputs</h3>
 		<label class="input-label">Amount </label>
 		<input class="input" type="number" placeholder="XX"/>
 
-		<br/>
-		<br/>
-
-
-
 		<h3>Inputs (Disabled) </h3>
 
-		<label class="input-label input-label-sm">Name </label>
+		<label class="input-label">Name </label>
 		<input class="input disabled" type="text" placeholder="Enter your Name" disabled/>
 
-		<label class="input-label input-label-sm">Password </label>
+		<label class="input-label">Password </label>
 		<input class="input disabled" type="password" placeholder="Choose a password" disabled/>
 
-		<label class="input-label input-label-sm">Email </label>
+		<label class="input-label">Email </label>
 		<input class="input disabled" type="email" placeholder="name@example.com" disabled/>
 
-		<label class="input-label input-label-sm">Amount </label>
+		<label class="input-label">Amount </label>
 		<input class="input disabled" type="number" placeholder="XX" disabled/>
 
 		<h3>Inputs (Readonly) </h3>
 
-		<label class="input-label input-label-sm">Name </label>
-		<input class="input readonly" type="text" placeholder="Enter your Name" value="Tester" readonly/>
+		<label class="input-label">Name </label>
+		<input class="input readonly" type="text" placeholder="Enter your Name" value="John Doe" readonly/>
 
-		<label class="input-label input-label-sm">Password </label>
+		<label class="input-label">Password </label>
 		<input class="input readonly" type="password" placeholder="Choose a password" readonly/>
 
-		<label class="input-label input-label-sm">Email </label>
+		<label class="input-label">Email </label>
 		<input class="input readonly" type="email" placeholder="name@example.com" readonly/>
 
-		<label class="input-label input-label-sm">Amount </label>
+		<label class="input-label">Amount </label>
 		<input class="input readonly" type="number" placeholder="XX" readonly/>
 
 		<h3>Inputs (Focus) </h3>
 
-		<label class="input-label input-label-sm">Name </label>
+		<label class="input-label">Name </label>
 		<input class="input focus" type="text" placeholder="Enter your Name"/>
 
-		<label class="input-label input-label-sm">Password </label>
+		<label class="input-label">Password </label>
 		<input class="input focus" type="password" placeholder="Choose a password"/>
 
-		<label class="input-label input-label-sm">Email </label>
+		<label class="input-label">Email </label>
 		<input class="input focus" type="email" placeholder="name@example.com"/>
 
-		<label class="input-label input-label-sm">Amount </label>
+		<label class="input-label">Amount </label>
 		<input class="input focus" type="number" placeholder="XX"/>
 
 		<h3>Inputs (Active) </h3>
 
-		<label class="input-label input-label-sm">Name </label>
+		<label class="input-label">Name </label>
 		<input class="input active" type="text" placeholder="Enter your Name"/>
 
-		<label class="input-label input-label-sm">Password </label>
+		<label class="input-label">Password </label>
 		<input class="input active" type="password" placeholder="Choose a password"/>
 
-		<label class="input-label input-label-sm">Email </label>
+		<label class="input-label">Email </label>
 		<input class="input active" type="email" placeholder="name@example.com"/>
 
-		<label class="input-label input-label-sm">Amount </label>
+		<label class="input-label">Amount </label>
 		<input class="input active" type="number" placeholder="XX"/>
 
+		<h3>Inputs (Warning) </h3>
+
+		<label class="input-label">Name </label>
+		<input class="input warning" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label">Password </label>
+		<input class="input warning" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label">Email </label>
+		<input class="input warning" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label">Amount </label>
+		<input class="input warning" type="number" placeholder="XX"/>
+
 		<h3>Inputs (Error) </h3>
 
 		<label class="input-label error">Name </label>
 		<input class="input error" type="text" placeholder="Enter your Name"/>
-		<label class="input-label input-label-block error">We were unable to process your input.</label>
+		<label class="input-label input-label-xs input-label-block error">We were unable to process your input.</label>
 
 		<label class="input-label error">Password </label>
 		<input class="input error" type="password" placeholder="Choose a password"/>
-		<label class="input-label input-label-block error">We were unable to process your input.</label>
+		<label class="input-label input-label-xs input-label-block error">We were unable to process your input.</label>
 
 		<label class="input-label error">Email </label>
 		<input class="input error" type="email" placeholder="name@example.com"/>
-		<label class="input-label input-label-block error">We were unable to process your input.</label>
+		<label class="input-label input-label-xs input-label-block error">We were unable to process your input.</label>
 
 		<label class="input-label error">Amount </label>
 		<input class="input error" type="number" placeholder="XX"/>
+		<label class="input-label input-label-xs input-label-block error">We were unable to process your input.</label>
+
+		<!-- Medium sized inputs -->
+
+		<h2>Inputs - md</h2>
+
+		<label class="input-label input-label-md">Name </label>
+		<input class="input input-md" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-md">Password </label>
+		<input class="input input-md" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-md">Email </label>
+		<input class="input input-md" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-md">Amount </label>
+		<input class="input input-md" type="number" placeholder="XX"/>
+
+
+		<h3>Inputs (Disabled) </h3>
+
+		<label class="input-label input-label-md">Name </label>
+		<input class="input input-md disabled" type="text" placeholder="Enter your Name" disabled/>
+
+		<label class="input-label input-label-md">Password </label>
+		<input class="input input-md disabled" type="password" placeholder="Choose a password" disabled/>
+
+		<label class="input-label input-label-md">Email </label>
+		<input class="input input-md disabled" type="email" placeholder="name@example.com" disabled/>
+
+		<label class="input-label input-label-md">Amount </label>
+		<input class="input input-md disabled" type="number" placeholder="XX" disabled/>
+
+		<h3>Inputs (Readonly) </h3>
+
+		<label class="input-label input-label-md">Name </label>
+		<input class="input input-md readonly" type="text" placeholder="Enter your Name" value="John Doe" readonly/>
+
+		<label class="input-label input-label-md">Password </label>
+		<input class="input input-md readonly" type="password" placeholder="Choose a password" readonly/>
+
+		<label class="input-label input-label-md">Email </label>
+		<input class="input input-md readonly" type="email" placeholder="name@example.com" readonly/>
+
+		<label class="input-label input-label-md">Amount </label>
+		<input class="input input-md readonly" type="number" placeholder="XX" readonly/>
+
+		<h3>Inputs (Focus) </h3>
+
+		<label class="input-label input-label-md">Name </label>
+		<input class="input input-md focus" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-md">Password </label>
+		<input class="input input-md focus" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-md">Email </label>
+		<input class="input input-md focus" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-md">Amount </label>
+		<input class="input input-md focus" type="number" placeholder="XX"/>
+
+		<h3>Inputs (Active) </h3>
+
+		<label class="input-label input-label-md">Name </label>
+		<input class="input input-md active" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-md">Password </label>
+		<input class="input input-md active" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-md">Email </label>
+		<input class="input input-md active" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-md">Amount </label>
+		<input class="input input-md active" type="number" placeholder="XX"/>
+
+		<h3>Inputs (Warning) </h3>
+
+		<label class="input-label input-label-md">Name </label>
+		<input class="input input-md warning" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-md">Password </label>
+		<input class="input input-md warning" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-md">Email </label>
+		<input class="input input-md warning" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-md">Amount </label>
+		<input class="input input-md warning" type="number" placeholder="XX"/>
+
+		<h3>Inputs (Error) </h3>
+
+		<label class="input-label input-label-md error">Name </label>
+		<input class="input input-md error" type="text" placeholder="Enter your Name"/>
+		<label class="input-label input-label-block error">We were unable to process your input.</label>
+
+		<label class="input-label input-label-md error">Password </label>
+		<input class="input input-md error" type="password" placeholder="Choose a password"/>
+		<label class="input-label input-label-block error">We were unable to process your input.</label>
+
+		<label class="input-label input-label-md error">Email </label>
+		<input class="input input-md error" type="email" placeholder="name@example.com"/>
 		<label class="input-label input-label-block error">We were unable to process your input.</label>
+
+		<label class="input-label input-label-md error">Amount </label>
+		<input class="input input-md error" type="number" placeholder="XX"/>
+		<label class="input-label input-label-block error">We were unable to process your input.</label>
+
+		<!-- Large sized inputs -->
+
+		<h2>Inputs - lg</h2>
+
+		<label class="input-label input-label-lg">Name </label>
+		<input class="input input-lg" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-lg">Password </label>
+		<input class="input input-lg" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-lg">Email </label>
+		<input class="input input-lg" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-lg">Amount </label>
+		<input class="input input-lg" type="number" placeholder="XX"/>
+
+
+		<h3>Inputs (Disabled) </h3>
+
+		<label class="input-label input-label-lg">Name </label>
+		<input class="input input-lg disabled" type="text" placeholder="Enter your Name" disabled/>
+
+		<label class="input-label input-label-lg">Password </label>
+		<input class="input input-lg disabled" type="password" placeholder="Choose a password" disabled/>
+
+		<label class="input-label input-label-lg">Email </label>
+		<input class="input input-lg disabled" type="email" placeholder="name@example.com" disabled/>
+
+		<label class="input-label input-label-lg">Amount </label>
+		<input class="input input-lg disabled" type="number" placeholder="XX" disabled/>
+
+		<h3>Inputs (Readonly) </h3>
+
+		<label class="input-label input-label-lg">Name </label>
+		<input class="input input-lg readonly" type="text" placeholder="Enter your Name" value="John Doe" readonly/>
+
+		<label class="input-label input-label-lg">Password </label>
+		<input class="input input-lg readonly" type="password" placeholder="Choose a password" readonly/>
+
+		<label class="input-label input-label-lg">Email </label>
+		<input class="input input-lg readonly" type="email" placeholder="name@example.com" readonly/>
+
+		<label class="input-label input-label-lg">Amount </label>
+		<input class="input input-lg readonly" type="number" placeholder="XX" readonly/>
+
+		<h3>Inputs (Focus) </h3>
+
+		<label class="input-label input-label-lg">Name </label>
+		<input class="input input-lg focus" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-lg">Password </label>
+		<input class="input input-lg focus" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-lg">Email </label>
+		<input class="input input-lg focus" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-lg">Amount </label>
+		<input class="input input-lg focus" type="number" placeholder="XX"/>
+
+		<h3>Inputs (Active) </h3>
+
+		<label class="input-label input-label-lg">Name </label>
+		<input class="input input-lg active" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-lg">Password </label>
+		<input class="input input-lg active" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-lg">Email </label>
+		<input class="input input-lg active" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-lg">Amount </label>
+		<input class="input input-lg active" type="number" placeholder="XX"/>
+
+		<h3>Inputs (Warning) </h3>
+
+		<label class="input-label input-label-lg">Name </label>
+		<input class="input input-lg warning" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-lg">Password </label>
+		<input class="input input-lg warning" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-lg">Email </label>
+		<input class="input input-lg warning" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-lg">Amount </label>
+		<input class="input input-lg warning" type="number" placeholder="XX"/>
+
+		<h3>Inputs (Error) </h3>
+
+		<label class="input-label input-label-lg error">Name </label>
+		<input class="input input-lg error" type="text" placeholder="Enter your Name"/>
+		<label class="input-label input-label-block error">We were unable to process your input.</label>
+
+		<label class="input-label input-label-lg error">Password </label>
+		<input class="input input-lg error" type="password" placeholder="Choose a password"/>
+		<label class="input-label input-label-block error">We were unable to process your input.</label>
+
+		<label class="input-label input-label-lg error">Email </label>
+		<input class="input input-lg error" type="email" placeholder="name@example.com"/>
+		<label class="input-label input-label-block error">We were unable to process your input.</label>
+
+		<label class="input-label input-label-lg error">Amount </label>
+		<input class="input input-lg error" type="number" placeholder="XX"/>
+		<label class="input-label input-label-block error">We were unable to process your input.</label>
+
+		<!-- Extra small sized inputs -->
+
+		<h2>Inputs - xs</h2>
+
+		<label class="input-label input-label-xs">Name </label>
+		<input class="input input-xs" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-xs">Password </label>
+		<input class="input input-xs" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-xs">Email </label>
+		<input class="input input-xs" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-xs">Amount </label>
+		<input class="input input-xs" type="number" placeholder="XX"/>
+
+
+		<h3>Inputs (Disabled) </h3>
+
+		<label class="input-label input-label-xs">Name </label>
+		<input class="input input-xs disabled" type="text" placeholder="Enter your Name" disabled/>
+
+		<label class="input-label input-label-xs">Password </label>
+		<input class="input input-xs disabled" type="password" placeholder="Choose a password" disabled/>
+
+		<label class="input-label input-label-xs">Email </label>
+		<input class="input input-xs disabled" type="email" placeholder="name@example.com" disabled/>
+
+		<label class="input-label input-label-xs">Amount </label>
+		<input class="input input-xs disabled" type="number" placeholder="XX" disabled/>
+
+		<h3>Inputs (Readonly) </h3>
+
+		<label class="input-label input-label-xs">Name </label>
+		<input class="input input-xs readonly" type="text" placeholder="Enter your Name" value="John Doe" readonly/>
+
+		<label class="input-label input-label-xs">Password </label>
+		<input class="input input-xs readonly" type="password" placeholder="Choose a password" readonly/>
+
+		<label class="input-label input-label-xs">Email </label>
+		<input class="input input-xs readonly" type="email" placeholder="name@example.com" readonly/>
+
+		<label class="input-label input-label-xs">Amount </label>
+		<input class="input input-xs readonly" type="number" placeholder="XX" readonly/>
+
+		<h3>Inputs (Focus) </h3>
+
+		<label class="input-label input-label-xs">Name </label>
+		<input class="input input-xs focus" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-xs">Password </label>
+		<input class="input input-xs focus" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-xs">Email </label>
+		<input class="input input-xs focus" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-xs">Amount </label>
+		<input class="input input-xs focus" type="number" placeholder="XX"/>
+
+		<h3>Inputs (Active) </h3>
+
+		<label class="input-label input-label-xs">Name </label>
+		<input class="input input-xs active" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-xs">Password </label>
+		<input class="input input-xs active" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-xs">Email </label>
+		<input class="input input-xs active" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-xs">Amount </label>
+		<input class="input input-xs active" type="number" placeholder="XX"/>
+
+		<h3>Inputs (Warning) </h3>
+
+		<label class="input-label input-label-xs">Name </label>
+		<input class="input input-xs warning" type="text" placeholder="Enter your Name"/>
+
+		<label class="input-label input-label-xs">Password </label>
+		<input class="input input-xs warning" type="password" placeholder="Choose a password"/>
+
+		<label class="input-label input-label-xs">Email </label>
+		<input class="input input-xs warning" type="email" placeholder="name@example.com"/>
+
+		<label class="input-label input-label-xs">Amount </label>
+		<input class="input input-xs warning" type="number" placeholder="XX"/>
+
+		<h3>Inputs (Error) </h3>
+
+		<label class="input-label error">Name </label>
+		<input class="input input-xs error" type="text" placeholder="Enter your Name"/>
+		<label class="input-label input-label-xs input-label-block error">We were unable to process your input.</label>
+
+		<label class="input-label error">Password </label>
+		<input class="input input-xs error" type="password" placeholder="Choose a password"/>
+		<label class="input-label input-label-xs input-label-block error">We were unable to process your input.</label>
+
+		<label class="input-label error">Email </label>
+		<input class="input input-xs error" type="email" placeholder="name@example.com"/>
+		<label class="input-label input-label-xs input-label-block error">We were unable to process your input.</label>
+
+		<label class="input-label error">Amount </label>
+		<input class="input input-xs error" type="number" placeholder="XX"/>
+		<label class="input-label input-label-xs input-label-block error">We were unable to process your input.</label>
+
 	</body>
 </html>
\ No newline at end of file
diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss
index 33bc1bb..6120bd7 100644
--- a/scss/atoms/inputs/_mixins.scss
+++ b/scss/atoms/inputs/_mixins.scss
@@ -11,7 +11,7 @@ $input-padding: em(map-get($inputs-input-full-width, padding));
 
 @mixin input() {
 	padding: $input-padding 0 $input-padding $input-padding;
-	margin: $margin;
+	margin: $margin 0 $margin 0;
 	border: map-get($inputs-input-full-width, border);
 	border-color: map-deep-get($inputs-input-full-width, border-color, light);
 	background: map-deep-get($inputs-input-full-width, background, base);
@@ -44,6 +44,10 @@ $input-padding: em(map-get($inputs-input-full-width, padding));
 		@include input-error();
 	}
 
+	&.warning {
+		@include input-warning();
+	}
+
 	/* Sizes */
 	&.input-xs {
 		@include input-xs();
@@ -104,13 +108,17 @@ $input-padding: em(map-get($inputs-input-full-width, padding));
 	box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, error);
 }
 
+@mixin input-warning() {
+	border-color: map-deep-get($inputs-error, border-color, base)	;
+	box-shadow: map-get($inputs-shadows, inset), map-get($inputs-shadows, warning);
+}
+
 /* Labels */
 
 @mixin input-label() {
 	font-size: em(map-get($inputs-label, font-size));
 	display: map-get($inputs-label, display);
 	max-width: map-get($inputs-label, max-width);
-	margin-bottom: em(map-get($inputs-label, margin));
 
 	&.input-label-md {
 		@include input-label-md();
diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js
index 2d73bc2..e0babda 100644
--- a/scss/variables/inputs.js
+++ b/scss/variables/inputs.js
@@ -13,8 +13,9 @@ chassis.inputs = {
 		name: "Styles for input shadows",
 		value: {
 			"inset": "inset 0px 2px 2px 0px rgba(0,0,0,0.10)",
-			"focus": "0px 0px 2px 1px #03a9f4",
+			"focus": "0px 0px 2px 1px #03A9F4",
 			"error": "0px 0px 2px 1px #F44336",
+			"warning": "0px 0px 2px 1px #FF7043"
 		}
 	},
 	"transitions": {
@@ -32,7 +33,7 @@ chassis.inputs = {
 			"display": "inline",
 			"max-width": "100%",
 			"font-size": "20px",
-			"margin": "5px"
+			"margin": "0px"
 		}
 	},
 	"label-md": {
@@ -56,15 +57,14 @@ chassis.inputs = {
 	"label-error": {
 		name: "Styles for error labels",
 		value: {
-			color: () => "colors.error",
-			"font-weight": "400"
+			color: () => "colors.error"
 		}
 	},
 	"input-full-width": {
 		name: "Generic styles for single line inputs",
 		value: {
 			"padding": "10px",
-			"margin": "0px",
+			"margin": "5px",
 			"border": "1px solid",
 			"border-color": () => "colors.text",
 			"border-radius": "2px",
@@ -107,8 +107,13 @@ chassis.inputs = {
 	"error": {
 		name: "Styles for error state of inputs",
 		value: {
-			"border-color": () => "colors.error",
-			"background":  () => "colors.error"
+			"border-color": () => "colors.error"
+		}
+	},
+	"warning": {
+		name: "Styles for warning state inputs",
+		value: {
+			"border-color": () => "colors.warning"
 		}
 	},
 	"input-md": {