Inputs: Added xs size and code improvements

nashvail · Jul 26, 2016 · 73d9452 · 73d9452
1 parent 5946e34
commit 73d9452
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 16 deletions.
diff --git a/demos/demos.css b/demos/demos.css
@@ -7,4 +7,5 @@ body {
 ul {
 	margin: 0;
 	padding: 0;
+	list-style-type: none;
 }
diff --git a/demos/inputs.html b/demos/inputs.html
@@ -10,7 +10,9 @@
 	</head>
 	<body>
 
-		<h3>Inputs</h3>
+		<h2>Chassis - Inputs</h2>
+
+		<h3>Checkboxes and Radios</h3>
 		<label class="input-label input-label-md input-label-block">Make multiple choices</label>
 		<!-- Custom check boxes -->
 
@@ -44,25 +46,25 @@ <h3>Inputs</h3>
 		<br/>
 
 		<label class="input-label input-label-md input-label-block">Make a choice</label>
-		<ul style="list-style-type:none">
+		<ul>
 			<li>
-				<input id="radio-1" class="radio" name="radio-group" type="radio" checked>
-				<label for="radio-1" class="input-label">Second Choice</label>
+				<input id="radio-2-1" class="radio" name="radio-group-2" type="radio" checked>
+				<label for="radio-2-1" class="input-label">Second Choice</label>
 			</li>
 
 			<li>
-				<input id="radio-2" class="radio" name="radio-group" type="radio" checked>
-				<label for="radio-2" class="input-label">Third Choice</label>
+				<input id="radio-2-2" class="radio" name="radio-group-2" type="radio" checked>
+				<label for="radio-2-2" class="input-label">Third Choice</label>
 			</li>
 
 			<li>
-				<input id="radio-3" class="radio" name="radio-group" type="radio" checked>
-				<label for="radio-3" class="input-label">Fourth Choice</label>
+				<input id="radio-2-3" class="radio" name="radio-group-2" type="radio" checked>
+				<label for="radio-2-3" class="input-label">Fourth Choice</label>
 			</li>
 
 			<li>
-				<input id="radio-4" class="radio" name="radio-group" type="radio" checked>
-				<label for="radio-4" class="input-label">Fifth Choice</label>
+				<input id="radio-2-4" class="radio" name="radio-group-2" type="radio" checked>
+				<label for="radio-2-4" class="input-label">Fifth Choice</label>
 			</li>
 
 		</ul>
@@ -71,8 +73,16 @@ <h3>Inputs</h3>
 
 		<h3>Inputs - Inline</h3>
 
-		<table>
-			<tr style="margin-bottom:10px">
+		<table style="width:100%">
+			<tr>
+				<td style="text-align: right">
+					<label class="input-label input-label-xs">Name </label>
+				</td>
+				<td>
+					<input class="input input-xs" type="text" placeholder="Enter your Name"/>
+				</td>
+			</tr>
+			<tr>
 				<td style="text-align: right">
 					<label class="input-label">Name </label>
 				</td>
@@ -98,6 +108,8 @@ <h3>Inputs - Inline</h3>
 			</tr>
 		</table>
 
+		<h3>Inputs</h3>
+
 		<label class="input-label">Name </label>
 		<input class="input" type="text" placeholder="Enter your Name"/>
 

diff --git a/scss/atoms/inputs/_mixins.scss b/scss/atoms/inputs/_mixins.scss
@@ -7,9 +7,10 @@
 
 $margin: em(map-get($inputs-input-full-width, margin));
 $margin-label: em(map-get($inputs-label, margin));
+$input-padding: em(map-get($inputs-input-full-width, padding));
 
 @mixin input() {
-	padding: em(map-get($inputs-input-full-width, padding));
+	padding: $input-padding 0 $input-padding $input-padding;
 	margin: $margin;
 	border: map-get($inputs-input-full-width, border);
 	border-color: map-deep-get($inputs-input-full-width, border-color, light);
@@ -44,6 +45,10 @@ $margin-label: em(map-get($inputs-label, margin));
 	}
 
 	/* Sizes */
+	&.input-xs {
+		@include input-xs();
+	}
+
 	&.input-md {
 		@include input-md();
 	}
@@ -55,6 +60,10 @@ $margin-label: em(map-get($inputs-label, margin));
 
 /* Input Sizes */
 
+@mixin input-xs() {
+	font-size: em(map-get($inputs-input-xs, font-size));
+}
+
 @mixin input-md() {
 	font-size: em(map-get($inputs-input-md, font-size));
 }
@@ -111,6 +120,10 @@ $margin-label: em(map-get($inputs-label, margin));
 		@include input-label-lg();
 	}
 
+	&.input-label-xs {
+		@include input-label-xs();
+	}
+
 	&.error {
 		@include input-label-error();
 	}
@@ -132,7 +145,9 @@ $margin-label: em(map-get($inputs-label, margin));
 	font-size: em(map-get($inputs-label-lg, font-size));
 }
 
-
+@mixin input-label-xs() {
+	font-size: em(map-get($inputs-label-xs, font-size));
+}
 
 /* Radio Buttons */
 
@@ -157,7 +172,7 @@ $radio-checked-border: map-deep-get($inputs-radio, checked-color, base);
 		vertical-align: middle;
 		width: map-get($inputs-radio, width);
 		height: map-get($inputs-radio, height);
-		box-shadow: inset 0 0 0 1px $radio-default-border;
+		box-shadow: inset 0 0 0 1px $radio-default-border, inset 0 2px 2px 0 rgba(0,0,0,.10);
 		padding: 2px;
 		margin-right: 10px;
 		text-align: center;
@@ -194,7 +209,7 @@ $checkbox-checked-border: map-deep-get($inputs-checkbox, checked-color, base);
 		vertical-align: middle;
 		width: map-get($inputs-checkbox, width);
 		height: map-get($inputs-checkbox, height);
-		// box-shadow: 0 2px 2px 0 rgba(0,0,0,.24);
+		box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.10);
 		padding: 2px;
 		border: 1px solid $checkbox-default-border;
 		margin-right: 10px;

diff --git a/scss/variables/inputs.js b/scss/variables/inputs.js
@@ -47,6 +47,12 @@ chassis.inputs = {
 			"font-size": "36px"
 		}
 	},
+	"label-xs": {
+		name: "Styles for extra small input labels",
+		value: {
+			"font-size": "14px"
+		}
+	},
 	"label-error": {
 		name: "Styles for error labels",
 		value: {
@@ -117,6 +123,12 @@ chassis.inputs = {
 			"font-size": "36px"
 		}
 	},
+	"input-xs": {
+		name: "Styles for extra small sized inputs",
+		value: {
+			"font-size": "14px"
+		}
+	},
 	"radio": {
 		name: "Styles for custom radio buttons",
 		value: {