Input: Added initial styling for :focus

nashvail · nashvail · commit 3a9288942a58 · 2016-05-31T12:23:53.000+05:30
diff --git a/demos/inputs/inputs.html b/demos/inputs/inputs.html
@@ -8,11 +8,13 @@
 	<link rel="stylesheet" href="../../dist/css/chassis.css">
 	<link rel="stylesheet" href="../demos.css">
 	<link rel="stylesheet" href="./inputs.css">
-	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic,700italic" rel="stylesheet">
+	<!-- <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic,700italic" rel="stylesheet"> -->
 </head>
 <body>
 	<h1>Inputs</h1>
-	<input type="text" placeholder="Enter your name" disabled>
-	<input type="text" placeholder="Enter your name">
+	<input type="text" placeholder="Can't change this really" disabled>
+	<input type="text" placeholder="Enter your Name">
+	<input type="email" placeholder="Enter your Email">
+	<input type="password" placeholder="Choose a password">
 </body>
 </html>
diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss
@@ -11,12 +11,16 @@
 	border: map-get($inputs-single-line, border);
 	box-shadow: map-get($inputs-shadows, normal);
 	border-radius: em(map-get($inputs-single-line, border-radius));
-	font-size: em(16px);
-	width: 100%;
+	transition: map-get($inputs-transitions, blur);
+	font-size: em(map-get($inputs-single-line, font-size));
+	width: map-get($inputs-single-line, width);
 }
 
 @mixin input-focus() {
-	box-shadow: map-get($inputs-shadows, focus);
+	border: map-get($inputs-focus, border);
+	transition: map-get($inputs-transitions, focus);
+	outline: map-get($inputs-focus, outline);
+	box-shadow: map-get($inputs-shadows, focus-base), map-get($inputs-shadows, focus-spread);
 }
 
 @mixin input-disabled() {
diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js
@@ -12,19 +12,29 @@ chassis.inputs = {
 	"shadows": {
 		name: "Styles for input shadows",
 		value: {
-			"disabled": "none",
-			"normal": "none",
-			"focus": "0px 0px 4px 0px rgba(0,0,0,0.24)",
+			"disabled": "0px 0px 2px 0px rgba(0, 0, 0, 0.12)",
+			"normal": "0px 2px 2px 0px rgba(0, 0, 0, 0.12)",
+			"focus-base": "0px 0px 8px 0px rgba(0, 0, 0, 0.08)",
+			"focus-spread": "0px 8px 8px 0px rgba(0, 0, 0, 0.18)"
+		}
+	},
+	"transitions": {
+		name: "Transition animations",
+		value: {
+			"focus": "all .25s",
+			"blur": "all .1s"
 		}
 	},
 	"single-line": {
 		name: "Generic styles for single line inputs",
 		value: {
-			"padding": "10px",
+			"padding": "15px",
 			"margin": "8px",
 			"border": "1px solid " + chassis.colors.grey.value.black,
 			"background": chassis.colors.background.value.base,
-			"border-radius": "3px"
+			"border-radius": "3px",
+			"font-size": "18px",
+			"width": "100%"
 		}
 	},
 	"disabled": {
@@ -38,8 +48,9 @@ chassis.inputs = {
 	"focus": {
 		name: "Styles for in focus inputs",
 		value: {
-			"border": "1px solid " + chassis.colors.primary.value.base,
-			"background": chassis.colors.background.value.base
+			"border": "1px solid " + chassis.colors.info.value.light,
+			"background": chassis.colors.background.value.base,
+			"outline": "none"
 		}
 	}
 };
