a bit more pizzaz to the underlines (max's idea), fading active backg…

…round
apache · Aug 24, 2020 · 6862823 · 6862823
1 parent a86a5d7
commit 6862823
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/superset-frontend/src/components/Menu/Menu.tsx b/superset-frontend/src/components/Menu/Menu.tsx
@@ -70,24 +70,34 @@ const StyledHeader = styled.header`
   }
 
   .navbar-nav > li > a {
+    border-bottom: none;
+    &:focus {
+      border-bottom: none;
+    }
     &:after {
       content: '';
       position: absolute;
       bottom: -3px;
-      left: 0;
-      width: 100%;
+      left: 50%;
+      width: 0;
       height: 3px;
       background-color: ${({ theme }) => theme.colors.primary.base};
       opacity: 0;
-      transition: opacity ${({ theme }) => theme.transitionTiming * 2}s;
+      transform: translateX(-50%);
+      transition: all ${({ theme }) => theme.transitionTiming}s !important;
     }
-    border-bottom: none;
 
     &:hover {
+      border-bottom: none;
       &:after {
         opacity: 1;
+        width: 100%;
       }
     }
+    &:hover,
+    &:focus {
+      margin: 0;
+    }
   }
 
   .nav > li > a {

diff --git a/superset-frontend/src/components/NavDropdown/index.tsx b/superset-frontend/src/components/NavDropdown/index.tsx
@@ -28,10 +28,7 @@ const NavDropdown = styled(RBNavDropdown)`
     transition: background ${({ theme }) => theme.transitionTiming}s;
   }
   &.open > a {
-    background: linear-gradient(
-      ${({ theme }) => theme.colors.primary.light3},
-      ${({ theme }) => theme.colors.primary.light5}
-    ) !important;
+    background: ${({ theme }) => theme.colors.primary.light4} !important;
   }
   .caret {
     display: none;
@@ -67,8 +64,8 @@ const NavDropdown = styled(RBNavDropdown)`
         ${({ theme }) => theme.gridUnit * 4}px;
       transition: all ${({ theme }) => theme.transitionTiming}s;
       &:hover {
-        background: ${({ theme }) => theme.colors.primary.light3};
-        color: black;
+        background: ${({ theme }) => theme.colors.primary.light4};
+        color: ${({ theme }) => theme.colors.grayscale.dark1};
       }
     }
   }