safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-07 05:31:22 +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 * show-menu: Animation for showing the menu
*/ */
@keyframes show-menu { @keyframes show-menu {
from { left: -320px; } from { left: -320px; opacity: 0;}
to { left: 0; } to { left: 0; opacity: 1;}
} }
@-moz-keyframes show-menu { @-moz-keyframes show-menu {
from { left: -320px; } from { left: -320px; opacity: 0;}
to { left: 0; } to { left: 0; opacity: 1;}
} }
@-webkit-keyframes show-menu { @-webkit-keyframes show-menu {
from { left: -320px; } from { left: -320px; opacity: 0;}
to { left: 0; } to { left: 0; opacity: 1;}
} }
/** /**
* hide-menu: Animation for hiding the menu * hide-menu: Animation for hiding the menu
*/ */
@keyframes hide-menu { @keyframes hide-menu {
from { left: 0; } from { left: 0; opacity: 1;}
to { left: -320px; } to { left: -320px; opacity: 0;}
} }
@-moz-keyframes hide-menu { @-moz-keyframes hide-menu {
from { left: 0; } from { left: 0; opacity: 1;}
to { left: -320px; } to { left: -320px; opacity: 0;}
} }
@-webkit-keyframes hide-menu { @-webkit-keyframes hide-menu {
from { left: 0; } from { left: 0; opacity: 1;}
to { left: -320px; } to { left: -320px; opacity: 0;}
} }
#menu { #menu {
overflow: auto; overflow: auto;
position: fixed; position: fixed;
top: 0; top: 0;
left: -320px;
bottom: 0; bottom: 0;
max-width: 100%; max-width: 100%;
width: 320px; width: 320px;
background: #EEE; 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 { #menu .content {
padding: 1em; padding: 1em;
} }
#menu, #menu.closed {
left: -320px;
opacity: 0;
}
#menu.open {
left: 0px;
opacity: 1;
}
#menu.closed { #menu.closed {
animation-name: hide-menu; animation-name: hide-menu;
animation-timing-function: linear; animation-timing-function: linear;
@@ -557,7 +566,6 @@ p.hint {
-webkit-animation-name: hide-menu; -webkit-animation-name: hide-menu;
-webkit-animation-timing-function: linear; -webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.03125s; -webkit-animation-duration: 0.03125s;
left: -320px;
} }
#menu.open { #menu.open {
@@ -567,5 +575,4 @@ p.hint {
-webkit-animation-name: show-menu; -webkit-animation-name: show-menu;
-webkit-animation-timing-function: linear; -webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.03125s; -webkit-animation-duration: 0.03125s;
left: 0px;
} }