refactor(navigation): implemented left navigation new fabric styles

HelixDesignSystem · Apr 19, 2021 · 42633b0 · 42633b0
1 parent 47b5a2b
commit 42633b0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/docs/components/navigation/index.html b/docs/components/navigation/index.html
@@ -45,7 +45,7 @@ <h2 id="left-navigation">Left (Vertical) Navigation</h2>
               <hx-icon class="toggle-icon" type="angle-down"></hx-icon>
             </hx-disclosure>
             <hx-reveal id="section-1-2" open>
-              <a href="#">Link 3-1</a>
+              <a href="#" class="active">Link 3-1</a>
               <a href="#">Link 3-2</a>
               <a href="#">Link 3-3</a>
             </hx-reveal>
@@ -74,7 +74,7 @@ <h2 id="left-navigation">Left (Vertical) Navigation</h2>
                 <hx-icon class="toggle-icon" type="angle-down"></hx-icon>
               </hx-disclosure>
               <hx-reveal id="section-1-2" open>
-                <a href="#">Link 3-1</a>
+                <a href="#" class="active">Link 3-1</a>
                 <a href="#">Link 3-2</a>
                 <a href="#">Link 3-3</a>
               </hx-reveal>

diff --git a/src/scss/components/navigation/_index.scss b/src/scss/components/navigation/_index.scss
@@ -9,8 +9,8 @@
   $l3-indent: 3 * $indent-by;
   $l4-indent: 4 * $indent-by;
 
-  background-color: $gray-975;
-  color: $gray-400;
+  background-color: $gray-50;
+  color: $gray-950;
   font-size: 0.875rem; /* ~14px */
   letter-spacing: 0.75px;
   padding-top: 2rem;
@@ -21,10 +21,11 @@
     display: block;
     padding: $vpad $rpad $vpad $l1-indent;
     position: relative;
+    outline: none;
 
     &:hover {
-      background-color: $gray-800;
-      color: $gray-0;
+      background-color: $gray-200;
+      color: $purple-500;
     }
 
     .toggle-icon {
@@ -37,6 +38,8 @@
     }
 
     &[aria-expanded="true"] {
+      color: $purple-500;
+
       .toggle-icon {
         transform: translateY(-50%) scaleY(-1);
       }
@@ -56,17 +59,28 @@
     text-decoration: none;
 
     &.current {
-      background-color: $gray-900;
-      color: $gray-0;
+      background-color: $gray-200;
+      border-left: 0.125rem solid $purple-500;
+      color: $purple-500;
+      margin-left: 1.25rem;
+      padding-left: 1.125rem;
     }
 
     &:hover {
-      background-color: $gray-800;
-      color: $gray-0;
+      background-color: $gray-200;
+      color: $purple-500;
     }
   }
 
   hx-reveal {
+    a.active {
+      background-color: $gray-200;
+      border-left: 0.125rem solid $purple-500;
+      color: $purple-500;
+      margin-left: 0.3rem;
+      padding-left: 3.25rem !important;
+    }
+
     a[href],
     hx-disclosure {
       padding-left: $l2-indent;