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

Merge pull request #2396 from influxdata/user-menu-inverse-triangle 

Add invisible hover triangle for user menu on small screens
pull/2401/head
Alex Paxton 2017-11-21 09:35:20 -08:00 committed by GitHub
parent c1856f8323 f8e285d32b
commit 555bdc3086
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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;