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

package/dist/autoql.esm.css

@@ -931,6 +931,7 @@ span.react-autoql-icon {
   padding: 0 20px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   line-height: 36px;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1058,7 +1059,7 @@ g.legendOrdinal tspan {
   stroke: transparent;
   opacity: 0.5; }
   .axis-scaler-border:hover {
-    stroke: transparent !important; }
+    stroke: var(--react-autoql-accent-color); }
 
 .react-autoql-axis-selector-arrow {
   opacity: 1 !important; }
@@ -1122,8 +1123,10 @@ g.legendOrdinal tspan {
     font-size: 12px;
     line-height: 25px;
     cursor: default; }
-    .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-list-item.checked .agg-type-symbol {
-      color: var(--react-autoql-accent-color); }
+    .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-list-item.checked .agg-type-symbol,
+    .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-list-item.checked .agg-select-text {
+      color: var(--react-autoql-accent-color);
+      font-weight: 600; }
   .number-axis-selector-popover .number-axis-selector-popover-content .number-selector-header {
     display: flex;
     justify-content: space-between;
@@ -1139,11 +1142,10 @@ g.legendOrdinal tspan {
   .number-axis-selector-popover .number-axis-selector-popover-content .axis-series-selector .react-autoql-selectable-list {
     margin-bottom: 10px; }
   .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-select.agg-type-symbol {
-    display: inline-block;
     font-weight: 600;
     font-size: 12px;
-    line-height: 22px;
-    height: 22px;
+    height: 26px;
+    line-height: 25px;
     margin: 3px 10px;
     padding: 0 8px; }
 
@@ -1753,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,
@@ -1901,6 +1904,8 @@ g.legendOrdinal .legendTitle tspan {
     flex-direction: column;
     flex: 1;
     width: 100%; }
+    .react-autoql-notification-rule-container .react-autoql-rule-input input {
+      line-height: 37px; }
   .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
     display: flex;
     flex: 1; }
@@ -1912,7 +1917,8 @@ g.legendOrdinal .legendTitle tspan {
     flex: 1; }
     .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
       flex: 0;
-      flex-basis: 33px; }
+      flex-basis: 33px;
+      height: 39px; }
     .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
       flex: 1;
       margin-left: 4px; }
@@ -1927,8 +1933,7 @@ g.legendOrdinal .legendTitle tspan {
     .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
       margin: 0; }
     .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
-    .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
-+ .react-autoql-rule-term-type-selector {
+    .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus + .react-autoql-rule-term-type-selector {
       color: var(--react-autoql-accent-color, #26a7df);
       border-color: var(--react-autoql-accent-color, #26a7df); }
 
@@ -2773,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; }
@@ -4557,7 +4562,7 @@ g.legendOrdinal .legendTitle tspan {
   .dashboard-tile-right-input-container .title-input-icon,
   .dashboard-tile-left-input-container .title-input-icon {
     font-size: 16px;
-    top: 7px;
+    top: 6px;
     left: 11px; }
 
 .dashboard-tile-input.second.query {
@@ -4732,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.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 .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 {
   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; }
@@ -4770,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;
@@ -4788,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%; }