refactor(secnav): implement feedback

* fix topnav user menu chevron

Author: 100stacks

docs/components/secnav/test.html

@@ -84,7 +84,8 @@
   <nav id="hxSecNav">
     <a href="#" class="hxNavLink">SecNav One</a>
     <hx-disclosure aria-controls="secnav-option-menu">
-      <span>SecNav Two</span><hx-icon class="hxPrimary" type="angle-down"></hx-icon>
+      <span>SecNav Two</span>
+      <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
     </hx-disclosure>
     <hx-menu id="secnav-option-menu">
       <section>
@@ -95,7 +96,8 @@
       </section>
     </hx-menu>
     <hx-disclosure aria-controls="secnav-option-menu-two">
-      <span>SecNav Three</span><hx-icon class="hxPrimary" type="angle-down"></hx-icon>
+      <span>SecNav Three</span>
+      <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
     </hx-disclosure>
     <hx-menu id="secnav-option-menu-two">
       <section>
@@ -121,7 +123,8 @@
       </section>
     </hx-menu>
     <hx-disclosure aria-controls="secnav-option-menu-three">
-      <span>SecNav Four</span><hx-icon class="hxPrimary" type="angle-down"></hx-icon>
+      <span>SecNav Four</span>
+      <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
     </hx-disclosure>
     <hx-menu class = "hxSecNavTwoColMenu" id="secnav-option-menu-three">
       <section class="hxLeftColMenu">

src/scss/components/secnav/index.scss

@@ -7,6 +7,7 @@
 /// * =================================== * ///
 
 #hxSecNav {
+  display: flex; // prevent browser injected whitespace
   background-color: $gray-0;
   background-color: var(--hxSecNav-bgcolor, $gray-0);
   border-bottom: 0.125rem solid $gray-300;
@@ -19,7 +20,6 @@
   > hx-disclosure {
     color: $gray-950;
     color: var(--hxSecNav-hxNavLink-color, $gray-950);
-    display: inline-block;
     font-size: 1rem;
     height: 3.75rem;
     padding: 1.25rem;
@@ -31,7 +31,8 @@
       color: $purple-500 !important;
       color: var(--hxSecNav-hxDisclosure-hover-color, $purple-500) !important;
 
-      > hx-icon, > span {
+      > hx-icon,
+      > span {
         color: $purple-500 !important;
         color: var(--hxSecNav-hxDisclosure-hover-color, $purple-500) !important;
       }
@@ -41,6 +42,19 @@
       color: $gray-0;
       color: var(--hxSecNav-hxNavLink-active-color, $gray-0);
     }
+
+    .hxPrimary { // override Reveal component defaults
+      font-size: 0.75em;
+      pointer-events: none;
+      transform: translateY(-50%);
+    }
+
+    &[aria-expanded="true"] {
+      .hxPrimary {
+        font-size: 0.75em;
+        transform: translateY(-50%) scaleY(-1);
+      }
+    }
   }
 
   .hxNavLink {
@@ -49,13 +63,14 @@
 
   > hx-disclosure {
     margin-right: -0.25rem;
+    display: flex; // prevent browser injected whitespace
 
     > hx-icon {
       color: $gray-600;
       color: var(--hxSecNav-hxDisclosure-hxIcon-color, $gray-600);
       font-size: 1rem;
       margin-left: 0.5rem;
-      margin-top: 0.25rem;
+      margin-top: 0.813rem; // 13px
       width: 0.75rem;
     }
 
@@ -71,9 +86,10 @@
     }
 
     &[aria-expanded="true"] {
-      > hx-icon, > span {
+      > hx-icon > span {
         color: $purple-500;
         color: var(--hxSecNav-hxDisclosure-aria-expanded-color, $purple-500);
+        transform: translateY(50%) scaleY(-1);
       }
     }
   }

src/scss/components/topnav/index.scss

@@ -59,6 +59,7 @@
     > hx-disclosure {
       border-bottom: 2px solid $purple-500;
       border-bottom: 2px solid var(--hxTopNav-hxTopNavOptionMenu-borderbottom, $purple-500);
+      font-size: 0; // remove browser injected whitespace
       height: 3.8rem;
       padding: 0.625rem 1.25rem 0;
       width: auto;
@@ -87,7 +88,6 @@
 
     hx-icon {
       font-size: 0.938rem;
-      height: 1.375rem;
       margin: 0.688rem 0 0.313rem;
       width: 1.25rem;
     }
@@ -120,6 +120,7 @@
   #topnav-menu,         // deprecated
   #topnav-productMenu,  // deprecated
   .hxTopNavMenu > hx-disclosure {
+    font-size: 0;
     height: 3.8rem;
     outline: none;
     padding: 1.3rem 1.25rem 1.12rem 1rem;