First draft of the modal component

Simple as ever, the modal dialog is almost ready to release. Documentation and polishing are not yet done.

dist/mini-default.css

@@ -1208,11 +1208,11 @@ footer.sticky {
   }
 }
 
-[type="checkbox"]:checked + .drawer:not(.right) {
+:checked + .drawer:not(.right) {
   left: 0;
 }
 
-[type="checkbox"]:checked + .drawer.right {
+:checked + .drawer.right {
   right: 0;
 }
 
@@ -1786,6 +1786,43 @@ mark.inline-block {
 .tooltip.bottom:after {
   margin-top: 1rem;
 }
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.modal .card {
+  margin: 0 auto;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+.modal .card .close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.25rem;
+  padding: 0;
+}
+
+:checked + .modal {
+  display: -webkit-box;
+  -webkit-box-flex: 0;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  flex: 0 1 auto;
+  z-index: 1200;
+}
+
+:checked + .modal .card .close {
+  z-index: 1211;
+}
 
 /*
 	Custom contextual background elements and alerts.

docs/v2/DEVLOG.md

@@ -1218,3 +1218,4 @@
 - Merged some styles in `contextual` in regards to `.tooltip`.
 - Changed `table` selectors to use `:not(:first-child)`, similarly to other modules.
 - All changes have been tested and no errors were found (as far as I can tell).
+- Created the `.modal` component, added to the `default` flavor, documenting and adding to other flavors pending.

src/flavors/mini-default.scss

@@ -448,6 +448,13 @@ $tooltip-tail-size:					0.5rem;									// The size of the tooltip's tail
 $tooltip-padding:						0.5rem;									// Padding for tooltips
 $tooltip-box-shadow:				none;										// Box shadow for tooltip-box-shadow
 $tooltip-bottom-name:				'bottom';								// Class name for bottom tooltip
+$include-modal:							true;										// Should modals be included? (`true`/`false`) [2]
+$modal-name:								'modal';								// Class name for the modals
+$modal-back-color:					#000;										// Background color of the modal overlay
+$modal-back-opacity:				0.45;										// Background opacity of the modal overlay
+$modal-close-name:				'close';									// Class name of the close element od the modal component.
+$modal-close-top:					0.75rem;									// Top position of the modal component's close icon
+$modal-close-right:				0.25rem;									// Right position of the modal component's close icon
 // 	Notes:
 // [1] - 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

src/mini/_contextual.scss

@@ -8,6 +8,9 @@ $toast-name:							'toast' !default;					// Class name for the toasts.
 $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-modal:						true !default;						// Should modals be included? (`true`/`false`)
+$modal-name:							'modal' !default;					// Class name for the modals.
+$modal-close-name:				'close' !default;					// Class name of the close element for the modal component.
 // 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.
@@ -158,6 +161,44 @@ mark {
 		}
 	}
 }
+@if $include-modal {
+	.#{$modal-name} {
+		position: fixed;
+		top: 0;
+		left: 0;
+		display: none;
+		width: 100vw;
+		height: 100vh;
+		background: rgba($modal-back-color, $modal-back-opacity);
+		& .card {
+			margin: 0 auto;
+			max-height: 50vh;
+			overflow: auto;
+			& .#{$modal-close-name} {
+				position: absolute;
+				top: $modal-close-top;
+				right: $modal-close-right;
+				padding: 0; // Fixes the extra padding added from <label> styling.
+			}
+		}
+	}
+	:checked + .#{$modal-name} {
+		// Old syntax
+		display: -webkit-box;
+		-webkit-box-flex: 0;
+		// New syntax
+		display: 	-webkit-flex;
+		display:					flex;
+		-webkit-flex: 0 1 auto;
+						flex: 0 1 auto;
+		z-index: 1200;
+		& .card {
+			& .#{$modal-close-name} {
+				z-index: 1211;
+			}
+		}
+	}
+}
 // [WARNING: As of v2.2.0, the alert component is deprecated and no longer maintained.]
 $include-alerts:					false !default;						// [Hidden flag] Should alerts be included? (`true`/`false`)
 // Animation definition for animated alerts (included if wanted)

src/mini/_navigation.scss

@@ -287,10 +287,10 @@ footer {
 			display: none;
 		}
 	}
-	[type="checkbox"]:checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
+	:checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
 		left: 0;
 	}
-	[type="checkbox"]:checked + .#{$drawer-name}.#{$drawer-right-name} {
+	:checked + .#{$drawer-name}.#{$drawer-right-name} {
 		right: 0;
 	}
 }