Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Use invisible triangle to prevent accidental hovers when mousing to a subnav item

pull/10616/head
Alex P 2017-08-29 18:54:31 -07:00
parent 9459ff9745
commit 6f5b3bdd3c
2 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/side_nav/components/NavItems.js
View File

@ -86,6 +86,7 @@ const NavBlock = React.createClass({
{this.renderSquare()}
<div className="sidebar-menu">
{children}
<div className="sidebar-menu--triangle" />
</div>
</div>
)

11
ui/src/style/layout/sidebar.scss
View File

@ -93,6 +93,7 @@ $sidebar-menu--gutter: 18px;
*/
.sidebar--item:hover {
cursor: pointer;
z-index: 5;
.sidebar--square {background-color: $sidebar--item-bg-hover;}
.sidebar--icon {color: $sidebar--icon-hover;}
@ -187,3 +188,13 @@ $sidebar-menu--gutter: 18px;
font-weight: 400;
padding: 0px $sidebar-menu--gutter;
}
// Invisible triangle for easier mouse movement when navigating to sub items
.sidebar-menu--item + .sidebar-menu--triangle {
position: absolute;
width: 40px;
height: 40px;
z-index: -1;
top: $sidebar--width;
left: 0px;
transform: translate(-50%,-50%) rotate(45deg);
}