From 94a912b768d7b054571b39e1279ed42c2b8432de Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 30 Mar 2017 14:27:22 +0300
Subject: [PATCH] Housekeeping for input control module

Split file into mixins, moved variables, updated hidden flags and cleaned up flavor files.
---
 docs/v2/DEVLOG.md                   |   4 +
 src/flavors/mini-default.scss       | 178 +++++++++++++--------------
 src/flavors/mini-sucroa.scss        | 180 +++++++++++++---------------
 src/mini/_input_control.scss        | 131 +++++++-------------
 src/mini/_input_control_mixins.scss |  55 +++++++++
 src/mini/_navigation.scss           |  85 ++++++-------
 6 files changed, 314 insertions(+), 319 deletions(-)
 create mode 100644 src/mini/_input_control_mixins.scss

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index 707408e..0ba5639 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -896,3 +896,7 @@
 - Updated flavor files, dealing with indentation and readability.
 - Updated `navigation` by moving variable definitions and defaults. Added **hidden flag** `$header-colorize-svgs` for a hacky fix that was there before (just in case).
 - Updated flavor files, made most multiline comments up to `navigation` into single line comments in order to make the flavor files shorter while maintining readability.
+- Added an extra **hidden flag** in `navigation` under `$include-nav-styles` to make sure that `nav` elements can be removed from flavors (possibly not present in the `barebones` flavor).
+- Updated `input_control`, splitting into main file and mixins file. Added **hidden flag** `$hide-check-and-radio` and standardized existing one (`$input-high-specificity-selectors`).
+- Cleanup and housekeeping for readability in flavor files for updated `input_control`.
+- *TODO* Make class naming rules more consistent in module defaults - meaning add all class naming defaults to the very top of all modules, saving time and space when simplified flavors kick in.
diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss
index 6e9a0b1..b43c57a 100644
--- a/src/flavors/mini-default.scss
+++ b/src/flavors/mini-default.scss
@@ -198,105 +198,97 @@ $footer-sticky-name:			'sticky';									// Class name for sticky <footer> eleme
 //	of <footer> elements, using the value of $footer-sticky-name for the name of the class.
 //	Variables for forms and inputs
 $form-back-color:				#eeeeee;										// Background color for forms
-$form-fore-color:				$fore-color;									// Text color for forms
-$form-border-style:				1px solid #bdbdbd;								// Border style for forms
-$form-border-radius:			0;												// Border radius for forms
-$form-margin:					8px;											// Margin for forms
-$form-padding:					12px 10px 18px;									// Padding for forms
-$form-box-shadow:																// Box shadow for forms
+$form-fore-color:				$fore-color;								// Text color for forms
+$form-border-style:			1px solid #bdbdbd;					// Border style for forms
+$form-border-radius:		0;													// Border radius for forms
+$form-margin:						8px;												// Margin for forms
+$form-padding:					12px 10px 18px;							// Padding for forms
+$form-box-shadow:																		// Box shadow for forms
 	0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
-$fieldset-back-color:			$form-back-color;								// Background color for fieldset
-$fieldset-border-style:			1px solid #bdbdbd;								// Border style for fieldset
-$fieldset-border-radius:		2px;											// Border radius for fieldset
-$fieldset-margin:				2px;											// Margin for fieldset
-$fieldset-padding:				6px 8px 8px;									// Padding for fieldset
-$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
+$fieldset-back-color:		$form-back-color;						// Background color for fieldset
+$fieldset-border-style:	1px solid #bdbdbd;					// Border style for fieldset
+$fieldset-border-radius:2px;												// Border radius for fieldset
+$fieldset-margin:				2px;												// Margin for fieldset
+$fieldset-padding:			6px 8px 8px;								// Padding for fieldset
+$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
-$input-border-radius:			1px;											// Border radius for input
-$input-margin:					2px;											// Margin for input
-$input-padding:					8px 12px;										// padding for input
-$input-focus-border-color:		#0288d1;										// Border color for focused input
-$input-invalid-border-color:	#d32f2f;										// Border color for invalid input
-$input-disabled-opacity:		0.75;											// Opacity for disabled input
-$input-readonly-back-color:		#e0e0e0;										// Background color for readonly input
-$input-readonly-border-color:	#bdbdbd;										// Border color for readonly input
-$input-placeholder-fore-color:	#616161;										// Text color for input placeholder
-$button-back-color:				#bdbdbd;										// Back color for button elements
-$button-back-opacity:			0.65;											// Background opacity for button elements
-$button-hover-back-opacity:		0.8;											// Background opacity for button elements
-																				// on hover or focus
-$button-fore-color:				$fore-color;									// Text color for button elements
-$button-border-style:			0;												// Border style for button elements
-$button-border-radius:			2px;											// Border radius for button elements
+$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
+$input-border-radius:		1px;												// Border radius for input
+$input-margin:					2px;												// Margin for input
+$input-padding:					8px 12px;										// Padding for input
+$input-focus-border-color:		#0288d1;							// Border color for focused input
+$input-invalid-border-color:	#d32f2f;							// Border color for invalid input
+$input-disabled-opacity:			0.75;									// Opacity for disabled input
+$input-readonly-back-color:		#e0e0e0;							// Background color for readonly input
+$input-readonly-border-color:	#bdbdbd;							// Border color for readonly input
+$input-placeholder-fore-color:#616161;							// Text color for input placeholder
+$button-back-color:			#bdbdbd;										// Back color for button elements
+$button-back-opacity:		0.65;												// Background opacity for button elements
+$button-hover-back-opacity:		0.8;									// Background opacity for button elements on hover or focus
+$button-fore-color:			$fore-color;								// Text color for button elements
+$button-border-style:		0;													// Border style for button elements
+$button-border-radius:	2px;												// Border radius for button elements
 $button-padding:				8px 12px;										// Padding for button elements
-$button-margin:					8px;											// Margin for button elements
-$button-box-shadow:																// Box shadow for buttons
+$button-margin:					8px;												// Margin for button elements
+$button-box-shadow:																	// Box shadow for buttons
 	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
-$button-disabled-opacity:		0.65;											// Disabled button elements opacity
-$button-class-name:				'button';										// Class for custom button elements
-$button-group-name:				'button-group';									// Class for button groups
-$button-group-border-style:		1px solid #9e9e9e;								// Border style for button groups
-$button-group-margin:			$button-margin;									// Margin for button groups
+$button-disabled-opacity:		0.65;										// Disabled button elements opacity
+$button-class-name:			'button';										// Class for custom button elements
+$button-group-name:			'button-group';							// Class for button groups
+$button-group-border-style:	1px solid #9e9e9e;			// Border style for button groups
+$button-group-margin:		$button-margin;							// Margin for button groups
 $button-group-box-shadow:														// Box shadow for button groups
 	0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
-$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`) [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
-$button-variant1-hover-back-opacity:											// Background opacity for button variant 1
-								1;												// on hover or focus
-$button-variant1-fore-color:	#fafafa;										// Text color for button variant 1
-$button-variant2-name:			'secondary';									// Class name for button variant 2
-$button-variant2-back-color:	#c62828;										// Background color for button variant 2
-$button-variant2-back-opacity:	0.85;											// Background opacity for button variant 2
-$button-variant2-hover-back-opacity:											// Background opacity for button variant 2
-								1;												// on hover or focus
-$button-variant2-fore-color:	#fafafa;										// Text color for button variant 2
-$button-variant3-name:			'tertiary';										// Class name for button variant 3
-$button-variant3-back-color:	#689f38;										// Background color for button variant 3
-$button-variant3-back-opacity:	0.85;											// Background opacity for button variant 3
-$button-variant3-hover-back-opacity:											// Background opacity for button variant 3
-								1;												// on hover or focus
-$button-variant3-fore-color:	#fafafa;										// Text color for button variant 3
-$button-variant4-name:			'inverse';										// Class name for button variant 4
-$button-variant4-back-color:	$fore-color;									// Background color for button variant 4
-$button-variant4-back-opacity:	1;												// Background opacity for button variant 4
-$button-variant4-hover-back-opacity:											// Background opacity for button variant 4
-								0.9;											// on hover or focus
-$button-variant4-fore-color:	#fafafa;										// Text color for button variant 4
-$button-style1-name:			'small';										// Class name for button style 1
-$button-style1-border-style:	0;												// Border style for button style 1
-$button-style1-border-radius:	1px;											// Border radius for button style 1
-$button-style1-padding:			4px 6px;										// Padding for button style 1
-$button-style1-margin:			6px 8px;										// Margin for button style 1
-$button-style2-name:			'large';										// Class name for button style 2
-$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 [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:		6px;											// Bottom spacing for checkbox/radio
-$checkbox-disabled-opacity:		$input-disabled-opacity;						// Opacity for disabled checkbox/radio
+$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`) [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
+$button-variant1-hover-back-opacity:		1;					// Background opacity for button variant 1 on hover or focus
+$button-variant1-fore-color:						#fafafa;		// Text color for button variant 1
+$button-variant2-name:									'secondary';// Class name for button variant 2
+$button-variant2-back-color:						#c62828;		// Background color for button variant 2
+$button-variant2-back-opacity:					0.85;				// Background opacity for button variant 2
+$button-variant2-hover-back-opacity:		1;					// Background opacity for button variant 2 on hover or focus
+$button-variant2-fore-color:						#fafafa;		// Text color for button variant 2
+$button-variant3-name:									'tertiary';	// Class name for button variant 3
+$button-variant3-back-color:						#689f38;		// Background color for button variant 3
+$button-variant3-back-opacity:					0.85;				// Background opacity for button variant 3
+$button-variant3-hover-back-opacity:		1;					// Background opacity for button variant 3 on hover or focus
+$button-variant3-fore-color:						#fafafa;		// Text color for button variant 3
+$button-variant4-name:									'inverse';	// Class name for button variant 4
+$button-variant4-back-color:						$fore-color;// Background color for button variant 4
+$button-variant4-back-opacity:					1;					// Background opacity for button variant 4
+$button-variant4-hover-back-opacity:		0.9;				// Background opacity for button variant 4 on hover or focus
+$button-variant4-fore-color:						#fafafa;		// Text color for button variant 4
+$button-style1-name:						'small';						// Class name for button style 1
+$button-style1-border-style:		0;									// Border style for button style 1
+$button-style1-border-radius:		1px;								// Border radius for button style 1
+$button-style1-padding:					4px 6px;						// Padding for button style 1
+$button-style1-margin:					6px 8px;						// Margin for button style 1
+$button-style2-name:						'large';						// Class name for button style 2
+$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 [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:				6px;								// Bottom spacing for checkbox/radio
+$checkbox-disabled-opacity:	$input-disabled-opacity;// Opacity for disabled checkbox/radio
 // 	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.
diff --git a/src/flavors/mini-sucroa.scss b/src/flavors/mini-sucroa.scss
index 1cd27f0..f97f072 100644
--- a/src/flavors/mini-sucroa.scss
+++ b/src/flavors/mini-sucroa.scss
@@ -195,105 +195,97 @@ $footer-sticky-name:			'sticky';									// Class name for sticky <footer> eleme
 //	of <footer> elements, using the value of $footer-sticky-name for the name of the class.
 //	Variables for forms and inputs
 $form-back-color:				#e8deff;										// Background color for forms
-$form-fore-color:				$fore-color;									// Text color for forms
-$form-border-style:				1px solid #a9a2ba;								// Border style for forms
-$form-border-radius:			2px;											// Border radius for forms
-$form-margin:					10px;											// Margin for forms
-$form-padding:					14px 10px 20px;									// Padding for forms
-$form-box-shadow:																// Box shadow for forms
+$form-fore-color:				$fore-color;								// Text color for forms
+$form-border-style:			1px solid #a9a2ba;					// Border style for forms
+$form-border-radius:		2px;												// Border radius for forms
+$form-margin:						10px;												// Margin for forms
+$form-padding:					14px 10px 20px;							// Padding for forms
+$form-box-shadow:																		// Box shadow for forms
 	0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
-$fieldset-back-color:			$form-back-color;								// Background color for fieldset
-$fieldset-border-style:			1px solid #a9a2ba;								// Border style for fieldset
-$fieldset-border-radius:		2px;											// Border radius for fieldset
-$fieldset-margin:				2px;											// Margin for fieldset
-$fieldset-padding:				6px 8px 8px;									// Padding for fieldset
-$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:					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
-$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
-$input-border-style:			1px solid #a9a2ba;								// Border style for input
+$fieldset-back-color:			$form-back-color;					// Background color for fieldset
+$fieldset-border-style:		1px solid #a9a2ba;				// Border style for fieldset
+$fieldset-border-radius:	2px;											// Border radius for fieldset
+$fieldset-margin:					2px;											// Margin for fieldset
+$fieldset-padding:				6px 8px 8px;							// Padding for fieldset
+$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:						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
+$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
+$input-border-style:			1px solid #a9a2ba;				// Border style for input
 $input-border-radius:			2px;											// Border radius for input
-$input-margin:					2px;											// Margin for input
-$input-padding:					8px 12px;										// padding for input
-$input-focus-border-color:		#6979c6;										// Border color for focused input
-$input-invalid-border-color:	#d2405f;										// Border color for invalid input
-$input-disabled-opacity:		0.8;											// Opacity for disabled input
-$input-readonly-back-color:		#eae1ff;										// Background color for readonly input
-$input-readonly-border-color:	#a9a2ba;										// Border color for readonly input
-$input-placeholder-fore-color:	#493e4b;										// Text color for input placeholder
-$button-back-color:				#d3cae8;										// Back color for button elements
-$button-back-opacity:			1;												// Background opacity for button elements
-$button-hover-back-opacity:		0.75;											// Background opacity for button elements
-																				// on hover or focus
-$button-fore-color:				$fore-color;									// Text color for button elements
-$button-border-style:			1px solid #a9a2ba;								// Border style for button elements
-$button-border-radius:			3px;											// Border radius for button elements
-$button-padding:				8px 12px;										// Padding for button elements
-$button-margin:					10px;											// Margin for button elements
-$button-box-shadow:																// Box shadow for buttons
+$input-margin:						2px;											// Margin for input
+$input-padding:						8px 12px;									// Padding for input
+$input-focus-border-color:		#6979c6;							// Border color for focused input
+$input-invalid-border-color:	#d2405f;							// Border color for invalid input
+$input-disabled-opacity:			0.8;									// Opacity for disabled input
+$input-readonly-back-color:		#eae1ff;							// Background color for readonly input
+$input-readonly-border-color:	#a9a2ba;							// Border color for readonly input
+$input-placeholder-fore-color:#493e4b;							// Text color for input placeholder
+$button-back-color:						#d3cae8;							// Back color for button elements
+$button-back-opacity:					1;										// Background opacity for button elements
+$button-hover-back-opacity:		0.75;									// Background opacity for button elements on hover or focus
+$button-fore-color:						$fore-color;					// Text color for button elements
+$button-border-style:					1px solid #a9a2ba;		// Border style for button elements
+$button-border-radius:				3px;									// Border radius for button elements
+$button-padding:							8px 12px;							// Padding for button elements
+$button-margin:								10px;									// Margin for button elements
+$button-box-shadow:																	// Box shadow for buttons
 	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
-$button-disabled-opacity:		0.75;											// Disabled button elements opacity
-$button-class-name:				'button';										// Class for custom button elements
-$button-group-name:				'button-group';									// Class for button groups
-$button-group-border-style:		1px solid #a9a2ba;								// Border style for button groups
-$button-group-margin:			$button-margin;									// Margin for button groups
+$button-disabled-opacity:		0.75;										// Disabled button elements opacity
+$button-class-name:					'button';								// Class for custom button elements
+$button-group-name:					'button-group';					// Class for button groups
+$button-group-border-style:	1px solid #a9a2ba;			// Border style for button groups
+$button-group-margin:				$button-margin;					// Margin for button groups
 $button-group-box-shadow:														// Box shadow for button groups
 	0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
-$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]
-$button-variant1-name:			'primary';										// Class name for button variant 1
-$button-variant1-back-color:	#6979c6;										// Background color for button variant 1
-$button-variant1-back-opacity:	1;												// Background opacity for button variant 1
-$button-variant1-hover-back-opacity:											// Background opacity for button variant 1
-								0.75;											// on hover or focus
-$button-variant1-fore-color:	#fffddc;										// Text color for button variant 1
-$button-variant2-name:			'secondary';									// Class name for button variant 2
-$button-variant2-back-color:	#d2405f;										// Background color for button variant 2
-$button-variant2-back-opacity:	1;												// Background opacity for button variant 2
-$button-variant2-hover-back-opacity:											// Background opacity for button variant 2
-								0.75;											// on hover or focus
-$button-variant2-fore-color:	#fffddc;										// Text color for button variant 2
-$button-variant3-name:			'tertiary';										// Class name for button variant 3
-$button-variant3-back-color:	#2b866d;										// Background color for button variant 3
-$button-variant3-back-opacity:	1;												// Background opacity for button variant 3
-$button-variant3-hover-back-opacity:											// Background opacity for button variant 3
-								0.75;											// on hover or focus
-$button-variant3-fore-color:	#fffddc;										// Text color for button variant 3
-$button-variant4-name:			'inverse';										// Class name for button variant 4
-$button-variant4-back-color:	#331e36;										// Background color for button variant 4
-$button-variant4-back-opacity:	1;												// Background opacity for button variant 4
-$button-variant4-hover-back-opacity:											// Background opacity for button variant 4
-								0.75;											// on hover or focus
-$button-variant4-fore-color:	#fffddc;										// Text color for button variant 4
-$button-style1-name:			'small';										// Class name for button style 1
-$button-style1-border-style:	0;												// Border style for button style 1
-$button-style1-border-radius:	2px;											// Border radius for button style 1
-$button-style1-padding:			4px 6px;										// Padding for button style 1
-$button-style1-margin:			6px 8px;										// Margin for button style 1
-$button-style2-name:			'large';										// Class name for button style 2
-$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-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:			#a9a2ba;										// 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-disabled-opacity:		$input-disabled-opacity;						// Opacity for disabled checkbox/radio
+$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]
+$button-variant1-name:								'primary';		// Class name for button variant 1
+$button-variant1-back-color:					#6979c6;			// Background color for button variant 1
+$button-variant1-back-opacity:				1;						// Background opacity for button variant 1
+$button-variant1-hover-back-opacity:	0.75;					// Background opacity for button variant 1 on hover or focus
+$button-variant1-fore-color:					#fffddc;			// Text color for button variant 1
+$button-variant2-name:								'secondary';	// Class name for button variant 2
+$button-variant2-back-color:					#d2405f;			// Background color for button variant 2
+$button-variant2-back-opacity:				1;						// Background opacity for button variant 2
+$button-variant2-hover-back-opacity:	0.75;					// Background opacity for button variant 2 on hover or focus
+$button-variant2-fore-color:					#fffddc;			// Text color for button variant 2
+$button-variant3-name:								'tertiary';		// Class name for button variant 3
+$button-variant3-back-color:					#2b866d;			// Background color for button variant 3
+$button-variant3-back-opacity:				1;						// Background opacity for button variant 3
+$button-variant3-hover-back-opacity:	0.75;					// Background opacity for button variant 3 on hover or focus
+$button-variant3-fore-color:					#fffddc;			// Text color for button variant 3
+$button-variant4-name:								'inverse';		// Class name for button variant 4
+$button-variant4-back-color:					#331e36;			// Background color for button variant 4
+$button-variant4-back-opacity:				1;						// Background opacity for button variant 4
+$button-variant4-hover-back-opacity:	0.75;					// Background opacity for button variant 4 on hover or focus
+$button-variant4-fore-color:					#fffddc;		// Text color for button variant 4
+$button-style1-name:						'small';					// Class name for button style 1
+$button-style1-border-style:		0;								// Border style for button style 1
+$button-style1-border-radius:		2px;							// Border radius for button style 1
+$button-style1-padding:					4px 6px;					// Padding for button style 1
+$button-style1-margin:					6px 8px;					// Margin for button style 1
+$button-style2-name:						'large';					// Class name for button style 2
+$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-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:					#a9a2ba;					// 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-disabled-opacity:			$input-disabled-opacity;		// Opacity for disabled checkbox/radio
 // 	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.
diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss
index 133338b..b5495c7 100644
--- a/src/mini/_input_control.scss
+++ b/src/mini/_input_control.scss
@@ -1,7 +1,16 @@
 /*
 	Definitions for forms and input elements.
 */
+// Check the `_input_control_mixins.scss` file to find this module's mixins.
+@import 'input_control_mixins';
 // Different elements are styled based on the same set of rules.
+$include-fluid-input-group:		true !default;				// Should fluid input groups be included? (`true`/`false`)
+// The below option will use the legacy high specificity selectors for <input> element styling instead
+// of the less specific, yet less complicated and less bloated input selector. This only applies to
+// the pseudo-classes and states of the <input> controls and not the default styling of them.
+$input-high-specificity-selectors:	false !default;	// [Hidden flag] Use legacy selectors for <input> element styling (`true`/`false`).
+$hide-file-inputs: 						true !default;				// Should `file` <input> elements be hidden? (`true`/`false`)
+$hide-check-and-radio:				true !default;				// [Hidden flag] Should checkboxes and radios be hidden? (`true`/`false`)
 // Base form styling.
 form {
 	@if $form-back-color != $back-color {
@@ -35,7 +44,7 @@ fieldset {
 	border: $fieldset-border-style;
 	border-radius: $fieldset-border-radius;
 	margin: $fieldset-margin;
-  	padding: $fieldset-padding;
+  padding: $fieldset-padding;
 }
 // Legend styling.
 legend {
@@ -60,7 +69,6 @@ legend {
 		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;
@@ -71,21 +79,21 @@ $include-fluid-input-group:		true !default;				// Should fluid input groups be i
 			display: -webkit-box;
 			-webkit-box-pack: justify;
 			// New syntax
-			display: -webkit-flex;
-			display: 		 flex;
+			display: 	-webkit-flex;
+			display: 		 			flex;
 			-webkit-align-items: center;
-					align-items: center;
+							align-items: center;
 			-webkit-justify-content: center;
-					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;
+								flex-grow: 1;
 				-webkit-flex-basis: 0;
-						flex-basis: 0;
+								flex-basis: 0;
 			}
 		}
 	}
@@ -98,9 +106,9 @@ $include-fluid-input-group:		true !default;				// Should fluid input groups be i
 			-webkit-box-orient: vertical;
 			// New syntax
 			-webkit-align-items: stretch;
-					align-items: stretch;
+							align-items: stretch;
 			-webkit-flex-direction: column;
-					flex-direction: column;
+							flex-direction: column;
 		}
 	}
 }
@@ -122,10 +130,6 @@ textarea {
 [type="search"]::-webkit-search-decoration {
 	-webkit-appearance: none;
 }
-// The belo option will use the legacy high specificity selectors for <input> element styling instead
-// of the less specific, yet less complicated and less bloated input selector. This only applies to
-// the pseudo-classes and states of the <input> controls and not the default styling of them.
-$input-high-specificity-selectors:	false !default;			// Hidden option: `false` by default!
 // Common textual input styling.
 input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
 [type="password"], [type="url"], [type="tel"], textarea, select {
@@ -176,16 +180,13 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
 			border-color: $input-invalid-border-color;
 			box-shadow: none;
 		}
-		//&:focus:invalid:focus {
-		//	border-color: brown;
-		//}
 		&[readonly]{
 			background: $input-readonly-back-color;
 			border-color: $input-readonly-border-color;
 		}
 	}
 }
-// Placeholder styling.
+// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
 ::-webkit-input-placeholder {
 	opacity: 1;
 	color: $input-placeholder-fore-color;
@@ -211,8 +212,8 @@ button, html [type="button"], [type="reset"], [type="submit"] {
 }
 // Other fixes.
 button {
-	overflow: visible;	// Show the overflow in IE.
-	text-transform: none;	// Remove inheritance of text-transform in Edge, Firefox, and IE.
+	overflow: visible;			// Show the overflow in IE.
+	text-transform: none;		// Remove inheritance of text-transform in Edge, Firefox, and IE.
 }
 // Default styling
 button, [type="button"], [type="submit"], [type="reset"],
@@ -238,7 +239,7 @@ a[role="button"], label[role="button"], [role="button"] {
 		text-decoration: none;
 	}
 	-webkit-transition: all 0.3s ease 0s;
-			transition: all 0.3s ease 0s;
+					transition: all 0.3s ease 0s;
 	cursor: pointer;
 	&:hover, &:active, &:focus {
 		background: rgba($button-back-color, $button-hover-back-opacity);
@@ -252,7 +253,6 @@ a[role="button"], label[role="button"], [role="button"] {
 	}
 }
 // Styling for file inputs
-$hide-file-inputs: true !default;
 @if $hide-file-inputs {
 	input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible.
 		border: 0;
@@ -264,13 +264,13 @@ $hide-file-inputs: true !default;
 		position: absolute;
 		clip: rect(0 0 0 0);
 		-webkit-clip-path: inset(100%);
-				clip-path: inset(100%);
+						clip-path: inset(100%);
 	}
 }
 @else {
 	::-webkit-file-upload-button {
 		-webkit-appearance: button; 	// Correct inability to style in iOS and Safari.
-		font: inherit; 					// Change font propery to `inherit` in Safari.
+		font: inherit; 								// Change font propery to `inherit` in Safari.
 	}
 }
 // Button group definition
@@ -278,8 +278,8 @@ $hide-file-inputs: true !default;
 	// Old syntax
 	display: -webkit-box;
 	// New syntax
-	display: -webkit-flex;
-	display: 		 flex;
+	display: 	-webkit-flex;
+	display: 		 			flex;
 	border: $button-group-border-style;
 	@if $button-border-radius != 0 {
 		border-radius: $button-border-radius;
@@ -298,9 +298,9 @@ $hide-file-inputs: true !default;
 		max-width: 100%;
 		// New syntax
 		-webkit-flex-grow: 1;
-				flex-grow: 1;
+						flex-grow: 1;
 		-webkit-flex-basis: 0;
-				flex-basis: 0;
+						flex-basis: 0;
 		text-align: center;
 		border: 0;
 		@if $button-border-radius != 0 {
@@ -324,7 +324,7 @@ $hide-file-inputs: true !default;
 		-webkit-box-orient: vertical;
 		// New syntax
 		-webkit-flex-direction: column;
-				flex-direction: column;
+						flex-direction: column;
 		@if $button-group-border-style !=0 {
 			button, [type="button"], [type="submit"], [type="reset"],
 			.#{$button-class-name}, [role="button"] {
@@ -337,71 +337,20 @@ $hide-file-inputs: true !default;
 		}
 	}
 }
-// Mixin for alternate buttons (button color variants).
-// Variables:
-// - $button-alt-name : The name of the class used for the alternate button.
-// - $button-alt-back-color : The background color of the alternate button.
-// - $button-alt-back-opacity : Opacity of the background color of the alternate button.
-// - $button-alt-hover-back-opacity : Opacity of the background color of the alternate button on hover.
-// - $button-alt-fore-color : (Optional) The text color of the alternate button. Defaults to the text color of the button.
-// Notes:
-// Due to something like `.button.secondary` being a higher specificity than `a.button` or `a`, no extra rules are
-// required for such elements. However rules for the normal button elements are applied in order to not require the
-// base class for the button styles.
-@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
-	$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
-	button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
-	[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
-		background: rgba($button-alt-back-color, $button-alt-back-opacity);
-		@if $button-alt-fore-color != $button-fore-color {
-			color: $button-alt-fore-color;
-		}
-		&:hover, &:active, &:focus {
-			background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
-		}
-	}
-}
-// Mixin for alternate button styles (button style variants).
-// Variables:
-// - $button-alt-name : The name of the class used for the alternate button style.
-// - $button-alt-border-style : The border style of the alternate button style.
-// - $button-alt-border-radius : Border radius of the alternate button style.
-// - $button-alt-padding : Padding of the alternate button style.
-// - $button-alt-margin : Margin of the alternate button style.
-// Notes:
-// Due to something like `.button.small` being a higher specificity than `a.small` or `a`, no extra rules are
-// required for such elements. However rules for the normal button elements are applied in order to not require the
-// base class for the button styles.
-@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
-	$button-alt-padding, $button-alt-margin) {
-	button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
-	[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
-		@if $button-alt-border-style != $button-border-style {
-			border: $button-alt-border-style;
-		}
-		@if $button-alt-border-radius != $button-border-radius {
-			border-radius: $button-alt-border-radius;
-		}
-		@if $button-alt-padding != $button-padding {
-			padding: $button-alt-padding;
-		}
-		@if $button-alt-margin != $button-margin {
-			margin: $button-alt-margin;
-		}
-	}
-}
 // Definitions for checkboxes and radio button elements.
 // Note: both elements are hidden by default and use labels to show their input state.
 // Hide both input types - accessible (element is not visible, but screen readers read it normally).
-[type="checkbox"], [type="radio"] {
-	height: 1px;
-	width: 1px;
-	margin: -1px;
-	overflow: hidden;
-	position: absolute;
-	clip: rect(0 0 0 0);
-	-webkit-clip-path: inset(100%);
-			clip-path: inset(100%);
+@if $hide-check-and-radio {		// If you want to make these two <input>s visible by default, turn this on.
+	[type="checkbox"], [type="radio"] {
+		height: 1px;
+		width: 1px;
+		margin: -1px;
+		overflow: hidden;
+		position: absolute;
+		clip: rect(0 0 0 0);
+		-webkit-clip-path: inset(100%);
+						clip-path: inset(100%);
+	}
 }
 // Use input-group to setup the style for labels.
 .#{$input-group-name} {
diff --git a/src/mini/_input_control_mixins.scss b/src/mini/_input_control_mixins.scss
new file mode 100644
index 0000000..8fdc2dd
--- /dev/null
+++ b/src/mini/_input_control_mixins.scss
@@ -0,0 +1,55 @@
+// Input_control module's mixin definitions are here. For the module itself
+// check `_input_control.scss`.
+// Mixin for alternate buttons (button color variants).
+// Variables:
+// - $button-alt-name : The name of the class used for the alternate button.
+// - $button-alt-back-color : The background color of the alternate button.
+// - $button-alt-back-opacity : Opacity of the background color of the alternate button.
+// - $button-alt-hover-back-opacity : Opacity of the background color of the alternate button on hover.
+// - $button-alt-fore-color : (Optional) The text color of the alternate button. Defaults to the text color of the button.
+// Notes:
+// Due to something like `.button.secondary` being a higher specificity than `a.button` or `a`, no extra rules are
+// required for such elements. However rules for the normal button elements are applied in order to not require the
+// base class for the button styles.
+@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
+	$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
+	button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
+	[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
+		background: rgba($button-alt-back-color, $button-alt-back-opacity);
+		@if $button-alt-fore-color != $button-fore-color {
+			color: $button-alt-fore-color;
+		}
+		&:hover, &:active, &:focus {
+			background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
+		}
+	}
+}
+// Mixin for alternate button styles (button style variants).
+// Variables:
+// - $button-alt-name : The name of the class used for the alternate button style.
+// - $button-alt-border-style : The border style of the alternate button style.
+// - $button-alt-border-radius : Border radius of the alternate button style.
+// - $button-alt-padding : Padding of the alternate button style.
+// - $button-alt-margin : Margin of the alternate button style.
+// Notes:
+// Due to something like `.button.small` being a higher specificity than `a.small` or `a`, no extra rules are
+// required for such elements. However rules for the normal button elements are applied in order to not require the
+// base class for the button styles.
+@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
+	$button-alt-padding, $button-alt-margin) {
+	button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
+	[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
+		@if $button-alt-border-style != $button-border-style {
+			border: $button-alt-border-style;
+		}
+		@if $button-alt-border-radius != $button-border-radius {
+			border-radius: $button-alt-border-radius;
+		}
+		@if $button-alt-padding != $button-padding {
+			padding: $button-alt-padding;
+		}
+		@if $button-alt-margin != $button-margin {
+			margin: $button-alt-margin;
+		}
+	}
+}
diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss
index 2d7905b..5897def 100644
--- a/src/mini/_navigation.scss
+++ b/src/mini/_navigation.scss
@@ -7,6 +7,7 @@ $header-logo-name:				'logo' !default;					// Class name for <header>'s logo.
 $header-colorize-svgs:		true !default;						// [Hidden flag] Colorizes SVGs in the <header> element's logo (`true`/`false`).
 $include-header-sticky:		false !default;						// Should the sticky class for <header> elements be included (`true`/`false`).
 $include-footer-sticky:		false !default;						// Should the sticky class for <footer> elements be included (`true`/`false`).
+$include-nav-styles:			true !default;						// [Hidden flag] Should <nav> elements by stylized? (`true`/`false`)
 $nav-sublink-prefix:			'sublink' !default;				// Prefix for the subcategory tabs in nav.
 $nav-sublink-depth:				2 !default;								// Amount of subcategory classes to add.
 $nav-sublink-padding-left:12px !default;						// Left padding to add to subcategories.
@@ -86,47 +87,49 @@ header {
 	}
 }
 // Navigation sidebar styling.
-nav {
-	display: block;										// Correct display for older versions of IE.
-	@if $nav-back-color != $back-color {
-		background: $nav-back-color;
-	}
-	@if $nav-fore-color != $fore-color {
-		color: $nav-fore-color;
-	}
-	@if $nav-border-style != 0 {
-		border: $nav-border-style;
-	}
-	@if $nav-border-radius != 0 {
-		border-radius: $nav-border-radius;
-	}
-	@if $nav-margin != 0 {
-		margin: $nav-margin;
-	}
-	@if $nav-padding != 0 {
-		padding: $nav-padding;
-	}
-	@if $nav-box-shadow != none {
-		box-shadow: $nav-box-shadow;
-	}
-	a, a:visited {
-		display: block;
-		color: $nav-link-fore-color;		// Apply regardless to de-stylize visited links.
-	}
-	// Subcategories in navigation.
-	@for $i from 1 through $nav-sublink-depth {
-		.#{$nav-sublink-prefix}-#{$i} {
-			padding-left: $i * $nav-sublink-padding-left;
-			position: relative;
-			@if $nav-include-sublink-bar {
-				&:before {
-					position: absolute;
-					left: $nav-sublink-bar-left-position;
-					top: -$nav-sublink-bar-width;
-					content: '';
-					height: 100%;
-					border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
-					border-left: 0;
+@if $include-nav-styles {						// Unless you want unstylized <nav> elements, keep this flag on.
+	nav {
+		display: block;									// Correct display for older versions of IE.
+		@if $nav-back-color != $back-color {
+			background: $nav-back-color;
+		}
+		@if $nav-fore-color != $fore-color {
+			color: $nav-fore-color;
+		}
+		@if $nav-border-style != 0 {
+			border: $nav-border-style;
+		}
+		@if $nav-border-radius != 0 {
+			border-radius: $nav-border-radius;
+		}
+		@if $nav-margin != 0 {
+			margin: $nav-margin;
+		}
+		@if $nav-padding != 0 {
+			padding: $nav-padding;
+		}
+		@if $nav-box-shadow != none {
+			box-shadow: $nav-box-shadow;
+		}
+		a, a:visited {
+			display: block;
+			color: $nav-link-fore-color;		// Apply regardless to de-stylize visited links.
+		}
+		// Subcategories in navigation.
+		@for $i from 1 through $nav-sublink-depth {
+			.#{$nav-sublink-prefix}-#{$i} {
+				padding-left: $i * $nav-sublink-padding-left;
+				position: relative;
+				@if $nav-include-sublink-bar {
+					&:before {
+						position: absolute;
+						left: $nav-sublink-bar-left-position;
+						top: -$nav-sublink-bar-width;
+						content: '';
+						height: 100%;
+						border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
+						border-left: 0;
+					}
 				}
 			}
 		}