Add flexbox layout with draggable resizing

1 files changed, 53 insertions, 2 deletions

diff --git a/style.css b/style.css
index c48a0ad..8b9ab29 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,54 @@
-.results {
-  overflow: scroll
+html,
+body {
+  height: 100%;
+  margin: 0
+}
+
+.flex-wrapper {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+.flex-wrapper .row.header {
+  flex: 0 1 auto;
+  background-color: #505050;
+  color: white;
+}
+
+.flex-wrapper .row.content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.flex-wrapper .row.footer {
+  flex: 0 1 20px;
+  background-color: #505050;
+  color: white;
+}
+
+.flex-wrapper .row .split-row {
+  overflow: auto;
+}
+
+.gutter {
+    background-color: #505050;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-vertical {
+    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+    cursor: ns-resize;
+}
+
+.gutter.gutter-horizontal {
+    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: ew-resize;
+}
+
+.CodeMirror {
+  height: 100%;
 }
\ No newline at end of file