Added navigation subcategory sidebar

dist/mini-default.css

@@ -661,9 +661,27 @@ nav {
     display: block;
     color: #1565c0; }
   nav .sublink-1 {
-    padding-left: 12px; }
+    padding-left: 12px;
+    position: relative; }
+    nav .sublink-1:before {
+      position: absolute;
+      left: 3px;
+      top: -1px;
+      content: '';
+      height: 100%;
+      border: 1px solid #78909c;
+      border-left: 0; }
   nav .sublink-2 {
-    padding-left: 24px; }
+    padding-left: 24px;
+    position: relative; }
+    nav .sublink-2:before {
+      position: absolute;
+      left: 3px;
+      top: -1px;
+      content: '';
+      height: 100%;
+      border: 1px solid #78909c;
+      border-left: 0; }
 
 footer {
   display: block;

docs/v2/DEVLOG.md

@@ -784,4 +784,6 @@
 
 ## 20170127
 
-- `tooltip` updated, dealing with a small misalignment bug in alterante styles.
+- `tooltip` updated, dealing with a small misalignment bug in alternate styles.
+- Added `$nav-include-sublink-bar` flag for `nav` element's subcategories to add a sidebar to them. Styled them as necessary and used proper variables. Tested reasonably extensively, no bugs should be present.
+- With the addition of the new `nav` sidebar to the main flavor, the file size is now `6.86KB`. This is very close to the final size for the *v2.1.0* release, as most of the new features have been added already.

docs/v2/demo.html

@@ -152,16 +152,20 @@
 			  <li>File</li>
 			</ul>
 		</div>
-		<style>
-		.tooltip:before, .tooltip:after {
-			opacity: 1 !important;
-			clip: auto !important;
-			-webkit-clip-path: inset(0%) !important;
-					clip-path: inset(0%) !important;
-			}
-			}</style>
 		<div class="col-md-offset-1">
 			<mark class="tooltip large" aria-label="This is some sample tooltip text">Show a tooltip while hovering</mark><br /><br /><br />
+			<nav>
+			  <a href="#">Home</a>
+			  <span>News</span>
+			  <a href="#" class="sublink-1">New Courses</a>
+			  <a href="#" class="sublink-1">Certifications</a>
+			  <span class="sublink-1">Events</span>
+			  <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
+			  <a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
+			  <a href="#" class="sublink-1">Policy Update</a>
+			  <a href="#">About</a>
+			  <a href="#">Contact</a>
+			</nav>
 		</div>
 	  </div>
 

src/flavors/mini-default.scss

@@ -191,6 +191,11 @@ $nav-link-fore-color:			#1565c0;										// Text color for links in <nav>
 $nav-sublink-prefix:			'sublink';										// Prefix for the subcategory links in <nav>
 $nav-sublink-depth:				2;												// Amount of subcategory classes to add
 $nav-sublink-padding-left:		12px;											// Left padding to add to subcategories
+$nav-include-sublink-bar:		true;											// Should a left border bar be added to
+																				// subcategories (`true`/`false`) [2]
+$nav-sublink-bar-left-position: 3px;											// Left position of subcategory bar
+$nav-sublink-bar-width:			1px;											// Width of the subcategory bar
+$nav-sublink-bar-color:			#78909c;										// Subcategory bar color	
 $footer-back-color:				#263238;										// Background color for <footer>
 $footer-fore-color:				#fafafa;										// Text color for <footer>
 $footer-border-style:			0;												// Border stye for <footer>
@@ -199,12 +204,14 @@ $footer-margin:					18px 0 0;										// Margin for <footer>
 $footer-padding:				22px 10px 12px;									// Padding for <footer>
 $footer-link-fore-color:		#039be5;										// Text color for links in <footer>
 $include-footer-sticky:			true;											// Should sticky <footer> elements be
-																				// included (`true`/`false`) [2]
+																				// included (`true`/`false`) [3]
 $footer-sticky-name:			'sticky';										// Class name for sticky <footer> elements
 //	Notes:
 // [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
 //	of <header> elements, using the value of $header-sticky-name for the name of the class.
-// [2] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
+// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
+//	subcategories, using the values specified.
+// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
 //	of <footer> elements, using the value of $footer-sticky-name for the name of the class.
 //	Variables for forms and inputs
 $form-back-color:				#eeeeee;										// Background color for forms

src/mini/_navigation.scss

@@ -104,9 +104,22 @@ nav {
 	$nav-sublink-prefix:			'sublink' !default;				// Prefix for the subcategory tabs in nav
 	$nav-sublink-depth:				2 !default;						// Amount of subcategory classes to add
 	$nav-sublink-padding-left:		12px !default;					// Left padding to add to subcategories
+	$nav-include-sublink-bar: 		false !default;					// Should a border be added to the subcategories?
 	@for $i from 1 through $nav-sublink-depth {
 		.#{$nav-sublink-prefix}-#{$i} {
 			padding-left: $i * $nav-sublink-padding-left;
+			position: relative;
+			@if $nav-include-sublink-bar {
+				&:before {
+					position: absolute;
+					left: $nav-sublink-bar-left-position;
+					top: -$nav-sublink-bar-width;
+					content: '';
+					height: 100%;
+					border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
+					border-left: 0;
+				}
+			}
 		}
 	}
 }