react-autoql 4.2.5 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,4 @@
1
+
1
2
  .react-autoql-icon {
2
3
  position: relative;
3
4
  opacity: 1; }
@@ -240,7 +241,7 @@ span.react-autoql-icon {
240
241
  overflow: hidden;
241
242
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
242
243
  /* Default styles outside of data messenger */
243
- background-color: white;
244
+ background-color: var(--react-autoql-background-color-primary);
244
245
  color: #5d5d5d; }
245
246
 
246
247
  .react-autoql-bar-container.autosuggest-top
@@ -302,10 +303,15 @@ span.react-autoql-icon {
302
303
 
303
304
  .chat-bar-input-icon {
304
305
  position: absolute;
305
- color: #28a8e0;
306
+ display: flex;
307
+ justify-content: flex-end;
308
+ align-items: center;
309
+ left: 0;
310
+ top: 0;
311
+ width: 46px;
312
+ height: 100%;
306
313
  font-size: 20px;
307
- left: 30px;
308
- top: 15px; }
314
+ color: #28a8e0; }
309
315
 
310
316
  .react-autoql-table-container {
311
317
  flex: 1;
@@ -531,7 +537,7 @@ g.legendOrdinal .legendTitle tspan {
531
537
  .react-autoql-checkbox__label {
532
538
  flex-shrink: 0;
533
539
  padding: 0.5rem 1rem;
534
- color: #fff;
540
+ color: var(--react-autoql-accent-text-color);
535
541
  cursor: pointer; }
536
542
 
537
543
  .react-autoql-checkbox__input {
@@ -561,7 +567,7 @@ g.legendOrdinal .legendTitle tspan {
561
567
 
562
568
  .react-autoql-checkbox-tick {
563
569
  position: absolute;
564
- color: white;
570
+ color: var(--react-autoql-accent-text-color);
565
571
  left: 3px;
566
572
  line-height: 20px;
567
573
  pointer-events: none; }
@@ -615,7 +621,7 @@ g.legendOrdinal .legendTitle tspan {
615
621
  bottom: 2px;
616
622
  left: 2px;
617
623
  border-radius: 50%;
618
- background: #fff; }
624
+ background: var(--react-autoql-accent-text-color); }
619
625
 
620
626
  .react-autoql-checkbox--switch__input:checked
621
627
  + .react-autoql-checkbox--switch__label::after {
@@ -903,7 +909,8 @@ g.legendOrdinal .legendTitle tspan {
903
909
  .react-autoql-response-content-container .query-output-error-message,
904
910
  .react-autoql-response-content-container .no-columns-error-message,
905
911
  .react-autoql-response-content-container .feedback-message {
906
- margin: auto; }
912
+ margin: auto;
913
+ text-align: center; }
907
914
 
908
915
  .react-autoql-response-content-container.table {
909
916
  max-height: 100vh !important;
@@ -933,7 +940,7 @@ g.legendOrdinal .legendTitle tspan {
933
940
 
934
941
  .react-autoql-suggestion-btn:hover {
935
942
  border-color: transparent;
936
- color: white;
943
+ color: var(--react-autoql-accent-text-color);
937
944
  background: var(--react-autoql-accent-color); }
938
945
 
939
946
  .react-autoql-help-link-btn {
@@ -1024,16 +1031,18 @@ g.legendOrdinal .legendTitle tspan {
1024
1031
  text-align: center; }
1025
1032
 
1026
1033
  .react-autoql-query-validation-execute-btn {
1027
- height: 38px;
1028
- background: none;
1034
+ background: var(--react-autoql-background-color-primary);
1035
+ border: 1px solid var(--react-autoql-border-color);
1029
1036
  border-radius: 4px;
1037
+ height: 38px;
1038
+ width: calc(100% - 15px);
1039
+ margin: 5px;
1030
1040
  margin-top: 24px;
1031
- width: 100%;
1032
1041
  color: inherit;
1033
1042
  cursor: pointer;
1034
1043
  outline: none !important;
1035
- border-color: #e2e2e26e;
1036
- transition: all 0.2s ease; }
1044
+ transition: all 0.2s ease;
1045
+ box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 0px; }
1037
1046
 
1038
1047
  .react-autoql-query-validation-execute-btn:hover {
1039
1048
  border-color: #28a8e0; }
@@ -1170,12 +1179,14 @@ g.legendOrdinal .legendTitle tspan {
1170
1179
 
1171
1180
 
1172
1181
  .viz-toolbar {
1173
- position: absolute;
1174
1182
  background: inherit;
1175
1183
  padding: 5px;
1176
1184
  border-radius: 6px;
1177
1185
  line-height: 28px;
1178
- border: 1px solid #d3d3d352; }
1186
+ border: 1px solid #d3d3d352;
1187
+ text-align: left;
1188
+ display: inline-block;
1189
+ background: var(--react-autoql-background-color-primary); }
1179
1190
  .viz-toolbar.vertical .react-autoql-toolbar-btn {
1180
1191
  display: block; }
1181
1192
 
@@ -1200,6 +1211,47 @@ g.legendOrdinal .legendTitle tspan {
1200
1211
  .react-autoql-toolbar-btn:hover {
1201
1212
  opacity: 0.7; }
1202
1213
 
1214
+ /* Chart icon styles */
1215
+ .chart-icon-svg-0,
1216
+ .react-autoql-icon-svg-0 {
1217
+ fill: currentColor; }
1218
+
1219
+ .react-autoql-icon-outlined {
1220
+ fill: none;
1221
+ stroke: currentColor;
1222
+ stroke-linecap: round;
1223
+ stroke-linejoin: round;
1224
+ stroke-miterlimit: 10; }
1225
+
1226
+ .hm0 {
1227
+ opacity: 0.5;
1228
+ fill: currentColor;
1229
+ enable-background: new; }
1230
+
1231
+ .hm1 {
1232
+ fill: currentColor; }
1233
+
1234
+ .hm2 {
1235
+ opacity: 0.15;
1236
+ fill: currentColor;
1237
+ enable-background: new; }
1238
+
1239
+ .hm3 {
1240
+ opacity: 0.6;
1241
+ fill: currentColor;
1242
+ enable-background: new; }
1243
+
1244
+ .hm4 {
1245
+ opacity: 0.65;
1246
+ fill: currentColor;
1247
+ enable-background: new; }
1248
+
1249
+ .hm5 {
1250
+ fill: currentColor; }
1251
+
1252
+ .hm6 {
1253
+ fill: currentColor; }
1254
+
1203
1255
 
1204
1256
  .ReactModal__Overlay {
1205
1257
  background-color: transparent !important;
@@ -1457,7 +1509,6 @@ g.legendOrdinal .legendTitle tspan {
1457
1509
  margin-top: -6px;
1458
1510
  opacity: 0.9; }
1459
1511
  .react-autoql-notification-list-item .viz-toolbar {
1460
- position: relative;
1461
1512
  border: none; }
1462
1513
  .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1463
1514
  height: 33px; }
@@ -1613,6 +1664,7 @@ g.legendOrdinal .legendTitle tspan {
1613
1664
  top: 0;
1614
1665
  width: 4px;
1615
1666
  background: var(--react-autoql-accent-color, #26a7df);
1667
+ color: var(--react-autoql-accent-text-color);
1616
1668
  transition-property: opacity;
1617
1669
  transition-duration: 0.2s;
1618
1670
  transition-timing-function: ease; }
@@ -1628,7 +1680,7 @@ g.legendOrdinal .legendTitle tspan {
1628
1680
  width: 45px;
1629
1681
  line-height: 45px;
1630
1682
  font-size: 22px;
1631
- color: white;
1683
+ color: var(--react-autoql-accent-text-color);
1632
1684
  background-color: var(--react-autoql-accent-color, #26a7df);
1633
1685
  text-align: center;
1634
1686
  margin-top: 13px;
@@ -1662,13 +1714,13 @@ g.legendOrdinal .legendTitle tspan {
1662
1714
  .react-autoql-step-container.complete .react-autoql-step-dot {
1663
1715
  border-color: var(--react-autoql-accent-color, #26a7df);
1664
1716
  background: var(--react-autoql-accent-color, #26a7df);
1665
- color: #fff; }
1717
+ color: var(--react-autoql-accent-text-color); }
1666
1718
  .react-autoql-step-container.error {
1667
1719
  border-color: var(--react-autoql-warning-color); }
1668
1720
  .react-autoql-step-container.error .react-autoql-step-dot {
1669
1721
  border-color: var(--react-autoql-warning-color);
1670
1722
  background: var(--react-autoql-warning-color);
1671
- color: white; }
1723
+ color: #fff; }
1672
1724
  .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
1673
1725
  pointer-events: none;
1674
1726
  height: 10px;
@@ -1752,7 +1804,7 @@ g.legendOrdinal .legendTitle tspan {
1752
1804
  height: 18px;
1753
1805
  border: 1px solid #ddd;
1754
1806
  border-radius: 100%;
1755
- background: #fff; }
1807
+ background: var(--react-autoql-accent-text-color); }
1756
1808
 
1757
1809
  .react-autoql-radio-btn-container [type='radio']:checked + label:after,
1758
1810
  .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
@@ -1787,7 +1839,7 @@ g.legendOrdinal .legendTitle tspan {
1787
1839
  .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
1788
1840
  background-color: var(--react-autoql-accent-color, #26a7df);
1789
1841
  border-color: var(--react-autoql-accent-color, #26a7df);
1790
- color: #fff; }
1842
+ color: var(--react-autoql-accent-text-color); }
1791
1843
  .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
1792
1844
  background-color: inherit;
1793
1845
  color: var(--react-autoql-accent-color, #26a7df); }
@@ -1879,12 +1931,12 @@ g.legendOrdinal .legendTitle tspan {
1879
1931
  color: var(--react-autoql-danger-color);
1880
1932
  display: 'inline-block'; }
1881
1933
 
1934
+
1882
1935
  .notification-list-loading-container {
1883
1936
  text-align: center;
1884
1937
  padding-top: 100px;
1885
1938
  color: var(--react-autoql-text-color-primary);
1886
1939
  height: 100%;
1887
- overflow: hidden;
1888
1940
  background: var(--react-autoql-background-color-secondary); }
1889
1941
 
1890
1942
  .empty-notifications-message {
@@ -1902,15 +1954,21 @@ g.legendOrdinal .legendTitle tspan {
1902
1954
  height: 250px; }
1903
1955
 
1904
1956
  .react-autoql-notification-list-container {
1957
+ display: flex;
1958
+ flex-direction: column;
1905
1959
  height: 100%;
1906
- padding: 20px;
1907
- overflow-y: auto;
1908
1960
  background: var(--react-autoql-background-color-secondary); }
1961
+ .react-autoql-notification-list-container .notification-feed-list {
1962
+ padding: 0 20px;
1963
+ padding-top: 0; }
1964
+ .react-autoql-notification-list-container .loader {
1965
+ text-align: center;
1966
+ margin: 10px; }
1909
1967
 
1910
1968
  .react-autoql-notification-dismiss-all {
1969
+ flex: 0;
1911
1970
  text-align: right;
1912
- margin-bottom: 12px;
1913
- padding-right: 10px;
1971
+ margin: 12px;
1914
1972
  color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1915
1973
  transition: color 0.1s ease; }
1916
1974
  .react-autoql-notification-dismiss-all span {
@@ -2083,7 +2141,7 @@ g.legendOrdinal .legendTitle tspan {
2083
2141
  width: 35px;
2084
2142
  border-radius: 20px;
2085
2143
  background: var(--react-autoql-accent-color, #26a7df);
2086
- color: #fff;
2144
+ color: var(--react-autoql-accent-text-color);
2087
2145
  line-height: 38px;
2088
2146
  text-align: center;
2089
2147
  font-size: 20px;
@@ -2312,7 +2370,7 @@ g.legendOrdinal .legendTitle tspan {
2312
2370
  .connect-channel-form-container .channel-item.selected,
2313
2371
  .slack-channel-list-container .channel-item.selected {
2314
2372
  background-color: var(--react-autoql-accent-color);
2315
- color: #fff; }
2373
+ color: var(--react-autoql-accent-text-color); }
2316
2374
  .connect-channel-form-container .channel-item:hover:not(.selected),
2317
2375
  .slack-channel-list-container .channel-item:hover:not(.selected) {
2318
2376
  background-color: rgba(0, 0, 0, 0.05); }
@@ -2367,7 +2425,7 @@ g.legendOrdinal .legendTitle tspan {
2367
2425
 
2368
2426
 
2369
2427
  .autoql-options-toolbar {
2370
- position: absolute;
2428
+ display: inline-block;
2371
2429
  background: inherit;
2372
2430
  padding: 5px;
2373
2431
  border-radius: 6px;
@@ -2379,6 +2437,21 @@ g.legendOrdinal .legendTitle tspan {
2379
2437
  .autoql-options-toolbar .react-autoql-toolbar-btn {
2380
2438
  color: var(--react-autoql-text-color-primary); }
2381
2439
 
2440
+ .more-options-menu,
2441
+ .report-problem-menu {
2442
+ background: var(--react-autoql-background-color-primary);
2443
+ padding: 10px 0; }
2444
+ .more-options-menu span.react-autoql-icon svg,
2445
+ .report-problem-menu span.react-autoql-icon svg {
2446
+ margin-right: 3px; }
2447
+
2448
+ .report-problem-text-area {
2449
+ border-radius: 4px;
2450
+ border: 1px solid rgba(0, 0, 0, 0.15);
2451
+ margin-top: 10px;
2452
+ padding: 5px 10px;
2453
+ outline: none !important; }
2454
+
2382
2455
  .copy-sql-modal-content {
2383
2456
  position: relative;
2384
2457
  height: 60vh; }
@@ -2423,178 +2496,81 @@ g.legendOrdinal .legendTitle tspan {
2423
2496
  cursor: pointer; }
2424
2497
  .chat-single-message-container .query-more-btn:hover {
2425
2498
  opacity: 1; }
2499
+ .chat-single-message-container .react-autoql-response-content-container .query-output-error-message,
2500
+ .chat-single-message-container .react-autoql-response-content-container .no-columns-error-message,
2501
+ .chat-single-message-container .react-autoql-response-content-container .feedback-message {
2502
+ margin: 0;
2503
+ text-align: left; }
2426
2504
  .chat-single-message-container .spinner-loader:after {
2427
2505
  border: 1px solid var(--react-autoql-accent-color);
2428
2506
  border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent; }
2429
-
2430
- .chat-condition-item-container {
2431
- position: absolute;
2432
- background: inherit;
2433
- bottom: 0px;
2434
- padding: 5px;
2435
- border-radius: 6px; }
2436
-
2437
- .chat-condition-item {
2438
- background: none !important;
2439
- border: none;
2440
- margin-top: -20px !important;
2441
- padding: 0 !important;
2442
- font-family: var(--react-autoql-font-family);
2443
- color: var(--react-autoql-accent-color);
2444
- text-decoration: underline;
2445
- cursor: pointer; }
2446
-
2447
- .chat-single-message-container.response {
2448
- display: flex;
2449
- justify-content: flex-start;
2450
- padding-left: 20px;
2451
- -webkit-animation: scale-up-bl 0.5s ease;
2452
- animation: scale-up-bl 0.5s ease; }
2453
-
2454
- .chat-single-message-container.request {
2455
- display: flex;
2456
- justify-content: flex-end;
2457
- padding-right: 20px;
2458
- -webkit-animation: scale-up-br 0.5s ease;
2459
- animation: scale-up-br 0.5s ease; }
2460
-
2461
- .chat-single-message-container .chat-message-bubble {
2462
- position: relative;
2463
- padding: 13px;
2464
- border-radius: 10px;
2465
- max-width: calc(100% - 20px);
2466
- word-wrap: break-word;
2467
- font-family: inherit;
2468
- font-size: 14px;
2469
- letter-spacing: 0.04em;
2470
- box-sizing: border-box;
2471
- /* make small margin on bottom because sometimes react
2472
- custom scrollbar cuts off a pixel or 2 at the bottom */
2473
- margin-bottom: 6px; }
2474
-
2475
- .chat-single-message-container .chat-message-bubble.text {
2476
- max-width: 85%; }
2477
-
2478
- .chat-single-message-container .chat-message-bubble.full-width {
2479
- width: calc(100% - 20px) !important;
2480
- min-width: calc(100% - 20px) !important;
2481
- max-width: calc(100% - 20px) !important; }
2482
-
2483
- .chat-single-message-container.response .chat-message-bubble.active {
2484
- border: 1px solid #c3c3c3; }
2485
-
2486
- .chat-single-message-container.response .chat-message-bubble {
2487
- background: var(--react-autoql-background-color-primary);
2488
- color: var(--react-autoql-text-color-primary);
2489
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2490
-
2491
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2492
- min-width: 125px;
2493
- padding-bottom: 15px; }
2494
-
2495
- .chat-single-message-container.request .chat-message-bubble {
2496
- background: var(--react-autoql-accent-color);
2497
- color: var(--react-autoql-accent-text-color);
2498
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2499
-
2500
- .chat-message-toolbar,
2501
- .chat-message-toolbar.autoql-options-toolbar {
2502
- display: none;
2503
- position: absolute;
2504
- background: inherit;
2505
- top: -31px;
2506
- padding: 5px;
2507
- border-radius: 6px;
2508
- line-height: 28px;
2509
- background: var(--react-autoql-background-color-primary);
2510
- border: 1px solid var(--react-autoql-border-color);
2511
- color: var(--react-autoql-text-color-primary); }
2512
-
2513
- .chat-message-toolbar.right {
2514
- right: -9px; }
2515
-
2516
- .chat-message-toolbar.left {
2517
- left: -9px; }
2518
-
2519
- .chat-message-bubble:hover .chat-message-toolbar,
2520
- .chat-message-bubble .chat-message-toolbar.active {
2521
- display: block; }
2522
-
2523
- .report-problem-text-area {
2524
- border-radius: 4px;
2525
- border: 1px solid rgba(0, 0, 0, 0.15);
2526
- margin-top: 10px;
2527
- padding: 5px 10px;
2528
- outline: none !important; }
2529
-
2530
- .condition-info-icon-left-align {
2531
- color: var(--react-autoql-accent-color) !important;
2532
- position: absolute !important;
2533
- bottom: 2px;
2534
- right: 10px;
2535
- font-size: 20px; }
2536
-
2537
- .condition-info-icon {
2538
- color: var(--react-autoql-accent-color) !important;
2539
- position: absolute !important;
2540
- bottom: 2px;
2541
- right: 4px;
2542
- font-size: 20px; }
2543
-
2544
- .more-options-menu,
2545
- .report-problem-menu {
2546
- background: var(--react-autoql-background-color-primary);
2547
- padding: 10px 0; }
2548
- .more-options-menu span.react-autoql-icon svg,
2549
- .report-problem-menu span.react-autoql-icon svg {
2550
- margin-right: 3px; }
2551
-
2552
- .interpretation-icon {
2553
- vertical-align: top;
2554
- height: 26px;
2555
- margin: 0 3px;
2556
- font-size: 18px; }
2557
-
2558
- /* Chart icon styles */
2559
- .chart-icon-svg-0,
2560
- .react-autoql-icon-svg-0 {
2561
- fill: currentColor; }
2562
-
2563
- .react-autoql-icon-outlined {
2564
- fill: none;
2565
- stroke: currentColor;
2566
- stroke-linecap: round;
2567
- stroke-linejoin: round;
2568
- stroke-miterlimit: 10; }
2569
-
2570
- .hm0 {
2571
- opacity: 0.5;
2572
- fill: currentColor;
2573
- enable-background: new; }
2574
-
2575
- .hm1 {
2576
- fill: currentColor; }
2577
-
2578
- .hm2 {
2579
- opacity: 0.15;
2580
- fill: currentColor;
2581
- enable-background: new; }
2582
-
2583
- .hm3 {
2584
- opacity: 0.6;
2585
- fill: currentColor;
2586
- enable-background: new; }
2587
-
2588
- .hm4 {
2589
- opacity: 0.65;
2590
- fill: currentColor;
2591
- enable-background: new; }
2592
-
2593
- .hm5 {
2594
- fill: currentColor; }
2595
-
2596
- .hm6 {
2597
- fill: currentColor; }
2507
+ .chat-single-message-container.response {
2508
+ display: flex;
2509
+ justify-content: flex-start;
2510
+ padding-left: 20px;
2511
+ -webkit-animation: scale-up-bl 0.5s ease;
2512
+ animation: scale-up-bl 0.5s ease; }
2513
+ .chat-single-message-container.response .chat-message-bubble {
2514
+ background: var(--react-autoql-background-color-primary);
2515
+ color: var(--react-autoql-text-color-primary);
2516
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2517
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2518
+ min-width: 125px;
2519
+ padding-bottom: 15px; }
2520
+ .chat-single-message-container.request {
2521
+ display: flex;
2522
+ justify-content: flex-end;
2523
+ padding-right: 20px;
2524
+ -webkit-animation: scale-up-br 0.5s ease;
2525
+ animation: scale-up-br 0.5s ease; }
2526
+ .chat-single-message-container.request .chat-message-bubble {
2527
+ background: var(--react-autoql-accent-color);
2528
+ color: var(--react-autoql-accent-text-color);
2529
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2530
+ .chat-single-message-container .chat-message-bubble {
2531
+ position: relative;
2532
+ padding: 13px;
2533
+ border-radius: 10px;
2534
+ max-width: calc(100% - 20px);
2535
+ word-wrap: break-word;
2536
+ font-family: inherit;
2537
+ font-size: 14px;
2538
+ letter-spacing: 0.04em;
2539
+ box-sizing: border-box;
2540
+ /* make small margin on bottom because sometimes react
2541
+ custom scrollbar cuts off a pixel or 2 at the bottom */
2542
+ margin-bottom: 6px; }
2543
+ .chat-single-message-container .chat-message-bubble.text {
2544
+ max-width: 85%; }
2545
+ .chat-single-message-container .chat-message-bubble.full-width {
2546
+ width: calc(100% - 20px) !important;
2547
+ min-width: calc(100% - 20px) !important;
2548
+ max-width: calc(100% - 20px) !important; }
2549
+ .chat-single-message-container .chat-message-bubble.active {
2550
+ border: 1px solid #c3c3c3; }
2551
+ .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container {
2552
+ display: flex;
2553
+ position: absolute;
2554
+ align-items: flex-start;
2555
+ justify-content: space-between;
2556
+ transition: opacity 0.3s ease, color 0.3s ease;
2557
+ width: 100%;
2558
+ top: -31px;
2559
+ right: 0;
2560
+ z-index: 1;
2561
+ pointer-events: none;
2562
+ visibility: hidden;
2563
+ opacity: 0; }
2564
+ .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.left {
2565
+ margin-left: -5px; }
2566
+ .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.right {
2567
+ margin-right: -5px; }
2568
+ .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.right,
2569
+ .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.left {
2570
+ pointer-events: auto; }
2571
+ .chat-single-message-container .chat-message-bubble:hover .chat-message-toolbars-container {
2572
+ visibility: visible;
2573
+ opacity: 1; }
2598
2574
 
2599
2575
  /* animations */
2600
2576
  @-webkit-keyframes scale-up-br {
@@ -2628,106 +2604,33 @@ g.legendOrdinal .legendTitle tspan {
2628
2604
  transform: scale(1);
2629
2605
  transform-origin: 0% 100%; } }
2630
2606
 
2607
+ .react-autoql-drawer .chat-message-container {
2608
+ scroll-behavior: smooth !important;
2609
+ max-height: calc(100% - 140px);
2610
+ overflow-y: auto;
2611
+ overflow-x: hidden;
2612
+ flex: 1; }
2613
+ .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
2614
+ overflow-x: hidden !important;
2615
+ margin-bottom: 0 !important; }
2631
2616
 
2632
- .react-autoql-drawer {
2633
- font-family: var(--react-autoql-font-family), sans-serif;
2634
- line-height: 22px; }
2617
+ /* custom scrollbar */
2618
+ .react-autoql-drawer .chat-message-container > div:last-child {
2619
+ opacity: 0;
2620
+ transition: opacity 200ms ease; }
2635
2621
 
2636
- .react-autoql-drawer.disable-selection {
2637
- -webkit-user-select: none;
2638
- -moz-user-select: none;
2639
- -ms-user-select: none;
2640
- user-select: none; }
2641
-
2642
- .react-autoql-drawer .react-autoql-drawer-content-container {
2643
- width: 100%;
2644
- height: 100%;
2645
- display: flex;
2646
- background: var(--react-autoql-background-color-secondary);
2647
- overflow: hidden;
2648
- border-radius: 4px;
2649
- flex-direction: column;
2650
- justify-content: stretch; }
2651
-
2652
- .react-autoql-drawer .chat-header-container {
2653
- display: flex;
2654
- justify-content: space-between;
2655
- width: 100%;
2656
- height: 60px;
2657
- background: var(--react-autoql-accent-color);
2658
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
2659
- flex-grow: 0;
2660
- flex-shrink: 0;
2661
- z-index: 1; }
2662
-
2663
- .react-autoql-drawer .react-autoql-header-left-container {
2664
- display: flex;
2665
- justify-content: left;
2666
- width: 100px;
2667
- margin-left: 10px; }
2668
-
2669
- .react-autoql-drawer .react-autoql-header-right-container {
2670
- display: flex;
2671
- justify-content: right;
2672
- width: 100px;
2673
- margin-right: 10px; }
2674
-
2675
- .react-autoql-drawer .react-autoql-header-center-container {
2676
- position: relative;
2677
- color: var(--react-autoql-accent-text-color);
2678
- line-height: 60px;
2679
- font-size: 18px;
2680
- letter-spacing: 0.05em;
2681
- font-weight: 600;
2682
- overflow: hidden;
2683
- text-overflow: ellipsis;
2684
- white-space: nowrap; }
2685
-
2686
- .react-autoql-drawer .header-title {
2687
- -webkit-animation: fadeIn 0.3s;
2688
- animation: fadeIn 0.3s; }
2689
-
2690
- .react-autoql-drawer .react-autoql-drawer-header-btn {
2691
- line-height: 1em;
2692
- font-weight: normal;
2693
- float: none;
2622
+ .react-autoql-drawer .chat-message-container:hover > div:last-child {
2694
2623
  opacity: 1; }
2695
- .react-autoql-drawer .react-autoql-drawer-header-btn.hidden {
2696
- display: none; }
2697
- .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
2698
- width: 27px;
2699
- height: 27px; }
2700
- .react-autoql-drawer .react-autoql-drawer-header-btn.screen-mode span.react-autoql-icon svg {
2701
- width: 22px;
2702
- height: 22px; }
2703
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
2704
- width: 22px;
2705
- height: 22px; }
2706
- .react-autoql-drawer .react-autoql-drawer-header-btn.filter-locking span.react-autoql-icon svg {
2707
- width: 22px;
2708
- height: 22px; }
2709
2624
 
2710
- .react-autoql-drawer .chat-message-container {
2711
- scroll-behavior: smooth !important;
2712
- max-height: calc(100% - 140px);
2713
- overflow-y: auto;
2714
- overflow-x: hidden;
2715
- flex: 1; }
2716
- .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
2717
- overflow-x: hidden !important;
2718
- margin-bottom: 0 !important; }
2625
+ .react-autoql-drawer .response-loading-container {
2626
+ position: absolute;
2627
+ bottom: 45px;
2628
+ left: 20px; }
2719
2629
 
2720
2630
  .react-autoql-drawer .chat-bar-container {
2721
2631
  position: relative;
2722
2632
  padding: 10px; }
2723
2633
 
2724
- .react-autoql-drawer .chat-drawer-chat-bar {
2725
- flex-shrink: 0;
2726
- flex-grow: 0;
2727
- height: 60px;
2728
- -webkit-animation: fadeIn 0.3s;
2729
- animation: fadeIn 0.3s; }
2730
-
2731
2634
  .react-autoql-drawer .watermark {
2732
2635
  color: var(--react-autoql-text-color-primary);
2733
2636
  text-align: center;
@@ -2736,857 +2639,889 @@ g.legendOrdinal .legendTitle tspan {
2736
2639
  width: calc(100% - 10px);
2737
2640
  font-size: 13px; }
2738
2641
 
2739
- .react-autoql-drawer .react-autoql-drawer:focus {
2740
- outline: none; }
2741
-
2742
- .react-autoql-drawer .chat-header-container button {
2743
- background: transparent;
2744
- border: none;
2745
- color: var(--react-autoql-accent-text-color);
2746
- margin: 10px 0px 10px 0px;
2747
- margin-right: 0;
2748
- font-size: 20px;
2749
- cursor: pointer;
2750
- outline: none !important; }
2642
+ .react-autoql-drawer .chat-drawer-chat-bar {
2643
+ flex-shrink: 0;
2644
+ flex-grow: 0;
2645
+ height: 60px;
2646
+ -webkit-animation: fadeIn 0.3s;
2647
+ animation: fadeIn 0.3s; }
2751
2648
 
2752
- .react-autoql-drawer .chat-header-container button:hover {
2753
- opacity: 0.7; }
2649
+ .react-autoql-cascader {
2650
+ position: relative;
2651
+ white-space: nowrap;
2652
+ overflow: hidden;
2653
+ min-width: 300px; }
2654
+ .react-autoql-cascader .options-container {
2655
+ transition: max-width 0.3s ease;
2656
+ display: inline-block;
2657
+ vertical-align: top;
2658
+ padding: 0 10px;
2659
+ margin: 10px 0;
2660
+ width: 100%;
2661
+ max-width: calc(100% - 20px);
2662
+ white-space: pre-wrap; }
2663
+ .react-autoql-cascader .options-container.hidden {
2664
+ max-width: 0; }
2665
+ .react-autoql-cascader .options-container.hidden span {
2666
+ white-space: nowrap; }
2667
+ .react-autoql-cascader .options-container.hidden .option {
2668
+ opacity: 0;
2669
+ pointer-events: none; }
2670
+ .react-autoql-cascader .options-container .options-title {
2671
+ padding: 4px;
2672
+ padding-left: 10px;
2673
+ font-weight: 600; }
2674
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2675
+ position: absolute;
2676
+ cursor: pointer;
2677
+ top: 15px;
2678
+ left: 0; }
2679
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2680
+ opacity: 0.8; }
2681
+ .react-autoql-cascader .options-container .option {
2682
+ cursor: pointer;
2683
+ padding: 4px;
2684
+ display: flex;
2685
+ justify-content: space-between;
2686
+ border-radius: 2px;
2687
+ padding-left: 10px; }
2688
+ .react-autoql-cascader .options-container .option .option-arrow {
2689
+ opacity: 0.7; }
2690
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2691
+ opacity: 0;
2692
+ color: var(--react-autoql-accent-text-color);
2693
+ font-size: 16px;
2694
+ vertical-align: middle; }
2695
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2696
+ background-color: var(--react-autoql-accent-color, #26a7df);
2697
+ color: var(--react-autoql-accent-text-color); }
2698
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2699
+ opacity: 1; }
2700
+ .react-autoql-cascader .options-container:not(:last-child) {
2701
+ border-right: 1px solid #d3d3d352; }
2754
2702
 
2755
- .react-autoql-drawer .chat-header-container button svg {
2756
- width: 35px;
2757
- height: 35px; }
2703
+ .query-tips-page-container {
2704
+ height: 100%;
2705
+ padding: 10px;
2706
+ display: flex;
2707
+ flex-direction: column;
2708
+ justify-content: flex-start; }
2709
+ .query-tips-page-container h2 {
2710
+ color: var(--react-autoql-text-color-primary); }
2711
+ .query-tips-page-container .react-autoql-chatbar-input-container {
2712
+ flex: 0;
2713
+ padding: 10px; }
2714
+ .query-tips-page-container .react-autoql-chatbar-input-container .react-autoql-chatbar-input {
2715
+ margin: 0;
2716
+ width: 100%; }
2717
+ .query-tips-page-container .query-tips-result-container {
2718
+ color: var(--react-autoql-text-color-primary);
2719
+ text-align: center;
2720
+ flex: 1; }
2721
+ .query-tips-page-container .query-tips-result-container .animated-item {
2722
+ -webkit-animation: fadeIn 0.3s linear;
2723
+ animation: fadeIn 0.3s linear;
2724
+ -webkit-animation-fill-mode: both;
2725
+ animation-fill-mode: both; }
2726
+ .query-tips-page-container .query-tips-result-container .query-tip-item {
2727
+ position: relative;
2728
+ padding: 13px;
2729
+ cursor: pointer; }
2730
+ .query-tips-page-container .query-tips-result-container .query-tip-item:first-child {
2731
+ border-top: none; }
2732
+ .query-tips-page-container .query-tips-result-container .query-tip-item:hover {
2733
+ font-weight: bold;
2734
+ color: var(--react-autoql-accent-color); }
2735
+ .query-tips-page-container .query-tips-result-container .query-tips-result-placeholder {
2736
+ margin-top: 50px; }
2737
+ .query-tips-page-container .chat-bar-clear-btn {
2738
+ position: absolute;
2739
+ display: flex;
2740
+ justify-content: flex-start;
2741
+ align-items: center;
2742
+ right: 0;
2743
+ top: 0;
2744
+ width: 50px;
2745
+ height: 100%;
2746
+ font-size: 20px;
2747
+ visibility: hidden;
2748
+ color: var(--react-autoql-text-color-placeholder);
2749
+ cursor: pointer; }
2750
+ .query-tips-page-container .chat-bar-clear-btn:hover {
2751
+ color: var(--react-autoql-accent-color); }
2752
+ .query-tips-page-container .chat-bar-clear-btn.visible {
2753
+ visibility: visible; }
2754
+ .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2755
+ padding-left: 46px; }
2756
+ .query-tips-page-container .react-autoql-chatbar-input.right-padding {
2757
+ padding-right: 46px; }
2758
2758
 
2759
- .topics-container {
2760
- margin: 5px 0; }
2759
+ .animated-item:nth-child(1) {
2760
+ -webkit-animation-delay: 0.08s;
2761
+ animation-delay: 0.08s; }
2761
2762
 
2762
- .intro-qi-link {
2763
- cursor: pointer;
2764
- color: var(--react-autoql-accent-color); }
2763
+ .animated-item:nth-child(2) {
2764
+ -webkit-animation-delay: 0.16s;
2765
+ animation-delay: 0.16s; }
2765
2766
 
2766
- /* custom scrollbar */
2767
- .react-autoql-drawer .chat-message-container > div:last-child {
2768
- opacity: 0;
2769
- transition: opacity 200ms ease; }
2767
+ .animated-item:nth-child(3) {
2768
+ -webkit-animation-delay: 0.24s;
2769
+ animation-delay: 0.24s; }
2770
2770
 
2771
- .react-autoql-drawer .chat-message-container:hover > div:last-child {
2772
- opacity: 1; }
2771
+ .animated-item:nth-child(4) {
2772
+ -webkit-animation-delay: 0.32s;
2773
+ animation-delay: 0.32s; }
2773
2774
 
2774
- /* rc-drawer */
2775
- .react-autoql-drawer .drawer-content {
2776
- background: white;
2777
- border-radius: 4px;
2778
- overflow: visible;
2779
- opacity: 1;
2780
- transition: opacity 0.3s ease; }
2775
+ .animated-item:nth-child(5) {
2776
+ -webkit-animation-delay: 0.4s;
2777
+ animation-delay: 0.4s; }
2781
2778
 
2782
- .react-autoql-drawer.closed .drawer-content {
2783
- opacity: 0; }
2779
+ .animated-item:nth-child(6) {
2780
+ -webkit-animation-delay: 0.48s;
2781
+ animation-delay: 0.48s; }
2784
2782
 
2785
- .react-autoql-drawer .drawer-handle {
2786
- transition: opacity 0.5s ease;
2787
- overflow: hidden;
2788
- width: 50px;
2789
- height: 50px;
2790
- border-radius: 50px !important;
2791
- font-size: 22px; }
2792
- .react-autoql-drawer .drawer-handle.default-logo {
2793
- background-color: var(--react-autoql-accent-color, #26a7df);
2794
- color: var(--react-autoql-accent-text-color); }
2795
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
2796
- position: absolute;
2797
- vertical-align: top;
2798
- top: 11px;
2799
- left: 12px; }
2800
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
2801
- position: absolute;
2802
- width: 26px;
2803
- height: 26px; }
2783
+ .animated-item:nth-child(7) {
2784
+ -webkit-animation-delay: 0.56s;
2785
+ animation-delay: 0.56s; }
2804
2786
 
2805
- .react-autoql-drawer.drawer-right .drawer-handle {
2806
- left: -70px !important; }
2787
+ .animated-item:nth-child(8) {
2788
+ -webkit-animation-delay: 0.64s;
2789
+ animation-delay: 0.64s; }
2807
2790
 
2808
- .react-autoql-drawer.drawer-left .drawer-handle {
2809
- right: -60px !important; }
2810
-
2811
- .react-autoql-drawer.drawer-top .drawer-handle {
2812
- bottom: -60px !important; }
2813
-
2814
- .react-autoql-drawer.drawer-bottom .drawer-handle {
2815
- top: -60px !important; }
2816
-
2817
- .react-autoql-drawer .drawer-handle.hide {
2818
- opacity: 0;
2819
- visibility: hidden; }
2820
-
2821
- .react-autoql-drawer .drawer-handle-icon,
2822
- .react-autoql-drawer .drawer-handle-icon::before,
2823
- .react-autoql-drawer .drawer-handle-icon::after {
2824
- background: var(--react-autoql-text-color-primary); }
2791
+ .animated-item:nth-child(9) {
2792
+ -webkit-animation-delay: 0.72s;
2793
+ animation-delay: 0.72s; }
2825
2794
 
2826
- .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
2827
- .react-autoql-drawer .drawer-top .drawer-content-wrapper {
2828
- left: 0; }
2795
+ .animated-item:nth-child(10) {
2796
+ -webkit-animation-delay: 0.8s;
2797
+ animation-delay: 0.8s; }
2829
2798
 
2830
- .react-autoql-drawer .drawer-content-wrapper {
2831
- background: transparent; }
2799
+ .animated-item:nth-child(11) {
2800
+ -webkit-animation-delay: 0.88s;
2801
+ animation-delay: 0.88s; }
2832
2802
 
2833
- .react-autoql-drawer.drawer-right .drawer-content-wrapper,
2834
- .react-autoql-drawer.drawer-left .drawer-content-wrapper {
2835
- max-width: calc(100vw - 45px) !important;
2836
- min-width: 400px !important; }
2803
+ .animated-item:nth-child(12) {
2804
+ -webkit-animation-delay: 0.96s;
2805
+ animation-delay: 0.96s; }
2837
2806
 
2838
- .react-autoql-drawer.drawer-top .drawer-content-wrapper,
2839
- .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
2840
- max-height: calc(100vh - 45px) !important;
2841
- min-height: 400px !important; }
2807
+ .animated-item:nth-child(13) {
2808
+ -webkit-animation-delay: 1.04s;
2809
+ animation-delay: 1.04s; }
2842
2810
 
2843
- .react-autoql-drawer-resize-handle {
2844
- position: absolute;
2845
- background: transparent; }
2846
- .react-autoql-drawer-resize-handle.right {
2847
- top: 0;
2848
- left: -5px;
2849
- width: 5px;
2850
- height: 100vh;
2851
- cursor: ew-resize; }
2852
- .react-autoql-drawer-resize-handle.left {
2853
- top: 0;
2854
- right: -5px;
2855
- width: 5px;
2856
- height: 100vh;
2857
- cursor: ew-resize; }
2858
- .react-autoql-drawer-resize-handle.top {
2859
- bottom: -5px;
2860
- left: 0;
2861
- height: 5px;
2862
- width: 100vw;
2863
- cursor: ns-resize; }
2864
- .react-autoql-drawer-resize-handle.bottom {
2865
- top: -5px;
2866
- left: 0;
2867
- height: 5px;
2868
- width: 100vw;
2869
- cursor: ns-resize; }
2811
+ .animated-item:nth-child(14) {
2812
+ -webkit-animation-delay: 1.12s;
2813
+ animation-delay: 1.12s; }
2870
2814
 
2871
- .react-autoql-drawer .response-loading-container {
2872
- position: absolute;
2873
- bottom: 45px;
2874
- left: 20px; }
2815
+ .animated-item:nth-child(15) {
2816
+ -webkit-animation-delay: 1.2s;
2817
+ animation-delay: 1.2s; }
2875
2818
 
2876
- /* Tooltips */
2877
- .react-autoql-drawer-tooltip {
2878
- font-family: var(--react-autoql-font-family), sans-serif;
2879
- letter-spacing: 0.04em;
2880
- line-height: 1.5em;
2881
- padding: 7px 15px;
2882
- transition: none;
2883
- text-align: left;
2884
- opacity: 1 !important;
2885
- z-index: 99999 !important;
2886
- /* necessary to show up on top of rc drawer */ }
2819
+ @-webkit-keyframes fadeIn {
2820
+ 0% {
2821
+ opacity: 0;
2822
+ top: 100px; }
2823
+ 75% {
2824
+ opacity: 0.5;
2825
+ top: 0px; }
2826
+ 100% {
2827
+ opacity: 1; } }
2887
2828
 
2888
- .interpretation-tooltip {
2889
- font-family: var(--react-autoql-font-family), sans-serif;
2890
- font-size: 12px;
2891
- text-align: left;
2892
- letter-spacing: 0.04em;
2893
- padding: 7px 15px;
2894
- max-width: 400px;
2895
- opacity: 1 !important;
2896
- transition: none;
2829
+ .filter-lock-menu {
2897
2830
  z-index: 99999 !important;
2898
- /* necessary to show up on top of rc drawer */ }
2899
-
2900
- .react-tiny-popover-container {
2901
- z-index: 99999;
2831
+ transition: opacity 0.1s ease 0s !important;
2902
2832
  border: 1px solid #ababab52;
2903
2833
  border-radius: 4px;
2904
2834
  box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
2905
- transition: opacity 0.2s ease 0s !important;
2906
- opacity: 1 !important; }
2907
-
2908
- .clear-messages-confirm-popover {
2909
- color: var(--react-autoql-text-color-primary);
2835
+ opacity: 1;
2836
+ min-width: 500px;
2837
+ max-width: 70vw;
2838
+ min-height: 350px;
2839
+ max-height: 90vh;
2910
2840
  background: var(--react-autoql-background-color-primary);
2911
- text-align: right;
2912
- padding: 18px;
2913
- width: 266px; }
2841
+ color: var(--react-autoql-text-color-primary);
2842
+ overflow-y: auto !important; }
2843
+ .filter-lock-menu .filter-lock-toast-container {
2844
+ top: 0;
2845
+ position: absolute; }
2846
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast {
2847
+ min-height: 48px; }
2848
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body {
2849
+ justify-content: center; }
2850
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body > div:last-child {
2851
+ flex: unset; }
2852
+ .filter-lock-menu .include-exclude-toggle-group {
2853
+ height: 23px;
2854
+ font-size: 12px;
2855
+ font-weight: 200; }
2856
+ .filter-lock-menu .include-exclude-toggle-group .react-autoql-radio-btn.active {
2857
+ background-color: var(--react-autoql-border-color); }
2858
+ .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn:hover, .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn.active {
2859
+ color: var(--react-autoql-accent-color);
2860
+ border-color: var(--react-autoql-accent-color); }
2861
+ .filter-lock-menu .include-exclude-toggle-group :nth-child(2).react-autoql-radio-btn:hover, .filter-lock-menu .include-exclude-toggle-group :nth-child(2).react-autoql-radio-btn.active {
2862
+ color: var(--react-autoql-danger-color);
2863
+ border-color: var(--react-autoql-danger-color); }
2914
2864
 
2915
- .react-autoql-confirm-text {
2916
- text-align: center; }
2865
+ .filter-lock-menu-content {
2866
+ padding: 15px 20px;
2867
+ display: flex;
2868
+ flex-direction: column;
2869
+ justify-content: stretch;
2870
+ height: 100%; }
2871
+ .filter-lock-menu-content.closed {
2872
+ opacity: 0; }
2873
+ .filter-lock-menu-content h3 {
2874
+ margin-top: 3px;
2875
+ margin-bottom: 15px;
2876
+ color: var(--react-autoql-text-color-primary); }
2877
+ .filter-lock-menu-content h4 {
2878
+ margin-top: 3px;
2879
+ margin-bottom: 5px;
2880
+ color: var(--react-autoql-text-color-primary);
2881
+ display: inline-flex; }
2882
+ .filter-lock-menu-content .react-autoql-condition-list-loading-container,
2883
+ .filter-lock-menu-content .react-autoql-empty-condition-list,
2884
+ .filter-lock-menu-content .react-autoql-filter-list-container {
2885
+ flex: 1 1 245px; }
2886
+ .filter-lock-menu-content .filter-lock-menu-header {
2887
+ flex: 0;
2888
+ width: 100%;
2889
+ display: flex;
2890
+ align-items: flex-start;
2891
+ justify-content: space-between; }
2892
+ .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-btn {
2893
+ border: none;
2894
+ margin: 0;
2895
+ padding: 0;
2896
+ font-size: 20px; }
2897
+ .filter-lock-menu-content .filter-lock-menu-footer {
2898
+ width: 100%;
2899
+ display: flex;
2900
+ justify-content: flex-end; }
2901
+ .filter-lock-menu-content .react-autoql-empty-condition-list {
2902
+ opacity: 0.8;
2903
+ width: 100%;
2904
+ text-align: center;
2905
+ padding-top: 70px; }
2906
+ .filter-lock-menu-content .react-autoql-filter-list-container {
2907
+ margin: 10px 0; }
2908
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex {
2909
+ width: 100%;
2910
+ display: flex;
2911
+ flex-direction: row;
2912
+ justify-content: space-between;
2913
+ flex-wrap: nowrap;
2914
+ margin-bottom: 4px; }
2915
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .persist-toggle-column,
2916
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-condition-table-list-item {
2917
+ margin-right: 25px;
2918
+ max-width: 350px; }
2919
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon {
2920
+ cursor: pointer; }
2921
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon:hover {
2922
+ color: var(--react-autoql-danger-color); }
2923
+ .filter-lock-menu-content .react-autoql-filter-list-container .filter-lock-category-title {
2924
+ padding-right: 10px;
2925
+ padding-top: 1px;
2926
+ max-width: 195px;
2927
+ overflow: hidden; }
2928
+ .filter-lock-menu-content .react-autoql-filter-list-container .persist-toggle-column .react-autoql-icon {
2929
+ margin-left: 3px; }
2930
+ .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-highlight-row {
2931
+ background-color: var(--react-autoql-accent-color);
2932
+ color: var(--react-autoql-accent-text-color);
2933
+ -webkit-animation-name: highlightIn, highlightOut;
2934
+ animation-name: highlightIn, highlightOut;
2935
+ -webkit-animation-duration: 300ms, 300ms;
2936
+ animation-duration: 300ms, 300ms;
2937
+ -webkit-animation-delay: 0ms, 1000ms;
2938
+ animation-delay: 0ms, 1000ms;
2939
+ -webkit-animation-timing-function: ease-in, ease-out;
2940
+ animation-timing-function: ease-in, ease-out;
2941
+ -webkit-animation-iteration-count: 1, 1;
2942
+ animation-iteration-count: 1, 1; }
2943
+ .filter-lock-menu-content .react-autoql-condition-locking-input {
2944
+ padding: 5px;
2945
+ padding-left: 20px;
2946
+ height: 32px;
2947
+ box-sizing: border-box;
2948
+ border-radius: 24px;
2949
+ font-size: 12px;
2950
+ font-family: inherit;
2951
+ letter-spacing: 0.04em;
2952
+ outline: none !important;
2953
+ width: 100%;
2954
+ font-family: inherit;
2955
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2956
+ background: var(--react-autoql-background-color-primary);
2957
+ color: var(--react-autoql-text-color-primary); }
2958
+ .filter-lock-menu-content .react-autoql-condition-locking-input:hover {
2959
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
2960
+ .filter-lock-menu-content .react-autoql-condition-locking-input::-moz-placeholder {
2961
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
2962
+ opacity: 0.5; }
2963
+ .filter-lock-menu-content .react-autoql-condition-locking-input:-ms-input-placeholder {
2964
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
2965
+ opacity: 0.5; }
2966
+ .filter-lock-menu-content .react-autoql-condition-locking-input::placeholder {
2967
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
2968
+ opacity: 0.5; }
2969
+ .filter-lock-menu-content .react-autosuggest__container--open {
2970
+ position: relative; }
2971
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open {
2972
+ background-color: var(--react-autoql-background-color-primary);
2973
+ border: 1px solid var(--react-autoql-border-color);
2974
+ color: var(--react-autoql-text-color-primary);
2975
+ position: absolute;
2976
+ padding: 10px 0;
2977
+ display: block;
2978
+ font-family: inherit;
2979
+ font-size: 15px;
2980
+ font-weight: normal;
2981
+ z-index: 2;
2982
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2983
+ text-align: left;
2984
+ border-radius: 4px;
2985
+ height: auto;
2986
+ width: 100%;
2987
+ max-height: 200px;
2988
+ overflow-y: scroll !important; }
2989
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open ul.filter-lock-suggestion-item {
2990
+ cursor: pointer;
2991
+ width: 100%;
2992
+ columns: 2;
2993
+ -webkit-columns: 2;
2994
+ list-style: none;
2995
+ -moz-columns: 2;
2996
+ letter-spacing: 0.05em;
2997
+ line-height: 22.5px;
2998
+ padding: 0px 20px 3px 20px; }
2999
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion {
3000
+ color: var(--react-autoql-text-color-primary); }
3001
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestions-list {
3002
+ margin: 0;
3003
+ padding: 0;
3004
+ list-style-type: none; }
3005
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion--highlighted {
3006
+ background-color: rgba(0, 0, 0, 0.1) !important; }
3007
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__section-title {
3008
+ padding: 10px 0 0 10px;
3009
+ font-size: 12px;
3010
+ color: #777; }
2917
3011
 
2918
- .react-autoql-menu-text {
2919
- text-align: center; }
2920
- .react-autoql-menu-text:hover {
2921
- color: var(--react-autoql-accent-color);
2922
- cursor: pointer; }
3012
+ @-webkit-keyframes highlightOut {
3013
+ 100% {
3014
+ background-color: var(--react-autoql-background-color-primary);
3015
+ color: var(--react-autoql-text-color-primary); }
3016
+ 0% {
3017
+ background-color: var(--react-autoql-accent-color);
3018
+ color: var(--react-autoql-accent-text-color); } }
2923
3019
 
2924
- .react-autoql-confirm-icon {
2925
- color: #faad14 !important;
2926
- vertical-align: middle;
2927
- margin-right: 5px !important;
2928
- margin-bottom: 3px; }
3020
+ @keyframes highlightOut {
3021
+ 100% {
3022
+ background-color: var(--react-autoql-background-color-primary);
3023
+ color: var(--react-autoql-text-color-primary); }
3024
+ 0% {
3025
+ background-color: var(--react-autoql-accent-color);
3026
+ color: var(--react-autoql-accent-text-color); } }
2929
3027
 
2930
- .data-messenger-tab-container {
2931
- position: absolute;
2932
- background: transparent;
2933
- display: flex;
2934
- justify-content: center;
2935
- align-items: center;
2936
- pointer-events: none; }
2937
- .data-messenger-tab-container.right {
2938
- height: 100vh;
2939
- width: 60px;
2940
- left: -60px; }
2941
- .data-messenger-tab-container.left {
2942
- height: 100vh;
2943
- width: 60px;
2944
- right: -60px; }
2945
- .data-messenger-tab-container.top {
2946
- width: 100vw;
2947
- height: 60px;
2948
- bottom: -60px; }
2949
- .data-messenger-tab-container.bottom {
2950
- width: 100vw;
2951
- height: 60px;
2952
- top: -60px; }
3028
+ @-webkit-keyframes highlightIn {
3029
+ 100% {
3030
+ background-color: var(--react-autoql-accent-color);
3031
+ color: var(--react-autoql-accent-text-color); }
3032
+ 0% {
3033
+ background-color: var(--react-autoql-background-color-primary);
3034
+ color: var(--react-autoql-text-color-primary); } }
2953
3035
 
2954
- /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
2955
- .page-switcher-shadow-container {
2956
- position: absolute;
2957
- background: transparent;
2958
- overflow: hidden; }
3036
+ @keyframes highlightIn {
3037
+ 100% {
3038
+ background-color: var(--react-autoql-accent-color);
3039
+ color: var(--react-autoql-accent-text-color); }
3040
+ 0% {
3041
+ background-color: var(--react-autoql-background-color-primary);
3042
+ color: var(--react-autoql-text-color-primary); } }
2959
3043
 
2960
- .page-switcher-shadow-container.right {
2961
- top: 80px;
2962
- width: 60px; }
3044
+ .react-autoql-drawer {
3045
+ font-family: var(--react-autoql-font-family), sans-serif;
3046
+ line-height: 22px; }
2963
3047
 
2964
- .page-switcher-shadow-container.left {
2965
- top: 80px;
2966
- width: 60px; }
3048
+ .react-autoql-drawer.disable-selection {
3049
+ -webkit-user-select: none;
3050
+ -moz-user-select: none;
3051
+ -ms-user-select: none;
3052
+ user-select: none; }
2967
3053
 
2968
- /* Container holding the tabs */
2969
- .page-switcher-container {
2970
- box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
3054
+ .react-autoql-drawer .react-autoql-drawer-content-container {
3055
+ width: 100%;
3056
+ height: 100%;
3057
+ display: flex;
3058
+ background: var(--react-autoql-background-color-secondary);
2971
3059
  overflow: hidden;
2972
- box-sizing: border-box;
3060
+ border-radius: 4px;
3061
+ flex-direction: column;
3062
+ justify-content: stretch; }
3063
+
3064
+ .react-autoql-drawer .chat-header-container {
2973
3065
  display: flex;
2974
- pointer-events: all; }
2975
- .page-switcher-container .tab {
2976
- position: relative;
2977
- z-index: 1;
2978
- background: var(--react-autoql-accent-color);
2979
- color: var(--react-autoql-accent-text-color);
2980
- opacity: 1;
2981
- font-size: 22px;
2982
- text-align: center;
2983
- transform: translate(0, 0);
2984
- cursor: pointer;
2985
- transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
2986
- transition-duration: 0.2s; }
2987
- .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
2988
- height: 22px;
2989
- width: 23px; }
2990
- .page-switcher-container.right {
2991
- border-top-left-radius: 5px;
2992
- border-bottom-left-radius: 5px;
2993
- margin-top: 20px;
2994
- margin-left: 20px;
2995
- margin-bottom: 20px;
2996
- flex-direction: column; }
2997
- .page-switcher-container.right .tab {
2998
- box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
2999
- .page-switcher-container.left {
3000
- border-top-right-radius: 5px;
3001
- border-bottom-right-radius: 5px;
3002
- margin-top: 20px;
3003
- margin-right: 20px;
3004
- margin-bottom: 20px;
3005
- margin-left: -5px;
3006
- flex-direction: column; }
3007
- .page-switcher-container.left .tab {
3008
- box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
3009
- .page-switcher-container.top {
3010
- border-bottom-right-radius: 5px;
3011
- border-bottom-left-radius: 5px;
3012
- margin-right: 20px;
3013
- margin-left: 20px;
3014
- margin-bottom: 20px;
3015
- flex-direction: row;
3016
- height: 40px; }
3017
- .page-switcher-container.top .tab {
3018
- box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
3019
- .page-switcher-container.bottom {
3020
- border-top-left-radius: 5px;
3021
- border-top-right-radius: 5px;
3022
- margin-top: 20px;
3023
- margin-left: 20px;
3024
- margin-right: 20px;
3025
- flex-direction: row;
3026
- height: 40px; }
3027
- .page-switcher-container.bottom .tab {
3028
- box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
3066
+ justify-content: space-between;
3067
+ width: 100%;
3068
+ height: 60px;
3069
+ background: var(--react-autoql-accent-color);
3070
+ color: var(--react-autoql-accent-text-color);
3071
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
3072
+ flex-grow: 0;
3073
+ flex-shrink: 0;
3074
+ z-index: 1; }
3029
3075
 
3030
- /* Individual Tabs */
3031
- .page-switcher-container .tab {
3076
+ .react-autoql-drawer .react-autoql-header-left-container {
3032
3077
  display: flex;
3033
- justify-content: center;
3034
- align-items: center; }
3078
+ justify-content: left;
3079
+ width: 100px;
3080
+ margin-left: 10px; }
3035
3081
 
3036
- .data-messenger-notification-btn {
3082
+ .react-autoql-drawer .react-autoql-header-right-container {
3037
3083
  display: flex;
3038
- flex-direction: column;
3039
- justify-content: flex-start;
3040
- line-height: inherit; }
3084
+ justify-content: right;
3085
+ width: 100px;
3086
+ margin-right: 10px; }
3041
3087
 
3042
- .page-switcher-container.right .tab,
3043
- .page-switcher-container.left .tab {
3044
- height: 65px; }
3088
+ .react-autoql-drawer .react-autoql-header-center-container {
3089
+ position: relative;
3090
+ color: var(--react-autoql-accent-text-color);
3091
+ line-height: 60px;
3092
+ font-size: 18px;
3093
+ letter-spacing: 0.05em;
3094
+ font-weight: 600;
3095
+ overflow: hidden;
3096
+ text-overflow: ellipsis;
3097
+ white-space: nowrap; }
3045
3098
 
3046
- .page-switcher-container.top .tab,
3047
- .page-switcher-container.bottom .tab {
3048
- width: 65px; }
3099
+ .react-autoql-drawer .header-title {
3100
+ -webkit-animation: fadeIn 0.3s;
3101
+ animation: fadeIn 0.3s; }
3049
3102
 
3050
- .page-switcher-container.bottom .tab {
3051
- background: var(--react-autoql-background-color-secondary);
3052
- color: var(--react-autoql-text-color-primary); }
3103
+ .react-autoql-drawer .react-autoql-drawer-header-btn {
3104
+ line-height: 1em;
3105
+ font-weight: normal;
3106
+ float: none;
3107
+ opacity: 1; }
3108
+ .react-autoql-drawer .react-autoql-drawer-header-btn.hidden {
3109
+ display: none; }
3110
+ .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
3111
+ width: 27px;
3112
+ height: 27px; }
3113
+ .react-autoql-drawer .react-autoql-drawer-header-btn.screen-mode span.react-autoql-icon svg {
3114
+ width: 22px;
3115
+ height: 22px; }
3116
+ .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
3117
+ width: 22px;
3118
+ height: 22px; }
3119
+ .react-autoql-drawer .react-autoql-drawer-header-btn.filter-locking span.react-autoql-icon svg {
3120
+ width: 22px;
3121
+ height: 22px; }
3053
3122
 
3054
- .page-switcher-container .tab.active {
3055
- background: var(--react-autoql-background-color-secondary);
3056
- color: var(--react-autoql-accent-color);
3057
- box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
3058
- font-weight: bold;
3059
- position: relative;
3060
- z-index: 2; }
3123
+ .react-autoql-drawer .react-autoql-drawer:focus {
3124
+ outline: none; }
3061
3125
 
3062
- .page-switcher-container.bottom .tab.active {
3063
- background: var(--react-autoql-accent-color);
3064
- color: #fff;
3065
- font-weight: bold; }
3126
+ .react-autoql-drawer .chat-header-container button {
3127
+ background: transparent;
3128
+ border: none;
3129
+ color: var(--react-autoql-accent-text-color);
3130
+ margin: 10px 0px 10px 0px;
3131
+ margin-right: 0;
3132
+ font-size: 20px;
3133
+ cursor: pointer;
3134
+ outline: none !important; }
3066
3135
 
3067
- /* animations */
3068
- @-webkit-keyframes response-loading1 {
3069
- 0% {
3070
- transform: scale(0); }
3071
- 100% {
3072
- transform: scale(1); } }
3073
- @keyframes response-loading1 {
3074
- 0% {
3075
- transform: scale(0); }
3076
- 100% {
3077
- transform: scale(1); } }
3136
+ .react-autoql-drawer .chat-header-container button:hover {
3137
+ opacity: 0.7; }
3078
3138
 
3079
- @-webkit-keyframes response-loading3 {
3080
- 0% {
3081
- transform: scale(1); }
3082
- 100% {
3083
- transform: scale(0); } }
3139
+ .react-autoql-drawer .chat-header-container button svg {
3140
+ width: 35px;
3141
+ height: 35px; }
3084
3142
 
3085
- @keyframes response-loading3 {
3086
- 0% {
3087
- transform: scale(1); }
3088
- 100% {
3089
- transform: scale(0); } }
3143
+ .topics-container {
3144
+ margin: 5px 0; }
3090
3145
 
3091
- @-webkit-keyframes response-loading2 {
3092
- 0% {
3093
- transform: translate(0, 0); }
3094
- 100% {
3095
- transform: translate(19px, 0); } }
3146
+ .intro-qi-link {
3147
+ cursor: pointer;
3148
+ color: var(--react-autoql-accent-color); }
3096
3149
 
3097
- @keyframes response-loading2 {
3098
- 0% {
3099
- transform: translate(0, 0); }
3100
- 100% {
3101
- transform: translate(19px, 0); } }
3150
+ /* rc-drawer */
3151
+ .react-autoql-drawer .drawer-content {
3152
+ background: white;
3153
+ border-radius: 4px;
3154
+ overflow: visible;
3155
+ opacity: 1;
3156
+ transition: opacity 0.3s ease; }
3102
3157
 
3103
- @-webkit-keyframes scale-up-center {
3104
- 0% {
3105
- transform: scale(0); }
3106
- 100% {
3107
- transform: scale(1); } }
3158
+ .react-autoql-drawer.closed .drawer-content {
3159
+ opacity: 0; }
3108
3160
 
3109
- @keyframes scale-up-center {
3110
- 0% {
3111
- transform: scale(0); }
3112
- 100% {
3113
- transform: scale(1); } }
3161
+ .react-autoql-drawer .drawer-handle {
3162
+ transition: opacity 0.5s ease;
3163
+ overflow: hidden;
3164
+ width: 50px;
3165
+ height: 50px;
3166
+ border-radius: 50px !important;
3167
+ font-size: 22px; }
3168
+ .react-autoql-drawer .drawer-handle.default-logo {
3169
+ background-color: var(--react-autoql-accent-color, #26a7df);
3170
+ color: var(--react-autoql-accent-text-color); }
3171
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
3172
+ position: absolute;
3173
+ vertical-align: top;
3174
+ top: 11px;
3175
+ left: 12px; }
3176
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
3177
+ position: absolute;
3178
+ width: 26px;
3179
+ height: 26px; }
3114
3180
 
3115
- @-webkit-keyframes fadeIn {
3116
- 0% {
3117
- opacity: 0; }
3118
- 100% {
3119
- opacity: 1; } }
3181
+ .react-autoql-drawer.drawer-right .drawer-handle {
3182
+ left: -70px !important; }
3120
3183
 
3121
- @keyframes fadeIn {
3122
- 0% {
3123
- opacity: 0; }
3124
- 100% {
3125
- opacity: 1; } }
3184
+ .react-autoql-drawer.drawer-left .drawer-handle {
3185
+ right: -60px !important; }
3126
3186
 
3127
- @-webkit-keyframes slideDown {
3128
- 0% {
3129
- transform: translateY(-100%); }
3130
- 100% {
3131
- transform: translateY(0%); } }
3187
+ .react-autoql-drawer.drawer-top .drawer-handle {
3188
+ bottom: -60px !important; }
3132
3189
 
3133
- @keyframes slideDown {
3134
- 0% {
3135
- transform: translateY(-100%); }
3136
- 100% {
3137
- transform: translateY(0%); } }
3190
+ .react-autoql-drawer.drawer-bottom .drawer-handle {
3191
+ top: -60px !important; }
3138
3192
 
3139
- @-webkit-keyframes snackbarFadeout {
3140
- from {
3141
- top: 60px;
3142
- opacity: 1; }
3143
- to {
3144
- top: 30px;
3145
- opacity: 0; } }
3193
+ .react-autoql-drawer .drawer-handle.hide {
3194
+ opacity: 0;
3195
+ visibility: hidden; }
3146
3196
 
3147
- @keyframes snackbarFadeout {
3148
- from {
3149
- top: 60px;
3150
- opacity: 1; }
3151
- to {
3152
- top: 30px;
3153
- opacity: 0; } }
3197
+ .react-autoql-drawer .drawer-handle-icon,
3198
+ .react-autoql-drawer .drawer-handle-icon::before,
3199
+ .react-autoql-drawer .drawer-handle-icon::after {
3200
+ background: var(--react-autoql-text-color-primary); }
3154
3201
 
3155
- .react-autoql-cascader {
3156
- position: relative;
3157
- white-space: nowrap;
3158
- overflow: hidden;
3159
- min-width: 300px; }
3160
- .react-autoql-cascader .options-container {
3161
- transition: max-width 0.3s ease;
3162
- display: inline-block;
3163
- vertical-align: top;
3164
- padding: 0 10px;
3165
- margin: 10px 0;
3166
- width: 100%;
3167
- max-width: calc(100% - 20px);
3168
- white-space: pre-wrap; }
3169
- .react-autoql-cascader .options-container.hidden {
3170
- max-width: 0; }
3171
- .react-autoql-cascader .options-container.hidden span {
3172
- white-space: nowrap; }
3173
- .react-autoql-cascader .options-container.hidden .option {
3174
- opacity: 0;
3175
- pointer-events: none; }
3176
- .react-autoql-cascader .options-container .options-title {
3177
- padding: 4px;
3178
- padding-left: 10px;
3179
- font-weight: 600; }
3180
- .react-autoql-cascader .options-container .cascader-back-arrow {
3181
- position: absolute;
3182
- cursor: pointer;
3183
- top: 15px;
3184
- left: 0; }
3185
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
3186
- opacity: 0.8; }
3187
- .react-autoql-cascader .options-container .option {
3188
- cursor: pointer;
3189
- padding: 4px;
3190
- display: flex;
3191
- justify-content: space-between;
3192
- border-radius: 2px;
3193
- padding-left: 10px; }
3194
- .react-autoql-cascader .options-container .option .option-arrow {
3195
- opacity: 0.7; }
3196
- .react-autoql-cascader .options-container .option .option-execute-icon {
3197
- opacity: 0;
3198
- color: #fff;
3199
- font-size: 16px;
3200
- vertical-align: middle; }
3201
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
3202
- background-color: var(--react-autoql-accent-color, #26a7df);
3203
- color: #fff; }
3204
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
3205
- opacity: 1; }
3206
- .react-autoql-cascader .options-container:not(:last-child) {
3207
- border-right: 1px solid #d3d3d352; }
3202
+ .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
3203
+ .react-autoql-drawer .drawer-top .drawer-content-wrapper {
3204
+ left: 0; }
3208
3205
 
3209
- .query-tips-page-container {
3210
- height: 100%;
3211
- padding: 10px; }
3212
- .query-tips-page-container .chat-bar-input-icon {
3213
- top: 20px;
3214
- left: 26px; }
3215
- .query-tips-page-container .react-autoql-chatbar-input.left-padding {
3216
- padding-left: 46px; }
3206
+ .react-autoql-drawer .drawer-content-wrapper {
3207
+ background: transparent; }
3217
3208
 
3218
- .query-tips-result-container {
3219
- color: var(--react-autoql-text-color-primary);
3220
- padding: 0px 20px;
3221
- text-align: center;
3222
- max-width: 550px;
3223
- margin: 0 auto; }
3224
- .query-tips-result-container .query-tip-list-container {
3225
- margin-bottom: 20px; }
3226
- .query-tips-result-container .animated-item {
3227
- -webkit-animation: fadeIn 0.3s linear;
3228
- animation: fadeIn 0.3s linear;
3229
- -webkit-animation-fill-mode: both;
3230
- animation-fill-mode: both; }
3231
- .query-tips-result-container .query-tip-item {
3232
- position: relative;
3233
- padding: 13px;
3234
- border-top: 1px solid rgba(0, 0, 0, 0.04);
3235
- cursor: pointer; }
3236
- .query-tips-result-container .query-tip-item:first-child {
3237
- border-top: none; }
3238
- .query-tips-result-container .query-tip-item .execute-btn {
3239
- position: absolute;
3240
- right: 10px;
3241
- top: 4px;
3242
- font-size: 20px;
3243
- visibility: hidden;
3244
- opacity: 0; }
3245
- .query-tips-result-container .query-tip-item:hover {
3246
- font-weight: bold;
3247
- color: var(--react-autoql-accent-color); }
3248
- .query-tips-result-container .query-tip-item:hover .execute-btn {
3249
- visibility: visible;
3250
- opacity: 1; }
3251
- .query-tips-result-container .query-tips-result-placeholder {
3252
- margin-top: 50px;
3253
- opacity: 0.6; }
3209
+ .react-autoql-drawer.drawer-right .drawer-content-wrapper,
3210
+ .react-autoql-drawer.drawer-left .drawer-content-wrapper {
3211
+ max-width: calc(100vw - 45px) !important;
3212
+ min-width: 400px !important; }
3213
+
3214
+ .react-autoql-drawer.drawer-top .drawer-content-wrapper,
3215
+ .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
3216
+ max-height: calc(100vh - 45px) !important;
3217
+ min-height: 400px !important; }
3254
3218
 
3255
- .chat-bar-loading-spinner {
3219
+ .react-autoql-drawer-resize-handle {
3256
3220
  position: absolute;
3257
- right: 20px;
3258
- top: 22px; }
3221
+ background: transparent; }
3222
+ .react-autoql-drawer-resize-handle.right {
3223
+ top: 0;
3224
+ left: -5px;
3225
+ width: 5px;
3226
+ height: 100vh;
3227
+ cursor: ew-resize; }
3228
+ .react-autoql-drawer-resize-handle.left {
3229
+ top: 0;
3230
+ right: -5px;
3231
+ width: 5px;
3232
+ height: 100vh;
3233
+ cursor: ew-resize; }
3234
+ .react-autoql-drawer-resize-handle.top {
3235
+ bottom: -5px;
3236
+ left: 0;
3237
+ height: 5px;
3238
+ width: 100vw;
3239
+ cursor: ns-resize; }
3240
+ .react-autoql-drawer-resize-handle.bottom {
3241
+ top: -5px;
3242
+ left: 0;
3243
+ height: 5px;
3244
+ width: 100vw;
3245
+ cursor: ns-resize; }
3246
+
3247
+ /* Tooltips */
3248
+ .react-autoql-drawer-tooltip {
3249
+ font-family: var(--react-autoql-font-family), sans-serif;
3250
+ letter-spacing: 0.04em;
3251
+ line-height: 1.5em;
3252
+ padding: 7px 15px;
3253
+ transition: none;
3254
+ text-align: left;
3255
+ opacity: 1 !important;
3256
+ z-index: 99999 !important;
3257
+ /* necessary to show up on top of rc drawer */ }
3258
+
3259
+ .interpretation-tooltip {
3260
+ font-family: var(--react-autoql-font-family), sans-serif;
3261
+ font-size: 12px;
3262
+ text-align: left;
3263
+ letter-spacing: 0.04em;
3264
+ padding: 7px 15px;
3265
+ max-width: 400px;
3266
+ opacity: 1 !important;
3267
+ transition: none;
3268
+ z-index: 99999 !important;
3269
+ /* necessary to show up on top of rc drawer */ }
3270
+
3271
+ .react-tiny-popover-container {
3272
+ z-index: 99999;
3273
+ border: 1px solid #ababab52;
3274
+ border-radius: 4px;
3275
+ box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
3276
+ transition: opacity 0.2s ease 0s !important;
3277
+ opacity: 1 !important; }
3259
3278
 
3260
- #react-paginate {
3261
- position: relative;
3262
- background: transparent;
3263
- padding: 8px; }
3264
- #react-paginate ul {
3265
- display: inline-block;
3266
- padding-left: 0;
3267
- margin-bottom: 0; }
3268
- #react-paginate li {
3269
- display: inline-block;
3270
- color: var(--react-autoql-text-color-primary);
3271
- cursor: pointer;
3272
- margin-right: 3px;
3273
- border-radius: 5px;
3274
- margin-bottom: 0;
3275
- -webkit-user-select: none;
3276
- -moz-user-select: none;
3277
- -ms-user-select: none;
3278
- user-select: none; }
3279
- #react-paginate li:hover {
3280
- opacity: 0.7;
3281
- border-radius: 50%; }
3282
- #react-paginate li a {
3283
- display: inline-block;
3284
- color: var(--react-autoql-text-color-primary);
3285
- outline: none;
3286
- width: 28px;
3287
- height: 28px;
3288
- line-height: 28px; }
3289
- #react-paginate li.selected {
3290
- background: var(--react-autoql-accent-color);
3291
- border-radius: 50%;
3292
- outline: none; }
3293
- #react-paginate li.selected a {
3294
- color: var(--react-autoql-accent-text-color); }
3295
- #react-paginate .pagination-next.disabled,
3296
- #react-paginate .pagination-previous.disabled {
3297
- opacity: 0.5;
3298
- pointer-events: none; }
3299
- #react-paginate .pagination-previous,
3300
- #react-paginate .pagination-next {
3301
- font-size: 18px; }
3302
- #react-paginate .pagination-previous a,
3303
- #react-paginate .pagination-next a {
3304
- color: var(--react-autoql-text-color-primary); }
3279
+ .clear-messages-confirm-popover {
3280
+ color: var(--react-autoql-text-color-primary);
3281
+ background: var(--react-autoql-background-color-primary);
3282
+ text-align: right;
3283
+ padding: 18px;
3284
+ width: 266px; }
3305
3285
 
3306
- .animated-item:nth-child(1) {
3307
- -webkit-animation-delay: 0.08s;
3308
- animation-delay: 0.08s; }
3286
+ .react-autoql-confirm-text {
3287
+ text-align: center; }
3309
3288
 
3310
- .animated-item:nth-child(2) {
3311
- -webkit-animation-delay: 0.16s;
3312
- animation-delay: 0.16s; }
3289
+ .react-autoql-menu-text {
3290
+ text-align: center; }
3291
+ .react-autoql-menu-text:hover {
3292
+ color: var(--react-autoql-accent-color);
3293
+ cursor: pointer; }
3313
3294
 
3314
- .animated-item:nth-child(3) {
3315
- -webkit-animation-delay: 0.24s;
3316
- animation-delay: 0.24s; }
3295
+ .react-autoql-confirm-icon {
3296
+ color: #faad14 !important;
3297
+ vertical-align: middle;
3298
+ margin-right: 5px !important;
3299
+ margin-bottom: 3px; }
3317
3300
 
3318
- .animated-item:nth-child(4) {
3319
- -webkit-animation-delay: 0.32s;
3320
- animation-delay: 0.32s; }
3301
+ .data-messenger-tab-container {
3302
+ position: absolute;
3303
+ background: transparent;
3304
+ display: flex;
3305
+ justify-content: center;
3306
+ align-items: center;
3307
+ pointer-events: none; }
3308
+ .data-messenger-tab-container.right {
3309
+ height: 100vh;
3310
+ width: 60px;
3311
+ left: -60px; }
3312
+ .data-messenger-tab-container.left {
3313
+ height: 100vh;
3314
+ width: 60px;
3315
+ right: -60px; }
3316
+ .data-messenger-tab-container.top {
3317
+ width: 100vw;
3318
+ height: 60px;
3319
+ bottom: -60px; }
3320
+ .data-messenger-tab-container.bottom {
3321
+ width: 100vw;
3322
+ height: 60px;
3323
+ top: -60px; }
3321
3324
 
3322
- .animated-item:nth-child(5) {
3323
- -webkit-animation-delay: 0.4s;
3324
- animation-delay: 0.4s; }
3325
+ /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
3326
+ .page-switcher-shadow-container {
3327
+ position: absolute;
3328
+ background: transparent;
3329
+ overflow: hidden; }
3325
3330
 
3326
- .animated-item:nth-child(6) {
3327
- -webkit-animation-delay: 0.48s;
3328
- animation-delay: 0.48s; }
3331
+ .page-switcher-shadow-container.right {
3332
+ top: 80px;
3333
+ width: 60px; }
3329
3334
 
3330
- .animated-item:nth-child(7) {
3331
- -webkit-animation-delay: 0.56s;
3332
- animation-delay: 0.56s; }
3335
+ .page-switcher-shadow-container.left {
3336
+ top: 80px;
3337
+ width: 60px; }
3333
3338
 
3334
- .animated-item:nth-child(8) {
3335
- -webkit-animation-delay: 0.64s;
3336
- animation-delay: 0.64s; }
3339
+ /* Container holding the tabs */
3340
+ .page-switcher-container {
3341
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
3342
+ overflow: hidden;
3343
+ box-sizing: border-box;
3344
+ display: flex;
3345
+ pointer-events: all; }
3346
+ .page-switcher-container .tab {
3347
+ position: relative;
3348
+ z-index: 1;
3349
+ background: var(--react-autoql-accent-color);
3350
+ color: var(--react-autoql-accent-text-color);
3351
+ opacity: 1;
3352
+ font-size: 22px;
3353
+ text-align: center;
3354
+ transform: translate(0, 0);
3355
+ cursor: pointer;
3356
+ transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
3357
+ transition-duration: 0.2s; }
3358
+ .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
3359
+ height: 22px;
3360
+ width: 23px; }
3361
+ .page-switcher-container.right {
3362
+ border-top-left-radius: 5px;
3363
+ border-bottom-left-radius: 5px;
3364
+ margin-top: 20px;
3365
+ margin-left: 20px;
3366
+ margin-bottom: 20px;
3367
+ flex-direction: column; }
3368
+ .page-switcher-container.right .tab {
3369
+ box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
3370
+ .page-switcher-container.left {
3371
+ border-top-right-radius: 5px;
3372
+ border-bottom-right-radius: 5px;
3373
+ margin-top: 20px;
3374
+ margin-right: 20px;
3375
+ margin-bottom: 20px;
3376
+ margin-left: -5px;
3377
+ flex-direction: column; }
3378
+ .page-switcher-container.left .tab {
3379
+ box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
3380
+ .page-switcher-container.top {
3381
+ border-bottom-right-radius: 5px;
3382
+ border-bottom-left-radius: 5px;
3383
+ margin-right: 20px;
3384
+ margin-left: 20px;
3385
+ margin-bottom: 20px;
3386
+ flex-direction: row;
3387
+ height: 40px; }
3388
+ .page-switcher-container.top .tab {
3389
+ box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
3390
+ .page-switcher-container.bottom {
3391
+ border-top-left-radius: 5px;
3392
+ border-top-right-radius: 5px;
3393
+ margin-top: 20px;
3394
+ margin-left: 20px;
3395
+ margin-right: 20px;
3396
+ flex-direction: row;
3397
+ height: 40px; }
3398
+ .page-switcher-container.bottom .tab {
3399
+ box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
3337
3400
 
3338
- .animated-item:nth-child(9) {
3339
- -webkit-animation-delay: 0.72s;
3340
- animation-delay: 0.72s; }
3401
+ /* Individual Tabs */
3402
+ .page-switcher-container .tab {
3403
+ display: flex;
3404
+ justify-content: center;
3405
+ align-items: center; }
3341
3406
 
3342
- .animated-item:nth-child(10) {
3343
- -webkit-animation-delay: 0.8s;
3344
- animation-delay: 0.8s; }
3407
+ .data-messenger-notification-btn {
3408
+ display: flex;
3409
+ flex-direction: column;
3410
+ justify-content: flex-start;
3411
+ line-height: inherit; }
3345
3412
 
3346
- .animated-item:nth-child(11) {
3347
- -webkit-animation-delay: 0.88s;
3348
- animation-delay: 0.88s; }
3413
+ .page-switcher-container.right .tab,
3414
+ .page-switcher-container.left .tab {
3415
+ height: 65px; }
3349
3416
 
3350
- .animated-item:nth-child(12) {
3351
- -webkit-animation-delay: 0.96s;
3352
- animation-delay: 0.96s; }
3417
+ .page-switcher-container.top .tab,
3418
+ .page-switcher-container.bottom .tab {
3419
+ width: 65px; }
3353
3420
 
3354
- .animated-item:nth-child(13) {
3355
- -webkit-animation-delay: 1.04s;
3356
- animation-delay: 1.04s; }
3421
+ .page-switcher-container.bottom .tab {
3422
+ background: var(--react-autoql-background-color-secondary);
3423
+ color: var(--react-autoql-text-color-primary); }
3357
3424
 
3358
- .animated-item:nth-child(14) {
3359
- -webkit-animation-delay: 1.12s;
3360
- animation-delay: 1.12s; }
3425
+ .page-switcher-container .tab.active {
3426
+ background: var(--react-autoql-background-color-secondary);
3427
+ color: var(--react-autoql-accent-color);
3428
+ box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
3429
+ font-weight: bold;
3430
+ position: relative;
3431
+ z-index: 2; }
3361
3432
 
3362
- .animated-item:nth-child(15) {
3363
- -webkit-animation-delay: 1.2s;
3364
- animation-delay: 1.2s; }
3433
+ .page-switcher-container.bottom .tab.active {
3434
+ background: var(--react-autoql-accent-color);
3435
+ color: var(--react-autoql-accent-text-color);
3436
+ font-weight: bold; }
3365
3437
 
3366
- @-webkit-keyframes fadeIn {
3438
+ /* animations */
3439
+ @-webkit-keyframes response-loading1 {
3367
3440
  0% {
3368
- opacity: 0;
3369
- top: 100px; }
3370
- 75% {
3371
- opacity: 0.5;
3372
- top: 0px; }
3441
+ transform: scale(0); }
3373
3442
  100% {
3374
- opacity: 1; } }
3443
+ transform: scale(1); } }
3444
+ @keyframes response-loading1 {
3445
+ 0% {
3446
+ transform: scale(0); }
3447
+ 100% {
3448
+ transform: scale(1); } }
3375
3449
 
3376
- .filter-lock-menu {
3377
- z-index: 99999 !important;
3378
- transition: opacity 0.1s ease 0s !important;
3379
- border: 1px solid #ababab52;
3380
- border-radius: 4px;
3381
- box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
3382
- opacity: 1;
3383
- min-width: 500px;
3384
- max-width: 70vw;
3385
- min-height: 350px;
3386
- max-height: 90vh;
3387
- background: var(--react-autoql-background-color-primary);
3388
- color: var(--react-autoql-text-color-primary);
3389
- overflow-y: auto !important; }
3390
- .filter-lock-menu .filter-lock-toast-container {
3391
- top: 0;
3392
- position: absolute; }
3393
- .filter-lock-menu .filter-lock-toast-container .Toastify__toast {
3394
- min-height: 48px; }
3395
- .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body {
3396
- justify-content: center; }
3397
- .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body > div:last-child {
3398
- flex: unset; }
3399
- .filter-lock-menu .include-exclude-toggle-group {
3400
- height: 23px;
3401
- font-size: 12px;
3402
- font-weight: 200; }
3403
- .filter-lock-menu .include-exclude-toggle-group .react-autoql-radio-btn.active {
3404
- background-color: var(--react-autoql-border-color); }
3405
- .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn:hover, .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn.active {
3406
- color: var(--react-autoql-accent-color);
3407
- border-color: var(--react-autoql-accent-color); }
3408
- .filter-lock-menu .include-exclude-toggle-group :nth-child(2).react-autoql-radio-btn:hover, .filter-lock-menu .include-exclude-toggle-group :nth-child(2).react-autoql-radio-btn.active {
3409
- color: var(--react-autoql-danger-color);
3410
- border-color: var(--react-autoql-danger-color); }
3450
+ @-webkit-keyframes response-loading3 {
3451
+ 0% {
3452
+ transform: scale(1); }
3453
+ 100% {
3454
+ transform: scale(0); } }
3411
3455
 
3412
- .filter-lock-menu-content {
3413
- padding: 15px 20px;
3414
- display: flex;
3415
- flex-direction: column;
3416
- justify-content: stretch;
3417
- height: 100%; }
3418
- .filter-lock-menu-content.closed {
3419
- opacity: 0; }
3420
- .filter-lock-menu-content h3 {
3421
- margin-top: 3px;
3422
- margin-bottom: 15px;
3423
- color: var(--react-autoql-text-color-primary); }
3424
- .filter-lock-menu-content h4 {
3425
- margin-top: 3px;
3426
- margin-bottom: 5px;
3427
- color: var(--react-autoql-text-color-primary);
3428
- display: inline-flex; }
3429
- .filter-lock-menu-content .react-autoql-condition-list-loading-container,
3430
- .filter-lock-menu-content .react-autoql-empty-condition-list,
3431
- .filter-lock-menu-content .react-autoql-filter-list-container {
3432
- flex: 1 1 245px; }
3433
- .filter-lock-menu-content .filter-lock-menu-header {
3434
- flex: 0;
3435
- width: 100%;
3436
- display: flex;
3437
- align-items: flex-start;
3438
- justify-content: space-between; }
3439
- .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-btn {
3440
- border: none;
3441
- margin: 0;
3442
- padding: 0;
3443
- font-size: 20px; }
3444
- .filter-lock-menu-content .filter-lock-menu-footer {
3445
- width: 100%;
3446
- display: flex;
3447
- justify-content: flex-end; }
3448
- .filter-lock-menu-content .react-autoql-empty-condition-list {
3449
- opacity: 0.8;
3450
- width: 100%;
3451
- text-align: center;
3452
- padding-top: 70px; }
3453
- .filter-lock-menu-content .react-autoql-filter-list-container {
3454
- margin: 10px 0; }
3455
- .filter-lock-menu-content .react-autoql-filter-list-container .flex {
3456
- width: 100%;
3457
- display: flex;
3458
- flex-direction: row;
3459
- justify-content: space-between;
3460
- flex-wrap: nowrap;
3461
- margin-bottom: 4px; }
3462
- .filter-lock-menu-content .react-autoql-filter-list-container .flex .persist-toggle-column,
3463
- .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-condition-table-list-item {
3464
- margin-right: 25px;
3465
- max-width: 350px; }
3466
- .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon {
3467
- cursor: pointer; }
3468
- .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon:hover {
3469
- color: var(--react-autoql-danger-color); }
3470
- .filter-lock-menu-content .react-autoql-filter-list-container .filter-lock-category-title {
3471
- padding-right: 10px;
3472
- padding-top: 1px;
3473
- max-width: 195px;
3474
- overflow: hidden; }
3475
- .filter-lock-menu-content .react-autoql-filter-list-container .persist-toggle-column .react-autoql-icon {
3476
- margin-left: 3px; }
3477
- .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-highlight-row {
3478
- background-color: var(--react-autoql-accent-color);
3479
- color: white;
3480
- -webkit-animation-name: highlightIn, highlightOut;
3481
- animation-name: highlightIn, highlightOut;
3482
- -webkit-animation-duration: 300ms, 300ms;
3483
- animation-duration: 300ms, 300ms;
3484
- -webkit-animation-delay: 0ms, 1000ms;
3485
- animation-delay: 0ms, 1000ms;
3486
- -webkit-animation-timing-function: ease-in, ease-out;
3487
- animation-timing-function: ease-in, ease-out;
3488
- -webkit-animation-iteration-count: 1, 1;
3489
- animation-iteration-count: 1, 1; }
3490
- .filter-lock-menu-content .react-autoql-condition-locking-input {
3491
- padding: 5px;
3492
- padding-left: 20px;
3493
- height: 32px;
3494
- box-sizing: border-box;
3495
- border-radius: 24px;
3496
- font-size: 12px;
3497
- font-family: inherit;
3498
- letter-spacing: 0.04em;
3499
- outline: none !important;
3500
- width: 100%;
3501
- font-family: inherit;
3502
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3503
- background: var(--react-autoql-background-color-primary);
3504
- color: var(--react-autoql-text-color-primary); }
3505
- .filter-lock-menu-content .react-autoql-condition-locking-input:hover {
3506
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
3507
- .filter-lock-menu-content .react-autoql-condition-locking-input::-moz-placeholder {
3508
- color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
3509
- opacity: 0.5; }
3510
- .filter-lock-menu-content .react-autoql-condition-locking-input:-ms-input-placeholder {
3511
- color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
3512
- opacity: 0.5; }
3513
- .filter-lock-menu-content .react-autoql-condition-locking-input::placeholder {
3514
- color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
3515
- opacity: 0.5; }
3516
- .filter-lock-menu-content .react-autosuggest__container--open {
3517
- position: relative; }
3518
- .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open {
3519
- background-color: var(--react-autoql-background-color-primary);
3520
- border: 1px solid var(--react-autoql-border-color);
3521
- color: var(--react-autoql-text-color-primary);
3522
- position: absolute;
3523
- padding: 10px 0;
3524
- display: block;
3525
- font-family: inherit;
3526
- font-size: 15px;
3527
- font-weight: normal;
3528
- z-index: 2;
3529
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3530
- text-align: left;
3531
- border-radius: 4px;
3532
- height: auto;
3533
- width: 100%;
3534
- max-height: 200px;
3535
- overflow-y: scroll !important; }
3536
- .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open ul.filter-lock-suggestion-item {
3537
- cursor: pointer;
3538
- width: 100%;
3539
- columns: 2;
3540
- -webkit-columns: 2;
3541
- list-style: none;
3542
- -moz-columns: 2;
3543
- letter-spacing: 0.05em;
3544
- line-height: 22.5px;
3545
- padding: 0px 20px 3px 20px; }
3546
- .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion {
3547
- color: var(--react-autoql-text-color-primary); }
3548
- .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestions-list {
3549
- margin: 0;
3550
- padding: 0;
3551
- list-style-type: none; }
3552
- .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion--highlighted {
3553
- background-color: rgba(0, 0, 0, 0.1) !important; }
3554
- .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__section-title {
3555
- padding: 10px 0 0 10px;
3556
- font-size: 12px;
3557
- color: #777; }
3456
+ @keyframes response-loading3 {
3457
+ 0% {
3458
+ transform: scale(1); }
3459
+ 100% {
3460
+ transform: scale(0); } }
3558
3461
 
3559
- @-webkit-keyframes highlightOut {
3462
+ @-webkit-keyframes response-loading2 {
3463
+ 0% {
3464
+ transform: translate(0, 0); }
3560
3465
  100% {
3561
- background-color: var(--react-autoql-background-color-primary);
3562
- color: var(--react-autoql-text-color-primary); }
3466
+ transform: translate(19px, 0); } }
3467
+
3468
+ @keyframes response-loading2 {
3563
3469
  0% {
3564
- background-color: var(--react-autoql-accent-color);
3565
- color: white; } }
3470
+ transform: translate(0, 0); }
3471
+ 100% {
3472
+ transform: translate(19px, 0); } }
3566
3473
 
3567
- @keyframes highlightOut {
3474
+ @-webkit-keyframes scale-up-center {
3475
+ 0% {
3476
+ transform: scale(0); }
3568
3477
  100% {
3569
- background-color: var(--react-autoql-background-color-primary);
3570
- color: var(--react-autoql-text-color-primary); }
3478
+ transform: scale(1); } }
3479
+
3480
+ @keyframes scale-up-center {
3571
3481
  0% {
3572
- background-color: var(--react-autoql-accent-color);
3573
- color: white; } }
3482
+ transform: scale(0); }
3483
+ 100% {
3484
+ transform: scale(1); } }
3574
3485
 
3575
- @-webkit-keyframes highlightIn {
3486
+ @-webkit-keyframes fadeIn {
3487
+ 0% {
3488
+ opacity: 0; }
3576
3489
  100% {
3577
- background-color: var(--react-autoql-accent-color);
3578
- color: white; }
3490
+ opacity: 1; } }
3491
+
3492
+ @keyframes fadeIn {
3579
3493
  0% {
3580
- background-color: var(--react-autoql-background-color-primary);
3581
- color: var(--react-autoql-text-color-primary); } }
3494
+ opacity: 0; }
3495
+ 100% {
3496
+ opacity: 1; } }
3582
3497
 
3583
- @keyframes highlightIn {
3498
+ @-webkit-keyframes slideDown {
3499
+ 0% {
3500
+ transform: translateY(-100%); }
3584
3501
  100% {
3585
- background-color: var(--react-autoql-accent-color);
3586
- color: white; }
3502
+ transform: translateY(0%); } }
3503
+
3504
+ @keyframes slideDown {
3587
3505
  0% {
3588
- background-color: var(--react-autoql-background-color-primary);
3589
- color: var(--react-autoql-text-color-primary); } }
3506
+ transform: translateY(-100%); }
3507
+ 100% {
3508
+ transform: translateY(0%); } }
3509
+
3510
+ @-webkit-keyframes snackbarFadeout {
3511
+ from {
3512
+ top: 60px;
3513
+ opacity: 1; }
3514
+ to {
3515
+ top: 30px;
3516
+ opacity: 0; } }
3517
+
3518
+ @keyframes snackbarFadeout {
3519
+ from {
3520
+ top: 60px;
3521
+ opacity: 1; }
3522
+ to {
3523
+ top: 30px;
3524
+ opacity: 0; } }
3590
3525
 
3591
3526
  .react-autoql-dashboard .react-autoql-dashboard-tile {
3592
3527
  background: var(--react-autoql-background-color-primary, #fff);
@@ -3638,54 +3573,48 @@ g.legendOrdinal .legendTitle tspan {
3638
3573
  .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
3639
3574
  opacity: 1; }
3640
3575
 
3641
- .react-autoql-dashboard-tile .autoql-options-toolbar {
3642
- transition: opacity 0.3s ease, color 0.3s ease;
3643
- visibility: hidden;
3644
- opacity: 0;
3645
- bottom: 8px;
3646
- right: 8px;
3647
- z-index: 1; }
3648
-
3649
- .dashboard-tile-viz-toolbar-container {
3650
- transition: opacity 0.3s ease, color 0.3s ease;
3651
- color: var(--react-autoql-accent-color);
3576
+ .dashboard-tile-toolbars-container {
3577
+ display: flex;
3652
3578
  position: absolute;
3653
- bottom: 0;
3654
- left: 0;
3579
+ align-items: flex-end;
3580
+ justify-content: space-between;
3581
+ transition: opacity 0.3s ease, color 0.3s ease;
3655
3582
  padding: 7px;
3583
+ width: 100%;
3656
3584
  z-index: 1;
3657
- opacity: 0;
3658
- visibility: hidden; }
3659
- .dashboard-tile-viz-toolbar-container .viz-toolbar,
3660
- .dashboard-tile-viz-toolbar-container .split-view-btn {
3661
- position: relative;
3585
+ bottom: 0;
3586
+ right: 0;
3587
+ pointer-events: none;
3588
+ visibility: hidden;
3589
+ opacity: 0; }
3590
+ .dashboard-tile-toolbars-container .dashboard-tile-toolbars-right-container,
3591
+ .dashboard-tile-toolbars-container .dashboard-tile-toolbars-left-container {
3592
+ pointer-events: auto; }
3593
+ .dashboard-tile-toolbars-container.left-padding {
3594
+ width: calc(100% - 40px); }
3595
+ .dashboard-tile-toolbars-container .split-view-btn {
3596
+ background: var(--react-autoql-background-color-primary);
3662
3597
  display: inline-block;
3663
- background: var(--react-autoql-background-color-primary); }
3664
- .dashboard-tile-viz-toolbar-container .split-view-btn {
3665
3598
  margin-right: 7px; }
3666
- .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
3599
+ .dashboard-tile-toolbars-container .split-view-btn .react-autoql-icon {
3667
3600
  font-size: 14px; }
3668
3601
 
3669
- .split-view-btn {
3670
- z-index: 1; }
3602
+ .react-autoql-dashboard-tile:hover .dashboard-tile-toolbars-container,
3603
+ .react-autoql-dashboard-tile:hover .split-view-query-btn {
3604
+ visibility: visible;
3605
+ opacity: 1; }
3671
3606
 
3672
3607
  .split-view-query-btn {
3673
3608
  transition: opacity 0.3s ease, color 0.3s ease;
3674
3609
  color: var(--react-autoql-accent-color);
3675
3610
  position: absolute;
3676
3611
  top: 7px;
3677
- left: 7px;
3612
+ left: 13px;
3678
3613
  bottom: unset;
3679
3614
  z-index: 1;
3680
3615
  visibility: hidden;
3681
3616
  opacity: 0; }
3682
3617
 
3683
- .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
3684
- .react-autoql-dashboard-tile:hover .split-view-query-btn,
3685
- .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
3686
- visibility: visible;
3687
- opacity: 1; }
3688
-
3689
3618
  .react-autoql-dashboard-tile-inner-div .single-value-response {
3690
3619
  font-size: 32px;
3691
3620
  margin-top: -6px;
@@ -3705,10 +3634,16 @@ g.legendOrdinal .legendTitle tspan {
3705
3634
  opacity: 0.9;
3706
3635
  color: var(--react-autoql-text-color-primary);
3707
3636
  font-size: 11px; }
3637
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-response-content-container.table .query-output-footer {
3638
+ min-height: 33px; }
3708
3639
 
3709
3640
  .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
3710
3641
  padding: 0; }
3711
3642
 
3643
+ .react-autoql-dashboard-tile-inner-div
3644
+ .dashboard-tile-response-wrapper.editing .dashboard-tile-toolbars-container {
3645
+ padding: 13px; }
3646
+
3712
3647
  .react-autoql-dashboard-tile-inner-div
3713
3648
  .dashboard-tile-response-wrapper.editing .layout-splitter {
3714
3649
  display: block;
@@ -3743,8 +3678,7 @@ g.legendOrdinal .legendTitle tspan {
3743
3678
  background: inherit;
3744
3679
  cursor: default; }
3745
3680
  .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
3746
- padding: 20px;
3747
- padding-top: 15px; }
3681
+ padding: 15px 20px 0px 20px; }
3748
3682
  .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
3749
3683
  padding: 7px;
3750
3684
  align-items: center; }
@@ -4030,7 +3964,8 @@ g.legendOrdinal .legendTitle tspan {
4030
3964
  opacity: 0;
4031
3965
  border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
4032
3966
  border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
4033
- transition: opacity 0.3s ease; }
3967
+ transition: opacity 0.3s ease;
3968
+ cursor: se-resize; }
4034
3969
 
4035
3970
  .react-autoql-dashboard-tile.editing:hover .react-resizable-handle {
4036
3971
  opacity: 1; }
@@ -4084,30 +4019,30 @@ g.legendOrdinal .legendTitle tspan {
4084
4019
  margin-top: 20px !important;
4085
4020
  max-height: 93vh !important; }
4086
4021
 
4087
- .dashboard-drilldown-modal .react-autoql-modal-body {
4022
+ .dashboard-drilldown-modal .dashboard-drilldown-modal-content .react-autoql-modal-body {
4088
4023
  padding: 0; }
4089
4024
 
4090
- .dashboard-drilldown-modal .react-autoql-table {
4025
+ .dashboard-drilldown-modal .dashboard-drilldown-modal-content .react-autoql-table {
4091
4026
  opacity: 0.9;
4092
4027
  font-size: 11px; }
4093
4028
 
4094
- .dashboard-drilldown-modal .splitter-layout {
4029
+ .dashboard-drilldown-modal .dashboard-drilldown-modal-content .splitter-layout {
4095
4030
  height: calc(100% - 55px); }
4096
4031
 
4097
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
4032
+ .dashboard-drilldown-modal .dashboard-drilldown-modal-content .react-autoql-dashboard-drilldown-original {
4098
4033
  padding: 20px;
4099
4034
  padding-bottom: 10px; }
4100
4035
 
4101
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
4036
+ .dashboard-drilldown-modal .dashboard-drilldown-modal-content .drilldown-hide-chart-btn {
4102
4037
  text-align: right;
4103
4038
  width: 100%;
4104
4039
  padding-right: 20px; }
4105
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
4040
+ .dashboard-drilldown-modal .dashboard-drilldown-modal-content .drilldown-hide-chart-btn.bottom {
4106
4041
  position: absolute;
4107
4042
  bottom: 5px;
4108
4043
  width: 100px;
4109
4044
  right: 0; }
4110
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
4045
+ .dashboard-drilldown-modal .dashboard-drilldown-modal-content .drilldown-hide-chart-btn.top {
4111
4046
  padding-top: 10px;
4112
4047
  margin-bottom: -8px; }
4113
4048