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

Add invisible hover triangle for user menu on small screens

pull/2396/head
Alex P 2017-11-20 19:59:02 -08:00
parent cd1f8c1036
commit f8e285d32b
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -204,15 +204,25 @@ $sidebar-menu--gutter: 18px;
opacity: 0.6;
}
// Invisible triangle for easier mouse movement when navigating to sub items
.sidebar-menu--item + .sidebar-menu--triangle {
.sidebar-menu--item + .sidebar-menu--triangle,
.sidebar-menu--inverse .sidebar-menu--triangle {
position: absolute;
z-index: -1;
}
.sidebar-menu--item + .sidebar-menu--triangle {
width: 40px;
height: 40px;
z-index: -1;
top: $sidebar--width;
left: 0px;
transform: translate(-50%,-50%) rotate(45deg);
}
.sidebar-menu--inverse .sidebar-menu--triangle {
width: 50px;
height: 60px;
bottom: 12px;
left: 6px;
transform: translate(-50%,-50%) rotate(30deg);
}
.sidebar-menu--section {
white-space: nowrap;