safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 21:27:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-324: Separate final open/closed state from transitional animation. Animate opacity (otherwise shadow is visible when hidden).

Browse Source
This commit is contained in:
Michael Jumper
2014-04-19 17:04:42 -07:00
parent d3dc38f869
commit 06139e19a0
1 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
guacamole/src/main/webapp/styles/client.css
View File

@@ -506,50 +506,59 @@ p.hint {
* show-menu: Animation for showing the menu
*/
@keyframes show-menu {
from { left: -320px; }
to { left: 0; }
from { left: -320px; opacity: 0;}
to { left: 0; opacity: 1;}
}
@-moz-keyframes show-menu {
from { left: -320px; }
to { left: 0; }
from { left: -320px; opacity: 0;}
to { left: 0; opacity: 1;}
}
@-webkit-keyframes show-menu {
from { left: -320px; }
to { left: 0; }
from { left: -320px; opacity: 0;}
to { left: 0; opacity: 1;}
}
/**
* hide-menu: Animation for hiding the menu
*/
@keyframes hide-menu {
from { left: 0; }
to { left: -320px; }
from { left: 0; opacity: 1;}
to { left: -320px; opacity: 0;}
}
@-moz-keyframes hide-menu {
from { left: 0; }
to { left: -320px; }
from { left: 0; opacity: 1;}
to { left: -320px; opacity: 0;}
}
@-webkit-keyframes hide-menu {
from { left: 0; }
to { left: -320px; }
from { left: 0; opacity: 1;}
to { left: -320px; opacity: 0;}
}
#menu {
overflow: auto;
position: fixed;
top: 0;
left: -320px;
bottom: 0;
max-width: 100%;
width: 320px;
background: #EEE;
box-shadow: inset -1px 0 2px white, 1px 0 2px black;
box-shadow: inset -1px 0 2px white, 1px 0 2px black;
}
#menu .content {
padding: 1em;
}
#menu, #menu.closed {
left: -320px;
opacity: 0;
}
#menu.open {
left: 0px;
opacity: 1;
}
#menu.closed {
animation-name: hide-menu;
animation-timing-function: linear;
@@ -557,7 +566,6 @@ p.hint {
-webkit-animation-name: hide-menu;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.03125s;
left: -320px;
}
#menu.open {
@@ -567,5 +575,4 @@ p.hint {
-webkit-animation-name: show-menu;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.03125s;
left: 0px;
}