Nav styling

Styling for sidebar navigation

docs/v3/DEVLOG.md

@@ -120,3 +120,5 @@
 - Realized that `header` button-like elements don't need that high a specificity, provided that they should always appear after the definitions of `input_control`, thus lowered the specificity. This will trim off a couple of bytes, but it might eventually cause problems. Remember this decision should that happen and blame the **hugging cat**.
 - Figured out the `line-height` thing for the afforementioned elements.
 - Styled `.logo` in `header`. The styling is now far simpler and easier to use.
+- Removed `display:block` fix from `nav` as it was targeting IE 9-.
+- Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`.

docs/v3_dev/src/App.js

@@ -13,9 +13,18 @@ class App extends Component {
         </header>
         <div className="row" id="doc-wrapper">
           <input type="checkbox" id="doc-drawer-checkbox" />
-          <nav className="drawer col-md-4 col-lg-3" id="doc-drawer">
+          <nav>
-            <label htmlFor="doc-drawer-checkbox" className="button drawer-toggle close"></label>
+  <a href="#">Home</a>
-          </nav>
+  <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>
           <main className="col-sm-12 col-md-8 col-lg-9" id="doc-content">
             <button>Home</button><a href="#" class="button">News</a>
           </main>

docs/v3_dev/src/index.css

@@ -774,6 +774,10 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
   --header-hover-back-color: #f0f0f0;
   --header-fore-color: #444;
   --header-border-color: #ddd;
+  --nav-back-color: #f8f8f8;
+  --nav-hover-back-color: #f0f0f0;
+  --nav-fore-color: #444;
+  --nav-border-color: #ddd;
 }
 
 header {
@@ -817,6 +821,61 @@ header button:hover, header button:focus, header [type="button"]:hover, header [
   background: var(--header-hover-back-color);
 }
 
+nav {
+  background: var(--nav-back-color);
+  color: var(--nav-fore-color);
+  border: 0.0625rem solid var(--nav-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+  padding: 0;
+}
+
+nav * {
+  padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
+}
+
+nav a, nav a:visited {
+  display: block;
+  color: var(--a-link-color);
+  border-radius: var(--universal-border-radius);
+  transition: background 0.3s;
+}
+
+nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus {
+  text-decoration: none;
+  background: var(--nav-hover-back-color);
+}
+
+nav .sublink-1 {
+  position: relative;
+  margin-left: calc(2 * var(--universal-padding));
+}
+
+nav .sublink-1:before {
+  position: absolute;
+  left: calc(var(--universal-padding) - 1 * var(--universal-padding));
+  top: -0.0625rem;
+  content: '';
+  height: 100%;
+  border: 0.0625rem solid var(--nav-border-color);
+  border-left: 0;
+}
+
+nav .sublink-2 {
+  position: relative;
+  margin-left: calc(4 * var(--universal-padding));
+}
+
+nav .sublink-2:before {
+  position: absolute;
+  left: calc(var(--universal-padding) - 3 * var(--universal-padding));
+  top: -0.0625rem;
+  content: '';
+  height: 100%;
+  border: 0.0625rem solid var(--nav-border-color);
+  border-left: 0;
+}
+
 header.sticky {
   position: -webkit-sticky;
   position: sticky;
@@ -970,50 +1029,6 @@ p.splash {
   clip-path: inset(100%);
 }
 
-nav {
-  display: block;
-  background: #eceff1;
-  border: 0.0625rem solid #c9c9c9;
-  margin: 0.5rem;
-  padding: 0.75rem 1rem;
-}
-
-nav a, nav a:visited {
-  display: block;
-  color: #145caf;
-  text-decoration: none;
-}
-
-nav .sublink-1 {
-  padding-left: 1rem;
-  position: relative;
-}
-
-nav .sublink-1:before {
-  position: absolute;
-  left: 0.1875rem;
-  top: -0.0625rem;
-  content: '';
-  height: 100%;
-  border: 0.0625rem solid #bdbdbd;
-  border-left: 0;
-}
-
-nav .sublink-2 {
-  padding-left: 2rem;
-  position: relative;
-}
-
-nav .sublink-2:before {
-  position: absolute;
-  left: 0.1875rem;
-  top: -0.0625rem;
-  content: '';
-  height: 100%;
-  border: 0.0625rem solid #bdbdbd;
-  border-left: 0;
-}
-
 .drawer-toggle:before {
   position: relative;
   top: 0.4375rem;

src/flavors/mini-doc.scss

@@ -126,31 +126,6 @@ p.splash {
   }
 }
 
-// TODO: Replace with actual header when ready
-// header {
-//   display: block;
-//   height: 3.25rem;
-//   background: #f8f8f8;
-//   color: #444;
-//   padding: 0.125rem 0.5rem;
-//   white-space: nowrap;
-//   overflow-x: auto;
-//   overflow-y: hidden;
-//   position: sticky;
-//   border-bottom: 1px solid #ddd;
-//   top: 0;
-//   text-transform: uppercase;
-//   // Rough testing draft, not for production use
-//   line-height: 3.5rem;
-//   font-weight: 500;
-//   cursor: pointer;
-//   &:hover {
-//     color: #111;
-//   }
-// }
-
-// TODO: Use module, copied from v2
-
 [type="checkbox"], [type="radio"] {
   height: 1px;
   width: 1px;
@@ -162,49 +137,6 @@ p.splash {
   clip-path: inset(100%);
 }
 
-nav {
-  display: block;
-  background: #eceff1;
-  border: 0.0625rem solid #c9c9c9;
-  margin: 0.5rem;
-  padding: 0.75rem 1rem;
-}
-
-nav a, nav a:visited {
-  display: block;
-  color: #145caf;
-  text-decoration: none;
-}
-
-nav .sublink-1 {
-  padding-left: 1rem;
-  position: relative;
-}
-
-nav .sublink-1:before {
-  position: absolute;
-  left: 0.1875rem;
-  top: -0.0625rem;
-  content: '';
-  height: 100%;
-  border: 0.0625rem solid #bdbdbd;
-  border-left: 0;
-}
-
-nav .sublink-2 {
-  padding-left: 2rem;
-  position: relative;
-}
-
-nav .sublink-2:before {
-  position: absolute;
-  left: 0.1875rem;
-  top: -0.0625rem;
-  content: '';
-  height: 100%;
-  border: 0.0625rem solid #bdbdbd;
-  border-left: 0;
-}
 
 .drawer-toggle:before {
   position: relative;

src/mini/_navigation.scss

@@ -7,22 +7,36 @@ $header-back-color: #f8f8f8 !default;        // Background color for the header
 $header-hover-back-color: #f0f0f0 !default;  // Background color for the header element (hover).
 $header-fore-color:   #444 !default;         // Text color for the header element.
 $header-border-color: #ddd !default;         // Border color for the header element.
+$nav-back-color:      #f8f8f8 !default;      // Background color for the header element.
+$nav-hover-back-color: #f0f0f0 !default;     // Background color for the header element (hover).
+$nav-fore-color:      #444 !default;         // Text color for the header element.
+$nav-border-color:    #ddd !default;         // Border color for the header element.
 $_header-only-bottom-border:  true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
 $_header-links-uppercase:     true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
 $header-logo-name:    'logo' !default;       // Class name for the header logo element.
 $header-logo-font-size: 1.75rem !default;    // Font ize for the header logo element.
+$nav-sublink-prefix:   'sublink' !default;   // Prefix for the subcategory tabs in nav.
+$nav-sublink-depth:    2 !default;           // Amount of subcategory classes to add.
 $sticky-name:         'sticky' !default;     // Class name for sticky headers and footers.
 // CSS variable name definitions [exercise caution if modifying these]
 $header-fore-color-var:          '--header-fore-color' !default;
 $header-back-color-var:          '--header-back-color' !default;
 $header-hover-back-color-var:    '--header-hover-back-color' !default;
 $header-border-color-var:        '--header-border-color' !default;
+$nav-fore-color-var:             '--nav-fore-color' !default;
+$nav-back-color-var:             '--nav-back-color' !default;
+$nav-hover-back-color-var:       '--nav-hover-back-color' !default;
+$nav-border-color-var:           '--nav-border-color' !default;
 /* Navigation module CSS variable definitions */
 :root {
   #{$header-back-color-var}: $header-back-color;
   #{$header-hover-back-color-var}: $header-hover-back-color;
   #{$header-fore-color-var}: $header-fore-color;
   #{$header-border-color-var}: $header-border-color;
+  #{$nav-back-color-var}: $nav-back-color;
+  #{$nav-hover-back-color-var}: $nav-hover-back-color;
+  #{$nav-fore-color-var}: $nav-fore-color;
+  #{$nav-border-color-var}: $nav-border-color;
 }
 // Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
 header {
@@ -72,6 +86,47 @@ header {
     }
   }
 }
+// Navigation sidebar styling.
+nav {
+  background: var(#{$nav-back-color-var});
+  color: var(#{$nav-fore-color-var});
+  border: $__1px solid var(#{$nav-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  padding: 0;
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  * {
+    padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
+  }
+  a, a:visited {
+    display: block;
+    color: var(#{$a-link-color-var});    // Apply regardless to de-stylize visited links.
+    border-radius: var(#{$universal-border-radius-var});
+    transition: background 0.3s;
+    &:hover, &:focus {
+      text-decoration: none;
+      background: var(#{$a-hover-back-color-var});
+    }
+  }
+  // Subcategories in navigation.
+  @for $i from 1 through $nav-sublink-depth {
+    .#{$nav-sublink-prefix}-#{$i} {
+      position: relative;
+      margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
+      &:before {
+        position: absolute;
+        left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
+        top: -#{$__1px};
+        content: '';
+        height: 100%;
+        border: $__1px solid var(#{$nav-border-color-var});
+        border-left: 0;
+      }
+    }
+  }
+}
 // TODO: Add footer definitions here.
 // Definitions for sticky headers and footers.
 header.#{$sticky-name} {