rapido-css 0.0.3 → 0.0.4

data/stylesheets/components/_forms.scss

@@ -1,449 +1,576 @@
-// ====================================================================================================================
-// FORMS
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Forms
+
+Individual form controls receive default styling with `form` Results in stacked, left-aligned labels on top of form controls.
+
+	.form
+	  +–– .form__group
+	  |    |–– .form__label
+	  |    +–– .form__controls
+	  |         |–– input
+	  |         |–– textarea
+	  |         |–– .form__select
+	  |         |–– .form__checkbox
+	  |         |–– .form__radio
+	  |         +–– .form__addon
+	  +–– .form__actions
+
+* **`.form__group`**: Main container of a section of the form
+	* **`.form__label`**: Main labels for the form.
+	* **`.form__controls`**: Container of inputs, buttons and addons
+		* **`.form__checkbox`**, **`.form__radio`**: Stacked list of checkboxes and radios.
+		* **`.form__checkbox.inline`**, **`.form__radio.inline`**: Inline list of checkboxes and radios.
+		* **`.form__select`**: Create custom style selects.
+		* **`.form__help--block`**: Block help text that appears under form controls.
+		* **`.form__help--inline`**: Inline help text that appears aside form controls.
+* **`.form__actions`**: End a form with a group of actions (buttons). When placed within a `.form__actions`, the buttons will automatically indent to line up with the form controls.
+
+Styleguide 8
+
+==================================================================================================================== */
 
 @if $forms {
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
+form {
+	@extend .clearfix;
+	margin: 0 0 rhythm();
+}
+
+fieldset {
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+
+legend {
+	@include adjust-font-size-to($h5-size);
+	display: block;
+	padding: 0;
+	width: 100%;
+	font-weight: bold;
+	border: 0;
+	padding-bottom: rhythm(.5);
+	margin-bottom: rhythm(.5);
+	border-bottom: 1px solid #e5e5e5;
+	small {
+		font-size: em($base-font-size);
+		color: $grayLight;
+	}
+}
+
+label,
+input,
+button,
+select,
+textarea {
+	line-height: 1em;
+	font-family: $base-font-family;
+	@include border-radius($base-border-radius);
+}
+
+.input-text,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
+	display: inline-block;
+	padding: 0 $input-padding-side;
+	vertical-align: middle;
+	height: $input-height;
+	border-width: $input-border;
+	border-style: solid;
+	@media \0screen { line-height: $input-height; } // Ugly IE8 Hack
+	@extend %input !optional;
+
+	&:focus {outline: 0;}
+}
+
+select {
+	color: $text-color;
+	display: inline-block;
+}
+
+label { display: block; }
+
+input,
+textarea {
+	width: 240px;
+}
+
+textarea {
+	height: auto;
+	line-height: rhythm(1);
+	padding: $input-padding;
+}
+
+
+input[type="radio"],
+input[type="checkbox"] {
+	margin: em(1px) 0 0;
+}
+
+input[type="file"],
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+	width: auto;
+}
+
+select,
+.form__select {
+	width: 240px;
+}
+
+select[multiple],
+select[size] {
+	height: auto;
+}
+
+
+input,
+textarea {
+	@include placeholder();
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+	cursor: not-allowed;
+}
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+	background-color: transparent;
+}
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
+	color: #b94a48;
+	border-color: #ee5f5b;
+	&:focus {
+		border-color: darken(#ee5f5b, 10%);
+	}
+}
+// }
 
-	.form {
-		@extend .clearfix;
-		margin: 0 0 em($base-line-height);
 
-		fieldset {
-			padding: 0;
-			margin: 0;
-			border: 0;
-		}
 
-		legend {
-			@include adjust-font-size-to($h5-size);
-			display: block;
-			padding: 0;
-			width: 100%;
-			font-weight: bold;
-			border: 0;
-			padding-bottom: rhythm(.5);
-			margin-bottom: rhythm(.5);
-			border-bottom: 1px solid #e5e5e5;
-			small {
-				font-size: em($base-font-size);
-				color: $grayLight;
-			}
-		}
+.form__group + .form__group { margin-top: em($control-margin-bottom); }
 
-		label,
-		input,
-		// button,
-		select,
-		textarea {
-			line-height: 1em;
-			font-family: $base-font-family;
-			@include border-radius($base-border-radius);
-		}
+.form__controls { @extend .clearfix; }
 
-		// input,
-		textarea,
-		input[type="text"],
-		input[type="password"],
-		input[type="datetime"],
-		input[type="datetime-local"],
-		input[type="date"],
-		input[type="month"],
-		input[type="time"],
-		input[type="week"],
-		input[type="number"],
-		input[type="email"],
-		input[type="url"],
-		input[type="search"],
-		input[type="tel"],
-		input[type="color"] {
-			display: inline-block;
-			padding: 0 $input-padding-side;
-			// padding: $input-padding;
-			vertical-align: middle;
-			height: $input-height;
-			border-width: $input-border;
-			border-style: solid;
-			line-height /*\**/: $input-height \9; // Ugly IE8 Hack
-			@extend %input !optional;
+/* --------------------------------------------------------------------------------------------------------------------
 
-			&:focus {outline: 0;}
-		}
+Labels
 
-		select {
-			color: $text-color;
-			display: inline-block;
-		}
+Main labels for the form using `.form__label`
 
-		label { display: block; }
+Markup: <label class="form__label">Label</label>
 
-		input,
-		textarea {
-			width: 240px;
-		}
+Styleguide 8.1
 
-		textarea {
-			height: auto;
-			line-height: rhythm(1);
-			padding: $input-padding;
-		}
+-------------------------------------------------------------------------------------------------------------------- */
 
+.form__label {
+	font-weight: bold;
+	margin-bottom: em($label-margin-bottom);
+	cursor: auto;
+}
 
-		input[type="radio"],
-		input[type="checkbox"] {
-			margin: em(1px) 0 0;
-		}
 
-		input[type="file"],
-		input[type="image"],
-		input[type="submit"],
-		input[type="reset"],
-		input[type="button"],
-		input[type="radio"],
-		input[type="checkbox"] {
-			width: auto;
-		}
+/* --------------------------------------------------------------------------------------------------------------------
 
-		select,
-		.form__select {
-			width: 240px;
-		}
+Radio & Checkbox
 
-		select[multiple],
-		select[size] {
-			height: auto;
-		}
+Markup:
+<div class="form__controls">
+  <label class="form__radio {$modifiers}">
+    <input type="radio" value="option1" checked> Option one is this</label>
+  <label class="form__radio {$modifiers}">
+    <input type="radio" value="option2"> Option two can be something else </label>
+  </div>
+</div>
 
+.inline - Inline alignment with `.inline`
 
-		input,
-		textarea {
-			@include placeholder();
-		}
+Styleguide 8.2
 
-		// DISABLED INPUTS
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		input[disabled],
-		select[disabled],
-		textarea[disabled],
-		input[readonly],
-		select[readonly],
-		textarea[readonly] {
-			cursor: not-allowed;
-		}
-		input[type="radio"][disabled],
-		input[type="checkbox"][disabled],
-		input[type="radio"][readonly],
-		input[type="checkbox"][readonly] {
-			background-color: transparent;
-		}
-		input:focus:invalid,
-		textarea:focus:invalid,
-		select:focus:invalid {
-			color: #b94a48;
-			border-color: #ee5f5b;
-			&:focus {
-				border-color: darken(#ee5f5b, 10%);
-			}
-		}
-	}
+-------------------------------------------------------------------------------------------------------------------- */
 
+.form__radio,
+.form__checkbox,
+.form__select {
+	min-height: em($base-line-height);
+	padding-left: em($checkbox-padding-left);
+	font-weight: normal;
+	cursor: pointer;
+	display: block;
+}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Labels
-// --------------------------------------------------------------------------------------------------------------------
+.form__select {padding-left: 0;}
 
-	.form__label {
-		font-weight: bold;
-		margin-bottom: em($label-margin-bottom);
-		cursor: auto;
-	}
+.form__radio input[type="radio"],
+.form__checkbox input[type="checkbox"] {
+	float: left;
+	margin-left: -20px;
+}
+.form__radio.inline,
+.form__checkbox.inline {
+	display: inline-block;
+	vertical-align: middle;
+}
+.form__radio.inline + .form__radio.inline,
+.form__checkbox.inline + .form__checkbox.inline {
+	margin-left: 20px;
+}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Radio & Checkbox
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
 
-	.form__radio,
-	.form__checkbox,
-	.form__select {
-		min-height: em($base-line-height);
-		padding-left: em($checkbox-padding-left);
-		font-weight: normal;
-		cursor: pointer;
-	}
+Custom Select
 
-	.form__select {padding-left: 0;}
+Add custom styling to a select element wrapping the `<select>` with a `<span>` with class `.form__select`.
 
-	.form__radio input[type="radio"],
-	.form__checkbox input[type="checkbox"] {
-		float: left;
-		margin-left: -20px;
-	}
-	.form__radio.inline,
-	.form__checkbox.inline {
-		display: inline-block;
-		vertical-align: middle;
-	}
-	.form__radio.inline + .form__radio.inline,
-	.form__checkbox.inline + .form__checkbox.inline {
-		margin-left: 20px;
-	}
+Markup:
+<span class="form__select">
+  <select>
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+    <option>5</option>
+  </select>
+</span>
 
+Styleguide 8.3
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Custom Select
-// --------------------------------------------------------------------------------------------------------------------
+-------------------------------------------------------------------------------------------------------------------- */
 
-	.form__select {
-		@extend %caret !optional;
-		@include border-radius(3px);
-		border-style: solid;
-		border-width: $input-border;
+.form__select {
+	@extend %caret !optional;
+	@include border-radius(3px);
+	border-style: solid;
+	border-width: $input-border;
+	cursor: pointer;
+	display: inline-block;
+	height: $input-height;
+	line-height: 1em;
+	position: relative;
+	width: 240px;
+
+	select {
+		@include appearance(none);
+		background-color:transparent;
+		background-image:none;
+		border:none;
+		box-shadow:none;
 		cursor: pointer;
-		display: inline-block;
-		height: $input-height;
-		line-height: 1em;
+		padding: $input-padding;
 		position: relative;
-		width: 240px;
-
-		select {
-			@include appearance(none);
-			background-color:transparent;
-			background-image:none;
-			border:none;
-			box-shadow:none;
-			cursor: pointer;
-			padding: $input-padding;
-			position: relative;
-			width:100%;
-			z-index: 3;
-			line-height: 1em;
-		}
+		width:100%;
+		z-index: 3;
+		line-height: 1em;
+	}
 
-		&:after {
-			@include position(absolute, em($input-padding-top) em($input-padding-side) 0 0);
-			display: block;
-		}
+	&:after {
+		@include position(absolute, em($input-padding-top) em($input-padding-side) 0 0);
+		display: block;
+	}
 
-	 	@extend %select !optional;
+	 @extend %select !optional;
 
-	}
+}
 
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Help
-// --------------------------------------------------------------------------------------------------------------------
 
-	.form__help--block,
-	.form__help--inline {
-		color: lighten($text-color, 15%);
-	}
-	.form__help--block {
-		display: block;
-		padding: rhythm(.5) 0 0;
-	}
-	.form__help--inline {
-		@include inline-block();
-		vertical-align: middle;
-		padding-left: 5px;
-	}
+/* --------------------------------------------------------------------------------------------------------------------
 
+Help
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Addon
-// --------------------------------------------------------------------------------------------------------------------
+Add an help text block
 
-	.form__addon {
-		display: inline-block;
-		width: auto;
-		min-width: em(16px);
-		padding: $input-padding;
-		line-height: 1em;
-		font-weight: normal;
-		float: left;
-		height: $input-height;
-		text-align: center;
-		border-width: $input-border;
-		border-style: solid;
-		@extend %input-addon !optional;
-	}
+**Block Help**
 
+	<div class="form__controls">
+	  <input type="text">
+	  <span class="form__help--block">Help text</span>
+	</div>
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Group & Controls
-// --------------------------------------------------------------------------------------------------------------------
+**Help Inline**
 
-	.form__group { margin-bottom: em($control-margin-bottom); }
-	.form__controls { @extend .clearfix; }
+	<div class="form__controls">
+	  <input type="text">
+	  <span class="form__help--inline">Help text</span>
+	</div>
 
+Styleguide 8.4
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Form Actions
-// --------------------------------------------------------------------------------------------------------------------
+-------------------------------------------------------------------------------------------------------------------- */
+
+.form__help--block,
+.form__help--inline {
+	color: lighten($text-color, 15%);
+}
+.form__help--block {
+	display: block;
+	padding: rhythm(.5) 0 0;
+}
+.form__help--inline {
+	@include inline-block();
+	vertical-align: middle;
+	padding-left: 5px;
+}
+
+
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Append & Prepend
+
+Markup:
+<div class="form__controls form__controls--multi">
+  <span class="form__addon">$</span>
+  <input type="text">
+  <span class="form__addon">.00</span>
+</div>
+
+Styleguide 8.5
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+.form__addon {
+	display: inline-block;
+	width: auto;
+	min-width: em(16px);
+	padding: $input-padding;
+	line-height: 1em;
+	font-weight: normal;
+	float: left;
+	height: $input-height;
+	text-align: center;
+	border-width: $input-border;
+	border-style: solid;
+	@extend %input-addon !optional;
+}
+
+.form__controls--multi {
+	margin-left: $input-border;
+
+	> [type],
+	> [class] {
+		@include border-radius(0);
+		float: left;
+		margin-left: -$input-border;
+
+		&:first-child   { @include border-radius($base-border-radius 0 0 $base-border-radius); }
+		&:last-child   { @include border-radius(0 $base-border-radius $base-border-radius 0); }
+	}
 
-	.form__actions {
-		padding-top: rhythm(1);
-		margin-top: rhythm(1);
-		margin-bottom: rhythm(1);
-		border-top: 1px solid #e5e5e5;
-		clear: both;
-		@extend .clearfix;
+	> ul.btn-group + * {
+		margin-left: -($input-border * 2);
 	}
 
+	> [type] {
+		position: relative;
+		z-index: 2;
+	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Append & Prepend
-// --------------------------------------------------------------------------------------------------------------------
+}
 
-	.form__controls--multi {
-		margin-left: $input-border;
 
-		> [type],
-		> [class] {
-			@include border-radius(0);
-			float: left;
-			margin-left: -$input-border;
+/* --------------------------------------------------------------------------------------------------------------------
 
-			&:first-child 	{ @include border-radius($base-border-radius 0 0 $base-border-radius); }
-			&:last-child 	{ @include border-radius(0 $base-border-radius $base-border-radius 0); }
-		}
+Form Actions
 
-		> ul.btn-group + * {
-			margin-left: -($input-border * 2);
-		}
+End a form with a group of actions (buttons). When placed within a `.form__actions`, the buttons will automatically indent to line up with the form controls.
 
-		> [type] {
-			position: relative;
-			z-index: 2;
-		}
+Markup:
+<div class="form__actions">
+  <button type="submit" class="btn btn--default ">Save changes</button>
+  <button type="submit" class="btn btn--default btn--primary pull-right">Save changes</button>
+  <button type="button" class="btn btn--default btn--secondary">Cancel</button>
+</div>
 
-		// Correct border radius
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+Styleguide 8.6
 
-		> .btn-group:first-child > li:first-child .btn 				{ }
-		> .btn-group:first-child > li:last-child .btn 				{ @include border-right-radius(0); }
-		> div.btn-group:first-child .btn 							{ @include border-right-radius(0); }
+-------------------------------------------------------------------------------------------------------------------- */
 
-		> .btn-group:last-child > li:first-child .btn 				{ @include border-left-radius(0); }
-		> .btn-group:last-child > li:last-child .btn 				{ }
-		> div.btn-group:last-child > .btn 							{ @include border-left-radius(0); }
+.form__actions {
+	padding-top: rhythm(1);
+	margin-top: rhythm(1);
+	margin-bottom: rhythm(1);
+	border-top: 1px solid #e5e5e5;
+	clear: both;
+	@extend .clearfix;
+}
 
-		/*
-			// DEBUG
 
-			> .btn-group:first-child > li:first-child .btn 				{ background: red !important; }
-			> .btn-group:first-child > li:last-child .btn 				{ background: blue !important; }
-			> div.btn-group:first-child .btn 							{ background: green !important; }
+/* --------------------------------------------------------------------------------------------------------------------
 
-			> .btn-group:last-child > li:first-child .btn 				{ background: purple !important; }
-			> .btn-group:last-child > li:last-child .btn 				{ background: yellow !important; }
-			> div.btn-group:last-child > .btn 							{ background: teal !important; }
-		*/
+Form Layouts
 
+Markup:
+<form class="form {$modifiers}">
+  <div class="form__group">
+    <label class="form__label">Label</label>
+    <div class="form__controls">
+      <input type="text" placeholder="Type something…">
+    </div>
+  </div>
+  <div class="form__group">
+    <label class="form__label">Label</label>
+    <div class="form__controls">
+      <input type="text" placeholder="Type something…">
+    </div>
+  </div>
+  <div class="form__group">
+    <label class="form__label">Label</label>
+    <div class="form__controls">
+      <input type="text" placeholder="Type something…">
+    </div>
+  </div>
+  <div class="form__actions">
+    <button type="submit" class="btn btn--default ">Save changes</button>
+  </div>
+</form>
 
-	}
+.form--grid - Grid aligned `.form__group` with support for responsive layout with `columns` mixin. Example of a responsive grid with 3 columns on desktop, 2 on tablets, and 1 on smartphones: **[Example code](https://gist.github.com/raffone/6091448)**
+.form--aligned - Right align labels and float them to the left to make them appear on the same line as controls.
+.form--inline - For left-aligned labels and inline-block controls for a compact layout. This layout doesn't support `.form__group`, `.form__addon`, `.form__actions`
+
+Styleguide 8.7
 
+-------------------------------------------------------------------------------------------------------------------- */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Form Grid
 // --------------------------------------------------------------------------------------------------------------------
 
-	@if $forms-grid {
-		.form--grid {
-			.form__group { min-height: $control-min-height; }
-			.form__multi { width: 100%; }
-			input, button {padding: 0 $input-padding-side;}
-
-			// $i: 100;
-			// @while $i > 0 {
-			// 	[data-width="#{$i}"] { @extend %width-#{$i}; }
-			// 	$i: $i - 5;
-			// }
+@if $forms-grid {
+	.form--grid {
+		.form__group {
+			min-height: $control-min-height;
+			margin: 0 0 em($control-margin-bottom) 0;
 		}
-	}
 
+		.form__multi { width: 100%; }
 
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	}
+}
+
 // Form Aligned
 // --------------------------------------------------------------------------------------------------------------------
 
-	@if $forms-aligned {
-
-		.form--aligned {
+@if $forms-aligned {
 
-			.form__label {
-				float: left;
-				width: em($horizontal-offset) - em(20px);
-				padding-top: em($input-padding-top);
-				text-align: right;
-			}
+	.form--aligned {
 
-			.form__controls { margin-left: em($horizontal-offset); }
+		.form__label {
+			float: left;
+			width: em($horizontal-offset) - em(20px);
+			padding-top: em($input-padding-top);
+			text-align: right;
+		}
 
-			.form__help--block { margin-bottom: 0; }
+		.form__controls { margin-left: em($horizontal-offset); }
 
-			.form__controls > .form__radio:first-child,
-			.form__controls > .form__checkbox:first-child {
-				margin-top: em($input-padding-top);
-			}
+		.form__help--block { margin-bottom: 0; }
 
-			.form__controls > .form__radio.inline,
-			.form__controls > .form__checkbox.inline{
-				margin-top: em($input-padding-top);
-			}
+		.form__controls > .form__radio:first-child,
+		.form__controls > .form__checkbox:first-child {
+			margin-top: em($input-padding-top);
+		}
 
-			.form__actions {
-				padding-left: em($horizontal-offset);
-			}
+		.form__controls > .form__radio.inline,
+		.form__controls > .form__checkbox.inline{
+			margin-top: em($input-padding-top);
+		}
 
-			@include media(palm) {
-				.form__label {
-					width: 100%;
-					float: none;
-					padding-top: 0;
-					text-align: left;
-				}
+		.form__actions {
+			padding-left: em($horizontal-offset);
+		}
 
-				.form__controls { margin-left: 0; }
-				.form__actions { padding-left: 0; }
+		@include media(palm) {
+			.form__label {
+				width: 100%;
+				float: none;
+				padding-top: 0;
+				text-align: left;
 			}
+
+			.form__controls { margin-left: 0; }
+			.form__actions { padding-left: 0; }
 		}
 	}
+}
+
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Inline Form (semplified)
+
+The inline layout can also be used width a samplified markup.
 
+Markup:
+<form class="form form--inline">
+  <label class="form__label">Label</label>
+  <input type="text" placeholder="Type something…">
+  <label class="form__label">Label</label>
+  <input type="text" placeholder="Type something…">
+  <label class="form__label">Label</label>
+  <input type="text" placeholder="Type something…">
+  <button type="submit" class="btn btn--default ">Save changes</button>
+</form>
+
+Styleguide 8.7.1
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Form Inline
 // --------------------------------------------------------------------------------------------------------------------
 
-	@if $forms-inline {
+@if $forms-inline {
 
-		.form--inline {
+	.form--inline {
 
-			> * {
-				float: left;
-				vertical-align: middle;
-				margin: 0 em(8px) 0 0;
-				padding-left: 0;
-			}
+		* {
+			float: none;
+			display: inline-block;
+			vertical-align: middle;
+			margin: 0;
+			padding: 0;
+			width: auto;
+		}
 
-			.form__help--inline,
-			.form__label,
-			.form__radio,
-			.form__checkbox {
-				padding-top: em($input-padding-top);
-			}
+		> * + *,
+		> * > * + *,
+		.form__group {
+			margin: 0 0 0 em(10px);
+		}
 
-			.form__radio input[type="radio"],
-			.form__checkbox input[type="checkbox"] {
-				float: left;
-				margin-right: em(4px);
-				margin-left: 0;
-			}
+		.form__actions {
+			border: 0;
 		}
-	}
 
+	}
+}
 
-} // end IF $forms
+}