[Discover] New responsive layout using EUI components

src/plugins/discover/public/application/_discover.scss

@@ -6,17 +6,69 @@
 }
 
 .dscAppContainer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
   > * {
     position: relative;
   }
 }
+
 discover-app {
   flex-grow: 1;
 }
 
+.dscHitsCounter,
+.dscTimeChartHeader {
+  flex-grow: 0;
+}
+
+.dscApp {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.dscApp__header {
+  border-bottom: $euiBorderThin;
+  margin-bottom: $euiSize;
+}
+
+.dscApp__frame {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden;
+  @include euiBreakpoint('xs', 's') {
+    flex-grow: 0;
+    flex-wrap: wrap;
+    margin-left: 0;
+    margin-right: 0;
+    overflow-y: auto;
+  }
+}
+
+.dscApp__content {
+  flex-grow: 1;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+  padding-right: $euiSizeS;
+}
+
 .dscHistogram {
   display: flex;
-  height: 200px;
+  height: $euiSize * 12.5;
   padding: $euiSizeS;
 }
 
@@ -35,6 +87,19 @@ discover-app {
 .dscWrapper__content {
   padding-top: $euiSizeXS;
   background-color: $euiColorEmptyShade;
+  flex-grow: 1;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+
+  @include euiBreakpoint('m', 'l', 'xl') {
+    margin-right: $euiSize;
+    margin-bottom: $euiSize;
+  }
+
+  @include euiBreakpoint('xs', 's') {
+    margin: $euiSizeS;
+  }
 
   .kbn-table {
     margin-bottom: 0;
@@ -53,7 +118,7 @@ discover-app {
 }
 
 .dscResultCount {
-  padding-top: $euiSizeXS;
+  padding: 0 $euiSizeS;
 }
 
 .dscTimechart__header {
@@ -63,22 +128,14 @@ discover-app {
   padding: $euiSizeXS 0;
 }
 
-.dscOverlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 20;
-  padding-top: $euiSizeM;
-
-  opacity: 0.75;
+.dscLoading {
   text-align: center;
-  background-color: transparent;
+  padding: $euiSizeL 0;
 }
 
 .dscTable {
   overflow: auto;
+  //will-change: transform;
 
   // SASSTODO: add a monospace modifier to the doc-table component
   .kbnDocTable__row {
@@ -87,18 +144,17 @@ discover-app {
   }
 }
 
-// SASSTODO: replace the padding value with a variable
 .dscTable__footer {
   background-color: $euiColorLightShade;
-  padding: 5px 10px;
+  padding: $euiSizeXS $euiSizeS;
   text-align: center;
 }
 
 .dscResults {
-  h3 {
-    margin: -20px 0 10px 0;
-    text-align: center;
-  }
+  flex-grow: 1;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
 }
 
 .dscResults__interval {
@@ -110,6 +166,24 @@ discover-app {
   position: absolute;
   right: $euiSizeM;
   top: $euiSizeXS;
+  z-index: $euiZLevel1;
+}
+
+.dscApp .dscFormatSource {
+  word-break: break-word;
+}
+
+.dscFormatSource__title {
+  background-color: transparentize(shade($euiColorPrimary, 20%), 0.9);
+  border-radius: $euiBorderRadius / 2;
+  color: $euiTextColor;
+  padding: ($euiSizeXS / 2) $euiSizeXS;
+  margin-right: $euiSizeXS;
+  word-break: normal;
+  display: inline;
+}
+.dscFormatSource__description {
+  display: inline;
 }
 
 .dscTableFixedScroll {
@@ -124,28 +198,22 @@ discover-app {
   }
 }
 
+.dscCollapsibleSidebar__collapseButton {
+  align-self: flex-start;
+  &:not(.closed) {
+    position: relative;
+    left: -$euiSizeS;
+  }
+}
+
 .dscCollapsibleSidebar {
   position: relative;
   z-index: $euiZLevel1;
 
-  .dscCollapsibleSidebar__collapseButton {
-    position: absolute;
-    top: 0;
-    right: -$euiSizeXL + 4;
-    cursor: pointer;
-    z-index: -1;
-    min-height: $euiSizeM;
-    min-width: $euiSizeM;
-    padding: $euiSizeXS * .5;
-  }
-
   &.closed {
     width: 0 !important;
     border-right-width: 0;
     border-left-width: 0;
-    .dscCollapsibleSidebar__collapseButton {
-      right: -$euiSizeL + 4;
-    }
   }
 }