Tabs module mostly complete

docs/v2/DEVLOG.md

@@ -338,3 +338,7 @@
 - Added mixin `make-spinner-donut-alt-color` to allow for custom `spinner` styles. No optimizations are applied to this mixin, due to the fact that overwriting the background might cause trouble with the foreground etc.
 - Optimized and softcoded most of the `spinner` module's stuff.
 - Tested `tab` system for a while, tried out a lot of things, hardcoded demo.
+- Fixed a variable naming discrepancy with `$tab-container-name`/`$tabs-container-name`.
+- Softcoded `tab` module with variables. Optimized.
+- Added responsiveness to `tab` module.
+- Tested `tab` module thoroughly on both Firefox and Chrome (PC), will test further on phone.

flavors/v2/mini-default.css

@@ -883,20 +883,29 @@ progress {
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap; }
   .tabs > label {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+    -webkit-order: 1;
+    order: 1;
     display: inline-block;
     height: 26px;
-    border: 1px solid #bdbdbd;
-    padding: 4px;
-    order: 1;
     cursor: pointer;
-    -webkit-box-flex: 1;
+    background: #e0e0e0;
-    flex-grow: 1; }
+    border: 1px solid #9e9e9e;
+    padding: 4px 6px; }
+    .tabs > label:first-of-type {
+      border-top-left-radius: 2px; }
+    .tabs > label:last-of-type {
+      border-top-right-radius: 2px; }
   .tabs > [type="radio"] {
     display: none;
     visibility: hidden; }
   .tabs > [type="radio"] + label + div {
-    order: 2;
+    -webkit-flex-basis: auto;
     flex-basis: auto;
+    -webkit-order: 2;
+    order: 2;
     height: 1px;
     width: 1px;
     margin: -1px;
@@ -904,33 +913,55 @@ progress {
     position: absolute;
     clip: rect(0 0 0 0);
     -webkit-clip-path: inset(100%);
-    clip-path: inset(100%); }
+    clip-path: inset(100%);
+    transition: height 0.3s ease 0s;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px; }
     .tabs > [type="radio"] + label + div + [type="radio"] + label {
       border-left: 0; }
   .tabs > [type="radio"]:checked + label {
-    background: blue; }
+    background: #bdbdbd; }
   .tabs > [type="radio"]:checked + label + div {
     box-sizing: border-box;
     position: relative;
+    height: 400px;
     width: 100%;
-    height: 320px;
+    overflow: auto;
     margin: 0;
-    border: 1px solid #bdbdbd;
+    border: 1px solid #9e9e9e;
     border-top: 0;
+    padding: 6px;
     clip: auto;
     -webkit-clip-path: inset(0%);
     clip-path: inset(0%); }
 
-@media (max-width: 800px) {
+@media only screen and (max-width: 800px) {
   .tabs {
+    -webkit-box-orient: vertical;
+    -webkit-flex-direction: column;
     flex-direction: column; }
     .tabs > label {
+      -webkit-order: initial;
       order: initial; }
+      .tabs > label:first-of-type {
+        border-top-right-radius: 2px; }
+      .tabs > label:last-of-type {
+        border-top-right-radius: 0;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px; }
+    .tabs > [type="radio"]:checked + label {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0; }
     .tabs > [type="radio"] + label + div {
-      order: initial; }
+      -webkit-order: initial;
+      order: initial;
+      border-radius: 0; }
       .tabs > [type="radio"] + label + div + [type="radio"] + label {
-        border: 1px solid #bdbdbd;
+        border: 1px solid #9e9e9e;
-        border-top: 0; } }
+        border-top: 0; }
+    .tabs > [type="radio"] + label + div:last-of-type {
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px; } }
 @-webkit-keyframes spinner-dot-anim {
   to {
     -webkit-transform: translateY(-6em); } }

flavors/v2/mini-default.scss

@@ -360,7 +360,20 @@ $accordion-margin-bottom:		2px;											// Bottom margin for accordion
 $accordion-separator-border-style:												// Border style for the accordion's separators
 								1px solid #bdbdbd;								// (border between label and content)
 //	Variables for tabs
-$tabs-container-name:			'tabs';											// Class name for the tabs' container
+$tab-container-name:			'tabs';											// Class name for the tabs' container
+$tab-label-back-color:			#e0e0e0;										// Background color for tabs' labels
+$tab-label-fore-color:			$fore-color;									// Text color for tabs' labels
+$tab-label-selected-back-color:	#bdbdbd;										// Background color for open tab's label
+$tab-label-selected-fore-color:	$fore-color;									// Text color for open tab's label
+$tab-label-padding:				4px 6px;										// Padding for tabs' labels
+$tab-label-height:				26px;											// Height for tabs' labels
+$tab-border-style:				1px solid #9e9e9e;								// Border style for tabs
+$tab-border-radius:				2px;											// Border radius for tabs
+$tab-panel-back-color:			$back-color;									// Background color for tabs' panels
+$tab-panel-fore-color:			$fore-color;									// Text color for tabs' panels
+$tab-panel-padding:				6px;											// Padding for tabs' panels
+$tab-panel-height:				400px;											// Height for tabs' panels
+$tab-stacked-breakpoint:		$grid-medium-breakpoint;						// Breakpoint for tabs layout (stacked/horizontal)
 //	Variables for spinners
 $spinner-dot-name:				'spinner-dot';									// Class name for dot spinner
 $spinner-dot-font-size:			1em;											// Font size for dot spinner

scss/v2/mini-shell/_tab.scss

@@ -1,7 +1,8 @@
 // Definitions for tabs/horizontal accordions.
+// Dependency: This module is somewhat dependent on the grid system.
 // Tab styling
 $tab-container-name:			'tabs' !default;								// Class name for the tabs container
-.#{$tabs-container-name} {
+.#{$tab-container-name} {
 	width: 100%;
 // Old syntax
 	display: -webkit-box;
@@ -15,16 +16,39 @@ $tab-container-name:			'tabs' !default;								// Class name for the tabs contai
   			flex-wrap: wrap;
 // Tab label styling
 & > label {	
-	display: inline-block;
-	height: 26px;
-	border: 1px solid #bdbdbd;
-	padding: 4px;
-	order: 1;
-	cursor: pointer;
 // Old syntax
 	-webkit-box-flex: 1;
 // New syntax
-	flex-grow: 1;
+	-webkit-flex-grow: 1;
+			flex-grow: 1;
+// Make tab labels stay at the top on large displays
+	-webkit-order: 1;
+			order: 1;
+// Actual styling		
+	display: inline-block;
+	height: $tab-label-height;
+	cursor: pointer;
+@if $tab-label-back-color != $back-color {
+	background: $tab-label-back-color;
+}
+@if $tab-label-fore-color != $fore-color {
+	color: $tab-label-fore-color;
+}
+@if $tab-border-style != 0 {
+	border: $tab-border-style;
+}
+@if $tab-label-padding != 0 {
+	padding: $tab-label-padding;
+}
+@if $tab-border-radius != 0 {	// Style first and last tabs' labels' top corners as needed
+&:first-of-type {
+	border-top-left-radius: $tab-border-radius;
+}
+&:last-of-type {
+	border-top-right-radius: $tab-border-radius;
+}
+}
+					// TODO ADD HOVER STYLES HERE AND ON ACCORDION
 }
 // Tab radio styling
 & > [type="radio"] {
@@ -33,9 +57,13 @@ $tab-container-name:			'tabs' !default;								// Class name for the tabs contai
 }
 // Tab content styling
 & > [type="radio"] + label + div {
-	order: 2;
+// New syntax
-	flex-basis: auto;
+	-webkit-flex-basis: auto;
-	// Hide content, while allowing accessibility
+			flex-basis: auto;
+// Make tab panels display after all the labels on larger displays
+	-webkit-order: 2;
+			order: 2;
+// Hide content, while allowing accessibility
 	height: 1px;
 	width: 1px;
     margin: -1px;
@@ -44,43 +72,100 @@ $tab-container-name:			'tabs' !default;								// Class name for the tabs contai
 	clip: rect(0 0 0 0);
     -webkit-clip-path: inset(100%);
     		clip-path: inset(100%);
-    + [type="radio"] + label {
+	transition: height 0.3s ease 0s;
-		border-left: 0;
+// Style for tab labels except the first
-	}
+@if $tab-border-style != 0 {
++ [type="radio"] + label {
+	border-left: 0;
 }
-// Tab content styling (visible)
+}
+@if $tab-border-radius != 0 {
+	border-bottom-left-radius: $tab-border-radius;
+	border-bottom-right-radius: $tab-border-radius;
+}
+}
+// Tab label styling for open tab
 & > [type="radio"]:checked + label {
-	background: blue;
+@if $tab-label-selected-back-color != $tab-label-back-color {
+	background: $tab-label-selected-back-color;
 }
+@if $tab-label-selected-fore-color != $tab-label-fore-color {
+	color: $tab-label-selected-fore-color;
+}
+}
+// Tab content styling (open tab)
 & > [type="radio"]:checked + label + div {
-
 	box-sizing: border-box;
 	position: relative;
+	height: $tab-panel-height;
 	width: 100%;
-	height: 320px;
+	overflow: auto;
 	margin: 0;
-	border: 1px solid #bdbdbd;
+@if $tab-panel-back-color != $back-color {
-
+	background: $tab-panel-back-color;
+}
+@if $tab-panel-fore-color != $fore-color {
+	color: $tab-panel-fore-color;
+}
+@if $tab-border-style != 0 {
+	border: $tab-border-style;
 	border-top: 0;
+}
+@if $tab-panel-padding != 0 {
+	padding: $tab-panel-padding;
+}
+// Fix display for some browsers
 	clip: auto;
     -webkit-clip-path: inset(0%);
     		clip-path: inset(0%);
 }
 }
-
+// Responsiveness
-@media (max-width: 800px){
+@media only screen and (max-width: #{$tab-stacked-breakpoint}) {
-.tabs {
+.#{$tab-container-name} {
-	flex-direction: column;
+// Old syntax
-	& > label {
+	-webkit-box-orient: vertical;
-		order: initial;
+// New syntax
-		
+	-webkit-flex-direction: column;
-	}
+			flex-direction: column;
-	& > [type="radio"] + label + div {
+& > label {
-		order: initial;
+	-webkit-order: initial;		// Reset order to show stacked tabs properly
-		+ [type="radio"] + label {
+			order: initial;		
-			border: 1px solid #bdbdbd;
+@if $tab-border-radius != 0 {	// Style first and last tabs' labels' corners as needed
-			border-top: 0;
+&:first-of-type {
-		}
+	border-top-right-radius: $tab-border-radius;
-	}
+}
+&:last-of-type {
+	border-top-right-radius: 0;
+	border-bottom-left-radius: $tab-border-radius;
+	border-bottom-right-radius: $tab-border-radius;
+}
+}
+}
+@if $tab-border-radius != 0 {	// Style the last tabs' label corners when it's open as needed
+& > [type="radio"]:checked + label {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+}
+& > [type="radio"] + label + div {
+	-webkit-order: initial;		// Reset order to show stacked tabs properly
+			order: initial;	
+@if $tab-border-radius != 0 {
+	border-radius: 0;
+}
+& + [type="radio"] + label {
+@if $tab-border-style != 0 {
+	border: $tab-border-style;
+	border-top: 0;
+}
+}
+}
+@if $tab-border-radius != 0 {
+& > [type="radio"] + label + div:last-of-type {
+	border-bottom-left-radius: $tab-border-radius;
+	border-bottom-right-radius: $tab-border-radius;
+}
+}
 }
 }