Mockup implementation of toast

Added a quick and dirt version of the upcoming toast component, seems to work reasonably well so far. Further testing and work are required.

dist/mini-default.css

@@ -1632,7 +1632,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Definitions for contextual background elements and alerts.
+	Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
   background: #0277bd;
@@ -1647,6 +1647,17 @@ mark.inline-block {
   display: inline-block;
 }
 
+.toast {
+  position: fixed;
+  background: #424242;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fafafa;
+  border-radius: 2rem;
+  padding: 0.75rem 1.5rem;
+}
+
 .tooltip {
   position: relative;
   display: inline-block;

docs/v2/DEVLOG.md

@@ -1121,3 +1121,4 @@
 - Updated both `mini-default` and `mini-dark` to use the latest classes built in the `card` module with proper colors.
 - Deprecated `.alert` and all that comes with it, updated flavors to reflect this. I will update all docs after commiting, just to be on the safe side. By the way, `mini-default` is now `6.12KB` without the deprecated components and with a few of the additions already built-in. Pretty happy with how it's coming along right now!
 - Updated docs just barely to make sure that the new `.toast` component will easily find a suitable home in them.
+- Implemented `.toast` quite quickly and without doing too much work on it, seems to work pretty well. Documentation, mixins and customization not yet done.

src/flavors/mini-default.scss

@@ -404,6 +404,14 @@ $mark-style2-border-radius:	2px;										// Border radius for <mark> style 2
 $mark-style2-padding:				0.375em;								// Padding for <mark> style 2
 $mark-style2-font-size:			1em;										// Font size for <mark> style 2
 $mark-style2-line-height:		1.375em;								// Line height for <mark> style 2
+$toast-name:								'toast';								// Class name for toast component
+$toast-bottom-position:			1.5rem;									// Bottom position for toasts
+$toast-back-color:					#424242;								// Background color for toasts
+$toast-fore-color:					#fafafa;								// Text color for toasts
+$toast-border-style:				0;											// Border style for toasts
+$toast-border-radius:				2rem;										// Border radius for toasts
+$toast-padding:							0.75rem 1.5rem;					// Padding for toasts
+$toast-box-shadow:					none;										// Box shadow for toasts
 $include-tooltip:						true;										// Should tooltips be included? (`true`/`false`) [1]
 $tooltip-name:							'tooltip';							// Class name for the tooltip component
 $tooltip-back-color:				$fore-color;						// Background color for tooltips

src/mini/_contextual.scss

@@ -1,11 +1,13 @@
 /*
-	Definitions for contextual background elements and alerts.
+	Definitions for contextual background elements, toasts and tooltips.
 */
 // Contextual background elements use the mark element as their base.
 $mark-inline-block-name:	'inline-block' !default;	// Class name for <mark> inline block styling.
 $include-tooltip:					true !default;						// Should tooltips be included? (`true`/`false`)
 $tooltip-name:						'tooltip' !default;				// Class name for the tooltips.
 $tooltip-bottom-name:			'bottom' !default;				// Bottom tooltip class name.
+$include-toast:						true !default;						// [Hidden flag] Should toasts be included? (`true`/`false`)
+$toast-name:							'toast' !default;					// Class name for the toasts.
 // External variables' defaults are used only if you import this module on its own, without the rest of the framework.
 $back-color:							white !default;						// [External variable - core] Background color for everything.
 $fore-color:							black !default;						// [External variable - core] Foreground color for everything.
@@ -46,6 +48,32 @@ mark {
 		display: inline-block; // Can be used to deal with some problems.
 	}
 }
+// Default styling for toasts. Use mixins for alternate styles
+@if $include-toast {
+	.#{$toast-name} {
+		position: fixed;
+		background: $toast-back-color;
+		bottom: $toast-bottom-position;
+  	left: 50%;
+  	transform: translate(-50%, -50%);
+		@if $toast-fore-color != $fore-color {
+			color: $toast-fore-color;
+		}
+		@if $toast-border-style != 0 {
+			border: $toast-border-style;
+		}
+		@if $toast-border-radius != 0 {
+			border-radius: $toast-border-radius;
+		}
+		@if $toast-padding != 0 {
+			padding: $toast-padding;
+		}
+		@if $toast-box-shadow != none {
+			box-shadow: $toast-box-shadow;
+		}
+
+	}
+}
 // Default styling for tooltips. Use mixins for alternate styles
 @if $include-tooltip {
 	.#{$tooltip-name} {