Housekeeping for card module

Split card module into main and mixins file

docs/v2/DEVLOG.md

@@ -902,3 +902,4 @@
 - *TODO* Make class naming rules more consistent in module defaults - meaning add all class naming defaults to the very top of all modules, saving time and space when simplified flavors kick in.
 - Updated `table` module's definitions and variables, added **hidden flag** `$include-striped-table` in order to make sure `.striped` `table`s can be turned on and off.
 - Cleanup of relevant variables and comments in flavor files.
+- Updated `card` module, splitting into main file and mixins, cleanup in flavor files for the module.

src/flavors/mini-default.scss

@@ -352,11 +352,10 @@ $card-style1-back-color:		$fore-color;									// Background color for card styl
 $card-style1-fore-color:			#fafafa;							// Text color for card style 1
 $card-style1-border-style:		1px solid #424242;		// 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
+$card-style1-section-border-style:1px solid #616161;// Border style for card style 1 sections
-								1px solid #616161;
 $card-section-style1-name:				'dark';						// Class name for card section style 1
-$card-section-style1-back-color:#e0e0e0;										// Background color for card section style 1
+$card-section-style1-back-color:	#e0e0e0;					// Background color for card section style 1
-$card-section-style1-fore-color:$fore-color;									// Text 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:#bdbdbd;						// Background color for card section style 2
 $card-section-style2-fore-color:$fore-color;				// Text color for card section style 2

src/flavors/mini-sucroa.scss

@@ -347,15 +347,14 @@ $card-style1-back-color:		$fore-color;									// Background color for card styl
 $card-style1-fore-color:		#fffddc;								// Text color for card style 1
 $card-style1-border-style:	1px solid #190f1a;			// Border style for card style 1
 $card-style1-border-radius:	2px;										// Border radius for card style 1
-$card-style1-section-border-style:												// Border style for card style 1 sections
+$card-style1-section-border-style:1px solid #493e4b;// Border style for card style 1 sections
-								1px solid #493e4b;
 $card-section-style1-name:					'light';				// Class name for card section style 1
-$card-section-style1-back-color:#f6e5e6;										// Background color for card section style 1
+$card-section-style1-back-color:		#f6e5e6;				// Background color for card section style 1
-$card-section-style1-fore-color:$fore-color;									// Text color for card section style 1
+$card-section-style1-fore-color:		$fore-color;		// Text color for card section style 1
 $card-section-style2-name:					'lighter';			// Class name for card section style 2
-$card-section-style2-back-color:#fbf4f4;										// Background color for card section style 2
+$card-section-style2-back-color:		#fbf4f4;				// Background color for card section style 2
-$card-section-style2-fore-color:$fore-color;									// Text 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-name:				'double-padded';// Class name for card section padding style 1
 $card-section-padding1-padding:			12px 14px;			// Padding for card section padding style 1
 //	Notes:
 // [1] - The cards module depends heavily on the grid system module.

src/mini/_card.scss

@@ -1,12 +1,14 @@
 /*
 	Definitions for cards and containers.
 */
+// Check the `_card_mixins.scss` file to find this module's mixins.
+@import 'card_mixins';
 // Dependency: This module depends heavily on the grid system module.
-// Card styling
 $card-name:								'card' !default;					// Class name for the cards
 $card-section-name:				'section' !default;				// Class name for the cards' sections
 $card-section-media-name:	'media' !default;					// Class name for the cards' sections (media cotent)
 $card-normal-width:				320px !default;						// Width for normal cards
+// Card styling
 .#{$card-name} {
 	// Old syntax
 	display: -webkit-box;
@@ -76,89 +78,3 @@ $card-normal-width:				320px !default;									// Width for normal cards
 		max-width: $card-normal-width;
 	}
 }
-// Mixin for alternate card sizes.
-// Variables:
-// - $card-alt-size-name : The name of the class used for the alternate size card.
-// - $card-alt-size-width : The width of the alternate size card.
-@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
-	@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
-		.#{$card-name}.#{$card-alt-size-name} {
-			max-width: $card-alt-size-width;
-			width: auto;
-		}
-	}
-	@else {
-		@media (min-width: #{$card-alt-size-width}) {
-			.#{$card-name}.#{$card-alt-size-name} {
-				max-width: $card-alt-size-width;
-			}
-		}
-	}
-}
-// Mixin for alternate cards (card color variants).
-// Variables:
-// - $card-alt-name : The name of the class used for the alternate card.
-// - $card-alt-back-color : The background color of the alternate card.
-// - $card-alt-fore-color : The text color of the alternate card.
-// - $card-alt-border-style : (Optional) The border style of the alternate card. Defaults to the value
-//	of $card-border-style.
-// - $card-alt-border-radius : (Optional) The border radius of the alternate card. Defaults to the value
-//	of $card-border-radius.
-// - $card-alt-section-border-style : (Optional) The border style of the alternate card's sections. Defaults to
-//	the value of $card-section-border-style.
-@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color,
-	$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
-	$card-alt-section-border-style : $card-section-border-style) {
-	.#{$card-name}.#{$card-alt-name} {
-		@if $card-alt-back-color != $card-back-color {
-			background: $card-alt-back-color;
-		}
-		@if $card-alt-fore-color != $card-fore-color {
-			color: $card-alt-fore-color;
-		}
-		@if $card-alt-border-style != $card-border-style {
-			border: $card-alt-border-style;
-		}
-		@if $card-alt-border-radius != $card-border-radius {
-			border-radius: $card-alt-border-radius;
-		}
-		@if $card-alt-section-border-style != $card-section-border-style{
-			& > .#{$card-section-name} {
-				border-bottom: $card-alt-section-border-style;
-			}
-			& > .#{$card-section-name}:last-child {
-				border-bottom: 0;	// Clean the extra border for last section
-			}
-		}
-	}
-}
-// Mixin for alternate card sections (card section color variants).
-// Variables:
-// - $card-section-alt-name : The name of the class used for the alternate card section.
-// - $card-section-alt-back-color : The background color of the alternate card section.
-// - $card-section-alt-fore-color : The text color of the alternate card section.
-// - $card-section-alt-border-style : (Optional) The border style of the alternate card section. Defaults to
-//	the value of $card-section-border-style.
-@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color,
-	$card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
-	.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
-		@if $card-section-alt-back-color != $card-back-color {
-			background: $card-section-alt-back-color;
-		}
-		@if $card-section-alt-fore-color != $card-fore-color {
-			color: $card-section-alt-fore-color;
-		}
-		@if $card-section-alt-border-style != $card-section-border-style {
-			border: $card-section-alt-border-style;
-		}
-	}
-}
-// Mixin for alternate card sections (card section padding variants).
-// Variables:
-// - $card-section-alt-name : The name of the class used for the alternate card section.
-// - $card-section-alt-padding : The padding of the alternate card section.
-@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
-	.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
-		padding: $card-section-alt-padding;
-	}
-}

src/mini/_card_mixins.scss

@@ -0,0 +1,88 @@
+// Card module's mixin definitions are here. For the module itself
+// check `_card.scss`.
+// Mixin for alternate card sizes.
+// Variables:
+// - $card-alt-size-name : The name of the class used for the alternate size card.
+// - $card-alt-size-width : The width of the alternate size card.
+@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
+	@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
+		.#{$card-name}.#{$card-alt-size-name} {
+			max-width: $card-alt-size-width;
+			width: auto;
+		}
+	}
+	@else {
+		@media (min-width: #{$card-alt-size-width}) {
+			.#{$card-name}.#{$card-alt-size-name} {
+				max-width: $card-alt-size-width;
+			}
+		}
+	}
+}
+// Mixin for alternate cards (card color variants).
+// Variables:
+// - $card-alt-name : The name of the class used for the alternate card.
+// - $card-alt-back-color : The background color of the alternate card.
+// - $card-alt-fore-color : The text color of the alternate card.
+// - $card-alt-border-style : (Optional) The border style of the alternate card. Defaults to the value
+//	of $card-border-style.
+// - $card-alt-border-radius : (Optional) The border radius of the alternate card. Defaults to the value
+//	of $card-border-radius.
+// - $card-alt-section-border-style : (Optional) The border style of the alternate card's sections. Defaults to
+//	the value of $card-section-border-style.
+@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color,
+	$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
+	$card-alt-section-border-style : $card-section-border-style) {
+	.#{$card-name}.#{$card-alt-name} {
+		@if $card-alt-back-color != $card-back-color {
+			background: $card-alt-back-color;
+		}
+		@if $card-alt-fore-color != $card-fore-color {
+			color: $card-alt-fore-color;
+		}
+		@if $card-alt-border-style != $card-border-style {
+			border: $card-alt-border-style;
+		}
+		@if $card-alt-border-radius != $card-border-radius {
+			border-radius: $card-alt-border-radius;
+		}
+		@if $card-alt-section-border-style != $card-section-border-style{
+			& > .#{$card-section-name} {
+				border-bottom: $card-alt-section-border-style;
+			}
+			& > .#{$card-section-name}:last-child {
+				border-bottom: 0;	// Clean the extra border for last section
+			}
+		}
+	}
+}
+// Mixin for alternate card sections (card section color variants).
+// Variables:
+// - $card-section-alt-name : The name of the class used for the alternate card section.
+// - $card-section-alt-back-color : The background color of the alternate card section.
+// - $card-section-alt-fore-color : The text color of the alternate card section.
+// - $card-section-alt-border-style : (Optional) The border style of the alternate card section. Defaults to
+//	the value of $card-section-border-style.
+@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color,
+	$card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
+	.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
+		@if $card-section-alt-back-color != $card-back-color {
+			background: $card-section-alt-back-color;
+		}
+		@if $card-section-alt-fore-color != $card-fore-color {
+			color: $card-section-alt-fore-color;
+		}
+		@if $card-section-alt-border-style != $card-section-border-style {
+			border: $card-section-alt-border-style;
+		}
+	}
+}
+// Mixin for alternate card sections (card section padding variants).
+// Variables:
+// - $card-section-alt-name : The name of the class used for the alternate card section.
+// - $card-section-alt-padding : The padding of the alternate card section.
+@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
+	.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
+		padding: $card-section-alt-padding;
+	}
+}