layout and legend for charts

css/layout.css

@@ -1,27 +1,200 @@
-.graphical-report_layout {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+html {
+  line-height: 1;
+}
+html,
+body {
+  height: 100%;
+}
+ol,
+ul {
+  list-style: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+caption,
+th,
+td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+q,
+blockquote {
+  quotes: none;
+}
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+  content: none;
+}
+a img {
+  border: none;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+/* BASIC */
+/* Fonts */
+body {
+  font: normal 13px "Open Sans", sans-serif;
+}
+text {
+  font: normal 13px "Open Sans", sans-serif;
+}
+.graphical-report__layout {
+  display: -webkit-box;
+  display: -webkit-flexbox;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: column;
+  -ms-flex-align: stretch;
+  -webkit-align-items: stretch;
   align-items: stretch;
+  -ms-flex-direction: column;
+  -webkit-box-orient: vertical;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
 }
-.graphical-report_container__top {
-  order: 1;
+.graphical-report__layout__header {
+  -ms-flex: 0 1 auto;
+  -webkit-box-flex: 0 1 auto;
+  flex: 0 1 auto;
+  padding: 20px;
 }
-.graphical-report_container__center {
-  order: 2;
-  flex-grow: 1;
-  display: inline-flex;
-  flex-direction: row;
+.graphical-report__layout__container {
+  display: -webkit-box;
+  display: -webkit-flexbox;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 auto;
+  -webkit-box-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 20px;
 }
-.graphical-report_container__center-left {
-  order: 1;
+.graphical-report__layout__footer {
+  -ms-flex: 0 1 auto;
+  -webkit-box-flex: 0 1 auto;
+  flex: 0 1 auto;
+  padding: 20px;
 }
-.graphical-report_container__center-center {
-  order: 2;
-  flex-grow: 1;
+.graphical-report__layout__sidebar {
+  -ms-flex: 0 1 auto;
+  -webkit-box-flex: 0 1 auto;
+  flex: 0 1 auto;
+  padding: 20px;
 }
-.graphical-report_container__center-right {
-  order: 3;
+.graphical-report__layout__content {
+  -ms-flex: 1 1 auto;
+  -webkit-box-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 20px;
 }
-.graphical-report_container__bottom {
-  order: 3;
+.graphical-report__layout__sidebar-right {
+  -ms-flex: 0 1 300px;
+  -webkit-box-flex: 0 1 300px;
+  flex: 0 1 300px;
+  padding: 20px 25px;
 }

css/default.css → less/base.less

@@ -11,56 +11,61 @@ article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline;
 }
 
 html {
-  line-height: 1;
+    line-height: 1;
+}
+
+html,
+body {
+    height: 100%;
 }
 
 ol, ul {
-  list-style: none;
+    list-style: none;
 }
 
 table {
-  border-collapse: collapse;
-  border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
 caption, th, td {
-  text-align: left;
-  font-weight: normal;
-  vertical-align: middle;
+    text-align: left;
+    font-weight: normal;
+    vertical-align: middle;
 }
 
 q, blockquote {
-  quotes: none;
+    quotes: none;
 }
+
 q:before, q:after, blockquote:before, blockquote:after {
-  content: "";
-  content: none;
+    content: "";
+    content: none;
 }
 
 a img {
-  border: none;
+    border: none;
 }
 
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
-  display: block;
+    display: block;
 }
 
 /* BASIC */
 /* Fonts */
 body {
-  font: normal 13px "Open Sans", sans-serif;
+    font: normal 13px "Open Sans", sans-serif;
 }
 
 text {
-  font: normal 13px "Open Sans", sans-serif;
+    font: normal 13px "Open Sans", sans-serif;
 }
-