Merge pull request #784 from HelixDesignSystem/surf-2091-top-nav-design-feedback

feat(topnav): design feedback for top navigation component

Author: 100stacks

docs/components/topnav/test.html

@@ -7,7 +7,7 @@
 <div id="vue-topNavDemo">
   <nav id="hxTopNav">
     <a class="hxTopNavLogo" href="#">
-      <img src="images/helix-logo.svg" alt="Brand Logo" />
+      <img src="images/helix-logo.svg" alt="Helix Brand Logo" />
     </a>
     <div class="hxTopNavMenu hxTopNavOptionMenu">
       <hx-disclosure

src/scss/components/topnav/index.scss

@@ -2,10 +2,14 @@
 @import "vars";
 @import "./config";
 
+/// * ============================= * ///
+/// * ====== Top Navigation  ====== * ///
+/// * ============================= * ///
+
 #hxTopNav {
   background-color: $gray-1000;
   overflow: hidden;
-  width: 100%;
+  width: 100vw;
 
   .img-left,          // deprecated
   .hxTopNavLogo {
@@ -37,7 +41,7 @@
     background-color: $gray-800;
     height: 2.5rem;
     margin: 0.5rem 0 0.5rem 0.5rem;
-    width: 0.063rem;
+    width: 1px;
   }
 
   .productMenu,       // deprecated
@@ -139,14 +143,15 @@
   #topnavProductDropdown,   // deprecated
   .hxTopNavMenu > hx-menu {
     background-color: $gray-1000;
-    border: 0.063rem solid $gray-1000;
+    border: 1px solid $gray-1000;
     color: $gray-0;
     min-width: 10.5rem;
     padding: 0;
     top: 14.5rem;
 
     hx-menuitem {
       color: $gray-400;
+      padding: 1rem 1.25rem;
     }
 
     hx-menuitem[disabled] {
@@ -155,7 +160,7 @@
       color: $gray-600;
     }
 
-    hx-menuitem:hover {
+    hx-menuitem:not(.hxMenuKey):hover {
       background-color: $gray-900;
       color: $gray-0 !important;
     }
@@ -165,7 +170,12 @@
       color: $gray-600;
       font-size: 0.75rem;
       line-height: 1;
+      padding: 1.25rem 1.25rem 0;
       text-transform: none;
+
+      &:hover {
+        cursor: default;
+      }
     }
 
     .menuValue,       // deprecated
@@ -180,22 +190,22 @@
     .divider,         // deprecated
     .hxDivider {
       border-color: $gray-800;
-      height: 0.063rem;
+      height: 1px;
+      margin: 0.5rem auto;
     }
 
     .sectionHeader,   // deprecated
     > section > header {
       padding-bottom: 0.5rem;
     }
 
-    .sectionBody,   // deprecated
-    > section {
-      padding: 1rem 1.25rem;
-    }
-
     .sectionFooter,   // deprecated
     > section > footer {
+      padding: 0.5rem 1.25rem 1.25rem;
+
       .hxBtn {
+        border-color: $cyan-500;
+        color: $cyan-500;
         margin-left: auto;
         margin-right: auto;
         width: 100%;