Replace float rules with flexbox for content and sidebar block (#30435).

Patch by Max Johansson and Marius BALTEANU.

git-svn-id: http://svn.redmine.org/redmine/trunk@18033 e93f8b46-1217-0410-a6f0-8f06a7374b81

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 94fd6719538ee745f7057fc08477fd1dd06a02a5..b94f210bfa731588c5dc1633aede0a11cc6a23be 100644 (file)
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -80,10 +80,9 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 #admin-menu ul {margin: 0;  padding: 0;}
 #admin-menu li {margin: 0;  padding: 0 0 6px 0; list-style-type:none;}
 
-#main {background-color:#EEEEEE;}
+#main {display: flex; flex-direction: row-reverse;}
 
-#sidebar{ float: right; width: 22%; position: relative; z-index: 9; padding: 0; margin: 0;}
-* html #sidebar{ width: 22%; }
+#sidebar{ flex-shrink: 0; width: 22%; padding-left: 20px; background: #EEEEEE; border-left: 1px solid #ddd}
 #sidebar h3{ font-size: 14px; margin-top:14px; color: #666;  }
 #sidebar hr{ width: 100%; margin: 0 auto; height: 1px; background: #ccc; border: 0; }
 * html #sidebar hr{ width: 95%; position: relative; left: -6px; color: #ccc; }
@@ -93,13 +92,11 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 #sidebar div.wiki ul {margin:inherit; padding-left:40px;}
 #sidebar div.wiki ul li {list-style-type:inherit;}
 
-#content { width: 75%; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }
-* html #content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}
+#content { flex-grow: 1; background-color: #fff; margin: 0px; padding: 6px 10px 10px 10px; }
 html>body #content { min-height: 600px; }
 * html body #content { height: 600px; } /* IE */
 
 #main.nosidebar #sidebar{ display: none; }
-#main.nosidebar #content{ width: auto; border-right: 0; }
 
 #footer {clear: both; border-top: 1px solid #bbb; font-size: 0.9em; color: #aaa; padding: 5px; text-align:center; background:#fff;}