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

GUAC-324: Add menu show/hide animation.

Browse Source
This commit is contained in:
Michael Jumper
2014-04-18 17:14:12 -07:00
parent 5bb629a709
commit ed14b0e909
1 changed files with 53 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -502,14 +502,65 @@ p.hint {
/* Menu */ /* Menu */
/**
* show-menu: Animation for showing the menu
*/
@keyframes show-menu {
from { left: -320px; }
to { left: 0; }
}
@-moz-keyframes show-menu {
from { left: -320px; }
to { left: 0; }
}
@-webkit-keyframes show-menu {
from { left: -320px; }
to { left: 0; }
}
/**
* hide-menu: Animation for hiding the menu
*/
@keyframes hide-menu {
from { left: 0; }
to { left: -320px; }
}
@-moz-keyframes hide-menu {
from { left: 0; }
to { left: -320px; }
}
@-webkit-keyframes hide-menu {
from { left: 0; }
to { left: -320px; }
}
#menu { #menu {
overflow: auto; overflow: auto;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: -320px;
bottom: 0; bottom: 0;
max-width: 100%; max-width: 100%;
width: 320px; width: 320px;
padding: 1em;
background: red; background: red;
} }
#menu.closed {
animation-name: hide-menu;
animation-timing-function: linear;
animation-duration: 0.125s;
-webkit-animation-name: hide-menu;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.125s;
left: -320px;
}
#menu.open {
animation-name: show-menu;
animation-timing-function: linear;
animation-duration: 0.125s;
-webkit-animation-name: show-menu;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.125s;
left: 0px;
}