react-autoql 7.2.4-alpha.7 → 7.3.0-alpha.0

package/dist/autoql.esm.css

@@ -1755,6 +1755,7 @@ g.legendOrdinal .legendTitle tspan {
   box-shadow: 0 0 14px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
   padding: 0 !important;
   margin: auto auto;
+  margin-top: 5vh;
   max-width: 90vw;
   max-height: calc(100vh - 90px); }
   .ReactModal__Content input.react-autoql-input,
@@ -2777,7 +2778,7 @@ g.legendOrdinal .legendTitle tspan {
   width: 100%;
   min-height: 80px;
   border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--react-autoql-border-color);
   margin-top: 15px;
   padding: 5px 10px;
   outline: none !important; }
@@ -4736,34 +4737,69 @@ g.legendOrdinal .legendTitle tspan {
   background: inherit; }
 
 .react-autoql-dashboard-container {
-  background: var(--react-autoql-background-color-primary);
-  height: 100%;
+  background: transparent;
   width: 100%;
   overflow: hidden;
-  padding-top: 3px; }
+  padding-top: 3px;
+  min-width: 500px; }
 
 .react-autoql-dashboard-container.edit-mode {
   padding-bottom: 200px; }
 
-.dashboard-drilldown-modal .ReactModal__Content {
-  top: unset !important;
-  margin-top: 20px !important;
-  max-height: 93vh !important; }
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content .layout-splitter {
+  margin-top: 8px;
+  background: var(--react-autoql-text-color-primary);
+  opacity: 0.6; }
+
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content .splitter-collapse-btn {
+  display: flex;
+  justify-content: center;
+  line-height: 22px;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  margin-left: 90%;
+  transform: translate(-11px, -11px);
+  background: var(--react-autoql-background-color-secondary);
+  border: 1px solid var(--react-autoql-text-color-primary);
+  transition: border-color 0.2s ease, color 0.2s ease;
+  cursor: pointer; }
+  .dashboard-drilldown-modal .dashboard-drilldown-modal-content .splitter-collapse-btn:hover {
+    border-color: var(--react-autoql-accent-color);
+    color: var(--react-autoql-accent-color); }
+
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .layout-pane:not(.layout-pane-primary), .dashboard-drilldown-modal .dashboard-drilldown-modal-content.table-only .layout-pane:not(.layout-pane-primary) {
+  flex: 1; }
 
-.dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .react-autoql-dashboard-drilldown-original,
-.dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .layout-splitter, .dashboard-drilldown-modal .dashboard-drilldown-modal-content.top-hidden .react-autoql-dashboard-drilldown-original,
-.dashboard-drilldown-modal .dashboard-drilldown-modal-content.top-hidden .layout-splitter {
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .react-autoql-dashboard-drilldown-original {
   transition: opacity 0.3s ease, height 0.3s ease;
   visibility: hidden;
   pointer-events: none;
-  opacity: 0;
   height: 0; }
 
-.dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .layout-pane:not(.layout-pane-primary) {
-  height: calc(100% - 50px) !important; }
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .layout-splitter {
+  margin-top: 14px; }
 
-.dashboard-drilldown-modal .dashboard-drilldown-modal-content.top-hidden .layout-pane:not(.layout-pane-primary) {
-  height: 100% !important; }
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .splitter-collapse-btn {
+  transform: translate(-11px, -11px) rotate(180deg); }
+
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .layout-pane.layout-pane-primary {
+  flex: 0;
+  overflow: hidden; }
+
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.table-only .react-autoql-dashboard-drilldown-original,
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.table-only .layout-pane.layout-pane-primary,
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.table-only .splitter-collapse-btn,
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.table-only .layout-splitter {
+  visibility: hidden;
+  pointer-events: none;
+  padding: 0;
+  margin: 0;
+  height: 0;
+  flex: 0; }
+
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content.table-only .react-autoql-dashboard-drilldown-table {
+  padding-top: 10px; }
 
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content .react-autoql-modal-body {
   padding: 0; }
@@ -4774,9 +4810,19 @@ g.legendOrdinal .legendTitle tspan {
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content .splitter-layout {
   height: calc(100% - 55px); }
 
+.dashboard-drilldown-modal .dashboard-drilldown-modal-content .dashboard-drilldown-table-and-toolbars-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; }
+  .dashboard-drilldown-modal .dashboard-drilldown-modal-content .dashboard-drilldown-table-and-toolbars-container .drilldown-modal-toolbars {
+    flex: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center; }
+
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content .react-autoql-dashboard-drilldown-original {
-  padding: 20px;
-  padding-bottom: 10px; }
+  padding-top: 10px; }
 
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content .drilldown-hide-chart-btn {
   text-align: right;
@@ -4792,8 +4838,9 @@ g.legendOrdinal .legendTitle tspan {
     margin-bottom: -8px; }
 
 .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
-  padding: 20px;
-  padding-top: 10px;
+  flex: 1;
+  padding: 10px 20px;
+  padding-top: 0;
   overflow: hidden;
   height: 100%;
   width: 100%; }