Table module updates and optimization

dist/mini-default.css

@@ -12,7 +12,7 @@ html, * {
 body {
   margin: 0;
   color: #212121;
-  background: #fafafa; }
+  background: #f5f5f5; }
 
 article, aside, section, figcaption, figure, main, details, menu {
   display: block; }
@@ -101,7 +101,7 @@ pre {
 kbd {
   border-radius: 2px;
   background: #212121;
-  color: #fafafa;
+  color: #f5f5f5;
   padding: 2px 4px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
 
@@ -525,20 +525,20 @@ header {
   display: block;
   height: 36px;
   background: #263238;
-  color: #fafafa;
+  color: #f5f5f5;
   padding: 2px 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
   white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden; }
   header .logo {
-    color: #fafafa;
+    color: #f5f5f5;
     font-size: 1.75em;
     line-height: 1.2;
     margin: 1px 6px 1px 1px; }
   header button, header [type="button"], header a.button, header label.button, header .button {
     background: #263238;
-    color: #fafafa;
+    color: #f5f5f5;
     vertical-align: top;
     margin: 2px 0 0;
     box-shadow: none; }
@@ -564,7 +564,7 @@ nav {
 footer {
   display: block;
   background: #263238;
-  color: #fafafa;
+  color: #f5f5f5;
   margin: 18px 0 0;
   padding: 22px 10px 12px;
   font-size: 85%; }
@@ -614,7 +614,7 @@ textarea {
 input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
 [type="password"], [type="url"], [type="tel"], textarea, select {
   box-sizing: border-box;
-  background: #fafafa;
+  background: #f5f5f5;
   color: #212121;
   border: 1px solid #b0bec5;
   border-radius: 1px;
@@ -742,7 +742,7 @@ input[type="file"] {
     content: '';
     border: 1px solid #b0bec5;
     border-radius: 1px;
-    background: #fafafa;
+    background: #f5f5f5;
     color: #212121;
     margin-left: -21.25px;
     vertical-align: text-bottom; }
@@ -785,6 +785,9 @@ th, td {
   border-left: 1px solid #bdbdbd;
   border-top: 1px solid #bdbdbd; }
 
+td {
+  background: #fafafa; }
+
 th {
   border-top: 0;
   background: #eceff1; }
@@ -815,6 +818,7 @@ th:first-child, td:first-child {
     display: block;
     border: 1px solid #bdbdbd;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
+    background: #fafafa;
     margin-bottom: 10px; }
 
   td {
@@ -845,7 +849,7 @@ th:first-child, td:first-child {
   align-self: center;
   position: relative;
   width: 100%;
-  background: #f5f5f5;
+  background: #fafafa;
   border: 1px solid #9e9e9e;
   margin: 2px 10px 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); }
@@ -1006,7 +1010,7 @@ th:first-child, td:first-child {
       border-bottom-right-radius: 2px; } }
 mark {
   background: #0277bd;
-  color: #fafafa;
+  color: #f5f5f5;
   font-size: 95%;
   line-height: 1;
   border-radius: 2px;
@@ -1141,7 +1145,7 @@ ul.breadcrumbs {
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary {
   background: #1565c0;
-  color: #fafafa; }
+  color: #f5f5f5; }
   button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
   [type="reset"].primary:hover,
   [type="reset"].primary:active,
@@ -1151,7 +1155,7 @@ button.primary, [type="button"].primary, [type="submit"].primary,
 button.secondary, [type="button"].secondary, [type="submit"].secondary,
 [type="reset"].secondary, .button.secondary {
   background: rgba(198, 40, 40, 0.85);
-  color: #fafafa; }
+  color: #f5f5f5; }
   button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
   [type="reset"].secondary:hover,
   [type="reset"].secondary:active,

docs/v2/DEVLOG.md

@@ -445,3 +445,6 @@
 - Removed the `playground` page as its purpose was fulfilled.
 - Closed issue #31 for good.
 - Squashed another major bug in the `make-card-alt-size` mixin, stemming from the use of the conditions and logical operators in that. The issue was thoroughly tested and resolved for all cases. `&&` was replaced with `and` in said condition combination.
+- Tested some minor color issues with the page's background color and the cards' background color. Made some adjustments, uncertain if I will keep them.
+- Added `$table-body-back-color`, `$table-body-fore-color` and `$table-head-fore-color` in addition to the existing `$table-head-back-color` and optimized them accordingly.
+- *TODO* Some minor changes to `.button-group` might be needed (button shadows overlapping and existing, the extra border etc.).

docs/v2/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <!-- Live demo styled as of 20161113 -->
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/3e0ae4fa7fa87cb51187ae5df2e3cab21f60eb52/dist/mini-default.min.css">
+    <!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/3e0ae4fa7fa87cb51187ae5df2e3cab21f60eb52/dist/mini-default.min.css"> -->
     <!-- Local stylesheet -->
     <link rel="stylesheet" href="../../dist/mini-default.min.css">
     <title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>

src/flavors/mini-default.scss

@@ -10,7 +10,7 @@
 */
 //	Basic rules for body and typography
 $fore-color:					#212121;										// Text and general foreground color
-$back-color:					#fafafa;										// Body background color
+$back-color:					#f5f5f5;										// Body background color
 $base-font-family:				"\"Helvetica Neue\", Helvetica, sans-serif";	// Default fonts for all elements
 $base-font-size:				1em;											// Default font sizing for all elements
 $base-line-height:				1.5;											// Default line height for all elements.
@@ -275,6 +275,9 @@ $table-caption-margin:			6px 0 12px;										// Margin for <caption>
 $table-row-padding:				6px;											// Padding for <tr> - both views
 $table-column-padding:			10px;											// Padding for <td> and <th> - desktop view
 $table-head-back-color:			#eceff1;										// Background color for <th>
+$table-head-fore-color:			$fore-color;									// Tex color for <th>
+$table-body-back-color:			#fafafa;										// Background color for <td>
+$table-body-fore-color:			$fore-color;									// Text color for <td>
 $table-mobile-breakpoint:		768px;											// Breakpoint for <table> mobile view
 $table-mobile-card-spacing:		10px;											// Space between <tr> cards - mobile view
 $table-mobile-card-label:		'data-label';									// Attribute used to replace column headers
@@ -285,10 +288,10 @@ $table-mobile-label-font-weight:$bold-font-weight;								// Font weight for mob
 //	in order for their mobile headers to display properly. 
 //	Variables for cards [1]
 $card-name:						'card';											// Class name for cards
-$card-back-color:				#f5f5f5;										// Background color for cards
+$card-back-color:				#fafafa;										// Background color for cards
 $card-fore-color:				$fore-color;									// Text color for cards
 $card-border-style:				1px solid #9e9e9e;								// Border style for cards
-$card-border-radius:			0;											// Border radius for cards
+$card-border-radius:			0;												// Border radius for cards
 $card-margin:					2px 10px 20px;									// Margin for cards
 $card-box-shadow:																// Box shadow for cards
 	0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);					

src/mini/_table.scss

@@ -28,9 +28,22 @@ th, td {
 	border-left: $table-border-style;
 	border-top: $table-border-style;
 }
+td {
+	@if $table-body-back-color != $back-color {
+		background: $table-body-back-color;
+	}
+	@if $table-body-fore-color != $fore-color {
+		color: $table-body-fore-color;
+	}
+}
 th {
 	border-top: 0;
-	background: $table-head-back-color;
+	@if $table-head-back-color != $back-color {
+		background: $table-head-back-color;
+	}
+	@if $table-head-fore-color != $fore-color {
+		color: $table-head-fore-color;
+	}
 }
 th:first-child, td:first-child {
 	border-left: 0;
@@ -67,6 +80,9 @@ th:first-child, td:first-child {
 		@if $table-box-shadow !=0 {
 			box-shadow: $table-box-shadow;
 		}	
+		@if $table-body-back-color != $back-color {
+			background: $table-body-back-color;
+		}
 		margin-bottom: $table-mobile-card-spacing;
 	}
 	td {