Merge pull request #1130 from metabase/nav-enhancements

Add transition animations to navbar items.

frontend/app/components/Navbar.react.js

@@ -27,7 +27,6 @@ export default class Navbar extends Component {
                 paddingRight: "1.0rem",
                 paddingTop: "0.75rem",
                 paddingBottom: "0.75rem",
-                boxShadow: "0px 2px 2px 0px rgba(77, 136, 189, 0.69)"
             }
         };
     }
@@ -95,13 +94,13 @@ export default class Navbar extends Component {
             <nav className="CheckBg CheckBg-offset relative bg-brand sm-py2 sm-py1 xl-py3">
                 <ul className="pl4 pr1 flex align-center">
                     <li>
-                        <a className="NavItem cursor-pointer text-white flex align-center my1" href="/">
+                        <a className="NavItem cursor-pointer text-white flex align-center my1 transition-background" href="/">
                             <LogoIcon className="text-white m1"></LogoIcon>
                         </a>
                     </li>
                     <li className="pl3">
                         <DashboardsDropdown {...this.props}>
-                            <a style={this.styles.navButton} className="NavDropdown-button NavItem text-white text-bold cursor-pointer px2 flex align-center">
+                            <a style={this.styles.navButton} className="NavDropdown-button NavItem text-white text-bold cursor-pointer px2 flex align-center transition-background">
                                 <span className="NavDropdown-button-layer">
                                     Dashboards
                                     <Icon className="ml1" name={'chevrondown'} width={8} height={8}></Icon>
@@ -110,12 +109,12 @@ export default class Navbar extends Component {
                         </DashboardsDropdown>
                     </li>
                     <li className="pl1">
-                        <a style={this.styles.navButton} className="NavItem cursor-pointer text-white text-bold no-decoration flex align-center px2" href="/card/">Saved Questions</a>
+                        <a style={this.styles.navButton} className="NavItem cursor-pointer text-white text-bold no-decoration flex align-center px2 transition-background" href="/card/">Saved Questions</a>
                     </li>
                     <li className="pl3">
-                        <a style={this.styles.newQuestion} className="rounded inline-block bg-white text-brand text-bold cursor-pointer px2 no-decoration" href="/q">New <span className="hide sm-show">Question</span></a>
+                        <a style={this.styles.newQuestion} className="NavNewQuestion rounded inline-block bg-white text-brand text-bold cursor-pointer px2 no-decoration transition-all" href="/q">New <span className="hide sm-show">Question</span></a>
                     </li>
-                    <li className="flex-align-right">
+                    <li className="flex-align-right transition-background">
                         <div className="inline-block text-white"><ProfileLink {...this.props}></ProfileLink></div>
                     </li>
                 </ul>

frontend/app/components/ProfileLink.react.js

@@ -52,7 +52,7 @@ export default class ProfileLink extends Component {
         return (
             <OnClickOut onClickOut={this.closeDropdown}>
                 <div className={dropDownClasses}>
-                    <a className="NavDropdown-button NavItem flex align-center p2" onClick={this.toggleDropdown}>
+                    <a className="NavDropdown-button NavItem flex align-center p2 transition-background" onClick={this.toggleDropdown}>
                         <div className="NavDropdown-button-layer">
                             <div className="flex align-center">
                                 <UserAvatar user={user} style={{backgroundColor: 'transparent'}}/>

frontend/app/css/core/transitions.css

 .transition-color {
-    transition: color .3s linear;
+  transition: color .3s linear;
+}
+.transition-background {
+	transition: background .2s linear;
+}
+.transition-shadow {
+  transition: box-shadow .2s linear;
+}
+.transition-all {
+  transition: all .2s linear;
 }

frontend/app/css/home.css

@@ -23,6 +23,13 @@
 .NavItem:hover {
     background-color: rgba(255, 255, 255, 0.08);
 }
+.NavNewQuestion {
+    box-shadow: 0px 2px 2px 0px rgba(77, 136, 189, 0.69);
+}
+.NavNewQuestion:hover {
+    box-shadow: 0px 3px 2px 2px rgba(77, 136, 189, 0.75);
+    color: #3875AC;
+}
 
 .Greeting {
     padding-top: 2rem;