Added and documented vertical input groups

Added vertical input-groups for easier form alignment, added relevant documentation, updated all flavors. Pretty much all of the features of this update have been completed, so after some housekeeping it'll be ready to release.

dist/mini-dark.css

@@ -708,7 +708,7 @@ legend {
 }
 
 label {
-  padding: 0.25rem;
+  padding: 0.25rem 0.5rem;
 }
 
 .input-group {
@@ -745,6 +745,29 @@ label {
   }
 }
 
+.input-group.vertical {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: justify;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.input-group.vertical > input {
+  -webkit-box-flex: 1;
+  max-width: 100%;
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 0;
+  flex-basis: 0;
+}
+
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }

dist/mini-default.css

@@ -707,7 +707,7 @@ legend {
 }
 
 label {
-  padding: 0.25rem;
+  padding: 0.25rem 0.5rem;
 }
 
 .input-group {
@@ -744,6 +744,29 @@ label {
   }
 }
 
+.input-group.vertical {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: justify;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.input-group.vertical > input {
+  -webkit-box-flex: 1;
+  max-width: 100%;
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 0;
+  flex-basis: 0;
+}
+
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }

dist/mini-lite.css

@@ -705,7 +705,7 @@ legend {
 }
 
 label {
-  padding: 0.25rem;
+  padding: 0.25rem 0.5rem;
 }
 
 .input-group {

dist/mini-nord.css

@@ -711,7 +711,7 @@ legend {
 }
 
 label {
-  padding: 4px;
+  padding: 4px 8px;
 }
 
 .input-group {
@@ -748,6 +748,29 @@ label {
   }
 }
 
+.input-group.vertical {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: justify;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.input-group.vertical > input {
+  -webkit-box-flex: 1;
+  max-width: 100%;
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 0;
+  flex-basis: 0;
+}
+
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }

dist/mini-sucroa.css

@@ -752,6 +752,29 @@ label {
   }
 }
 
+.input-group.vertical {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: justify;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.input-group.vertical > input {
+  -webkit-box-flex: 1;
+  max-width: 100%;
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 0;
+  flex-basis: 0;
+}
+
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }

docs/customization/input_control.html

@@ -243,6 +243,14 @@
 										<td data-label="Variable">$input-group-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
 										<td data-label="Description">Breakpoint for fluid input groups on mobile devices<sup><a href="#forms-note-one">1</a></sup></td><td data-label="Sample value">767px</td>
 									</tr>
+									<tr>
+										<td data-label="Variable">$include-vertical-input-group</td><td data-label="Type">Logical</td>
+										<td data-label="Description">Enables vertical input groups<sup><a href="#forms-note-two">1</a></sup></td><td data-label="Sample value">true</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$input-group-vertical-name</td><td data-label="Type">String</td>
+										<td data-label="Description">Class name for vertical input groups<sup><a href="#forms-note-two">1</a></sup></td><td data-label="Sample value">'fluid'</td>
+									</tr>
 									<tr>
 										<td data-label="Variable">$hide-file-inputs</td><td data-label="Type">Logical</td>
 										<td data-label="Description">Hides all <code>&lt;input <span class="fore-secondary">type</span>=&quot;<span class="fore-primary">file</span>&quot;&gt;</code> elements, allowing access only via the use of labels</td><td data-label="Sample value">true</td>
@@ -254,6 +262,7 @@
 							<h3>Notes:</h3>
 							<ol style="text-align:justify">
 								<li id="forms-note-one">The values of <code>$input-group-fluid-name</code> and <code>$input-group-mobile-breakpoint</code> will only be used if <code>$include-fluid-input-group</code> is set to <code class="fore-tertiary">true</code>.</li>
+									<li id="forms-note-two">The value of <code>$input-group-vertical-name</code> will only be used if <code>$include-vertical-input-group</code> is set to <code class="fore-tertiary">true</code>.</li>
 							</ol>
 						</div>
 					</div>

docs/demo.html

@@ -77,26 +77,19 @@
     <!-- Insert your page content here-->
     <main>
 			<br />
-			<div class="tabs">
-  <input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
-  <label for="tab1" aria-hidden="true">Tab 1</label>
-  <div>
-    <h3>Tab 1</h3>
-    <p>This is the first tab's content.</p>
-  </div>
-  <input type="radio" name="tab-group" id="tab2" aria-hidden="true">
-  <label for="tab2" aria-hidden="true">Tab 2</label>
-  <div>
-    <h3>Tab 2</h3>
-    <p>This is the second tab's content.</p>
-  </div>
-  <input type="radio" name="tab-group" id="tab3" aria-hidden="true">
-  <label for="tab3" aria-hidden="true">Tab 3</label>
-  <div>
-    <h3>Tab 3</h3>
-    <p>This is the third tab's content.</p>
-  </div>
-</div>
+			<form>
+  <fieldset>
+    <legend>Simple form</legend>
+    <div class="input-group fluid">
+      <label for="username">username</label>
+      <input type="email" value="" id="username" placeholder="username">
+    </div>
+    <div class="input-group vertical">
+      <label for="pwd">password</label>
+      <input type="password" value="" id="pwd" placeholder="password">
+    </div>
+  </fieldset>
+</form>
 		</main>
     <!-- End of page content-->
     <footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.<br/>

docs/input_control.html

@@ -111,17 +111,24 @@
               <form>
               <fieldset>
                 <legend>Inline form (default style)</legend>
-                <div class="input-group"><label for="username">username</label> <input type="email" value="" id="username" placeholder="username">&nbsp;</div>
-                <div class="input-group"><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">&nbsp;</div>
+                <div class="input-group"><label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
               </fieldset>
               </form>
 			  <form>
               <fieldset>
                 <legend>Fluid form</legend>
-                <div class="input-group fluid"><label for="username2">username</label> <input type="email" value="" id="username2" placeholder="username"></div>
-                <div class="input-group fluid"><label for="pwd2">password</label> <input type="password" value="" id="pwd2" placeholder="password"></div>
+                <div class="input-group fluid"><label for="username2">Username</label> <input type="email" value="" id="username2" placeholder="username"></div>
+                <div class="input-group fluid"><label for="pwd2">Password</label> <input type="password" value="" id="pwd2" placeholder="password"></div>
               </fieldset>
               </form>
+							<form>
+	              <fieldset>
+	                <legend>Vertical form</legend>
+	                <div class="input-group vertical"><label for="username2">Username</label> <input type="email" value="" id="username2" placeholder="username"></div>
+	                <div class="input-group vertical"><label for="pwd2">Password</label> <input type="password" value="" id="pwd2" placeholder="password"></div>
+	              </fieldset>
+	              </form>
               <form>
               <fieldset>
                 <legend>Aligned form (using grid)</legend>
@@ -162,19 +169,23 @@
               </div>
               <div class="col-sm-12 col-sm-first col-lg-8 col-md-normal">
                 <p style="text-align: justify;">Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <code>&lt;form&gt;</code> element and add your <code>&lt;input&gt;</code> elements inside. Link them to <code>&lt;label&gt;</code> elements for ease of access and you are pretty much set. We highly recommend using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements to annotate your forms as well, but you can skip them if you wish.</p>
-                <p style="text-align: justify;">Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them. Finally, if you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
+                <p style="text-align: justify;">Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them or you can align them vertically by adding the <code>.vertical</code> class. Finally, if you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
                 <h3>Sample code</h3>
                 <pre>&lt;form&gt;
   &lt;fieldset&gt;
     &lt;legend&gt;Simple form&lt;/legend&gt;
     &lt;div class=&quot;input-group fluid&quot;&gt;
-      &lt;label for=&quot;username&quot;&gt;username&lt;/label&gt;
+      &lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
       &lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt;
     &lt;/div&gt;
     &lt;div class=&quot;input-group fluid&quot;&gt;
-      &lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt;
+      &lt;label for=&quot;pwd&quot;&gt;Password&lt;/label&gt;
       &lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt;
     &lt;/div&gt;
+    &lt;div class=&quot;input-group vertical&quot;&gt;
+      &lt;label for=&quot;nmbr&quot;&gt;Number&lt;/label&gt;
+      &lt;input type=&quot;number&quot; id=&quot;nmbr&quot; value=&quot;5&quot;&gt;
+    &lt;/div&gt;
   &lt;/fieldset&gt;
 &lt;/form&gt;</pre>
               </div>
@@ -185,7 +196,7 @@
                 <li>Using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended for a better presentational effect. Using these elements is a matter of personal preference, however try to keep your forms consistent (i.e. either use them in all forms or no forms as to not confuse users).</li>
                 <li>Some <code>&lt;input&gt;</code> elements, such as date &amp; time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your website or app.</li>
                 <li>Checkboxes and radio buttons are not stylized the same way as most of the other elements, nor do they follow the exact same stucture for layout. Please refer to the next section for information on how to use those.</li>
-				<li>Try not to combine the <strong>grid</strong> module's classes with <code>.fluid</code><code>.input-group</code>s, as this might cause certain styles to overlap and not display exactly like you want them to.</li>
+				<li>Try not to combine the <strong>grid</strong> module's classes with <code>.fluid</code> or <code>.vertical</code> <code>.input-group</code>s, as this might cause certain styles to overlap and not display exactly like you want them to.</li>
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12 col-md-6">

docs/quick_reference.html

@@ -386,13 +386,17 @@
   <fieldset>
     <legend>Simple form</legend>
     <div class="input-group fluid">
-      <label for="username">username</label>
+      <label for="username">Username</label>
       <input type="email" value="" id="username" placeholder="username">
     </div>
     <div class="input-group fluid">
-      <label for="pwd">password</label>
+      <label for="pwd">Password</label>
       <input type="password" value="" id="pwd" placeholder="password">
     </div>
+    <div class="input-group vertical">
+      <label for="nmbr">Number</label>
+      <input type="number" id="nmbr" value="5">
+    </div>
   </fieldset>
 &lt;/form&gt;</pre>
               </div>
@@ -406,7 +410,8 @@
                   <li>Checkboxes and radio buttons are stylized differently, as shown below</li>
                   <li>You can use the grid module's column classes to align form elements or make them responsive</li>
                   <li>Avoid using <code>.input-group</code> in aligned forms</li>
-				  <li>Make <code>.input-group</code>s responsive by adding the <code>.fluid</code> class</li>
+				  				<li>Make <code>.input-group</code>s responsive by adding the <code>.fluid</code> class</li>
+				  				<li>Vertically align <code>.input-group</code>s using the <code>.vertical</code> class</li>
                 </ul>
               </div>
             </div>

docs/v2/DEVLOG.md

@@ -1252,3 +1252,5 @@
 - Added customization documentation for `.scrollable` `table`s.
 - Documented `.scrollable` `table`s everywhere.
 - Added `$tab-selected-border-color` to imbue `tabs` with a little extra style (applies only to non-`.stacked` tabs).
+- Altered `$label-padding` from `0.25rem` to `0.25rem 0.5rem` to make it align properly with everything else.
+- Added code for `.vertical` `.input-group`, documented it, updated flavors. Everything is ready, size is `6.70KB`, which is pretty good I might add.

src/flavors/mini-dark.scss

@@ -165,10 +165,12 @@ $legend-font-weight:		$bold-font-weight;					// Font weight for legend
 $legend-font-size:			0.875rem;										// Font size for legend
 $legend-fore-color:			$form-fore-color;						// Text color for legend
 $legend-padding:				0.125rem 0.25rem;						// Padding for legend
-$label-padding:					0.25rem;										// Padding for label
+$label-padding:					0.25rem 0.5rem;							// 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
+$include-vertical-input-group:	true;								// Should vertical input groups be included? (`true`/`false`) [1]
+$input-group-vertical-name: 	'vertical';						// Class name for vertical input groups.
 $input-group-mobile-breakpoint:	767px;							// Breakpoint for fluid input group mobile view
 $input-back-color:			#39444a;										// Background for input
 $input-fore-color:			$fore-color;								// Text color for input
@@ -258,7 +260,7 @@ $switch-knob-border-radius: 		100%;								// Borer radius for the switch's knob
 $switch-knob-box-shadow:					none;							// Box shadow for the switch's knob
 // 	Notes:
 // [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.
+//	specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
 // [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.

src/flavors/mini-default.scss

@@ -165,10 +165,12 @@ $legend-font-weight:		$bold-font-weight;					// Font weight for legend
 $legend-font-size:			0.875rem;										// Font size for legend
 $legend-fore-color:			$form-fore-color;						// Text color for legend
 $legend-padding:				0.125rem 0.25rem;						// Padding for legend
-$label-padding:					0.25rem;										// Padding for label
+$label-padding:					0.25rem 0.5rem;							// 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
+$include-vertical-input-group:	true;								// Should vertical input groups be included? (`true`/`false`) [1]
+$input-group-vertical-name: 	'vertical';						// Class name for vertical 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
@@ -258,7 +260,7 @@ $switch-knob-border-radius: 		100%;								// Borer radius for the switch's knob
 $switch-knob-box-shadow:				none;								// Box shadow for the switch's knob
 // 	Notes:
 // [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.
+//	specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
 // [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.

src/flavors/mini-lite.scss

@@ -156,9 +156,10 @@ $legend-font-weight:		$bold-font-weight;					// Font weight for legend
 $legend-font-size:			0.875rem;										// Font size for legend
 $legend-fore-color:			$form-fore-color;						// Text color for legend
 $legend-padding:				0.125rem 0.25rem;						// Padding for legend
-$label-padding:					0.25rem;										// Padding for label
+$label-padding:					0.25rem 0.5rem;							// Padding for label
 $input-group-name:			'input-group';							// Class for input groups
 $include-fluid-input-group:		false;								// Should fluid input grooups be included? (`true`/`false`) [1]
+$include-vertical-input-group:		false;						// Should vertical input grooups be included? (`true`/`false`) [1]
 $input-back-color:			#fafafa;										// Background for input
 $input-fore-color:			$fore-color;								// Text color for input
 $input-border-style:		$_1px solid #c9c9c9;				// Border style for input
@@ -222,7 +223,7 @@ $checkbox-box-shadow:						none;								// Box shadow for checkbox/radio
 $include-switch: 								false;							// Should switch components be included? (`true`/`false`) [5]
 // 	Notes:
 // [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.
+//	specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
 // [2] - Due to the fact that the value of $include-button-group is set to `false`, no button group styles will be created.
 //	If you wish to enable them, please refer to a full flavor for the required variables.
 // [3] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way

src/flavors/mini-nord.scss

@@ -169,10 +169,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
+$label-padding:					4px 8px;										// 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
+$include-vertical-input-group:	true;								// Should vertical input groups be included? (`true`/`false`) [1]
+$input-group-vertical-name: 	'vertical';						// Class name for vertical input groups.
 $input-group-mobile-breakpoint:	767px;							// Breakpoint for fluid input group mobile view
 $input-back-color:				#E5E9F0;									// Background for input
 $input-fore-color:				$fore-color;							// Text color for input
@@ -267,7 +269,7 @@ $switch-knob-box-shadow:														// Box shadow for the switch's knob
 	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
 // 	Notes:
 // [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.
+//	specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
 // [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.

src/flavors/mini-sucroa.scss

@@ -172,6 +172,8 @@ $label-padding:						6px;											// 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
+$include-vertical-input-group:	true;								// Should vertical input groups be included? (`true`/`false`) [1]
+$input-group-vertical-name: 	'vertical';						// Class name for vertical input groups.
 $input-group-mobile-breakpoint:	767px;							// Breakpoint for fluid input group mobile view
 $input-back-color:				#f2edff;									// Background for input
 $input-fore-color:				$fore-color;							// Text color for input
@@ -248,7 +250,7 @@ $checkbox-box-shadow:																	// Box shadow for checkbox/radio
 $include-switch: 								false;								// Should switch components be included? (`true`/`false`)
 // 	Notes:
 // [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.
+//	specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
 // [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.

src/mini/_input_control.scss

@@ -5,6 +5,8 @@
 $input-group-name:		'input-group' !default;				// Class name for input groups.
 $include-fluid-input-group:	true !default;					// Should fluid input groups be included? (`true`/`false`)
 $input-group-fluid-name: 		'fluid' !default;				// Class name for fluid input groups.
+$include-vertical-input-group:true !default;				// Should vertical input groups be included? (`true`/`false`)
+$input-group-vertical-name: 	'vertical' !default;	// Class name for vertical input groups.
 $button-class-name:					'button' !default;			// Class for custom button elements.
 $include-button-group:			true !default;					// [Hidden flag] Should button groups be enabled? (`true`/`false`)
 $button-group-name:					'button-group' !default;// Class for button groups.
@@ -129,6 +131,33 @@ legend {
 		}
 	}
 }
+@if $include-vertical-input-group {
+	.#{$input-group-name}.#{$input-group-vertical-name} {
+		// Old syntax
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-box-pack: justify;
+		// New syntax
+		display: 	-webkit-flex;
+		display: 		 			flex;
+		-webkit-flex-direction: column;
+						flex-direction: column;
+		-webkit-align-items: stretch;
+						align-items: stretch;
+		-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;
+		}
+	}
+}
 // Correct the cursor style of increment and decrement buttons in Chrome.
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
 	height: auto;