jquery-archive · lunaticmonk · Jan 29, 2017 · Feb 13, 2017 · Feb 13, 2017 · Feb 13, 2017
diff --git a/demos/form-elements.html b/demos/form-elements.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>html5 form elements</title>
+	<meta name="description" content="Base styling for html5 form elements">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../dist/css/chassis.css">
+	<link rel="stylesheet" href="demos.css">
+	<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
+</head>
+<body>
+	<form class = "wrapper">
+		<input type="search" class ="searchbox searchbox-sm" placeholder = "Search small" required><br>
+		<input type="search" class ="searchbox searchbox-md" placeholder = "Search medium" required><br>
+		<input type="search" class = "searchbox searchbox-lg" placeholder = "Search large" name=""><br>
+		<input type="search" class ="searchbox searchbox-sm disabled" disabled = "true" placeholder = "Search disabled" required><br>
+		<input type="search" class ="searchbox searchbox-md disabled" disabled = "true" placeholder = "Search disabled" required><br>
+		<input type="search" class ="searchbox searchbox-lg disabled" disabled = "true" placeholder = "Search disabled" required><br>
+		<input type="email" class = "emailbox-sm" placeholder = "@&nbsp;|"><br>
+		<input type="email" class = "emailbox-md" placeholder = "@&nbsp;|"><br>
+		<input type="email" class = "emailbox-lg" placeholder = "@&nbsp;|"><br>
+	</form>
+</body>
+</html>
diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss
@@ -39,7 +39,7 @@
 }
 
 .btn {
-	@include btn(	map-get($btn-element, margin));
+	@include btn(map-get($btn-element, margin));
 }
 
 /* Button Colors */

diff --git a/scss/atoms/html5-form-elements/_form-base-styling.scss b/scss/atoms/html5-form-elements/_form-base-styling.scss
@@ -0,0 +1,100 @@
+/*
+* ====================================
+* Form base styling for html5 elements
+* ====================================
+*/
+
+@import
+	"dist/chassis",
+	"mixin";
+
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+
+input[ type = "search" ] {
+	display: block;
+	border-radius: .2em;
+	padding-left: .5em;
+	color: map-get($formelements-searchbox, color);
+	border: 1px solid map-get($formelements-searchbox, border-color);
+	background: transparent;
+	@include focus;
+
+	&.searchbox-sm {
+		@include sm;
+	}
+
+	&.searchbox-md {
+		@include md;
+	}
+
+	&.searchbox-lg {
+		@include lg;
+	}
+}
+
+input[ type = "email" ] {
+	display: block;
+	border-radius: .2em;
+	padding-left: .5em;
+	color: #566573;
+	border: 1px solid map-get($formelements-emailbox, border-color);
+	background: transparent;
+
+	&:focus:not(:invalid) {
+		outline: none;
+		border-color: #3498db;
+		box-shadow: 0 0 4px #3498db;
+	}
+
+	&:focus:invalid {
+		outline: none;
+		border-color: #e74c3c;
+		box-shadow: 0 0 4px #ec7063;
+	}
+
+	&.emaibox-sm {
+		@include sm;
+	}
+
+	&.emailbox-md {
+		@include md;
+	}
+
+	&.emailbox-lg {
+		@include lg;
+	}
+}
+
+.urlbox {
+	display: block;
+	padding-left: .5em;
+	width: 20em;
+	line-height: 2.5em;
+	font-size: 1rem;
+	color: #566573;
+	border: 1px solid #212f3d;
+	border-radius: .2em;
+	background: transparent;
+
+	&::-webkit-input-placeholder {
+		padding-left: 1em;
+		font-size: 1.2rem;
+	}
+
+	&::-moz-input-placeholder {
+		padding-left: 1em;
+		font-size: 1.2rem;
+	}
+
+
+	&::-o-input-placeholder {
+		padding-left: 1em;
+		font-size: 1.2rem;
+	}
+}
diff --git a/scss/atoms/html5-form-elements/_mixin.scss b/scss/atoms/html5-form-elements/_mixin.scss
@@ -0,0 +1,71 @@
+@mixin focus {
+	&:focus {
+		outline: none;
+		border-color: #3498db;
+		box-shadow: 0 0 4px #3498db;
+	}
+
+	&::-webkit-input-placeholder {
+		padding-left: 1em;
+		font-size: 1.2rem;
+	}
+
+	&::-moz-input-placeholder {
+		padding-left: 1em;
+		font-size: 1.2rem;
+	}
+
+
+	&::-o-input-placeholder {
+		padding-left: 1em;
+		font-size: 1.2rem;
+	}
+
+	&.disabled {
+		pointer-events: none;
+		cursor: map-get($btn-disable, cursor);
+		opacity: .4;
+	}
+}
+
+@mixin sm {
+	width: 10em;
+	line-height: 1.5em;
+	font-size: 1rem;
+	border-radius: .2em;
+	@extend %placeholder;
+}
+
+@mixin md {
+	width: 15em;
+	line-height: 2em;
+	font-size: 1rem;
+	border-radius: .2em;
+	@extend %placeholder;
+}
+
+@mixin lg {
+	width: 20em;
+	line-height: 2.5em;
+	font-size: 1rem;
+	border-radius: .2em;
+	@extend %placeholder;
+}
+
+%placeholder {
+	&::-webkit-input-placeholder {
+		padding-left: 1em;
+		font-size: 1rem;
+	}
+
+	&::-moz-input-placeholder {
+		padding-left: 1em;
+		font-size: 1rem;
+	}
+
+
+	&::-o-input-placeholder {
+		padding-left: 1em;
+		font-size: 1rem;
+	}
+}
diff --git a/scss/lint.scss b/scss/lint.scss
@@ -17,7 +17,8 @@
 @import
 	"atoms/icons/icons",
 	"atoms/typography/typography",
-	"atoms/buttons/buttons";
+	"atoms/buttons/buttons",
+	"atoms/html5-form-elements/form-base-styling";
 
 @import
 	"views/main";
diff --git a/scss/variables/html5Elements.js b/scss/variables/html5Elements.js
@@ -0,0 +1,35 @@
+( function( root, factory ) {
+	if ( typeof define === "function" && define.amd ) {
+		define( [ "./chassis" ], factory );
+	} else if ( typeof exports === "object" ) {
+		module.exports = factory( require( "./chassis" ) );
+	} else {
+		root.chassis = factory( root.chassis );
+	}
+}( this, function( chassis ) {
+
+chassis.formelements = {
+	"searchbox": {
+		name: "Search Input Styling",
+		value: {
+			"border-color": "#212f3d",
+			"color": "#566573"
+		}
+	},
+	"emailbox": {
+		name: "Email Input Styling",
+		value: {
+			"valid": {
+				"color": "#566573",
+				"border-color": "#212f3d"
+			},
+			"invalid": {
+				"color": "#566573",
+				"border-color": "#e74c3c"
+			}
+		}
+	}
+};
+
+return chassis;
+} ) );
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,7 +39,7 @@ @@
     }
     .btn {
-    	@include btn(	map-get($btn-element, margin));
+    	@include btn(map-get($btn-element, margin));
     }
     /* Button Colors */
@@ Expand Down @@