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

GUAC-1052: Fix rendering of flexbox menu in older browsers.

Browse Source
This commit is contained in:
Michael Jumper
2015-02-18 14:11:10 -08:00
parent 16055e58b0
commit 0190317264
2 changed files with 140 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
guacamole/src/main/webapp/app/client/styles/menu.css
View File

@@ -77,10 +77,61 @@
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
/* IE10 */
display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-direction: row;
/* Ancient Mozilla */
display: -moz-box;
-moz-box-align: center;
-moz-box-orient: horizontal;
/* Ancient WebKit */
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-orient: horizontal;
/* Old WebKit */
display: -webkit-flex;
-webkit-align-items: center;
-webkit-flex-direction: row;
/* W3C */
display: flex;
align-items: center;
flex-direction: row;
padding: 0.75em 0.5em;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
background: rgba(0, 0, 0, 0.04);
}
.menu-header h2 {
margin-bottom: 0;
.menu-header > * {
-ms-flex: 0 0 auto;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
.menu-header > h2 {
-ms-flex: 1 0 auto;
-moz-box-flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
border: none;
padding: 0;
box-shadow: none;
background: none;
margin: 0;
}
.menu-body {
@@ -91,20 +142,100 @@
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
padding: 1em;
overflow: auto;
/* IE10 */
display: -ms-flexbox;
-ms-flex-align: stretch;
-ms-flex-direction: column;
/* Ancient Mozilla */
display: -moz-box;
-moz-box-align: stretch;
-moz-box-orient: vertical;
/* Ancient WebKit */
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-orient: vertical;
/* Old WebKit */
display: -webkit-flex;
-webkit-align-items: stretch;
-webkit-flex-direction: column;
/* W3C */
display: flex;
align-items: stretch;
flex-direction: column;
}
.menu-body > * {
-ms-flex: 0 0 auto;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
#menu h3 {
margin: 1em;
margin: 0;
padding: 0;
padding-bottom: 1em;
}
#menu .content {
margin: 1em;
padding: 0;
margin: 0;
/* IE10 */
display: -ms-flexbox;
-ms-flex-align: stretch;
-ms-flex-direction: column;
/* Ancient Mozilla */
display: -moz-box;
-moz-box-align: stretch;
-moz-box-orient: vertical;
/* Ancient WebKit */
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-orient: vertical;
/* Old WebKit */
display: -webkit-flex;
-webkit-align-items: stretch;
-webkit-flex-direction: column;
/* W3C */
display: flex;
align-items: stretch;
flex-direction: column;
}
#menu .content + h3 {
padding-top: 1em;
}
#menu .content > * {
margin: 1em 0;
margin: 0;
-ms-flex: 0 0 auto;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
#menu .content > * + * {
margin-top: 1em;
}
#menu,
@@ -137,7 +268,6 @@
#menu #mouse-settings .choice .figure {
display: inline-block;
vertical-align: middle;
max-width: 80%;
}
#menu #keyboard-settings .caption {
@@ -153,7 +283,8 @@
#menu #mouse-settings .figure img {
display: block;
max-width: 100%;
width: 75%;
max-width: 320px;
margin: 1em auto;
}