Add row forms

Closes #70.

examples/index.html

@@ -1922,6 +1922,20 @@ <h4>
 					</form>
 				</section>
 			</div>
+			<section class="panel box" id="panel-form-row">
+				<h3>
+					Row form
+				</h3>
+				<p>
+					A <dfn id="dfn-form-row">row form</dfn> is a <b>block form</b> aligning elements to a single horizontal row.
+				</p>
+				<form class="panel form-row">
+					<span>Login</span>
+					<input type="text" placeholder="Username">
+					<input type="password" placeholder="Password">
+					<input type="submit" value="Login">
+				</form>
+			</section>
 		</main>
 		<footer>
 			<p>

src/rulesets/base.less

@@ -883,6 +883,29 @@
 		}
 	}
 
+	@{form-row} {
+		display: flex;
+		flex-direction: row;
+
+		> @{all} {
+			flex-basis: 100%;
+			flex-shrink: 1;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		> @{form-row-text} {
+			flex-basis: unset;
+			flex-shrink: 0;
+			flex-grow: 1;
+			text-align: right;
+			margin: auto 0;
+
+			.use-font-group(label);
+			.map-hsl-group(current; primary);
+		}
+	}
+
 	//</editor-fold>
 
 	/// ===== Text =====

src/selectorsets/module.less

@@ -111,6 +111,9 @@
 @form-flex-content: ~":where(.form-flex-content)";
 @form-flex-choice: ~":where(.form-flex-choice)";
 
+@form-row: ~":where(.form-row)";
+@form-row-text: ~":where(.form-row-text)";
+
 @text-anchor: ~":where(.text-anchor)";
 @text-idiomatic: ~":where(.text-idiomatic)";
 @text-emphasis: ~":where(.text-emphasis)";

src/selectorsets/root.less

@@ -111,6 +111,9 @@
 @form-flex-content: ~':where(.form-flex-content, p)';
 @form-flex-choice: ~':where(.form-flex-choice, label)';
 
+@form-row: ~":where(.form-row)";
+@form-row-text: ~":where(.form-row-text, span, label)";
+
 @text-anchor: ~":where(a)";
 @text-idiomatic: ~":where(i)";
 @text-emphasis: ~":where(em)";