Added fluid input groups, resolves #50

dist/mini-default.css

@@ -729,9 +729,35 @@ legend {
   font-size: 0.925em;
   padding: 2px 4px; }
 
+label {
+  padding: 4px; }
+
 .input-group {
   display: inline-block; }
+  .input-group.fluid {
+    display: -webkit-box;
+    -webkit-box-pack: justify;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center; }
+    .input-group.fluid > input {
+      -webkit-box-flex: 1;
+      max-width: 100%;
+      -webkit-flex-grow: 1;
+      flex-grow: 1;
+      -webkit-flex-basis: 0;
+      flex-basis: 0; }
 
+@media (max-width: 767px) {
+  .input-group.fluid {
+    -webkit-box-orient: vertical;
+    -webkit-align-items: stretch;
+    align-items: stretch;
+    -webkit-flex-direction: column;
+    flex-direction: column; } }
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
   height: auto; }
 
@@ -911,7 +937,7 @@ input[type="file"] {
   .input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
     display: inline-block;
     position: absolute;
-    bottom: 3px;
+    bottom: 6px;
     left: 0;
     width: 16px;
     height: 16px;
@@ -934,7 +960,7 @@ input[type="file"] {
 .input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after {
   margin-left: -20px;
   position: absolute;
-  bottom: 7px;
+  bottom: 10px;
   left: 4px;
   width: 10px;
   height: 10px;

docs/v2/DEVLOG.md

@@ -787,3 +787,5 @@
 - `tooltip` updated, dealing with a small misalignment bug in alternate styles.
 - Added `$nav-include-sublink-bar` flag for `nav` element's subcategories to add a sidebar to them. Styled them as necessary and used proper variables. Tested reasonably extensively, no bugs should be present.
 - With the addition of the new `nav` sidebar to the main flavor, the file size is now `6.86KB`. This is very close to the final size for the *v2.1.0* release, as most of the new features have been added already.
+- Added `label` element `padding` via variables to address certain issues. Tweaked `checkbox` and `radio` components to match changes.
+- Added flag for `fluid` `input-group`s and created the related component. `fluid` `input-group`s will now be part of the default flavor, taking the file size up to `6.93KB`, which is probably the final size of the next release. - Deals with #50.

docs/v2/demo.html

@@ -166,6 +166,36 @@
 			  <a href="#">About</a>
 			  <a href="#">Contact</a>
 			</nav>
+			<style>
+			label {
+				padding: 4px;
+			}
+			</style>
+				<form>
+  <fieldset>
+    <legend>Simple form</legend>
+    <div class="input-group fluid">
+      <label for="username">username</label>
+      <input type="email" value="" id="username" placeholder="username">
+
+      <label for="pwd">password</label>
+      <input type="password" value="" id="pwd" placeholder="password">
+    </div>
+	<div class="input-group">
+      <label for="username">username</label>
+      <input type="email" value="" id="username" placeholder="username">
+    </div>
+	<div class="input-group">
+  <input type="checkbox" id="check1" tabindex="0">
+  <label for="check1">Checkbox</label>
+</div>
+
+<div class="input-group">
+  <input type="radio" id="rad1" tabindex="0" name="radio-group-1">
+  <label for="rad1">Radio</label>
+</div>
+  </fieldset>
+</form>
 		</div>
 	  </div>
 

src/flavors/mini-default.scss

@@ -195,7 +195,7 @@ $nav-include-sublink-bar:		true;											// Should a left border bar be added
 																				// subcategories (`true`/`false`) [2]
 $nav-sublink-bar-left-position: 3px;											// Left position of subcategory bar
 $nav-sublink-bar-width:			1px;											// Width of the subcategory bar
-$nav-sublink-bar-color:			#78909c;										// Subcategory bar color	
+$nav-sublink-bar-color:			#78909c;										// Subcategory bar color
 $footer-back-color:				#263238;										// Background color for <footer>
 $footer-fore-color:				#fafafa;										// Text color for <footer>
 $footer-border-style:			0;												// Border stye for <footer>
@@ -231,7 +231,12 @@ $legend-font-weight:			$bold-font-weight;								// Font weight for legend
 $legend-font-size:				0.925em;										// Font size for legend
 $legend-fore-color:				$form-fore-color;								// Text color for legend
 $legend-padding:				2px 4px;										// Padding for legend
+$label-padding:					4px;											// Padding for label
 $input-group-name:				'input-group';									// Class for input groups
+$include-fluid-input-group:		true;											// Should fluid input grooups be
+																				// included? (`true`/`false`) [1]
+$input-group-fluid-name:		'fluid';										// Class name for fluid input groups
+$input-group-mobile-breakpoint:	767px;											// Breakpoint for fluid input group mobile view
 $input-back-color:				#fafafa;										// Background for input
 $input-fore-color:				$fore-color;									// Text color for input
 $input-border-style:			1px solid #bdbdbd;								// Border style for input
@@ -265,7 +270,7 @@ $button-group-box-shadow:														// Box shadow for button groups
 $button-group-mobile-breakpoint:767px;											// Breakpoint for button group mobile view
 $hide-file-inputs:				true;											// Should a style be added that makes all
 																				// <input>s of type `file` hidden?
-																				// (`true`/`false`) [1]
+																				// (`true`/`false`) [2]
 $button-variant1-name:			'primary';										// Class name for button variant 1
 $button-variant1-back-color:	#0277bd;										// Background color for button variant 1
 $button-variant1-back-opacity:	0.9;											// Background opacity for button variant 1
@@ -300,21 +305,23 @@ $button-style2-border-style:	0;												// Border style for button style 2
 $button-style2-border-radius:	4px;											// Border radius for button style 2
 $button-style2-padding:			12px 18px;										// Padding for button style 2
 $button-style2-margin:			10px 8px;										// Margin for button style 2
-$checkbox-size:					16px;											// Size for checkbox/radio [2]
+$checkbox-size:					16px;											// Size for checkbox/radio [3]
 $checkbox-back-color:			$input-back-color;								// Background clor for checkbox/radio
 $checkbox-fore-color:			$input-fore-color;								// Text/mark color for checkbox/radio
 $checkbox-border-thickness:		1px;											// Border thickness for checkbox/radio
 $checkbox-border-color:			#bdbdbd;										// Border color for checkbox/radio
 $checkbox-border-radius:		$input-border-radius;							// Border radius for checkbox/radio
 $checkbox-focus-border-color: 	$input-focus-border-color;						// Border color for checkbox/radio on focus
-$checkbox-bottom-spacing:		3px;											// Bottom spacing for checkbox/radio
+$checkbox-bottom-spacing:		6px;											// Bottom spacing for checkbox/radio
 $checkbox-disabled-opacity:		$input-disabled-opacity;						// Opacity for disabled checkbox/radio
 // 	Notes:
-// [1] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
+// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
+//	specified in the corresponding variables.
+// [2] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
 // 	to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
 //	allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
 //	If the value is `false`, some fixes will be applied to the <input type="file"> element.
-// [2] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
+// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
 //	Variables for responsive tables
 $table-border-style:			1px solid #bdbdbd;								// Border style for <table> and children
 $table-border-radius:			0;												// Border radius for <table> and children

src/mini/_input_control.scss

@@ -54,9 +54,55 @@ legend {
 		padding: $legend-padding;
 	}
 }
+// Label syling.
+@if $label-padding != 0 {
+	label {
+		padding: $label-padding;	// Padding is all that seems to be needed for now, but more stuff could be added later.
+	}
+}
+$include-fluid-input-group:		true !default;				// Should fluid input groups be included?
 // Input group base naming.
 .#{$input-group-name} {
 	display: inline-block;
+	// Fluid input groups
+	@if $include-fluid-input-group {
+		&.#{$input-group-fluid-name} {
+			// Old syntax
+			display: -webkit-box;
+			-webkit-box-pack: justify;
+			// New syntax
+			display: -webkit-flex;
+			display: 		 flex;
+			-webkit-align-items: center;
+					align-items: center;
+			-webkit-justify-content: center;
+					justify-content: center;
+			& > input {
+				// Old syntax
+				-webkit-box-flex: 1;
+				max-width: 100%;
+				// New syntax
+				-webkit-flex-grow: 1;
+						flex-grow: 1;
+				-webkit-flex-basis: 0;
+						flex-basis: 0;
+			}
+		}
+	}
+}
+// Responsiveness for fluid input groups
+@if $include-fluid-input-group {
+	@media (max-width: #{$input-group-mobile-breakpoint}) {
+		.#{$input-group-name}.#{$input-group-fluid-name} {
+			// Old syntax
+			-webkit-box-orient: vertical;
+			// New syntax
+			-webkit-align-items: stretch;
+					align-items: stretch;
+			-webkit-flex-direction: column;
+					flex-direction: column;
+		}
+	}
 }
 // Correct the cursor style of increment and decrement buttons in Chrome.
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
@@ -213,8 +259,8 @@ $hide-file-inputs: true !default;
 		margin: $button-group-margin;
 	}
 	@if $button-group-box-shadow != none {
-			box-shadow: $button-group-box-shadow;
-		}
+		box-shadow: $button-group-box-shadow;
+	}
 	button, [type="button"], [type="submit"], [type="reset"],
 	.#{$button-class-name}, [role="button"] {
 		margin: 0;