Adjustments to remove border so that primary and secondary nav connec…

…t with tabbing through nav. Fixes openshift#2373 (comment)
sg00dwin · Oct 25, 2017 · c5e3ecd · c5e3ecd
1 parent d912700
commit c5e3ecd
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 115 deletions.
diff --git a/app/styles/_vertical-nav.less b/app/styles/_vertical-nav.less
@@ -29,6 +29,7 @@
       top: 0px;
       width: 100%;
     }
+    &.is-hover,
     &.active > a,
     &:focus > a,
     &:hover > a,
@@ -70,23 +71,36 @@
         text-decoration: none !important;
       }
     }
-    // padding aligns arrow vertically
-    &.secondary-nav-item-pf > a:after {
-      padding: 16px 0;
-      @media(max-width: @screen-xs-max) {
-        padding: 8px 0;
+    &.secondary-nav-item-pf {
+      > a:after {
+        font-size: 14px; // make right arrow size consistent with project-bar arrows
+        padding: 16px 0; // padding aligns arrow vertically
+        @media(max-width: @screen-xs-max) {
+          padding: 8px 0;
+        }
+      }
+      &.is-hover > a {
+        background-color: @nav-pf-vertical-active-bg-color;
+        width: @nav-pf-vertical-width + 1; // cover .nav-pf-vertical border-right
+        z-index: @zindex-navbar-fixed + 1; // raise z-index to overlay
+        &:after {
+          color: @nav-pf-vertical-active-color;
+          right: 21px; // move 1px to offset parent width 1px increase onHover due to pf rules
+        }
       }
-    }
-    // make right arrow size consistent with project-bar arrows
-    &.secondary-nav-item-pf > a:after {
-      font-size: 14px;
     }
   }
   &.collapsed {
-    .list-group-item.secondary-nav-item-pf:hover,
-    .list-group-item.secondary-nav-item-pf.active {
-      > a:after {
-        right: 12px !important; // prevent arrow moving onHover due to pf rules
+    .list-group-item.secondary-nav-item-pf {
+      &.is-hover > a {
+        width: @nav-pf-vertical-collapsed-width + 2; // cover .nav-pf-vertical.collapsed border-right
+      }
+      &.is-hover,
+      &:hover,
+      &.active {
+        > a:after {
+          right: 12px !important; // prevent arrow moving onHover due to pf rules
+        }
       }
     }
     .nav-pf-secondary-nav {