Added alert functionality, starting module restructure

docs/v2/DEVLOG.md

@@ -364,3 +364,5 @@
 - Tested on mobile, works better.
 - Minor `tabs` update for `:first-of-type` and `:last-of-type` selectors. This update should fix square top-right corners for single collapses.
 - Deployed live demo.
+- New module restructure: all modules will be moved to core, some merges might have to be applied (check issue #14). Restructure was applied as follows:
+  - Added the functionality of the new `alert` module to `contextual`. Includes mixin `make-alert-alt-color` for different `alert` color variants.

docs/v2/index.html

@@ -130,6 +130,10 @@
 }</pre>
 <br>
           </div>
+          <div class="alert">
+            <h3>This is an alert</h3>
+            <p>Alerts are important</p>
+          </div>
         </div>
       </div>
       <div class="row">
@@ -543,7 +547,6 @@
             <div class="spinner-donut"></div>
             <div class="spinner-donut secondary"></div>
             <div class="spinner-donut tertiary"></div>
-          </div>
         </div>
       </div>
     </div>

flavors/v2/mini-default.css

@@ -757,6 +757,15 @@ mark {
   line-height: 1;
   padding: 1px; }
 
+.alert {
+  display: block;
+  max-width: 100%;
+  background: #eeeeee;
+  border: 1px solid #bdbdbd;
+  border-radius: 2px;
+  margin: 1px 10px;
+  padding: 12px 16px; }
+
 progress {
   display: block;
   vertical-align: baseline;

flavors/v2/mini-default.scss

@@ -283,6 +283,13 @@ $mark-style1-padding:			2px;											// Padding for <mark> style 1
 $mark-style2-name:				'bubble';										// Class name for <mark> style 2
 $mark-style2-border-radius:		200px;											// Border radius for <mark> style 2
 $mark-style2-padding:			3px 5px;										// Padding for <mark> style 2	
+$alert-name:					'alert';										// Class name for alerts
+$alert-back-color:				#eeeeee;										// Background color for alerts
+$alert-fore-color:				$fore-color;									// Text color for alerts
+$alert-border-style:			1px solid #bdbdbd;								// Border style for alerts
+$alert-border-radius:			2px;											// Border radius for alerts
+$alert-padding:					12px 16px;										// Padding for alerts
+$alert-margin:					1px 10px;										// Margin for alerts
 //	Variables for progress elements
 $progress-back-color:			#f5f5f5;										// Background color for <progress>
 $progress-fore-color:			#01579b;										// Progress bar color for <progress>

scss/v2/mini-core/_contextual.scss

@@ -1,4 +1,4 @@
-// Definitions for contextual background elements.
+// Definitions for contextual background elements and alerts.
 // Contextual background elements use the mark element as their base.
 // Default styling for mark. Use mixins for alternate styles.
 mark {
@@ -47,4 +47,43 @@ mark.#{$mark-alt-name} {
   padding: $mark-alt-padding;
 }
 }
+}
+// Default styling for alerts. Use mixins for alternate styles
+$alert-name:              'alert' !default;               // Class name for the alerts
+.#{$alert-name} {
+  display: block;
+  max-width: 100%;
+@if $alert-back-color != $back-color {
+  background: $alert-back-color;
+}
+@if $alert-fore-color != $fore-color {
+  color: $alert-fore-color;
+}
+@if $alert-border-style != 0 {
+  border: $alert-border-style;
+}
+@if $alert-border-radius != 0 {
+  border-radius: $alert-border-radius;
+}
+@if $alert-margin != 0 {
+  margin: $alert-margin;
+}
+@if $alert-padding != 0 {
+  padding: $alert-padding;
+}
+}
+// Mixin for alternate alert (alert color variants).
+// Variables:
+// - $alert-alt-name : The name of the class used for the alternate alert.
+// - $alert-alt-back-color : The background color of the alternate alert.
+// - $alert-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the alert.
+@mixin make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color: $alert-fore-color) {
+.#{$alert-name}.#{$alert-alt-name} {
+@if $alert-alt-back-color != $alert-back-color {
+  background: $alert-alt-back-color;
+}
+@if $alert-alt-fore-color != $alert-fore-color {
+  color: $alert-alt-fore-color;
+}
+}
 }