Toast message flavor compatibility

Updated all flavors, dealing with the addition of the toast component.

dist/mini-dark.css

@@ -1631,7 +1631,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;
@@ -1646,6 +1646,18 @@ mark.inline-block {
   display: inline-block;
 }
 
+.toast {
+  position: fixed;
+  background: #acacac;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #0c0c0c;
+  border-radius: 2rem;
+  padding: 0.75rem 1.5rem;
+  z-index: 1110;
+}
+
 .tooltip {
   position: relative;
   display: inline-block;
@@ -1737,6 +1749,16 @@ mark.inline-block {
   padding: 0.375em;
 }
 
+.toast.small {
+  border-radius: 1.5rem;
+  padding: 0.5rem 1rem;
+}
+
+.toast.large {
+  border-radius: 3rem;
+  padding: 1.125rem 2.25rem;
+}
+
 /*
 	Definitions for progress elements and spinners.
 */

dist/mini-lite.css

@@ -1173,7 +1173,7 @@ table th:first-child, table td:first-child {
 }
 
 /*
-	Definitions for contextual background elements and alerts.
+	Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
   background: #0277bd;

dist/mini-nord.css

@@ -1630,7 +1630,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: #5E81AC;

dist/mini-sucroa.css

@@ -1538,7 +1538,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: #6979c6;

docs/v2/DEVLOG.md

@@ -1130,3 +1130,9 @@
 - Added `z-index` to `.toast` elements, so that they display above everything else so far.
 - Documented `.toast` changes in their page. Updated the documentation in `quick_reference`. Created related codepen (bit fiddly but should be ok).
 - Updated `customization` for the new `.toast` component, fixed some mistakes I found in the `customization/contextual.html` page.
+- Updated flavors for `.toast`:
+	- `mini-default` fully supports it.
+	- `mini-dark` fully supports it.
+	- `mini-lite` does not support it (in keeping with tradition of the lite flavor's decisions).
+	- `mini-nord` still uses `.alert`s instead of `.toast`s, maintainer should address after update, otherwise I will in the next patch or so.
+	- `mini-sucroa` does not support it (or `.alert` for that matter), might be addressed with author later down the line, for now it's ok to not have either.

src/flavors/mini-dark.scss

@@ -404,6 +404,22 @@ $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:							1.5rem;									// Bottom position for toasts
+$toast-back-color:					#acacac;								// Background color for toasts
+$toast-fore-color:					#0c0c0c;								// 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
+$toast-style1-name:					'small';								// Class name for toast style 1
+$toast-style1-border-style:	0;											// Border style for toast style 1
+$toast-style1-border-radius:1.5rem;									// Border radius for toast style 1
+$toast-style1-padding:			0.5rem 1rem;								// Padding for toast style 1
+$toast-style2-name:					'large';								// Class name for toast style 2
+$toast-style2-border-style:	0;											// Border style for toast style 2
+$toast-style2-border-radius:3rem;										// Border radius for toast style 2
+$toast-style2-padding:			1.125rem 2.25rem;				// Padding for toast style 2
 $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
@@ -539,6 +555,10 @@ $include-center-block-name:		false;								// Should center block be included? (
 	$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-toast-alt-style($toast-style1-name, $toast-style1-border-style,
+	$toast-style1-border-radius, $toast-style1-padding);
+@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
+	$toast-style2-border-radius, $toast-style2-padding);
 @import '../mini/progress';
 /*
 	Custom elements for progress elements and spinners.

src/flavors/mini-lite.scss

@@ -335,12 +335,12 @@ $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
-$include-alerts:						false;									// [Hidden flag override] Should alerts be included? (`true`/`false``) [1]
+$include-toast:							false;									// [Hidden flag override] Should toasts be included? (`true`/`false``) [1]
 $include-tooltip:						false;									// Should tooltips be included? (`true`/`false`) [1]
 // 	Notes:
-// [1] - Due to the value of $include-tooltip being set to `false`, no styling
+// [1] - Due to the values of $include-toast and $include-tooltip being set to `false`,
-// is provided for this element. If you want to enable it, please refer to a
+//	no styling is provided for these elements. If you want to enable them, please
-// full flavor file for variable definitions.
+//	refer to a full flavor file for variable definitions.
 //	Variables for progress elements and spinners
 $progress-back-color:					#e0e0e0;							// Background color for <progress>
 $progress-fore-color:					#0277bd;							// Progress bar color for <progress>

src/flavors/mini-nord.scss

@@ -412,6 +412,7 @@ $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
+$include-toast:							false;									// Should the toast component be included? (`true`/`false`)
 $include-alerts:						true;										// Should the alert component be included? (`true`/`false`)
 $alert-name:					'alert';											// Class name for alerts
 $alert-back-color:				#ECEFF4;									// Background color for alerts

src/flavors/mini-sucroa.scss

@@ -406,6 +406,7 @@ $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
+$include-toast:							false;									// Should the toast component be included? (`true`/`false`)
 $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