From b485ae2b665d0a1baabf5d00cd2f33f6d7afe11f Mon Sep 17 00:00:00 2001
From: tphecca <tphecca@gmail.com>
Date: Mon, 17 Apr 2017 20:49:06 -0500
Subject: [PATCH] Add Nord flavor

---
 src/flavors/mini-nord.scss | 666 +++++++++++++++++++++++++++++++++++++
 1 file changed, 666 insertions(+)
 create mode 100644 src/flavors/mini-nord.scss

diff --git a/src/flavors/mini-nord.scss b/src/flavors/mini-nord.scss
new file mode 100644
index 0000000..8bf92e9
--- /dev/null
+++ b/src/flavors/mini-nord.scss
@@ -0,0 +1,666 @@
+// 	This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
+// 	Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
+//	structured like the flavor description below, will be included in your final CSS file.
+/*
+Flavor name: Nord (mini-nord)
+	Author: tphecca (https://github.com/tphecca)
+	mini.css version: v2.1.0 (Fermion)
+*/
+//	Basic rules for body and typography
+$fore-color:					#2E3440;										// Text and general foreground color
+$back-color:					#ECEFF4;										// Body background color
+$base-font-family:																// Default font stack for all elements:
+	'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
+// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
+$base-root-font-size:			16px;											// Root font sizing for all elements [1]
+$base-font-size:				1em;											// Default font sizing for all elements [2]
+$base-line-height:				1.5;											// Default line height for all elements.
+$body-margin:					0;												// Margin for the body
+$apply-defaults-to-all:			true;											// Should default values be applied to all
+																				// elements? (`true` or `false`) [3]
+$h1-font-size:					2em;											// Font size of h1
+$h2-font-size:					1.5em;											// Font size for h2
+$h3-font-size:					1.25em;											// Font size for h3
+$h4-font-size:					1.1em;											// Font size for h4
+$h5-font-size:					1em;											// Font size for h5
+$h6-font-size:					0.85em;											// Font size for h6
+$heading-line-height:			1.2em;											// Line height for all headings
+$heading-margin:				12px 8px;										// Margin for all headings
+$heading-font-weight:			500;											// Font weight for all headings
+$heading-smalltext-fore-color:	#424242;										// <small> color in headings
+$make-heading-smalltext-block:	true;											// Should <small> elements in headings
+																				// be displayed as blocks (`true`/`false`) [4]
+$heading-smalltext-b-font-size:	75%;											// Font size of block <small> elements in headings
+$heading-smalltext-b-top-margin:-4px;											// Top margin of block <small> elements in headings
+$paragraph-margin:				1px 8px;										// Margin for <p> elements
+$list-margin:					1px 8px 10px;									// Margin for <ol> and <ul> elements
+$list-left-padding:				28px;											// Left padding for <ol> and <ul> elements
+$bold-font-weight:				700;											// Font weight for <b> and <strong>
+$horizontal-rule-line-height:	1.25em;											// <hr> line height
+$horizontal-rule-margin:		8px;											// <hr> margin
+$horizontal-rule-border-style:	1px solid #757575;								// Border style for horizontal rules (used
+																				// in the <hr> element's border-top)
+$horizontal-rule-fancy-style:	true;											// Should a fancy styling be applied for the
+																				// <hr> element (`true`/`false`) [5]
+$horizontal-rule-fancy-gradient:"to right, #ECEFF4, #D8DEE9, #ECEFF4";			// Gradient style for fancy horizontal rule
+$blockquote-back-color:			#D8DEE9;										// Background color for <blockquote>
+$blockquote-fore-color:			$fore-color;									// Text color for <blockquote>
+$blockquote-margin:				8px 10px;										// Margin for <blockquote>
+$blockquote-padding:			6px 10px 24px;									// Padding for <blockquote>
+$blockquote-sidebar-style:		3px solid #616161;								// Style for the sidebar of <blockquote>
+$blockquote-cite-font-size:		0.85em;											// Font size for citation of <blockquote>
+$blockquote-cite-fore-color:	#616161;										// Text color for citation of <blockquote>
+$blockquote-cite-left-position:	10px;											// Left padding for citation of <blockquote>
+$blockquote-cite-bottom-position:												// Bottom padding for citation of <blockquote>
+								0;
+$blockquote-border-style:		0;												// Border style for <blockquote>
+$blockquote-border-radius:		0 2px 2px 0;									// Border radius for <blockquote>
+$blockquote-box-shadow:															// Box shadow for <blockquote>
+	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
+$use-default-code-fonts:		true;											// Should default font choice (monospace) be
+																				// used for code elements? (`true`/`false`) [6]
+//$code-font-family:			monospace, monospace;							// Fonts for code elements if not default
+$code-element-padding:			2px 4px;										// Padding for <code>
+$code-element-fore-color:		$fore-color;									// Text color for <code>
+$code-element-back-color:		#E5E9F0;										// Background color for <code>
+$code-element-border-style:		0;												// Border style for <code>
+$code-element-border-radius:	2px;											// Border radius for <code>
+$code-element-box-shadow:														// Box shadow for <code>
+	0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
+$pre-element-padding:			12px;											// Padding for <pre>
+$pre-element-fore-color:		$code-element-fore-color;						// Text color for <pre>
+$pre-element-back-color:		$code-element-back-color;						// Background color for <pre>
+$pre-element-border-style:		0;												// Border style for <pre>
+$pre-element-border-radius:		0 2px 2px 0;									// Border radius for <pre>
+$pre-element-margin:			8px 10px;										// Margin for <pre>
+$pre-element-box-shadow:														// Box shadow for <pre>
+	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
+$add-pre-element-sidebar:		true;											// Should a fancy sidebar be added to the
+																				// left side of <pre> (`true`/`false`) [7]
+$pre-element-sidebar-style:		3px solid #5E81AC;								// Style of the sidebar of <pre>
+$kbd-element-padding:			2px 4px;										// Padding for <kbd>
+$kbd-element-fore-color:		#ECEFF4;										// Text color for <kbd>
+$kbd-element-back-color:		$fore-color;									// Background color for <kbd>
+$kbd-element-border-style:		0;												// Border style for <kbd>
+$kbd-element-border-radius:		2px;											// Border radius for <kbd>
+$kbd-element-box-shadow:														// Box shadow for <kbd>
+	0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
+$style-samp-element:			false;											// Should styles for <samp> be included?
+																				// (`true`/`false`) [8]
+//$samp-element-padding:		2px 4px;										// Padding for <samp>
+//$samp-element-fore-color:		$fore-color;									// Text color for <samp>
+//$samp-element-back-color:		#81A1C1;										// Background color for <samp>
+//$samp-element-border-style:	0;												// Border style for <samp>
+//$samp-element-border-radius:	2px;											// Border radius for <samp>
+$include-dfn-fix:				true;											// Should the fix for Android 4.3 concerning <dfn>
+																				// be included (`true`/`false`) [9]
+$small-font-size:				75%;											// Font size for <small> elements
+$sup-font-size:					75%;											// Font size for <sup> elements
+$sub-font-size:					75%;											// Font size for <sub> elements
+$sup-top:						-8px;											// <sup> top
+$sub-bottom:					-4px;											// <sub> bottom
+$link-fore-color:				#88C0D0;										// Text color for <a>
+$link-visited-fore-color:		#5E81AC;										// Text color for visited <a>
+$link-font-weight:				500;											// Font weight for <a>
+$apply-link-underline:			true;											// Should an underline be applied to all <a>
+																				// elements? (`true`/`false`) [10]
+$apply-link-hover-fade:			true;											// Should the :hover and :focus state of <a>
+																				// elements use fade-out instead of a different
+																				// color (`true`/`false`) [11]
+//$link-hover-fore-color:		#8FBCBB;										// Text color for <a> when hovered or focused
+//	Notes:
+// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
+//	element's font sizing.
+// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
+//	This is due to the fact that applying the value of it on the root element again will overwrite the value of
+//	$base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
+// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
+//	to elements manually.
+// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
+//	the main heading and the 2 values specified below will apply.
+// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
+//	a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
+// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
+//	will apply the proper fix to use monospace font without any problems on all browsers.
+// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
+//	be applied as a left border for the <pre> elements.
+// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
+//	`samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
+// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
+//	displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
+// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
+//	color, as defined in $link-fore-color.
+// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
+//	focused. Otherwise, the color specified in $link-hover-fore-color will be used.
+//	Variables for grid elements
+$use-four-step-grid:			false;											// Should the old 4-step grid system be used
+																				// instead of the new (`true`/`false`) [1]
+$include-parent-layout:			true !default;									// Should the classes for rows defining the column
+																				// layout of children be included (`true`/`false`) [2]
+$grid-container-name:			'container';									// Class name for the grid container
+$grid-container-side-padding:	10px;											// Padding for the grid container (left and right only)
+$grid-row-name:					'row';											// Class name for the grid's rows
+$grid-row-parent-layout-prefix:	'cols';											// Class name prefix for the grid's row parents [2]
+$grid-column-prefix:			'col';											// Class name prefix for the grid's columns
+$grid-column-offset-suffix:		'offset';										// Class name suffix for the grid's offsets
+$grid-order-normal-suffix:		'normal';										// Class name suffix for grid columns with normal priority
+$grid-order-first-suffix:		'first';										// Class name suffix for grid columns with highest priority
+$grid-order-last-suffix:		'last';											// Class name suffix for grid columns with lowest priorty
+$grid-column-count:				12;												// Number of columns in the grid (integer value only)
+$grid-column-padding:			0 4px;											// Padding for the columns of the grid
+//$grid-extra-small-prefix:		'xs';											// Extra small screen class prefix for grid
+//$grid-small-breakpoint:		480px;											// Small screen breakpoint for grid
+$grid-small-prefix:				'sm';											// Small screen class prefix for grid
+$grid-medium-breakpoint:		768px;											// Medium screen breakpoint for grid
+$grid-medium-prefix:			'md';											// Medium screen class prefix for grid
+$grid-large-breakpoint:			1280px;											// Large screen breakpoint for grid
+$grid-large-prefix:				'lg';											// Large screen class prefix for grid
+//	Notes:
+// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
+//	the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
+// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
+//	layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
+//	Variables for navigational elements
+$header-height:					44px;											// Height for <header>
+$header-back-color:				#2E3440;										// Background color for <header>
+$header-fore-color:				#ECEFF4;										// Text color for <header>
+$header-border-style:			0;												// Border style for <header>
+$header-margin:					0;												// Margin for <header>
+$header-padding:				2px 8px;										// Padding for <header>
+$header-box-shadow:																// Box shadow for <header>
+	0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
+$header-logo-name:				'logo';											// Class name for <header>'s logo
+$header-logo-font-size:			1.75em;											// Font size for <header>'s logo
+$header-logo-line-height:		1.2;											// Line height for <header>'s logo
+$header-logo-margin:			1px 6px 1px 1px;								// Margin for <header>'s logo
+$header-logo-padding:			3px 0 0;										// Padding for <header>'s logo
+$header-link-hover-color:		#37474f;										// Hover color for <header>'s links
+$header-link-margin:			2px 0 0;										// Margin for <header>'s links
+$include-header-sticky:			true;											// Should sticky <header> elements be
+																				// included? (`true`/`false`) [1]
+$header-sticky-name:			'sticky';										// Class name for sticky <header>
+$nav-back-color:				#ECEFF4;										// Background for <nav>
+$nav-fore-color:				$fore-color;									// Text color for <nav>
+$nav-border-style:				1px solid #D8DEE9;								// Border style for <nav>
+$nav-border-radius:				0;												// Border radius for <nav>
+$nav-padding:					8px 8px 16px 20px;								// Padding for <nav>
+$nav-margin:					2px;											// Margin for <nav>
+$nav-box-shadow: 																// Box shadow for <nav>
+	0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
+$nav-link-fore-color:			#88C0D0;										// Text color for links in <nav>
+$nav-sublink-prefix:			'sublink';										// Prefix for the subcategory links in <nav>
+$nav-sublink-depth:				2;												// Amount of subcategory classes to add
+$nav-sublink-padding-left:		12px;											// Left padding to add to subcategories
+$nav-include-sublink-bar:		true;											// Should a left border bar be added to
+																				// 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:			#81A1C1;										// Subcategory bar color
+$footer-back-color:				#434C5E;										// Background color for <footer>
+$footer-fore-color:				#ECEFF4;										// Text color for <footer>
+$footer-border-style:			0;												// Border stye for <footer>
+$footer-font-size:				85%;											// Font size for <footer>
+$footer-margin:					18px 0 0;										// Margin for <footer>
+$footer-padding:				22px 10px 12px;									// Padding for <footer>
+$footer-link-fore-color:		#88C0D0;										// Text color for links in <footer>
+$include-footer-sticky:			true;											// Should sticky <footer> elements be
+																				// included (`true`/`false`) [3]
+$footer-sticky-name:			'sticky';										// Class name for sticky <footer> elements
+//	Notes:
+// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
+//	of <header> elements, using the value of $header-sticky-name for the name of the class.
+// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
+//	subcategories, using the values specified.
+// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
+//	of <footer> elements, using the value of $footer-sticky-name for the name of the class.
+//	Variables for forms and inputs
+$form-back-color:				#ECEFF4;										// Background color for forms
+$form-fore-color:				$fore-color;									// Text color for forms
+$form-border-style:				1px solid #D8DEE9;								// 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 #D8DEE9;								// 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:				#E5E9F0;										// Background for input
+$input-fore-color:				$fore-color;									// Text color for input
+$input-border-style:			1px solid #D8DEE9;								// 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:		#81A1C1;										// Border color for focused input
+$input-invalid-border-color:	#BF616A;										// 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:				#D8DEE9;										// 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
+	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-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:	#5E81AC;										// 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:	#ECEFF4;										// Text color for button variant 1
+$button-variant2-name:			'secondary';									// Class name for button variant 2
+$button-variant2-back-color:	#BF616A;										// 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:	#ECEFF4;										// Text color for button variant 2
+$button-variant3-name:			'tertiary';										// Class name for button variant 3
+$button-variant3-back-color:	#A3BE8C;										// 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:	#ECEFF4;										// 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:	#ECEFF4;										// 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:			#D8DEE9;										// 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.
+// [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.
+// [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 #D8DEE9;								// Border style for <table> and children
+$table-border-radius:			0;												// Border radius for <table> and children
+$table-margin:					0 auto;											// Margin for <table>
+$table-box-shadow:																// Box shadow for <table>
+	0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
+$table-caption-font-size:		1.5em;											// Font size for <caption>
+$table-caption-margin:			6px 8px 12px;										// Margin for <caption>
+$table-row-padding:				8px;											// Padding for <tr> - both views
+$table-column-padding:			10px;											// Padding for <td> and <th> - desktop view
+$table-head-back-color:			#D8DEE9;										// Background color for <th>
+$table-head-fore-color:			$fore-color;									// Tex color for <th>
+$table-body-back-color:			#ECEFF4;										// Background color for <td>
+$table-body-fore-color:			$fore-color;									// Text color for <td>
+$table-mobile-breakpoint:		767px;											// Breakpoint for <table> mobile view
+$table-mobile-card-spacing:		10px;											// Space between <tr> cards - mobile view
+$table-mobile-card-label:		'data-label';									// Attribute used to replace column headers
+																				// in mobile view [1]
+$table-mobile-label-font-weight: $bold-font-weight;								// Font weight for mobile headers
+$include-horizontal-table:		true;											// Should horizontal <table> elements be
+																				// included? (`true`/`false`) [2]
+$table-horizontal-breakpoint:	768px;											// Breakpoint for <table> horizontal view
+$table-horizontal-name:			'horizontal';									// Class name for <table> horizontal view
+$table-not-responsive-name:		'preset';										// Class name for <table> non-responsive view
+$table-striped-name:			'striped';										// Class name for striped <table>
+$table-striped-alt-body-back-color:												// Alternate background color for <td> in
+								#E5E9F0;										// striped <table>
+//	Notes:
+// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
+//	in order for their mobile headers to display properly.
+// [2] - If $include-horizontal-table is `true`, then the <table> horizontal biew will be included in a class defined by
+//	$table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
+//	Variables for cards [1]
+$card-name:						'card';											// Class name for cards
+$card-back-color:				#ECEFF4;										// Background color for cards
+$card-fore-color:				$fore-color;									// Text color for cards
+$card-border-style:				1px solid #D8DEE9;								// Border style for cards
+$card-border-radius:			0;												// Border radius for cards
+$card-margin:					2px 10px 20px;									// Margin for cards
+$card-box-shadow:																// Box shadow for cards
+	0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
+$card-section-name:				'section';										// Class name for card sections
+$card-section-border-style:		1px solid #E5E9F0;								// Border style for card sections
+$card-section-padding:			6px 8px 6px;									// Padding for card sections
+$card-section-media-name:		'media';										// Class name for card media sections
+$card-section-media-height:		200px;											// Height for card media setions
+$card-normal-width:				320px;											// Width for normal cards
+$card-size1-name:				'large';										// Class name for large cards
+$card-size1-width:				480px;											// Width for large cards
+$card-size2-name:				'small';										// Class name for small cards
+$card-size2-width:				240px;											// Width for small cards
+$card-size3-name:				'fluid';										// Class name for fluid cards
+$card-size3-width:				100%;											// Width for fluid cards
+$card-style1-name:				'inverse';										// Class name for card style 1
+$card-style1-back-color:		$fore-color;									// Background color for card style 1
+$card-style1-fore-color:		#ECEFF4;										// Text color for card style 1
+$card-style1-border-style:		1px solid #3B4252;								// Border style for card style 1
+$card-style1-border-radius:		0;												// Border radius for card style 1
+$card-style1-section-border-style:												// Border style for card style 1 sections
+								1px solid #434C5E;
+$card-section-style1-name:		'dark';											// Class name for card section style 1
+$card-section-style1-back-color:#ECEFF4;										// Background color for card section style 1
+$card-section-style1-fore-color:$fore-color;									// Text color for card section style 1
+$card-section-style2-name:		'darker';										// Class name for card section style 2
+$card-section-style2-back-color:#D8DEE9;										// Background color for card section style 2
+$card-section-style2-fore-color:$fore-color;									// Text color for card section style 2
+$card-section-padding1-name:	'double-padded';								// Class name for card section padding style 1
+$card-section-padding1-padding:	10px 12px 10px;									// Padding for card section padding style 1
+//	Notes:
+// [1] - The cards module depends heavily on the grid system module.
+//	Variables for tabs
+$tab-container-name:			'tabs';											// Class name for the tabs' container
+$tab-container-box-shadow:														// Box shadow for the tabs' container
+	0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
+$tab-label-back-color:			#D8DEE9;										// Background color for tabs' labels
+$tab-label-fore-color:			$fore-color;									// Text color for tabs' labels
+$tab-label-selected-back-color:	#4C566A;										// Background color for open tab's label
+$tab-label-selected-fore-color:	#ECEFF4;									// Text color for open tab's label
+$tab-label-hover-opacity:		0.8;											// Opacity of the tab's label on hover
+$tab-label-padding:				8px 12px;										// Padding for tabs' labels
+$tab-label-height:				26px;											// Height for tabs' labels
+$tab-border-style:				1px solid #9e9e9e;								// Border style for tabs
+$tab-border-radius:				0;												// Border radius for tabs
+$tab-panel-back-color:			#ECEFF4;										// Background color for tabs' panels
+$tab-panel-fore-color:			$fore-color;									// Text color for tabs' panels
+$tab-panel-padding:				8px;											// Padding for tabs' panels
+$tab-panel-height:				400px;											// Height for tabs' panels
+$tab-stacked-breakpoint:		767px;											// Breakpoint for tabs layout (stacked/horizontal)
+$tab-stacked-name:				'stacked';										// Class name for stacked tabs
+//	Variables for contextual background elements and alerts
+$mark-back-color:				#5E81AC;										// Background color for <mark>
+$mark-fore-color:				#ECEFF4;										// Text color for <mark>
+$mark-font-size:				95%;											// Font size for <mark>
+$mark-line-height:				1;												// Line height for <mark>
+$mark-border-style:				0;												// Border style for <mark>
+$mark-border-radius:			2px;											// Border radius for <mark>
+$mark-padding:					2px 4px;										// Padding for <mark>
+$mark-margin:					0;												// Margin for <mark>
+$mark-box-shadow:																// Box shadow for <mark>
+	0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
+$mark-inline-block-name:		'inline-block';									// Class name for <mark> inline block styling
+$mark-variant1-name:			'secondary';									// Class name for <mark> variant 1
+$mark-variant1-back-color:		#BF616A;										// Background color for <mark> variant 1
+$mark-variant2-name:			'tertiary';										// Class name for <mark> variant 2
+$mark-variant2-back-color:		#A3BE8C;										// Background color for <mark> variant 2
+$mark-style1-name:				'tag';											// Class name for <mark> style 1
+$mark-style1-border-style:		0;												// Border style for <mark> style 1
+$mark-style1-border-radius:		200px;											// Border radius for <mark> style 1
+$mark-style1-padding:			4px 8px;										// Padding for <mark> style 1
+$mark-style2-name:				'inline-block';									// Class name for <mark> style 2
+$mark-style2-border-style:		0;												// Border style for <mark> style 2
+$mark-style2-border-radius:		2px;											// Border radius for <mark> style 2
+$mark-style2-padding:			5px;											// Padding for <mark> style 2
+$mark-style2-font-size:			100%;											// Font size for <mark> style 2
+$mark-style2-line-height:		1.35;											// Line height for <mark> style 2
+$alert-name:					'alert';										// Class name for alerts
+$alert-back-color:				#ECEFF4;										// Background color for alerts
+$alert-fore-color:				$fore-color;									// Text color for alerts
+$alert-border-style:			1px solid #D8DEE9;								// Border style for alerts
+$alert-border-radius:			0;												// Border radius for alerts
+$alert-padding:					12px 16px;										// Padding for alerts
+$alert-margin:					1px 10px;										// Margin for alerts
+$alert-box-shadow:																// Box shadow for alerts
+	0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
+$alert-include-animated:		true;											// Should animated alerts be included?
+																				// (`true`/`false`) [1]
+$alert-animated-class:			'animated';										// Class name for animated alerts
+$alert-variant1-name:			'urgent';										// Class name for alert variant 1
+$alert-variant1-back-color:		 #EBCB8B;										// Background color for alert variant 1
+$alert-variant2-name:			'critical';										// Class name for alert variant 2
+$alert-variant2-back-color:		 #BF616A;										// Background color for alert variant 2
+$alert-variant2-fore-color:		 #ECEFF4;										// Text color for alert variant 2
+$alert-style1-name:				'urgent';										// Class name for alert style 1
+$alert-style1-border-style:		1px solid #D08770;								// Border style for alert style 1
+$alert-style1-border-radius:	$alert-border-radius;							// Border radius for alert style 1
+$alert-style2-name:				'critical';										// Class name for alert style 2
+$alert-style2-border-style:		1px solid #BF616A;								// Border style for alert style 2
+$alert-style2-border-radius:	$alert-border-radius;							// Border radius for alert style 2
+$include-tooltip:				true;											// Should tooltips be included?
+																				// (`true`/`false`) [2]
+$tooltip-name:					'tooltip';										// Class name for the tooltip component
+$tooltip-back-color:			$fore-color;									// Background color for tooltips
+$tooltip-fore-color:			#ECEFF4;										// Text color for tooltips
+$tooltip-border-radius:			2px;											// Border radius for tooltips
+$tooltip-tail-size:				6px;											// The size of the tooltip's tail
+$tooltip-padding:				6px;											// Padding for tooltips
+$tooltip-box-shadow:															// Box shadow for tooltip-box-shadow
+	0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
+$tooltip-bottom-name:			'bottom';										// Class name for bottom tooltip
+// 	Notes:
+// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
+//	will be used to determine the class that will be used for animated alerts.
+// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
+//	for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
+//	included.
+//	Variables for progress elements and spinners
+$progress-back-color:			#D8DEE9;										// Background color for <progress>
+$progress-fore-color:			#5E81AC;										// Progress bar color for <progress>
+$progress-height:				14px;											// Height of <progress>
+$progress-max-value:			1000;											// Arithmetic max value of <progress>
+$progress-border-style:			0;												// Border style for <progress>
+$progress-border-radius:		1px;											// Border radius for the <progress> container
+$progress-top-bottom-margin:	2px;											// Top and bottom margin for <progress>
+$progress-left-right-margin:	8px;											// Left and right margin for <progress>
+$progress-box-shadow:															// Box shadow for <progress>
+	0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
+$progress-inline-name:			'inline';										// Class name for inline <progress>
+$progress-inline-width:			60%;											// Width for inline <progress>
+$progress-variant1-name:		'secondary';									// Class name for <progress> variant 1
+$progress-variant1-fore-color:	#BF616A;										// Progress bar color for <progress> variant 1
+$progress-variant2-name:		'tertiary';										// Class name for <progress> variant 2
+$progress-variant2-fore-color:	#A3BE8C;										// Progress bar color for <progress> variant 2
+$progress-style1-name:			'nano';											// Class name for <progress> style 1
+$progress-style1-height:		2px;											// Height for <progress> style 1
+$progress-style1-top-bottom-margin:												// Top and bottom margin for <progress> style 1
+								0;
+$progress-style1-left-right-margin:												// Left and right margin for <progress> style 1
+								0;
+$progress-style1-border-style:	0;												// Border style for <progress> style 1
+$progress-style1-border-radius:	0;												// Border radius for <progress> style 1
+$spinner-donut-name:			'spinner-donut';								// Class name for donut spinner
+$spinner-donut-border-thickness:4px;											// Border thickness for donut spinner
+$spinner-donut-back-color:		#D8DEE9;										// Background color for donut spinner
+$spinner-donut-fore-color:		#5E81AC;										// Foreground color for donut spinner
+$spinner-donut-size:			20px;											// Size for donut spinner
+$spinner-donut-variant1-name:	'secondary';									// Class name for donut spinner variant 1
+$spinner-donut-variant1-back-color:												// Background color for donut spinner variant 1
+								#D8DEE9;
+$spinner-donut-variant1-fore-color:												// Foreground color for donut spinner variant 1
+								#BF616A;
+$spinner-donut-variant2-name:	'tertiary';										// Class name for donut spinner variant 2
+$spinner-donut-variant2-back-color:												// Background color for donut spinner variant 2
+								#D8DEE9;
+$spinner-donut-variant2-fore-color:												// Foreground color for donut spinner variant 2
+								#A3BE8C;
+$spinner-donut-style1-name:		'large';										// Class name for donut spinner style 1
+$spinner-donut-style1-size:		32px;											// Size for donut spinner style 1
+$spinner-donut-style1-border-thickness:											// Border thickness for donut spinner style 1
+								6px;
+//	Variables for utilities and helper classes
+$hidden-name:					'hidden';										// Class name for hidden elements
+$visually-hidden-name:			'visually-hidden';								// Class name for visually hidden elements
+$breadcrumbs-name:				'breadcrumbs';									// Class name for breadcrumbs
+$breadcrumbs-back-color:		#D8DEE9;										// Background color for breadcrumbs
+$breadcrumbs-margin:			10px 8px;										// Margin for breadcrumbs
+$breadcrumbs-height:			32px;											// Height of the breadcrumbs
+$breadcrumbs-separator-width:	2px;											// Width of the breadcrumbs' separator
+$breadcrumbs-border-style:		0;												// Border style for breadcrumbs
+$breadcrumbs-border-radius:		4px;											// Border radius for breadcrumbs
+$breadcrumbs-box-shadow:														// Box shadow for breadcrumbs
+	0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);
+$close-icon-name:				'close';										// Class name for close icon
+$close-icon-size:				32px;											// Size of the close icon
+$close-icon-back-color:			#ECEFF4;										// Background color for the close icon
+$close-icon-fore-color:			#2E3440;										// Foreground color for the close icon
+$border-generic-name:			'bordered';										// Class name for generic border style
+$border-radial-style1-name:		'rounded';										// Class name for radial border style 1
+$border-radial-style1-radius:	2px;											// Border radius for radial border style 1
+$border-radial-style2-name:		'circular';										// Class name for radial border style 2
+$border-radial-style2-radius:	50%;											// Border radius for radial border style 2
+$box-shadow-style1-name:		'shadow-none';									// Class name for generic box-shadow style 1
+$box-shadow-style1-value:		none;											// Box shadow value for generic box-shadow style 1
+$box-shadow-style2-name:		'shadow-small';									// Class name for generic box-shadow style 2
+$box-shadow-style2-value:														// Box shadow value for generic box-shadow style 2
+	0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
+$box-shadow-style3-name:		'shadow-medium';								// Class name for generic box-shadow style 3
+$box-shadow-style3-value:														// Box shadow value for generic box-shadow style 3
+	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
+$box-shadow-style4-name:		'shadow-large';									// Class name for generic box-shadow style 4
+$box-shadow-style4-value:														// Box shadow value for generic box-shadow style 4
+	0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
+$responsive-margin-name:		'responsive-margin';							// Class name for responsive margin
+$responsive-margin-medium-breakpoint:											// Medium screen breakpoint for responsive margin
+								$grid-medium-breakpoint;
+$responsive-margin-large-breakpoint:											// Large screen breakpoint for responsive margin
+								$grid-large-breakpoint;
+$responsive-margin-small-value:	4px;											// Margin value for responsive margin on small screens
+$responsive-margin-medium-value:6px;											// Margin value for responsive margin on medium screens
+$responsive-margin-large-value:	8px;											// Margin value for responsive margin on large screens
+$responsive-padding-name:		'responsive-padding';							// Class name for responsive padding
+$responsive-padding-medium-breakpoint:											// Medium screen breakpoint for responsive padding
+								$grid-medium-breakpoint;
+$responsive-padding-large-breakpoint:											// Large screen breakpoint for responsive padding
+								$grid-large-breakpoint;
+$responsive-padding-small-value:2px 4px;										// Padding value for responsive padding on small screens
+$responsive-padding-medium-value:												// Padding value for responsive padding on medium screens
+								4px 6px;
+$responsive-padding-large-value:6px 8px;										// Padding value for responsive padding on large screens
+$include-floats:				false;											// Should floats be included? (`true`/`false`) [1]
+$include-clearfix:				false;											// Should clearfix be included? (`true`/`false`) [2]
+$include-center-block-name:		false;											// Should center block be included? (`true`/`false`) [3]
+// 	Notes:
+// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
+//	names that will be used.
+// [2] - If the value of $include-clearfix is true, a clearfix class will be created using the value of $clearfix-name to determine the
+//	class name of the clearfix component.
+// [3] - If the value of $include-center-block is true, a center block class will be created using the value of $center-block-name to
+//	determine the class name of the center block class.
+// Load modules. If you do not want to use a module, comment out its `@import` statement, along with any mixin `@include`s that are part of
+// that module and marked as such below it.
+@import '../mini/core';
+@import '../mini/grid';
+@import '../mini/navigation';
+@import '../mini/input_control';
+/*
+	Custom elements for forms and input elements.
+*/
+@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
+	$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
+@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
+	$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
+@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
+	$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
+@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color,
+	$button-variant4-back-opacity, $button-variant4-hover-back-opacity, $button-variant4-fore-color);
+@include make-button-alt-style ($button-style1-name, $button-style1-border-style,
+	$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
+@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
+	$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
+@import '../mini/table';
+@import '../mini/card';
+/*
+	Custom elements for cards and containers.
+*/
+@include make-card-alt-size ($card-size1-name, $card-size1-width);
+@include make-card-alt-size ($card-size2-name, $card-size2-width);
+@include make-card-alt-size ($card-size3-name, $card-size3-width);
+@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
+	$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
+@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
+	$card-section-style1-fore-color);
+@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
+	$card-section-style2-fore-color);
+@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
+@import '../mini/tab';
+@import '../mini/contextual';
+/*
+	Custom contextual background elements and alerts.
+*/
+@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
+@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
+@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
+	$mark-style1-border-radius, $mark-style1-padding);
+@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
+	$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
+@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
+@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
+@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
+@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
+@import '../mini/progress';
+/*
+	Custom elements for progress elements and spinners.
+*/
+@include make-progress-inline ($progress-inline-name, $progress-inline-width);
+@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
+@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
+@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
+	$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
+	$progress-style1-border-style, $progress-style1-border-radius);
+@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
+	$spinner-donut-variant1-fore-color);
+@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
+	$spinner-donut-variant2-fore-color);
+@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
+	$spinner-donut-style1-border-thickness);
+@import '../mini/utility';
+/*
+	Custom elements for utilities and helper classes.
+*/
+@include make-border-generic ($border-generic-name);
+@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
+@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
+@include make-margin-responsive ($responsive-margin-name, $responsive-margin-medium-breakpoint,
+	$responsive-margin-large-breakpoint, $responsive-margin-small-value, $responsive-margin-medium-value,
+	$responsive-margin-large-value);
+@include make-padding-responsive ($responsive-padding-name, $responsive-padding-medium-breakpoint,
+	$responsive-padding-large-breakpoint, $responsive-padding-small-value, $responsive-padding-medium-value,
+	$responsive-padding-large-value);
+@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
+@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
+@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
+@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);