react-autoql 3.4.2 → 3.4.6

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.
Files changed (3) hide show
  1. package/dist/autoql.esm.css +1589 -1589
  2. package/dist/autoql.esm.js +46 -66
  3. package/package.json +1 -1
package/dist/autoql.esm.css CHANGED
@@ -259,6 +259,240 @@
259
259
  .context-menu-list li:hover {
260
260
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
261
261
 
262
+ .react-autoql-bar-container {
263
+ position: relative;
264
+ display: flex;
265
+ flex-direction: row; }
266
+
267
+ .react-autoql-chatbar-input {
268
+ padding: 10px;
269
+ padding-left: 20px;
270
+ margin: 10px;
271
+ height: 42px;
272
+ box-sizing: border-box;
273
+ border-radius: 24px;
274
+ font-size: 16px;
275
+ font-family: inherit;
276
+ letter-spacing: 0.04em;
277
+ outline: none !important;
278
+ width: calc(100% - 20px);
279
+ font-family: inherit;
280
+ /* Default styles outside of data messenger */
281
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
282
+ background: var(--react-autoql-background-color-primary);
283
+ color: #5d5d5d; }
284
+
285
+ .react-autoql-chatbar-input.left-padding {
286
+ padding-left: 54px; }
287
+
288
+ .react-autoql-chatbar-input:disabled {
289
+ background: rgba(0, 0, 0, 0.03); }
290
+
291
+ .react-autoql-chatbar-input:not(:disabled):hover {
292
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
293
+
294
+ .react-autoql-chatbar-input::-moz-placeholder {
295
+ /* Default color outside of data messenger */
296
+ color: #999 !important; }
297
+
298
+ .react-autoql-chatbar-input:-ms-input-placeholder {
299
+ /* Default color outside of data messenger */
300
+ color: #999 !important; }
301
+
302
+ .react-autoql-chatbar-input::placeholder {
303
+ /* Default color outside of data messenger */
304
+ color: #999 !important; }
305
+
306
+ /* autosuggest */
307
+ .react-autoql-bar-container .react-autosuggest__container,
308
+ .react-autoql-chatbar-input-container {
309
+ position: relative;
310
+ flex: 1; }
311
+
312
+ .react-autoql-bar-container .react-autosuggest__input--focused {
313
+ outline: none; }
314
+
315
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
316
+ display: none; }
317
+
318
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
319
+ display: none; }
320
+
321
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
322
+ position: absolute;
323
+ top: 45px;
324
+ bottom: unset;
325
+ margin: 10px;
326
+ padding-top: 5px;
327
+ padding-bottom: 5px;
328
+ display: block;
329
+ width: calc(100% - 20px);
330
+ height: unset;
331
+ border-radius: 24px;
332
+ font-family: inherit;
333
+ font-size: 15px;
334
+ font-weight: normal;
335
+ z-index: 2;
336
+ overflow: hidden;
337
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
338
+ /* Default styles outside of data messenger */
339
+ background-color: white;
340
+ color: #5d5d5d; }
341
+
342
+ .react-autoql-bar-container.autosuggest-top
343
+ .react-autosuggest__suggestions-container--open {
344
+ top: unset;
345
+ bottom: 45px; }
346
+
347
+ .react-autoql-bar-container.autosuggest-bottom
348
+ .react-autosuggest__suggestions-container--open {
349
+ top: 45px;
350
+ bottom: unset; }
351
+
352
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
353
+ margin: 0;
354
+ padding: 0;
355
+ list-style-type: none; }
356
+
357
+ /* Autocomplete styles */
358
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
359
+ background-color: var(--react-autoql-background-color-primary);
360
+ border: 1px solid var(--react-autoql-border-color);
361
+ color: var(--react-autoql-text-color-primary); }
362
+
363
+ .react-autoql-bar-container .react-autosuggest__suggestion {
364
+ color: var(--react-autoql-text-color-primary); }
365
+
366
+ .react-autoql-chatbar-input {
367
+ border: 1px solid var(--react-autoql-border-color);
368
+ color: var(--react-autoql-text-color-primary); }
369
+
370
+ .react-autoql-chatbar-input::-moz-placeholder {
371
+ color: var(--react-autoql-text-color-placeholder); }
372
+
373
+ .react-autoql-chatbar-input:-ms-input-placeholder {
374
+ color: var(--react-autoql-text-color-placeholder); }
375
+
376
+ .react-autoql-chatbar-input::placeholder {
377
+ color: var(--react-autoql-text-color-placeholder); }
378
+
379
+ .react-autoql-bar-container .react-autosuggest__suggestion {
380
+ cursor: pointer;
381
+ padding: 2px;
382
+ padding-left: 18px;
383
+ letter-spacing: 0.05em;
384
+ line-height: 22.5px; }
385
+
386
+ .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
387
+ background-color: rgba(0, 0, 0, 0.1) !important; }
388
+
389
+ .react-autoql-bar-container .react-autosuggest__section-title {
390
+ padding: 10px 0 0 10px;
391
+ font-size: 12px;
392
+ color: #777; }
393
+
394
+ .input-response-loading-container {
395
+ position: absolute;
396
+ right: 23px;
397
+ top: -2px; }
398
+
399
+ .chat-bar-input-icon {
400
+ position: absolute;
401
+ color: #28a8e0;
402
+ font-size: 20px;
403
+ left: 30px;
404
+ top: 15px; }
405
+
406
+ .react-autoql-icon {
407
+ position: relative;
408
+ opacity: 1; }
409
+ .react-autoql-icon.warning {
410
+ color: var(--react-autoql-warning-color) !important; }
411
+ .react-autoql-icon.danger {
412
+ color: var(--react-autoql-danger-color) !important; }
413
+
414
+ span.react-autoql-icon {
415
+ vertical-align: unset;
416
+ text-align: left;
417
+ margin: 0;
418
+ padding: 0;
419
+ float: none !important;
420
+ color: inherit; }
421
+ span.react-autoql-icon svg {
422
+ float: none !important;
423
+ color: inherit;
424
+ vertical-align: unset;
425
+ text-align: left;
426
+ margin: 0;
427
+ padding: 0;
428
+ opacity: 1;
429
+ height: 1em;
430
+ margin-bottom: -0.1em; }
431
+
432
+ .slack-logo {
433
+ display: inline-block;
434
+ height: 100%;
435
+ margin-bottom: 3px; }
436
+ .slack-logo img {
437
+ vertical-align: middle;
438
+ height: 1em;
439
+ width: 1em; }
440
+
441
+ .react-autoql-badge {
442
+ position: absolute;
443
+ background: var(--react-autoql-warning-color);
444
+ border: 1px solid var(--react-autoql-background-color-primary);
445
+ width: 0.5em;
446
+ height: 0.5em;
447
+ top: -0.1em;
448
+ right: -0.25em;
449
+ border-radius: 50%;
450
+ box-sizing: content-box; }
451
+
452
+ .loading-container-centered {
453
+ height: 100%;
454
+ width: 100%;
455
+ display: flex;
456
+ flex-direction: column;
457
+ justify-content: center;
458
+ align-items: center; }
459
+
460
+ .response-loading {
461
+ display: inline-block;
462
+ position: relative;
463
+ width: 64px;
464
+ height: 64px; }
465
+
466
+ .response-loading div {
467
+ position: absolute;
468
+ top: 27px;
469
+ width: 11px;
470
+ height: 11px;
471
+ border-radius: 50%;
472
+ background: #e2e2e2;
473
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
474
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
475
+
476
+ .response-loading div:nth-child(1) {
477
+ left: 6px;
478
+ -webkit-animation: response-loading1 0.6s infinite;
479
+ animation: response-loading1 0.6s infinite; }
480
+
481
+ .response-loading div:nth-child(2) {
482
+ left: 6px;
483
+ -webkit-animation: response-loading2 0.6s infinite;
484
+ animation: response-loading2 0.6s infinite; }
485
+
486
+ .response-loading div:nth-child(3) {
487
+ left: 26px;
488
+ -webkit-animation: response-loading2 0.6s infinite;
489
+ animation: response-loading2 0.6s infinite; }
490
+
491
+ .response-loading div:nth-child(4) {
492
+ left: 45px;
493
+ -webkit-animation: response-loading3 0.6s infinite;
494
+ animation: response-loading3 0.6s infinite; }
495
+
262
496
  .chat-voice-record-button {
263
497
  width: 40px;
264
498
  height: 40px;
@@ -331,24 +565,85 @@
331
565
  100% {
332
566
  left: 82%; } }
333
567
 
334
- #condition-lock-snackbar-success {
335
- visibility: hidden;
336
- min-width: 200px;
337
- line-height: 1 !important;
338
- font-size: 14px !important;
339
- background-color: var(--react-autoql-background-color-secondary);
340
- color: var(--react-autoql-success-color);
341
- text-align: center;
342
- border-radius: 4px;
343
- padding: 6px;
344
- position: fixed;
345
- display: block;
346
- z-index: 999999999;
347
- transform: translateX(-10%);
348
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
568
+ .react-autoql-dashboard-container {
569
+ background: var(--react-autoql-background-color-secondary);
570
+ height: 100%;
571
+ width: 100%;
572
+ overflow: hidden; }
349
573
 
350
- .autoql-condition-locking-menu-container
351
- .react-autosuggest__suggestions-container--open {
574
+ .react-autoql-dashboard-container.edit-mode {
575
+ padding-bottom: 200px; }
576
+
577
+ .dashboard-drilldown-modal .ReactModal__Content {
578
+ top: unset !important;
579
+ margin-top: 20px !important;
580
+ max-height: 93vh !important; }
581
+
582
+ .dashboard-drilldown-modal .react-autoql-modal-body {
583
+ padding: 0; }
584
+
585
+ .dashboard-drilldown-modal .react-autoql-table {
586
+ opacity: 0.9;
587
+ font-size: 11px; }
588
+
589
+ .dashboard-drilldown-modal .splitter-layout {
590
+ height: calc(100% - 55px); }
591
+
592
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
593
+ padding: 20px;
594
+ padding-bottom: 10px; }
595
+
596
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
597
+ text-align: right;
598
+ width: 100%;
599
+ padding-right: 20px; }
600
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
601
+ position: absolute;
602
+ bottom: 5px;
603
+ width: 100px;
604
+ right: 0; }
605
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
606
+ padding-top: 10px;
607
+ margin-bottom: -8px; }
608
+
609
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
610
+ padding: 20px;
611
+ padding-top: 10px;
612
+ overflow: hidden;
613
+ height: 100%; }
614
+
615
+ .empty-dashboard-message-container {
616
+ font-family: var(--react-autoql-font-family);
617
+ color: var(--react-autoql-text-color-primary);
618
+ letter-spacing: 0.02em;
619
+ text-align: center;
620
+ padding: 100px;
621
+ height: 100%;
622
+ width: 100%; }
623
+
624
+ .empty-dashboard-new-tile-btn {
625
+ color: var(--react-autoql-accent-color);
626
+ font-weight: bold;
627
+ cursor: pointer; }
628
+
629
+ #condition-lock-snackbar-success {
630
+ visibility: hidden;
631
+ min-width: 200px;
632
+ line-height: 1 !important;
633
+ font-size: 14px !important;
634
+ background-color: var(--react-autoql-background-color-secondary);
635
+ color: var(--react-autoql-success-color);
636
+ text-align: center;
637
+ border-radius: 4px;
638
+ padding: 6px;
639
+ position: fixed;
640
+ display: block;
641
+ z-index: 999999999;
642
+ transform: translateX(-10%);
643
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
644
+
645
+ .autoql-condition-locking-menu-container
646
+ .react-autosuggest__suggestions-container--open {
352
647
  transform: translateX(8%);
353
648
  width: 90% !important; }
354
649
 
@@ -924,300 +1219,156 @@
924
1219
  top: 30px;
925
1220
  opacity: 0; } }
926
1221
 
927
- .loading-container-centered {
928
- height: 100%;
929
- width: 100%;
930
- display: flex;
931
- flex-direction: column;
932
- justify-content: center;
933
- align-items: center; }
1222
+ .react-autoql-step-container a {
1223
+ color: var(--react-autoql-accent-color, #26a7df); }
934
1224
 
935
- .response-loading {
936
- display: inline-block;
937
- position: relative;
938
- width: 64px;
939
- height: 64px; }
1225
+ .frequency-date-select-container {
1226
+ margin-top: 10px; }
940
1227
 
941
- .response-loading div {
942
- position: absolute;
943
- top: 27px;
944
- width: 11px;
945
- height: 11px;
946
- border-radius: 50%;
947
- background: #e2e2e2;
948
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
949
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
1228
+ .notification-frequency-step {
1229
+ display: flex; }
1230
+ .notification-frequency-step .frequency-category-select {
1231
+ position: relative;
1232
+ padding-top: 9px; }
1233
+ .notification-frequency-step .notification-frequency-select {
1234
+ margin-left: 8px; }
1235
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1236
+ line-height: 33px; }
1237
+ .notification-frequency-step .frequency-repeat-follow-text {
1238
+ line-height: 32px;
1239
+ vertical-align: top; }
1240
+ .notification-frequency-step .frequency-settings-container {
1241
+ flex: 0 1 400px; }
950
1242
 
951
- .response-loading div:nth-child(1) {
952
- left: 6px;
953
- -webkit-animation: response-loading1 0.6s infinite;
954
- animation: response-loading1 0.6s infinite; }
1243
+ .schedule-builder-timezone-section {
1244
+ margin: 10px 5px; }
1245
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1246
+ display: inline-block;
1247
+ width: 300px; }
955
1248
 
956
- .response-loading div:nth-child(2) {
957
- left: 6px;
958
- -webkit-animation: response-loading2 0.6s infinite;
959
- animation: response-loading2 0.6s infinite; }
1249
+ .notification-modal-content .react-autoql-step-content p {
1250
+ margin-bottom: 0.5em;
1251
+ margin-top: 0.5em;
1252
+ padding-left: 8px; }
960
1253
 
961
- .response-loading div:nth-child(3) {
962
- left: 26px;
963
- -webkit-animation: response-loading2 0.6s infinite;
964
- animation: response-loading2 0.6s infinite; }
1254
+ .notification-modal-content .step-btn-container {
1255
+ text-align: right;
1256
+ display: flex;
1257
+ min-height: 50px; }
965
1258
 
966
- .response-loading div:nth-child(4) {
967
- left: 45px;
968
- -webkit-animation: response-loading3 0.6s infinite;
969
- animation: response-loading3 0.6s infinite; }
1259
+ .expression-valid-checkmark.react-autoql-icon svg {
1260
+ color: var(--react-autoql-success-color); }
970
1261
 
971
- .react-autoql-icon {
972
- position: relative;
973
- opacity: 1; }
974
- .react-autoql-icon.warning {
975
- color: var(--react-autoql-warning-color) !important; }
976
- .react-autoql-icon.danger {
977
- color: var(--react-autoql-danger-color) !important; }
1262
+ .expression-invalid-message-container {
1263
+ max-width: 75%;
1264
+ float: left;
1265
+ text-align: left !important;
1266
+ display: flex;
1267
+ flex-direction: row;
1268
+ align-items: left;
1269
+ justify-content: left; }
978
1270
 
979
- span.react-autoql-icon {
980
- vertical-align: unset;
981
- text-align: left;
982
- margin: 0;
983
- padding: 0;
984
- float: none !important;
985
- color: inherit; }
986
- span.react-autoql-icon svg {
987
- float: none !important;
988
- color: inherit;
989
- vertical-align: unset;
990
- text-align: left;
991
- margin: 0;
992
- padding: 0;
993
- opacity: 1;
994
- height: 1em;
995
- margin-bottom: -0.1em; }
1271
+ .expression-invalid-message {
1272
+ color: var(--react-autoql-danger-color);
1273
+ display: 'inline-block'; }
996
1274
 
997
- .slack-logo {
998
- display: inline-block;
1275
+ .notification-list-loading-container {
1276
+ text-align: center;
1277
+ padding-top: 100px;
1278
+ color: var(--react-autoql-text-color-primary);
999
1279
  height: 100%;
1000
- margin-bottom: 3px; }
1001
- .slack-logo img {
1002
- vertical-align: middle;
1003
- height: 1em;
1004
- width: 1em; }
1280
+ overflow: hidden;
1281
+ background: var(--react-autoql-background-color-secondary); }
1005
1282
 
1006
- .react-autoql-badge {
1007
- position: absolute;
1008
- background: var(--react-autoql-warning-color);
1009
- border: 1px solid var(--react-autoql-background-color-primary);
1010
- width: 0.5em;
1011
- height: 0.5em;
1012
- top: -0.1em;
1013
- right: -0.25em;
1014
- border-radius: 50%;
1015
- box-sizing: content-box; }
1283
+ .empty-notifications-message {
1284
+ color: var(--react-autoql-text-color-primary);
1285
+ text-align: center;
1286
+ margin-top: 75px; }
1287
+ .empty-notifications-message div {
1288
+ opacity: 0.6; }
1289
+ .empty-notifications-message .empty-notifications-title {
1290
+ font-size: 16px;
1291
+ font-weight: bold;
1292
+ margin-bottom: 5px; }
1293
+ .empty-notifications-message .empty-notifications-img {
1294
+ width: 250px;
1295
+ height: 250px; }
1016
1296
 
1017
- .react-autoql-bar-container {
1018
- position: relative;
1019
- display: flex;
1020
- flex-direction: row; }
1297
+ .react-autoql-notification-list-container {
1298
+ height: 100%;
1299
+ padding: 20px;
1300
+ overflow-y: auto;
1301
+ background: var(--react-autoql-background-color-secondary); }
1021
1302
 
1022
- .react-autoql-chatbar-input {
1023
- padding: 10px;
1024
- padding-left: 20px;
1025
- margin: 10px;
1026
- height: 42px;
1027
- box-sizing: border-box;
1028
- border-radius: 24px;
1029
- font-size: 16px;
1030
- font-family: inherit;
1031
- letter-spacing: 0.04em;
1032
- outline: none !important;
1033
- width: calc(100% - 20px);
1034
- font-family: inherit;
1035
- /* Default styles outside of data messenger */
1036
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1037
- background: var(--react-autoql-background-color-primary);
1038
- color: #5d5d5d; }
1303
+ .react-autoql-notification-dismiss-all {
1304
+ text-align: right;
1305
+ margin-bottom: 12px;
1306
+ padding-right: 10px;
1307
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1308
+ transition: color 0.1s ease; }
1309
+ .react-autoql-notification-dismiss-all span {
1310
+ opacity: 0.8;
1311
+ cursor: pointer; }
1312
+ .react-autoql-notification-dismiss-all span:hover {
1313
+ opacity: 1; }
1039
1314
 
1040
- .react-autoql-chatbar-input.left-padding {
1041
- padding-left: 54px; }
1315
+ .react-autoql-notification-display-name-input {
1316
+ width: 100%; }
1042
1317
 
1043
- .react-autoql-chatbar-input:disabled {
1044
- background: rgba(0, 0, 0, 0.03); }
1045
-
1046
- .react-autoql-chatbar-input:not(:disabled):hover {
1047
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
1048
-
1049
- .react-autoql-chatbar-input::-moz-placeholder {
1050
- /* Default color outside of data messenger */
1051
- color: #999 !important; }
1052
-
1053
- .react-autoql-chatbar-input:-ms-input-placeholder {
1054
- /* Default color outside of data messenger */
1055
- color: #999 !important; }
1056
-
1057
- .react-autoql-chatbar-input::placeholder {
1058
- /* Default color outside of data messenger */
1059
- color: #999 !important; }
1060
-
1061
- /* autosuggest */
1062
- .react-autoql-bar-container .react-autosuggest__container,
1063
- .react-autoql-chatbar-input-container {
1064
- position: relative;
1065
- flex: 1; }
1066
-
1067
- .react-autoql-bar-container .react-autosuggest__input--focused {
1068
- outline: none; }
1069
-
1070
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
1071
- display: none; }
1072
-
1073
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
1074
- display: none; }
1075
-
1076
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
1077
- position: absolute;
1078
- top: 45px;
1079
- bottom: unset;
1080
- margin: 10px;
1081
- padding-top: 5px;
1082
- padding-bottom: 5px;
1083
- display: block;
1084
- width: calc(100% - 20px);
1085
- height: unset;
1086
- border-radius: 24px;
1087
- font-family: inherit;
1088
- font-size: 15px;
1089
- font-weight: normal;
1090
- z-index: 2;
1091
- overflow: hidden;
1092
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
1093
- /* Default styles outside of data messenger */
1094
- background-color: white;
1095
- color: #5d5d5d; }
1096
-
1097
- .react-autoql-bar-container.autosuggest-top
1098
- .react-autosuggest__suggestions-container--open {
1099
- top: unset;
1100
- bottom: 45px; }
1101
-
1102
- .react-autoql-bar-container.autosuggest-bottom
1103
- .react-autosuggest__suggestions-container--open {
1104
- top: 45px;
1105
- bottom: unset; }
1106
-
1107
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
1108
- margin: 0;
1109
- padding: 0;
1110
- list-style-type: none; }
1111
-
1112
- /* Autocomplete styles */
1113
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
1114
- background-color: var(--react-autoql-background-color-primary);
1115
- border: 1px solid var(--react-autoql-border-color);
1116
- color: var(--react-autoql-text-color-primary); }
1117
-
1118
- .react-autoql-bar-container .react-autosuggest__suggestion {
1119
- color: var(--react-autoql-text-color-primary); }
1120
-
1121
- .react-autoql-chatbar-input {
1122
- border: 1px solid var(--react-autoql-border-color);
1123
- color: var(--react-autoql-text-color-primary); }
1124
-
1125
- .react-autoql-chatbar-input::-moz-placeholder {
1126
- color: var(--react-autoql-text-color-placeholder); }
1127
-
1128
- .react-autoql-chatbar-input:-ms-input-placeholder {
1129
- color: var(--react-autoql-text-color-placeholder); }
1130
-
1131
- .react-autoql-chatbar-input::placeholder {
1132
- color: var(--react-autoql-text-color-placeholder); }
1133
-
1134
- .react-autoql-bar-container .react-autosuggest__suggestion {
1135
- cursor: pointer;
1136
- padding: 2px;
1137
- padding-left: 18px;
1138
- letter-spacing: 0.05em;
1139
- line-height: 22.5px; }
1140
-
1141
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
1142
- background-color: rgba(0, 0, 0, 0.1) !important; }
1143
-
1144
- .react-autoql-bar-container .react-autosuggest__section-title {
1145
- padding: 10px 0 0 10px;
1146
- font-size: 12px;
1147
- color: #777; }
1148
-
1149
- .input-response-loading-container {
1150
- position: absolute;
1151
- right: 23px;
1152
- top: -2px; }
1318
+ .react-autoql-notification-message-input {
1319
+ width: 100%; }
1153
1320
 
1154
- .chat-bar-input-icon {
1155
- position: absolute;
1156
- color: #28a8e0;
1157
- font-size: 20px;
1158
- left: 30px;
1159
- top: 15px; }
1321
+ .react-autoql-notification-list-item:nth-of-type(0) {
1322
+ -webkit-animation-delay: 0s;
1323
+ animation-delay: 0s; }
1160
1324
 
1161
- .react-autoql-dashboard-container {
1162
- background: var(--react-autoql-background-color-secondary);
1163
- height: 100%;
1164
- width: 100%;
1165
- overflow: hidden; }
1325
+ .react-autoql-notification-list-item:nth-of-type(1) {
1326
+ -webkit-animation-delay: 0.1s;
1327
+ animation-delay: 0.1s; }
1166
1328
 
1167
- .react-autoql-dashboard-container.edit-mode {
1168
- padding-bottom: 200px; }
1329
+ .react-autoql-notification-list-item:nth-of-type(2) {
1330
+ -webkit-animation-delay: 0.2s;
1331
+ animation-delay: 0.2s; }
1169
1332
 
1170
- .dashboard-drilldown-modal .ReactModal__Content {
1171
- top: unset !important;
1172
- margin-top: 20px !important;
1173
- max-height: 93vh !important; }
1333
+ .react-autoql-notification-list-item:nth-of-type(3) {
1334
+ -webkit-animation-delay: 0.3s;
1335
+ animation-delay: 0.3s; }
1174
1336
 
1175
- .dashboard-drilldown-modal .react-autoql-modal-body {
1176
- padding: 0; }
1337
+ .react-autoql-notification-list-item:nth-of-type(4) {
1338
+ -webkit-animation-delay: 0.4s;
1339
+ animation-delay: 0.4s; }
1177
1340
 
1178
- .dashboard-drilldown-modal .react-autoql-table {
1179
- opacity: 0.9;
1180
- font-size: 11px; }
1341
+ .react-autoql-notification-list-item:nth-of-type(5) {
1342
+ -webkit-animation-delay: 0.5s;
1343
+ animation-delay: 0.5s; }
1181
1344
 
1182
- .dashboard-drilldown-modal .splitter-layout {
1183
- height: calc(100% - 55px); }
1345
+ .react-autoql-notification-list-item:nth-of-type(6) {
1346
+ -webkit-animation-delay: 0.6s;
1347
+ animation-delay: 0.6s; }
1184
1348
 
1185
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1186
- padding: 20px;
1187
- padding-bottom: 10px; }
1349
+ .react-autoql-notification-list-item:nth-of-type(7) {
1350
+ -webkit-animation-delay: 0.7s;
1351
+ animation-delay: 0.7s; }
1188
1352
 
1189
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
1190
- text-align: right;
1191
- width: 100%;
1192
- padding-right: 20px; }
1193
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
1194
- position: absolute;
1195
- bottom: 5px;
1196
- width: 100px;
1197
- right: 0; }
1198
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
1199
- padding-top: 10px;
1200
- margin-bottom: -8px; }
1353
+ .react-autoql-notification-list-item:nth-of-type(8) {
1354
+ -webkit-animation-delay: 0.8s;
1355
+ animation-delay: 0.8s; }
1201
1356
 
1202
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1203
- padding: 20px;
1204
- padding-top: 10px;
1205
- overflow: hidden;
1206
- height: 100%; }
1357
+ .react-autoql-notification-list-item:nth-of-type(9) {
1358
+ -webkit-animation-delay: 0.9s;
1359
+ animation-delay: 0.9s; }
1207
1360
 
1208
- .empty-dashboard-message-container {
1209
- font-family: var(--react-autoql-font-family);
1210
- color: var(--react-autoql-text-color-primary);
1211
- letter-spacing: 0.02em;
1212
- text-align: center;
1213
- padding: 100px;
1214
- height: 100%;
1215
- width: 100%; }
1361
+ .react-autoql-notification-list-item:nth-of-type(10) {
1362
+ -webkit-animation-delay: 1s;
1363
+ animation-delay: 1s; }
1216
1364
 
1217
- .empty-dashboard-new-tile-btn {
1218
- color: var(--react-autoql-accent-color);
1219
- font-weight: bold;
1220
- cursor: pointer; }
1365
+ @-webkit-keyframes slideIn {
1366
+ 0% {
1367
+ opacity: 0;
1368
+ top: 500px; }
1369
+ 100% {
1370
+ opacity: 1;
1371
+ top: 0; } }
1221
1372
 
1222
1373
  .react-autoql-notifications-button-container {
1223
1374
  position: relative;
@@ -1252,280 +1403,6 @@ span.react-autoql-icon {
1252
1403
  left: 0.5em;
1253
1404
  top: -2px; }
1254
1405
 
1255
- .notification-rule-add-btn-outer,
1256
- .notification-rule-validate-btn-outer {
1257
- text-align: center;
1258
- border-style: dashed !important;
1259
- height: 38px;
1260
- line-height: 25px;
1261
- margin: 0 !important;
1262
- overflow: hidden; }
1263
-
1264
- .notification-rule-outer-container {
1265
- position: relative;
1266
- border: 1px solid transparent;
1267
- border-radius: 4px; }
1268
- .notification-rule-outer-container.outlined {
1269
- border-color: rgba(0, 0, 0, 0.15);
1270
- padding: 0 20px;
1271
- padding-bottom: 12px; }
1272
-
1273
- .notification-outer-all-any {
1274
- position: absolute;
1275
- left: 0;
1276
- top: 50%; }
1277
-
1278
- .notification-first-group-btn-container {
1279
- display: flex;
1280
- justify-content: space-between; }
1281
-
1282
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1283
- border: none; }
1284
-
1285
- .react-autoql-notification-list-item {
1286
- display: flex;
1287
- flex-direction: column;
1288
- flex-basis: auto;
1289
- --accent-color: #26a7df;
1290
- position: relative;
1291
- overflow: hidden;
1292
- background: var(--react-autoql-background-color-primary, #fff);
1293
- border-radius: 4px;
1294
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1295
- margin-bottom: 8px;
1296
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1297
- font-family: var(--react-autoql-font-family), sans-serif;
1298
- transition: all 1s ease;
1299
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1300
- -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1301
- animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1302
- -webkit-animation-fill-mode: both;
1303
- animation-fill-mode: both;
1304
- -webkit-animation-delay: 0s;
1305
- animation-delay: 0s; }
1306
- .react-autoql-notification-list-item .single-value-response {
1307
- font-size: 32px;
1308
- margin-top: -6px;
1309
- opacity: 0.9; }
1310
- .react-autoql-notification-list-item .viz-toolbar {
1311
- position: relative;
1312
- border: none; }
1313
- .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1314
- height: 33px; }
1315
- .react-autoql-notification-list-item .react-autoql-notification-details-title {
1316
- font-weight: 600;
1317
- padding-top: 20px;
1318
- padding-bottom: 5px; }
1319
- .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1320
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1321
- .react-autoql-notification-list-item .react-autoql-notification-details {
1322
- overflow: hidden; }
1323
- .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
1324
- overflow: auto; }
1325
- .react-autoql-notification-list-item:hover:not(.expanded) {
1326
- background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
1327
- .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
1328
- opacity: 1; }
1329
- .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
1330
- color: var(--react-autoql-accent-color, #26a7df) !important; }
1331
- .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
1332
- margin-top: 3px;
1333
- color: var(--react-autoql-accent-color, #26a7df); }
1334
- .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
1335
- opacity: 1; }
1336
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
1337
- display: flex;
1338
- flex-direction: column;
1339
- justify-content: stretch;
1340
- transition: height 0.2s ease;
1341
- height: 0;
1342
- opacity: 0; }
1343
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
1344
- height: 400px;
1345
- opacity: 1; }
1346
- .react-autoql-notification-list-item .react-autoql-notification-extra-content {
1347
- flex: 0;
1348
- flex-basis: 55px;
1349
- text-align: center;
1350
- padding: 8px;
1351
- border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1352
- .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
1353
- line-height: 40px;
1354
- opacity: 0.6;
1355
- font-style: italic; }
1356
- .react-autoql-notification-list-item .react-autoql-notification-description {
1357
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1358
- opacity: 0.8;
1359
- font-size: 14px; }
1360
- .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
1361
- display: flex;
1362
- flex-direction: row;
1363
- justify-content: space-between;
1364
- padding-left: 22px;
1365
- cursor: pointer; }
1366
- .react-autoql-notification-list-item .react-autoql-notification-query-title {
1367
- flex: 0 0 auto;
1368
- font-size: 14px;
1369
- font-family: inherit;
1370
- color: currentcolor;
1371
- opacity: 0.9;
1372
- font-weight: 600;
1373
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1374
- text-align: center;
1375
- margin: 0 10px;
1376
- padding-top: 20px;
1377
- padding-bottom: 7px; }
1378
- .react-autoql-notification-list-item .react-autoql-notification-details-container {
1379
- flex: 1;
1380
- display: flex;
1381
- flex-direction: row;
1382
- align-items: stretch;
1383
- justify-content: stretch;
1384
- overflow: hidden; }
1385
- .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
1386
- flex: 1 1;
1387
- padding: 20px;
1388
- padding-top: 0;
1389
- opacity: 0.9;
1390
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1391
- .react-autoql-notification-list-item .react-autoql-notification-data-container {
1392
- display: flex;
1393
- flex-direction: row;
1394
- justify-content: stretch;
1395
- flex: 3 3 0px;
1396
- overflow: hidden; }
1397
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
1398
- flex: 1;
1399
- height: 100%;
1400
- width: 0;
1401
- display: flex;
1402
- flex-direction: column;
1403
- padding: 0px 20px 10px 20px; }
1404
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
1405
- width: 100%;
1406
- padding: 0 10px; }
1407
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
1408
- opacity: 0.9;
1409
- color: currentColor;
1410
- font-size: 11px; }
1411
- .react-autoql-notification-list-item .react-autoql-notification-data-title {
1412
- line-height: 22px;
1413
- font-size: 12px;
1414
- text-align: right;
1415
- color: var(--react-autoql-text-color-primary);
1416
- opacity: 0.5;
1417
- padding: 8px 20px; }
1418
- .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
1419
- margin-top: -3px;
1420
- vertical-align: middle; }
1421
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
1422
- font-size: 21px;
1423
- margin: 11px;
1424
- width: 40px;
1425
- height: 40px;
1426
- padding: 10px;
1427
- border-radius: 26px;
1428
- display: inline-block;
1429
- line-height: 20px;
1430
- background-color: transparent;
1431
- transition: background-color 0.2s ease;
1432
- cursor: pointer; }
1433
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
1434
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
1435
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
1436
- font-size: 18px;
1437
- margin-top: 3px;
1438
- margin-right: 3px;
1439
- opacity: 0;
1440
- width: 36px;
1441
- height: 36px;
1442
- padding: 9px;
1443
- border-radius: 20px;
1444
- display: inline-block;
1445
- line-height: 20px;
1446
- background-color: transparent;
1447
- transition: all 0.2s ease;
1448
- cursor: pointer; }
1449
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
1450
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
1451
- .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
1452
- position: absolute;
1453
- top: -7px;
1454
- left: -7px;
1455
- color: var(--react-autoql-accent-color, #26a7df);
1456
- line-height: 10px;
1457
- background: var(--react-autoql-background-color-primary, #fff);
1458
- border-radius: 10px;
1459
- font-size: 17px; }
1460
- .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
1461
- height: 100%;
1462
- opacity: 0;
1463
- position: absolute;
1464
- left: 0px;
1465
- top: 0;
1466
- width: 4px;
1467
- background: var(--react-autoql-accent-color, #26a7df);
1468
- transition-property: opacity;
1469
- transition-duration: 0.2s;
1470
- transition-timing-function: ease; }
1471
- .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
1472
- flex: 0 0 50px;
1473
- padding: 10px;
1474
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1475
- .react-autoql-notification-list-item .react-autoql-notification-img-container {
1476
- flex: 0 0 60px; }
1477
- .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
1478
- border-radius: 50px;
1479
- height: 45px;
1480
- width: 45px;
1481
- line-height: 45px;
1482
- font-size: 22px;
1483
- color: white;
1484
- background-color: var(--react-autoql-accent-color, #26a7df);
1485
- text-align: center;
1486
- margin-top: 13px;
1487
- margin-right: 17px; }
1488
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
1489
- flex: 1;
1490
- line-height: 23px;
1491
- padding: 13px 0px;
1492
- transition: color 0.2s ease; }
1493
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
1494
- font-size: 18px;
1495
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
1496
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
1497
- font-size: 12px;
1498
- opacity: 0.5; }
1499
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1500
- margin-bottom: -1px; }
1501
-
1502
- .react-autoql-step-container a {
1503
- color: var(--react-autoql-accent-color, #26a7df); }
1504
-
1505
- .frequency-date-select-container {
1506
- margin-top: 10px; }
1507
-
1508
- .notification-frequency-step {
1509
- display: flex; }
1510
- .notification-frequency-step .frequency-category-select {
1511
- position: relative;
1512
- padding-top: 9px; }
1513
- .notification-frequency-step .notification-frequency-select {
1514
- margin-left: 8px; }
1515
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1516
- line-height: 33px; }
1517
- .notification-frequency-step .frequency-repeat-follow-text {
1518
- line-height: 32px;
1519
- vertical-align: top; }
1520
- .notification-frequency-step .frequency-settings-container {
1521
- flex: 0 1 400px; }
1522
-
1523
- .schedule-builder-timezone-section {
1524
- margin: 10px 5px; }
1525
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1526
- display: inline-block;
1527
- width: 300px; }
1528
-
1529
1406
  .react-autoql-notification-settings {
1530
1407
  background-color: var(--react-autoql-background-color-secondary);
1531
1408
  color: var(--react-autoql-text-color-primary);
@@ -1619,113 +1496,15 @@ span.react-autoql-icon {
1619
1496
  align-items: center;
1620
1497
  margin-top: -25px; }
1621
1498
 
1622
- .notification-list-loading-container {
1623
- text-align: center;
1624
- padding-top: 100px;
1625
- color: var(--react-autoql-text-color-primary);
1626
- height: 100%;
1499
+ .react-autoql-dashboard .react-grid-item {
1500
+ background: var(--react-autoql-background-color-primary, #fff);
1501
+ color: var(--react-autoql-text-color-primary, #404040);
1502
+ font-family: var(--react-autoql-font-family), sans-serif;
1627
1503
  overflow: hidden;
1628
- background: var(--react-autoql-background-color-secondary); }
1629
-
1630
- .empty-notifications-message {
1631
- color: var(--react-autoql-text-color-primary);
1632
- text-align: center;
1633
- margin-top: 75px; }
1634
- .empty-notifications-message div {
1635
- opacity: 0.6; }
1636
- .empty-notifications-message .empty-notifications-title {
1637
- font-size: 16px;
1638
- font-weight: bold;
1639
- margin-bottom: 5px; }
1640
- .empty-notifications-message .empty-notifications-img {
1641
- width: 250px;
1642
- height: 250px; }
1504
+ border-radius: 4px;
1505
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1643
1506
 
1644
- .react-autoql-notification-list-container {
1645
- height: 100%;
1646
- padding: 20px;
1647
- overflow-y: auto;
1648
- background: var(--react-autoql-background-color-secondary); }
1649
-
1650
- .react-autoql-notification-dismiss-all {
1651
- text-align: right;
1652
- margin-bottom: 12px;
1653
- padding-right: 10px;
1654
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1655
- transition: color 0.1s ease; }
1656
- .react-autoql-notification-dismiss-all span {
1657
- opacity: 0.8;
1658
- cursor: pointer; }
1659
- .react-autoql-notification-dismiss-all span:hover {
1660
- opacity: 1; }
1661
-
1662
- .react-autoql-notification-display-name-input {
1663
- width: 100%; }
1664
-
1665
- .react-autoql-notification-message-input {
1666
- width: 100%; }
1667
-
1668
- .react-autoql-notification-list-item:nth-of-type(0) {
1669
- -webkit-animation-delay: 0s;
1670
- animation-delay: 0s; }
1671
-
1672
- .react-autoql-notification-list-item:nth-of-type(1) {
1673
- -webkit-animation-delay: 0.1s;
1674
- animation-delay: 0.1s; }
1675
-
1676
- .react-autoql-notification-list-item:nth-of-type(2) {
1677
- -webkit-animation-delay: 0.2s;
1678
- animation-delay: 0.2s; }
1679
-
1680
- .react-autoql-notification-list-item:nth-of-type(3) {
1681
- -webkit-animation-delay: 0.3s;
1682
- animation-delay: 0.3s; }
1683
-
1684
- .react-autoql-notification-list-item:nth-of-type(4) {
1685
- -webkit-animation-delay: 0.4s;
1686
- animation-delay: 0.4s; }
1687
-
1688
- .react-autoql-notification-list-item:nth-of-type(5) {
1689
- -webkit-animation-delay: 0.5s;
1690
- animation-delay: 0.5s; }
1691
-
1692
- .react-autoql-notification-list-item:nth-of-type(6) {
1693
- -webkit-animation-delay: 0.6s;
1694
- animation-delay: 0.6s; }
1695
-
1696
- .react-autoql-notification-list-item:nth-of-type(7) {
1697
- -webkit-animation-delay: 0.7s;
1698
- animation-delay: 0.7s; }
1699
-
1700
- .react-autoql-notification-list-item:nth-of-type(8) {
1701
- -webkit-animation-delay: 0.8s;
1702
- animation-delay: 0.8s; }
1703
-
1704
- .react-autoql-notification-list-item:nth-of-type(9) {
1705
- -webkit-animation-delay: 0.9s;
1706
- animation-delay: 0.9s; }
1707
-
1708
- .react-autoql-notification-list-item:nth-of-type(10) {
1709
- -webkit-animation-delay: 1s;
1710
- animation-delay: 1s; }
1711
-
1712
- @-webkit-keyframes slideIn {
1713
- 0% {
1714
- opacity: 0;
1715
- top: 500px; }
1716
- 100% {
1717
- opacity: 1;
1718
- top: 0; } }
1719
-
1720
- .react-autoql-dashboard .react-grid-item {
1721
- background: var(--react-autoql-background-color-primary, #fff);
1722
- color: var(--react-autoql-text-color-primary, #404040);
1723
- font-family: var(--react-autoql-font-family), sans-serif;
1724
- overflow: hidden;
1725
- border-radius: 4px;
1726
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1727
-
1728
- .react-autoql-dashboard-tile-inner-div {
1507
+ .react-autoql-dashboard-tile-inner-div {
1729
1508
  height: 100%;
1730
1509
  width: 100%;
1731
1510
  background: inherit;
@@ -2213,31 +1992,35 @@ span.react-autoql-icon {
2213
1992
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2214
1993
  background: inherit; }
2215
1994
 
2216
- .notification-modal-content .react-autoql-step-content p {
2217
- margin-bottom: 0.5em;
2218
- margin-top: 0.5em;
2219
- padding-left: 8px; }
1995
+ .notification-rule-add-btn-outer,
1996
+ .notification-rule-validate-btn-outer {
1997
+ text-align: center;
1998
+ border-style: dashed !important;
1999
+ height: 38px;
2000
+ line-height: 25px;
2001
+ margin: 0 !important;
2002
+ overflow: hidden; }
2220
2003
 
2221
- .notification-modal-content .step-btn-container {
2222
- text-align: right;
2223
- display: flex;
2224
- min-height: 50px; }
2004
+ .notification-rule-outer-container {
2005
+ position: relative;
2006
+ border: 1px solid transparent;
2007
+ border-radius: 4px; }
2008
+ .notification-rule-outer-container.outlined {
2009
+ border-color: rgba(0, 0, 0, 0.15);
2010
+ padding: 0 20px;
2011
+ padding-bottom: 12px; }
2225
2012
 
2226
- .expression-valid-checkmark.react-autoql-icon svg {
2227
- color: var(--react-autoql-success-color); }
2013
+ .notification-outer-all-any {
2014
+ position: absolute;
2015
+ left: 0;
2016
+ top: 50%; }
2228
2017
 
2229
- .expression-invalid-message-container {
2230
- max-width: 75%;
2231
- float: left;
2232
- text-align: left !important;
2018
+ .notification-first-group-btn-container {
2233
2019
  display: flex;
2234
- flex-direction: row;
2235
- align-items: left;
2236
- justify-content: left; }
2020
+ justify-content: space-between; }
2237
2021
 
2238
- .expression-invalid-message {
2239
- color: var(--react-autoql-danger-color);
2240
- display: 'inline-block'; }
2022
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2023
+ border: none; }
2241
2024
 
2242
2025
  .notification-rule-outer-container {
2243
2026
  position: relative;
@@ -2251,443 +2034,963 @@ span.react-autoql-icon {
2251
2034
  .data-alerts-container.read-only .react-autoql-notification-group-container {
2252
2035
  border: none; }
2253
2036
 
2254
- .query-tips-page-container {
2255
- height: 100%;
2256
- padding: 10px; }
2257
- .query-tips-page-container .chat-bar-input-icon {
2258
- top: 20px;
2259
- left: 26px; }
2260
- .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2261
- padding-left: 46px; }
2262
-
2263
- .query-tips-result-container {
2264
- color: var(--react-autoql-text-color-primary);
2265
- padding: 0px 20px;
2266
- text-align: center;
2267
- max-width: 550px;
2268
- margin: 0 auto; }
2269
- .query-tips-result-container .query-tip-list-container {
2270
- margin-bottom: 20px; }
2271
- .query-tips-result-container .animated-item {
2272
- -webkit-animation: fadeIn 0.3s linear;
2273
- animation: fadeIn 0.3s linear;
2274
- -webkit-animation-fill-mode: both;
2275
- animation-fill-mode: both; }
2276
- .query-tips-result-container .query-tip-item {
2037
+ .react-autoql-notification-list-item {
2038
+ display: flex;
2039
+ flex-direction: column;
2040
+ flex-basis: auto;
2041
+ --accent-color: #26a7df;
2042
+ position: relative;
2043
+ overflow: hidden;
2044
+ background: var(--react-autoql-background-color-primary, #fff);
2045
+ border-radius: 4px;
2046
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2047
+ margin-bottom: 8px;
2048
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
2049
+ font-family: var(--react-autoql-font-family), sans-serif;
2050
+ transition: all 1s ease;
2051
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
2052
+ -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
2053
+ animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
2054
+ -webkit-animation-fill-mode: both;
2055
+ animation-fill-mode: both;
2056
+ -webkit-animation-delay: 0s;
2057
+ animation-delay: 0s; }
2058
+ .react-autoql-notification-list-item .single-value-response {
2059
+ font-size: 32px;
2060
+ margin-top: -6px;
2061
+ opacity: 0.9; }
2062
+ .react-autoql-notification-list-item .viz-toolbar {
2277
2063
  position: relative;
2278
- padding: 13px;
2279
- border-top: 1px solid rgba(0, 0, 0, 0.04);
2064
+ border: none; }
2065
+ .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
2066
+ height: 33px; }
2067
+ .react-autoql-notification-list-item .react-autoql-notification-details-title {
2068
+ font-weight: 600;
2069
+ padding-top: 20px;
2070
+ padding-bottom: 5px; }
2071
+ .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
2072
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
2073
+ .react-autoql-notification-list-item .react-autoql-notification-details {
2074
+ overflow: hidden; }
2075
+ .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
2076
+ overflow: auto; }
2077
+ .react-autoql-notification-list-item:hover:not(.expanded) {
2078
+ background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
2079
+ .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
2080
+ opacity: 1; }
2081
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
2082
+ color: var(--react-autoql-accent-color, #26a7df) !important; }
2083
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
2084
+ margin-top: 3px;
2085
+ color: var(--react-autoql-accent-color, #26a7df); }
2086
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
2087
+ opacity: 1; }
2088
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
2089
+ display: flex;
2090
+ flex-direction: column;
2091
+ justify-content: stretch;
2092
+ transition: height 0.2s ease;
2093
+ height: 0;
2094
+ opacity: 0; }
2095
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
2096
+ height: 400px;
2097
+ opacity: 1; }
2098
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content {
2099
+ flex: 0;
2100
+ flex-basis: 55px;
2101
+ text-align: center;
2102
+ padding: 8px;
2103
+ border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2104
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
2105
+ line-height: 40px;
2106
+ opacity: 0.6;
2107
+ font-style: italic; }
2108
+ .react-autoql-notification-list-item .react-autoql-notification-description {
2109
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
2110
+ opacity: 0.8;
2111
+ font-size: 14px; }
2112
+ .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
2113
+ display: flex;
2114
+ flex-direction: row;
2115
+ justify-content: space-between;
2116
+ padding-left: 22px;
2280
2117
  cursor: pointer; }
2281
- .query-tips-result-container .query-tip-item:first-child {
2282
- border-top: none; }
2283
- .query-tips-result-container .query-tip-item .execute-btn {
2284
- position: absolute;
2285
- right: 10px;
2286
- top: 4px;
2287
- font-size: 20px;
2288
- visibility: hidden;
2289
- opacity: 0; }
2290
- .query-tips-result-container .query-tip-item:hover {
2291
- font-weight: bold;
2292
- color: var(--react-autoql-accent-color); }
2293
- .query-tips-result-container .query-tip-item:hover .execute-btn {
2294
- visibility: visible;
2295
- opacity: 1; }
2296
- .query-tips-result-container .query-tips-result-placeholder {
2297
- margin-top: 50px;
2298
- opacity: 0.6; }
2299
-
2300
- .chat-bar-loading-spinner {
2301
- position: absolute;
2302
- right: 20px;
2303
- top: 22px; }
2304
-
2305
- #react-paginate {
2306
- position: relative;
2307
- background: transparent;
2308
- padding: 8px; }
2309
- #react-paginate ul {
2310
- display: inline-block;
2311
- padding-left: 0;
2312
- margin-bottom: 0; }
2313
- #react-paginate li {
2314
- display: inline-block;
2118
+ .react-autoql-notification-list-item .react-autoql-notification-query-title {
2119
+ flex: 0 0 auto;
2120
+ font-size: 14px;
2121
+ font-family: inherit;
2122
+ color: currentcolor;
2123
+ opacity: 0.9;
2124
+ font-weight: 600;
2125
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2126
+ text-align: center;
2127
+ margin: 0 10px;
2128
+ padding-top: 20px;
2129
+ padding-bottom: 7px; }
2130
+ .react-autoql-notification-list-item .react-autoql-notification-details-container {
2131
+ flex: 1;
2132
+ display: flex;
2133
+ flex-direction: row;
2134
+ align-items: stretch;
2135
+ justify-content: stretch;
2136
+ overflow: hidden; }
2137
+ .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
2138
+ flex: 1 1;
2139
+ padding: 20px;
2140
+ padding-top: 0;
2141
+ opacity: 0.9;
2142
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2143
+ .react-autoql-notification-list-item .react-autoql-notification-data-container {
2144
+ display: flex;
2145
+ flex-direction: row;
2146
+ justify-content: stretch;
2147
+ flex: 3 3 0px;
2148
+ overflow: hidden; }
2149
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
2150
+ flex: 1;
2151
+ height: 100%;
2152
+ width: 0;
2153
+ display: flex;
2154
+ flex-direction: column;
2155
+ padding: 0px 20px 10px 20px; }
2156
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
2157
+ width: 100%;
2158
+ padding: 0 10px; }
2159
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
2160
+ opacity: 0.9;
2161
+ color: currentColor;
2162
+ font-size: 11px; }
2163
+ .react-autoql-notification-list-item .react-autoql-notification-data-title {
2164
+ line-height: 22px;
2165
+ font-size: 12px;
2166
+ text-align: right;
2315
2167
  color: var(--react-autoql-text-color-primary);
2316
- cursor: pointer;
2168
+ opacity: 0.5;
2169
+ padding: 8px 20px; }
2170
+ .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
2171
+ margin-top: -3px;
2172
+ vertical-align: middle; }
2173
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
2174
+ font-size: 21px;
2175
+ margin: 11px;
2176
+ width: 40px;
2177
+ height: 40px;
2178
+ padding: 10px;
2179
+ border-radius: 26px;
2180
+ display: inline-block;
2181
+ line-height: 20px;
2182
+ background-color: transparent;
2183
+ transition: background-color 0.2s ease;
2184
+ cursor: pointer; }
2185
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
2186
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
2187
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
2188
+ font-size: 18px;
2189
+ margin-top: 3px;
2317
2190
  margin-right: 3px;
2318
- border-radius: 5px;
2319
- margin-bottom: 0;
2320
- -webkit-user-select: none;
2321
- -moz-user-select: none;
2322
- -ms-user-select: none;
2323
- user-select: none; }
2324
- #react-paginate li:hover {
2325
- opacity: 0.7;
2326
- border-radius: 50%; }
2327
- #react-paginate li a {
2191
+ opacity: 0;
2192
+ width: 36px;
2193
+ height: 36px;
2194
+ padding: 9px;
2195
+ border-radius: 20px;
2328
2196
  display: inline-block;
2329
- color: var(--react-autoql-text-color-primary);
2330
- outline: none;
2331
- width: 28px;
2332
- height: 28px;
2333
- line-height: 28px; }
2334
- #react-paginate li.selected {
2335
- background: var(--react-autoql-accent-color);
2336
- border-radius: 50%;
2337
- outline: none; }
2338
- #react-paginate li.selected a {
2339
- color: #fff; }
2340
- #react-paginate .pagination-next.disabled,
2341
- #react-paginate .pagination-previous.disabled {
2342
- opacity: 0.5;
2343
- pointer-events: none; }
2344
- #react-paginate .pagination-previous,
2345
- #react-paginate .pagination-next {
2197
+ line-height: 20px;
2198
+ background-color: transparent;
2199
+ transition: all 0.2s ease;
2200
+ cursor: pointer; }
2201
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
2202
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
2203
+ .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
2346
2204
  position: absolute;
2347
- font-size: 18px; }
2348
- #react-paginate .pagination-previous a,
2349
- #react-paginate .pagination-next a {
2350
- color: var(--react-autoql-accent-color); }
2351
- #react-paginate .pagination-previous {
2352
- left: 20px; }
2353
- #react-paginate .pagination-next {
2354
- right: 20px; }
2355
-
2356
- .animated-item:nth-child(1) {
2357
- -webkit-animation-delay: 0.08s;
2358
- animation-delay: 0.08s; }
2205
+ top: -7px;
2206
+ left: -7px;
2207
+ color: var(--react-autoql-accent-color, #26a7df);
2208
+ line-height: 10px;
2209
+ background: var(--react-autoql-background-color-primary, #fff);
2210
+ border-radius: 10px;
2211
+ font-size: 17px; }
2212
+ .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
2213
+ height: 100%;
2214
+ opacity: 0;
2215
+ position: absolute;
2216
+ left: 0px;
2217
+ top: 0;
2218
+ width: 4px;
2219
+ background: var(--react-autoql-accent-color, #26a7df);
2220
+ transition-property: opacity;
2221
+ transition-duration: 0.2s;
2222
+ transition-timing-function: ease; }
2223
+ .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
2224
+ flex: 0 0 50px;
2225
+ padding: 10px;
2226
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2227
+ .react-autoql-notification-list-item .react-autoql-notification-img-container {
2228
+ flex: 0 0 60px; }
2229
+ .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
2230
+ border-radius: 50px;
2231
+ height: 45px;
2232
+ width: 45px;
2233
+ line-height: 45px;
2234
+ font-size: 22px;
2235
+ color: white;
2236
+ background-color: var(--react-autoql-accent-color, #26a7df);
2237
+ text-align: center;
2238
+ margin-top: 13px;
2239
+ margin-right: 17px; }
2240
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
2241
+ flex: 1;
2242
+ line-height: 23px;
2243
+ padding: 13px 0px;
2244
+ transition: color 0.2s ease; }
2245
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
2246
+ font-size: 18px;
2247
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
2248
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
2249
+ font-size: 12px;
2250
+ opacity: 0.5; }
2251
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2252
+ margin-bottom: -1px; }
2359
2253
 
2360
- .animated-item:nth-child(2) {
2361
- -webkit-animation-delay: 0.16s;
2362
- animation-delay: 0.16s; }
2254
+ .react-autoql-btn {
2255
+ border-radius: 4px;
2256
+ cursor: pointer;
2257
+ outline: none !important;
2258
+ transition: all 0.2s ease;
2259
+ width: auto;
2260
+ display: inline-block; }
2363
2261
 
2364
- .animated-item:nth-child(3) {
2365
- -webkit-animation-delay: 0.24s;
2366
- animation-delay: 0.24s; }
2262
+ .react-autoql-btn.disabled {
2263
+ opacity: 0.4;
2264
+ cursor: not-allowed;
2265
+ pointer-events: none; }
2367
2266
 
2368
- .animated-item:nth-child(4) {
2369
- -webkit-animation-delay: 0.32s;
2370
- animation-delay: 0.32s; }
2267
+ .react-autoql-btn.small {
2268
+ padding: 2px 8px;
2269
+ margin: 2px 3px; }
2371
2270
 
2372
- .animated-item:nth-child(5) {
2373
- -webkit-animation-delay: 0.4s;
2374
- animation-delay: 0.4s; }
2271
+ .react-autoql-btn.large {
2272
+ padding: 5px 16px;
2273
+ margin: 2px 5px; }
2375
2274
 
2376
- .animated-item:nth-child(6) {
2377
- -webkit-animation-delay: 0.48s;
2378
- animation-delay: 0.48s; }
2275
+ .react-autoql-btn.default {
2276
+ color: inherit;
2277
+ border: 1px solid var(--react-autoql-border-color);
2278
+ background: inherit; }
2279
+ .react-autoql-btn.default:hover {
2280
+ border-color: var(--react-autoql-accent-color);
2281
+ color: var(--react-autoql-accent-color); }
2379
2282
 
2380
- .animated-item:nth-child(7) {
2381
- -webkit-animation-delay: 0.56s;
2382
- animation-delay: 0.56s; }
2283
+ .react-autoql-btn.primary {
2284
+ background: var(--react-autoql-accent-color);
2285
+ border: 1px solid var(--react-autoql-accent-color);
2286
+ color: white; }
2287
+ .react-autoql-btn.primary:hover {
2288
+ opacity: 0.8; }
2383
2289
 
2384
- .animated-item:nth-child(8) {
2385
- -webkit-animation-delay: 0.64s;
2386
- animation-delay: 0.64s; }
2290
+ .react-autoql-btn.danger {
2291
+ color: var(--react-autoql-danger-color, #ca0b00);
2292
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2293
+ background: inherit; }
2294
+ .react-autoql-btn.danger:hover {
2295
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2296
+ color: #fff; }
2387
2297
 
2388
- .animated-item:nth-child(9) {
2389
- -webkit-animation-delay: 0.72s;
2390
- animation-delay: 0.72s; }
2298
+ .chat-single-message-container {
2299
+ transition: background-color 0.2s ease;
2300
+ padding-top: 6px; }
2301
+ .chat-single-message-container:first-of-type {
2302
+ margin-top: 10px; }
2303
+ .chat-single-message-container .query-more-btn {
2304
+ transition: all 0.3s ease;
2305
+ font-size: 22px;
2306
+ padding: 13px;
2307
+ margin-bottom: 6px;
2308
+ height: 42px;
2309
+ opacity: 0;
2310
+ visibility: hidden;
2311
+ cursor: pointer; }
2312
+ .chat-single-message-container .query-more-btn:hover {
2313
+ opacity: 1; }
2391
2314
 
2392
- .animated-item:nth-child(10) {
2393
- -webkit-animation-delay: 0.8s;
2394
- animation-delay: 0.8s; }
2315
+ .chat-condition-item-container {
2316
+ position: absolute;
2317
+ background: inherit;
2318
+ bottom: 0px;
2319
+ padding: 5px;
2320
+ border-radius: 6px; }
2321
+
2322
+ .chat-condition-item {
2323
+ background: none !important;
2324
+ border: none;
2325
+ margin-top: -20px !important;
2326
+ padding: 0 !important;
2327
+ font-family: var(--react-autoql-font-family);
2328
+ color: var(--react-autoql-accent-color);
2329
+ text-decoration: underline;
2330
+ cursor: pointer; }
2331
+
2332
+ .chat-single-message-container.response {
2333
+ display: flex;
2334
+ justify-content: flex-start;
2335
+ padding-left: 20px;
2336
+ -webkit-animation: scale-up-bl 0.6s ease;
2337
+ animation: scale-up-bl 0.6s ease; }
2338
+
2339
+ .chat-single-message-container.request {
2340
+ display: flex;
2341
+ justify-content: flex-end;
2342
+ padding-right: 20px;
2343
+ -webkit-animation: scale-up-br 0.6s ease;
2344
+ animation: scale-up-br 0.6s ease; }
2345
+
2346
+ .chat-single-message-container .chat-message-bubble {
2347
+ position: relative;
2348
+ padding: 13px;
2349
+ border-radius: 10px;
2350
+ max-width: calc(100% - 20px);
2351
+ word-wrap: break-word;
2352
+ font-family: inherit;
2353
+ font-size: 14px;
2354
+ letter-spacing: 0.04em;
2355
+ box-sizing: border-box;
2356
+ /* make small margin on bottom because sometimes react
2357
+ custom scrollbar cuts off a pixel or 2 at the bottom */
2358
+ margin-bottom: 6px; }
2359
+
2360
+ .chat-single-message-container .chat-message-bubble.text {
2361
+ max-width: 85%; }
2362
+
2363
+ .chat-single-message-container .chat-message-bubble.full-width {
2364
+ width: calc(100% - 20px) !important;
2365
+ min-width: calc(100% - 20px) !important;
2366
+ max-width: calc(100% - 20px) !important; }
2367
+
2368
+ .chat-single-message-container.response .chat-message-bubble.active {
2369
+ border: 1px solid #c3c3c3; }
2370
+
2371
+ .chat-single-message-container.response .chat-message-bubble {
2372
+ background: var(--react-autoql-background-color-primary);
2373
+ color: var(--react-autoql-text-color-primary);
2374
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2375
+
2376
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2377
+ min-width: 125px; }
2378
+
2379
+ .chat-single-message-container.request .chat-message-bubble {
2380
+ background: var(--react-autoql-accent-color);
2381
+ color: white;
2382
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2383
+
2384
+ /* Increase height of message to include table filters,
2385
+ so we dont have to redraw the whole table */
2386
+ .chat-single-message-container.response.filtering-table {
2387
+ max-height: calc(85% + 35px) !important; }
2388
+
2389
+ .chat-message-toolbar,
2390
+ .chat-message-toolbar.autoql-options-toolbar {
2391
+ display: none;
2392
+ position: absolute;
2393
+ background: inherit;
2394
+ top: -31px;
2395
+ padding: 5px;
2396
+ border-radius: 6px;
2397
+ line-height: 28px;
2398
+ background: var(--react-autoql-background-color-primary);
2399
+ border: 1px solid var(--react-autoql-border-color);
2400
+ color: var(--react-autoql-accent-color); }
2401
+
2402
+ .chat-message-toolbar.right {
2403
+ right: -9px; }
2404
+
2405
+ .chat-message-toolbar.left {
2406
+ left: -9px; }
2407
+
2408
+ .chat-message-bubble:hover .chat-message-toolbar,
2409
+ .chat-message-bubble .chat-message-toolbar.active {
2410
+ display: block; }
2411
+
2412
+ .report-problem-text-area {
2413
+ border-radius: 4px;
2414
+ border: 1px solid rgba(0, 0, 0, 0.15);
2415
+ margin-top: 10px;
2416
+ padding: 5px 10px;
2417
+ outline: none !important; }
2418
+
2419
+ .data-limit-warning-icon {
2420
+ color: var(--react-autoql-warning-color) !important;
2421
+ position: absolute !important;
2422
+ bottom: 2px;
2423
+ right: 4px;
2424
+ font-size: 20px; }
2425
+
2426
+ .condition-info-icon-left-align {
2427
+ color: var(--react-autoql-accent-color) !important;
2428
+ position: absolute !important;
2429
+ bottom: 2px;
2430
+ right: 10px;
2431
+ font-size: 20px; }
2432
+
2433
+ .condition-info-icon {
2434
+ color: var(--react-autoql-accent-color) !important;
2435
+ position: absolute !important;
2436
+ bottom: 2px;
2437
+ right: 4px;
2438
+ font-size: 20px; }
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
+ .interpretation-icon {
2449
+ vertical-align: top;
2450
+ height: 26px;
2451
+ margin: 0 3px;
2452
+ font-size: 18px; }
2453
+
2454
+ /* Chart icon styles */
2455
+ .chart-icon-svg-0,
2456
+ .react-autoql-icon-svg-0 {
2457
+ fill: currentColor; }
2458
+
2459
+ .hm0 {
2460
+ opacity: 0.5;
2461
+ fill: currentColor;
2462
+ enable-background: new; }
2463
+
2464
+ .hm1 {
2465
+ fill: currentColor; }
2466
+
2467
+ .hm2 {
2468
+ opacity: 0.15;
2469
+ fill: currentColor;
2470
+ enable-background: new; }
2471
+
2472
+ .hm3 {
2473
+ opacity: 0.6;
2474
+ fill: currentColor;
2475
+ enable-background: new; }
2476
+
2477
+ .hm4 {
2478
+ opacity: 0.65;
2479
+ fill: currentColor;
2480
+ enable-background: new; }
2481
+
2482
+ .hm5 {
2483
+ fill: currentColor; }
2484
+
2485
+ .hm6 {
2486
+ fill: currentColor; }
2487
+
2488
+ /* animations */
2489
+ @-webkit-keyframes scale-up-br {
2490
+ 0% {
2491
+ transform: scale(0.5);
2492
+ transform-origin: 100% 100%; }
2493
+ 100% {
2494
+ transform: scale(1);
2495
+ transform-origin: 100% 100%; } }
2496
+ @keyframes scale-up-br {
2497
+ 0% {
2498
+ transform: scale(0.5);
2499
+ transform-origin: 100% 100%; }
2500
+ 100% {
2501
+ transform: scale(1);
2502
+ transform-origin: 100% 100%; } }
2503
+
2504
+ @-webkit-keyframes scale-up-bl {
2505
+ 0% {
2506
+ transform: scale(0.5);
2507
+ transform-origin: 0% 100%; }
2508
+ 100% {
2509
+ transform: scale(1);
2510
+ transform-origin: 0% 100%; } }
2511
+
2512
+ @keyframes scale-up-bl {
2513
+ 0% {
2514
+ transform: scale(0.5);
2515
+ transform-origin: 0% 100%; }
2516
+ 100% {
2517
+ transform: scale(1);
2518
+ transform-origin: 0% 100%; } }
2519
+
2520
+ .react-autoql-cascader {
2521
+ position: relative;
2522
+ white-space: nowrap;
2523
+ overflow: hidden;
2524
+ min-width: 300px; }
2525
+ .react-autoql-cascader .options-container {
2526
+ transition: max-width 0.3s ease;
2527
+ display: inline-block;
2528
+ vertical-align: top;
2529
+ padding: 0 10px;
2530
+ margin: 10px 0;
2531
+ width: 100%;
2532
+ max-width: calc(100% - 20px);
2533
+ white-space: pre-wrap; }
2534
+ .react-autoql-cascader .options-container.hidden {
2535
+ max-width: 0; }
2536
+ .react-autoql-cascader .options-container.hidden span {
2537
+ white-space: nowrap; }
2538
+ .react-autoql-cascader .options-container.hidden .option {
2539
+ opacity: 0;
2540
+ pointer-events: none; }
2541
+ .react-autoql-cascader .options-container .options-title {
2542
+ padding: 4px;
2543
+ padding-left: 10px;
2544
+ font-weight: 600; }
2545
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2546
+ position: absolute;
2547
+ cursor: pointer;
2548
+ top: 15px;
2549
+ left: 0; }
2550
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2551
+ opacity: 0.8; }
2552
+ .react-autoql-cascader .options-container .option {
2553
+ cursor: pointer;
2554
+ padding: 4px;
2555
+ display: flex;
2556
+ justify-content: space-between;
2557
+ border-radius: 2px;
2558
+ padding-left: 10px; }
2559
+ .react-autoql-cascader .options-container .option .option-arrow {
2560
+ opacity: 0.7; }
2561
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2562
+ opacity: 0;
2563
+ color: #fff;
2564
+ font-size: 16px;
2565
+ vertical-align: middle; }
2566
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2567
+ background-color: var(--react-autoql-accent-color, #26a7df);
2568
+ color: #fff; }
2569
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2570
+ opacity: 1; }
2571
+ .react-autoql-cascader .options-container:not(:last-child) {
2572
+ border-right: 1px solid #d3d3d352; }
2573
+
2574
+ .ReactModal__Overlay {
2575
+ background-color: transparent !important;
2576
+ transition: background-color 0.2s ease-in-out;
2577
+ z-index: 9999; }
2578
+
2579
+ .ReactModal__Overlay--after-open {
2580
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2581
+
2582
+ .ReactModal__Overlay--before-close {
2583
+ background-color: transparent !important; }
2584
+
2585
+ .ReactModal__Content {
2586
+ display: flex;
2587
+ flex-direction: column;
2588
+ transform: scale(0);
2589
+ transition: all 0.2s ease-in-out;
2590
+ color: var(--react-autoql-text-color-primary);
2591
+ border: 1px solid var(--react-autoql-border-color) !important;
2592
+ background: var(--react-autoql-background-color-primary) !important;
2593
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2594
+ padding: 0 !important;
2595
+ margin: auto auto;
2596
+ max-width: 90vw;
2597
+ max-height: calc(100vh - 90px); }
2598
+ .ReactModal__Content input.react-autoql-input,
2599
+ .ReactModal__Content textarea.react-autoql-input,
2600
+ .ReactModal__Content textarea {
2601
+ border-color: var(--react-autoql-border-color);
2602
+ color: var(--react-autoql-text-color-primary);
2603
+ background: var(--react-autoql-background-color-primary, white); }
2604
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2605
+ color: var(--react-autoql-text-color-placeholder); }
2606
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2607
+ color: var(--react-autoql-text-color-placeholder); }
2608
+ .ReactModal__Content input.react-autoql-input::placeholder,
2609
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2610
+ .ReactModal__Content textarea::placeholder {
2611
+ color: var(--react-autoql-text-color-placeholder); }
2612
+
2613
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2614
+ transform: scale(1); }
2615
+
2616
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2617
+ transform: scale(0); }
2618
+
2619
+ .react-autoql-modal-header {
2620
+ position: relative;
2621
+ text-align: center;
2622
+ flex: 0 0 52px;
2623
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2624
+ padding: 14px 60px;
2625
+ font-size: 16px; }
2626
+
2627
+ .react-autoql-modal-footer {
2628
+ position: relative;
2629
+ flex: 0 0 52px;
2630
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2631
+ text-align: right;
2632
+ padding: 8px 10px; }
2633
+
2634
+ .react-autoql-modal-body {
2635
+ display: flex;
2636
+ flex-direction: column;
2637
+ padding: 25px;
2638
+ flex: 1;
2639
+ overflow: hidden; }
2640
+ .react-autoql-modal-body h3 {
2641
+ color: var(--react-autoql-text-color-primary); }
2642
+
2643
+ .react-autoql-modal-close-btn {
2644
+ position: absolute !important;
2645
+ top: 10px;
2646
+ right: 18px;
2647
+ font-size: 22px;
2648
+ opacity: 0.6 !important;
2649
+ cursor: pointer; }
2650
+
2651
+ .react-autoql-modal-close-btn:hover {
2652
+ opacity: 1 !important; }
2653
+
2654
+ .react-autoql-table-container {
2655
+ height: 100%;
2656
+ max-width: 100%;
2657
+ background-color: inherit; }
2658
+
2659
+ .react-autoql-table {
2660
+ margin-bottom: 0; }
2661
+
2662
+ /* tabulator */
2663
+ .react-autoql-table.tabulator,
2664
+ .react-autoql-table.tabulator .tabulator-row,
2665
+ .react-autoql-table.tabulator .tabulator-header,
2666
+ .react-autoql-table.tabulator .tabulator-headers,
2667
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2668
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2669
+ background-color: inherit; }
2670
+
2671
+ .react-autoql-table-container.supports-drilldown
2672
+ .react-autoql-table.tabulator
2673
+ .tabulator-row.tabulator-unselectable:hover {
2674
+ cursor: pointer !important;
2675
+ background-color: var(--react-autoql-hover-color) !important; }
2395
2676
 
2396
- .animated-item:nth-child(11) {
2397
- -webkit-animation-delay: 0.88s;
2398
- animation-delay: 0.88s; }
2677
+ .react-autoql-table.tabulator
2678
+ .tabulator-header
2679
+ .tabulator-col.tabulator-sortable:hover {
2680
+ background-color: var(--react-autoql-hover-color) !important; }
2399
2681
 
2400
- .animated-item:nth-child(12) {
2401
- -webkit-animation-delay: 0.96s;
2402
- animation-delay: 0.96s; }
2682
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2683
+ .react-autoql-table.tabulator .tabulator-cell {
2684
+ border-color: var(--react-autoql-border-color); }
2403
2685
 
2404
- .animated-item:nth-child(13) {
2405
- -webkit-animation-delay: 1.04s;
2406
- animation-delay: 1.04s; }
2686
+ .react-autoql-table.tabulator .tabulator-header {
2687
+ border-bottom: 2px solid var(--react-autoql-border-color); }
2407
2688
 
2408
- .animated-item:nth-child(14) {
2409
- -webkit-animation-delay: 1.12s;
2410
- animation-delay: 1.12s; }
2689
+ .react-autoql-table.tabulator {
2690
+ background-color: inherit;
2691
+ height: 100%; }
2411
2692
 
2412
- .animated-item:nth-child(15) {
2413
- -webkit-animation-delay: 1.2s;
2414
- animation-delay: 1.2s; }
2693
+ .react-autoql-table .tabulator-row {
2694
+ /* user-select: none; This breaks copy/paste */
2695
+ border-bottom: 1px solid var(--react-autoql-border-color); }
2415
2696
 
2416
- @-webkit-keyframes fadeIn {
2417
- 0% {
2418
- opacity: 0;
2419
- top: 100px; }
2420
- 75% {
2421
- opacity: 0.5;
2422
- top: 0px; }
2423
- 100% {
2424
- opacity: 1; } }
2697
+ .tabulator-cell:not(:first-child) {
2698
+ border-left: 1px solid !important;
2699
+ border-color: rgba(0, 0, 0, 0.06) !important; }
2425
2700
 
2426
- .chat-single-message-container {
2427
- transition: background-color 0.2s ease;
2428
- padding-top: 6px; }
2429
- .chat-single-message-container:first-of-type {
2430
- margin-top: 10px; }
2431
- .chat-single-message-container .query-more-btn {
2432
- transition: all 0.3s ease;
2433
- font-size: 22px;
2434
- padding: 13px;
2435
- margin-bottom: 6px;
2436
- height: 42px;
2437
- opacity: 0;
2438
- visibility: hidden;
2439
- cursor: pointer; }
2440
- .chat-single-message-container .query-more-btn:hover {
2441
- opacity: 1; }
2701
+ .react-autoql-table .tabulator-tableHolder {
2702
+ max-height: calc(100% - 38px) !important;
2703
+ background-color: inherit; }
2442
2704
 
2443
- .chat-condition-item-container {
2444
- position: absolute;
2445
- background: inherit;
2446
- bottom: 0px;
2447
- padding: 5px;
2448
- border-radius: 6px; }
2705
+ .react-autoql-table.tabulator
2706
+ .tabulator-header
2707
+ .tabulator-col
2708
+ .tabulator-col-content {
2709
+ padding: 8px 5px; }
2449
2710
 
2450
- .chat-condition-item {
2451
- background: none !important;
2452
- border: none;
2453
- margin-top: -20px !important;
2454
- padding: 0 !important;
2455
- font-family: var(--react-autoql-font-family);
2456
- color: var(--react-autoql-accent-color);
2457
- text-decoration: underline;
2458
- cursor: pointer; }
2711
+ .react-autoql-table.tabulator
2712
+ .tabulator-header
2713
+ .tabulator-col
2714
+ .tabulator-col-content
2715
+ .tabulator-arrow {
2716
+ opacity: 0;
2717
+ border-left: 4px solid transparent !important;
2718
+ border-right: 4px solid transparent !important;
2719
+ right: 4px;
2720
+ top: calc(50% - 3px); }
2459
2721
 
2460
- .chat-single-message-container.response {
2461
- display: flex;
2462
- justify-content: flex-start;
2463
- padding-left: 20px;
2464
- -webkit-animation: scale-up-bl 0.6s ease;
2465
- animation: scale-up-bl 0.6s ease; }
2722
+ .react-autoql-table.tabulator
2723
+ .tabulator-header
2724
+ .tabulator-col:hover
2725
+ .tabulator-col-content
2726
+ .tabulator-arrow {
2727
+ opacity: 1 !important; }
2466
2728
 
2467
- .chat-single-message-container.request {
2468
- display: flex;
2469
- justify-content: flex-end;
2470
- padding-right: 20px;
2471
- -webkit-animation: scale-up-br 0.6s ease;
2472
- animation: scale-up-br 0.6s ease; }
2729
+ .react-autoql-table.tabulator
2730
+ .tabulator-header
2731
+ .tabulator-col.tabulator-sortable[aria-sort='desc']
2732
+ .tabulator-col-content
2733
+ .tabulator-arrow {
2734
+ border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2473
2735
 
2474
- .chat-single-message-container .chat-message-bubble {
2475
- position: relative;
2476
- padding: 13px;
2477
- border-radius: 10px;
2478
- max-width: calc(100% - 20px);
2479
- word-wrap: break-word;
2480
- font-family: inherit;
2481
- font-size: 14px;
2482
- letter-spacing: 0.04em;
2483
- box-sizing: border-box;
2484
- /* make small margin on bottom because sometimes react
2485
- custom scrollbar cuts off a pixel or 2 at the bottom */
2486
- margin-bottom: 6px; }
2736
+ .react-autoql-table.tabulator
2737
+ .tabulator-header
2738
+ .tabulator-col.tabulator-sortable[aria-sort='asc']
2739
+ .tabulator-col-content
2740
+ .tabulator-arrow,
2741
+ .react-autoql-table.tabulator
2742
+ .tabulator-header
2743
+ .tabulator-col.tabulator-sortable[aria-sort='none']
2744
+ .tabulator-col-content
2745
+ .tabulator-arrow {
2746
+ border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2487
2747
 
2488
- .chat-single-message-container .chat-message-bubble.text {
2489
- max-width: 85%; }
2748
+ .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2749
+ display: unset;
2750
+ opacity: 0;
2751
+ background-color: transparent;
2752
+ width: 7px;
2753
+ height: 7px;
2754
+ -webkit-transition: all 0.3s ease;
2755
+ transition: all 0.3s ease; }
2490
2756
 
2491
- .chat-single-message-container .chat-message-bubble.full-width {
2492
- width: calc(100% - 20px) !important;
2493
- min-width: calc(100% - 20px) !important;
2494
- max-width: calc(100% - 20px) !important; }
2757
+ .react-autoql-table.tabulator .tabulator-tableHolder {
2758
+ min-height: calc(100% - 40px) !important;
2759
+ height: calc(100% - 40px) !important;
2760
+ max-height: calc(100% - 40px) !important; }
2495
2761
 
2496
- .chat-single-message-container.response .chat-message-bubble.active {
2497
- border: 1px solid #c3c3c3; }
2762
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2763
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2764
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2765
+ background-color: transparent; }
2498
2766
 
2499
- .chat-single-message-container.response .chat-message-bubble {
2500
- background: var(--react-autoql-background-color-primary);
2501
- color: var(--react-autoql-text-color-primary);
2502
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2767
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2768
+ background-color: rgba(0, 0, 0, 0.2);
2769
+ border-radius: 7px;
2770
+ border: 0px; }
2503
2771
 
2504
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2505
- min-width: 125px; }
2772
+ .react-autoql-table .tabulator-header-filter input {
2773
+ border: 1px solid var(--react-autoql-border-color);
2774
+ border-radius: 4px;
2775
+ background: transparent;
2776
+ padding: 4px 9px !important;
2777
+ outline: none !important; }
2506
2778
 
2507
- .chat-single-message-container.request .chat-message-bubble {
2508
- background: var(--react-autoql-accent-color);
2509
- color: white;
2510
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2779
+ .react-autoql-table .tabulator-header-filter input:focus {
2780
+ border: 1px solid #28a8e0; }
2511
2781
 
2512
- /* Increase height of message to include table filters,
2513
- so we dont have to redraw the whole table */
2514
- .chat-single-message-container.response.filtering-table {
2515
- max-height: calc(85% + 35px) !important; }
2782
+ /* These are necessary because we are always rendering the
2783
+ filter (just display: none when not used) instead of re-rendering
2784
+ the whole table when the filter button is clicked */
2785
+ .react-autoql-table-container:not(.filtering)
2786
+ .react-autoql-table
2787
+ .tabulator-header-filter {
2788
+ display: none; }
2516
2789
 
2517
- .chat-message-toolbar,
2518
- .chat-message-toolbar.autoql-options-toolbar {
2519
- display: none;
2520
- position: absolute;
2521
- background: inherit;
2522
- top: -31px;
2523
- padding: 5px;
2524
- border-radius: 6px;
2525
- line-height: 28px;
2526
- background: var(--react-autoql-background-color-primary);
2527
- border: 1px solid var(--react-autoql-border-color);
2528
- color: var(--react-autoql-accent-color); }
2790
+ .react-autoql-table-container:not(.filtering)
2791
+ .react-autoql-table
2792
+ .tabulator-col {
2793
+ height: auto !important; }
2529
2794
 
2530
- .chat-message-toolbar.right {
2531
- right: -9px; }
2795
+ .tabulator-table .tabulator-row .tabulator-cell {
2796
+ min-height: 38px; }
2532
2797
 
2533
- .chat-message-toolbar.left {
2534
- left: -9px; }
2798
+ /* Center header titles */
2799
+ .react-autoql-table .tabulator-header .tabulator-col {
2800
+ text-align: center !important; }
2535
2801
 
2536
- .chat-message-bubble:hover .chat-message-toolbar,
2537
- .chat-message-bubble .chat-message-toolbar.active {
2538
- display: block; }
2802
+ .react-autoql-table .tabulator-header .tabulator-col-title {
2803
+ padding-left: 10px !important;
2804
+ padding-right: 10px !important; }
2539
2805
 
2540
- .report-problem-text-area {
2806
+ .filter-tag {
2807
+ color: #2ecc40;
2808
+ border: 1px solid;
2809
+ padding: 2px 4px;
2541
2810
  border-radius: 4px;
2542
- border: 1px solid rgba(0, 0, 0, 0.15);
2543
- margin-top: 10px;
2544
- padding: 5px 10px;
2545
- outline: none !important; }
2546
-
2547
- .data-limit-warning-icon {
2548
- color: var(--react-autoql-warning-color) !important;
2549
- position: absolute !important;
2550
- bottom: 2px;
2551
- right: 4px;
2552
- font-size: 20px; }
2811
+ font-weight: 400;
2812
+ font-size: 10px;
2813
+ margin-right: 5px;
2814
+ vertical-align: top;
2815
+ line-height: 21px; }
2553
2816
 
2554
- .condition-info-icon-left-align {
2555
- color: var(--react-autoql-accent-color) !important;
2556
- position: absolute !important;
2557
- bottom: 2px;
2558
- right: 10px;
2559
- font-size: 20px; }
2817
+ .comparison-value-positive {
2818
+ color: #2ecc40; }
2560
2819
 
2561
- .condition-info-icon {
2562
- color: var(--react-autoql-accent-color) !important;
2563
- position: absolute !important;
2564
- bottom: 2px;
2565
- right: 4px;
2566
- font-size: 20px; }
2820
+ .comparison-value-negative {
2821
+ color: #e80000; }
2567
2822
 
2568
- .more-options-menu,
2569
- .report-problem-menu {
2570
- background: var(--react-autoql-background-color-primary);
2571
- padding: 10px 0; }
2572
- .more-options-menu span.react-autoql-icon svg,
2573
- .report-problem-menu span.react-autoql-icon svg {
2574
- margin-right: 3px; }
2823
+ .query-tips-page-container {
2824
+ height: 100%;
2825
+ padding: 10px; }
2826
+ .query-tips-page-container .chat-bar-input-icon {
2827
+ top: 20px;
2828
+ left: 26px; }
2829
+ .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2830
+ padding-left: 46px; }
2575
2831
 
2576
- .interpretation-icon {
2577
- vertical-align: top;
2578
- height: 26px;
2579
- margin: 0 3px;
2580
- font-size: 18px; }
2832
+ .query-tips-result-container {
2833
+ color: var(--react-autoql-text-color-primary);
2834
+ padding: 0px 20px;
2835
+ text-align: center;
2836
+ max-width: 550px;
2837
+ margin: 0 auto; }
2838
+ .query-tips-result-container .query-tip-list-container {
2839
+ margin-bottom: 20px; }
2840
+ .query-tips-result-container .animated-item {
2841
+ -webkit-animation: fadeIn 0.3s linear;
2842
+ animation: fadeIn 0.3s linear;
2843
+ -webkit-animation-fill-mode: both;
2844
+ animation-fill-mode: both; }
2845
+ .query-tips-result-container .query-tip-item {
2846
+ position: relative;
2847
+ padding: 13px;
2848
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
2849
+ cursor: pointer; }
2850
+ .query-tips-result-container .query-tip-item:first-child {
2851
+ border-top: none; }
2852
+ .query-tips-result-container .query-tip-item .execute-btn {
2853
+ position: absolute;
2854
+ right: 10px;
2855
+ top: 4px;
2856
+ font-size: 20px;
2857
+ visibility: hidden;
2858
+ opacity: 0; }
2859
+ .query-tips-result-container .query-tip-item:hover {
2860
+ font-weight: bold;
2861
+ color: var(--react-autoql-accent-color); }
2862
+ .query-tips-result-container .query-tip-item:hover .execute-btn {
2863
+ visibility: visible;
2864
+ opacity: 1; }
2865
+ .query-tips-result-container .query-tips-result-placeholder {
2866
+ margin-top: 50px;
2867
+ opacity: 0.6; }
2581
2868
 
2582
- /* Chart icon styles */
2583
- .chart-icon-svg-0,
2584
- .react-autoql-icon-svg-0 {
2585
- fill: currentColor; }
2869
+ .chat-bar-loading-spinner {
2870
+ position: absolute;
2871
+ right: 20px;
2872
+ top: 22px; }
2586
2873
 
2587
- .hm0 {
2588
- opacity: 0.5;
2589
- fill: currentColor;
2590
- enable-background: new; }
2874
+ #react-paginate {
2875
+ position: relative;
2876
+ background: transparent;
2877
+ padding: 8px; }
2878
+ #react-paginate ul {
2879
+ display: inline-block;
2880
+ padding-left: 0;
2881
+ margin-bottom: 0; }
2882
+ #react-paginate li {
2883
+ display: inline-block;
2884
+ color: var(--react-autoql-text-color-primary);
2885
+ cursor: pointer;
2886
+ margin-right: 3px;
2887
+ border-radius: 5px;
2888
+ margin-bottom: 0;
2889
+ -webkit-user-select: none;
2890
+ -moz-user-select: none;
2891
+ -ms-user-select: none;
2892
+ user-select: none; }
2893
+ #react-paginate li:hover {
2894
+ opacity: 0.7;
2895
+ border-radius: 50%; }
2896
+ #react-paginate li a {
2897
+ display: inline-block;
2898
+ color: var(--react-autoql-text-color-primary);
2899
+ outline: none;
2900
+ width: 28px;
2901
+ height: 28px;
2902
+ line-height: 28px; }
2903
+ #react-paginate li.selected {
2904
+ background: var(--react-autoql-accent-color);
2905
+ border-radius: 50%;
2906
+ outline: none; }
2907
+ #react-paginate li.selected a {
2908
+ color: #fff; }
2909
+ #react-paginate .pagination-next.disabled,
2910
+ #react-paginate .pagination-previous.disabled {
2911
+ opacity: 0.5;
2912
+ pointer-events: none; }
2913
+ #react-paginate .pagination-previous,
2914
+ #react-paginate .pagination-next {
2915
+ position: absolute;
2916
+ font-size: 18px; }
2917
+ #react-paginate .pagination-previous a,
2918
+ #react-paginate .pagination-next a {
2919
+ color: var(--react-autoql-accent-color); }
2920
+ #react-paginate .pagination-previous {
2921
+ left: 20px; }
2922
+ #react-paginate .pagination-next {
2923
+ right: 20px; }
2591
2924
 
2592
- .hm1 {
2593
- fill: currentColor; }
2925
+ .animated-item:nth-child(1) {
2926
+ -webkit-animation-delay: 0.08s;
2927
+ animation-delay: 0.08s; }
2594
2928
 
2595
- .hm2 {
2596
- opacity: 0.15;
2597
- fill: currentColor;
2598
- enable-background: new; }
2929
+ .animated-item:nth-child(2) {
2930
+ -webkit-animation-delay: 0.16s;
2931
+ animation-delay: 0.16s; }
2599
2932
 
2600
- .hm3 {
2601
- opacity: 0.6;
2602
- fill: currentColor;
2603
- enable-background: new; }
2933
+ .animated-item:nth-child(3) {
2934
+ -webkit-animation-delay: 0.24s;
2935
+ animation-delay: 0.24s; }
2604
2936
 
2605
- .hm4 {
2606
- opacity: 0.65;
2607
- fill: currentColor;
2608
- enable-background: new; }
2937
+ .animated-item:nth-child(4) {
2938
+ -webkit-animation-delay: 0.32s;
2939
+ animation-delay: 0.32s; }
2609
2940
 
2610
- .hm5 {
2611
- fill: currentColor; }
2941
+ .animated-item:nth-child(5) {
2942
+ -webkit-animation-delay: 0.4s;
2943
+ animation-delay: 0.4s; }
2612
2944
 
2613
- .hm6 {
2614
- fill: currentColor; }
2945
+ .animated-item:nth-child(6) {
2946
+ -webkit-animation-delay: 0.48s;
2947
+ animation-delay: 0.48s; }
2615
2948
 
2616
- /* animations */
2617
- @-webkit-keyframes scale-up-br {
2618
- 0% {
2619
- transform: scale(0.5);
2620
- transform-origin: 100% 100%; }
2621
- 100% {
2622
- transform: scale(1);
2623
- transform-origin: 100% 100%; } }
2624
- @keyframes scale-up-br {
2625
- 0% {
2626
- transform: scale(0.5);
2627
- transform-origin: 100% 100%; }
2628
- 100% {
2629
- transform: scale(1);
2630
- transform-origin: 100% 100%; } }
2949
+ .animated-item:nth-child(7) {
2950
+ -webkit-animation-delay: 0.56s;
2951
+ animation-delay: 0.56s; }
2631
2952
 
2632
- @-webkit-keyframes scale-up-bl {
2633
- 0% {
2634
- transform: scale(0.5);
2635
- transform-origin: 0% 100%; }
2636
- 100% {
2637
- transform: scale(1);
2638
- transform-origin: 0% 100%; } }
2953
+ .animated-item:nth-child(8) {
2954
+ -webkit-animation-delay: 0.64s;
2955
+ animation-delay: 0.64s; }
2639
2956
 
2640
- @keyframes scale-up-bl {
2641
- 0% {
2642
- transform: scale(0.5);
2643
- transform-origin: 0% 100%; }
2644
- 100% {
2645
- transform: scale(1);
2646
- transform-origin: 0% 100%; } }
2957
+ .animated-item:nth-child(9) {
2958
+ -webkit-animation-delay: 0.72s;
2959
+ animation-delay: 0.72s; }
2647
2960
 
2648
- .react-autoql-btn {
2649
- border-radius: 4px;
2650
- cursor: pointer;
2651
- outline: none !important;
2652
- transition: all 0.2s ease;
2653
- width: auto;
2654
- display: inline-block; }
2961
+ .animated-item:nth-child(10) {
2962
+ -webkit-animation-delay: 0.8s;
2963
+ animation-delay: 0.8s; }
2655
2964
 
2656
- .react-autoql-btn.disabled {
2657
- opacity: 0.4;
2658
- cursor: not-allowed;
2659
- pointer-events: none; }
2965
+ .animated-item:nth-child(11) {
2966
+ -webkit-animation-delay: 0.88s;
2967
+ animation-delay: 0.88s; }
2660
2968
 
2661
- .react-autoql-btn.small {
2662
- padding: 2px 8px;
2663
- margin: 2px 3px; }
2969
+ .animated-item:nth-child(12) {
2970
+ -webkit-animation-delay: 0.96s;
2971
+ animation-delay: 0.96s; }
2664
2972
 
2665
- .react-autoql-btn.large {
2666
- padding: 5px 16px;
2667
- margin: 2px 5px; }
2973
+ .animated-item:nth-child(13) {
2974
+ -webkit-animation-delay: 1.04s;
2975
+ animation-delay: 1.04s; }
2668
2976
 
2669
- .react-autoql-btn.default {
2670
- color: inherit;
2671
- border: 1px solid var(--react-autoql-border-color);
2672
- background: inherit; }
2673
- .react-autoql-btn.default:hover {
2674
- border-color: var(--react-autoql-accent-color);
2675
- color: var(--react-autoql-accent-color); }
2977
+ .animated-item:nth-child(14) {
2978
+ -webkit-animation-delay: 1.12s;
2979
+ animation-delay: 1.12s; }
2676
2980
 
2677
- .react-autoql-btn.primary {
2678
- background: var(--react-autoql-accent-color);
2679
- border: 1px solid var(--react-autoql-accent-color);
2680
- color: white; }
2681
- .react-autoql-btn.primary:hover {
2682
- opacity: 0.8; }
2981
+ .animated-item:nth-child(15) {
2982
+ -webkit-animation-delay: 1.2s;
2983
+ animation-delay: 1.2s; }
2683
2984
 
2684
- .react-autoql-btn.danger {
2685
- color: var(--react-autoql-danger-color, #ca0b00);
2686
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2687
- background: inherit; }
2688
- .react-autoql-btn.danger:hover {
2689
- background-color: var(--react-autoql-danger-color, #ca0b00);
2690
- color: #fff; }
2985
+ @-webkit-keyframes fadeIn {
2986
+ 0% {
2987
+ opacity: 0;
2988
+ top: 100px; }
2989
+ 75% {
2990
+ opacity: 0.5;
2991
+ top: 0px; }
2992
+ 100% {
2993
+ opacity: 1; } }
2691
2994
 
2692
2995
  .react-autoql-condition-locking-input {
2693
2996
  padding: 5px;
@@ -2744,327 +3047,104 @@ so we dont have to redraw the whole table */
2744
3047
  margin: 0 10px 0 10px;
2745
3048
  padding-left: 10px; }
2746
3049
 
2747
- .condition-list {
2748
- padding: 0;
2749
- margin: 0 auto; }
2750
-
2751
- .condition-list-item {
2752
- cursor: pointer;
2753
- padding: 4px;
2754
- margin: 0 10px 0 10px;
2755
- display: flex;
2756
- justify-content: space-between;
2757
- border-radius: 2px;
2758
- padding-left: 10px; }
2759
- .condition-list-item:hover {
2760
- background: var(--react-autoql-accent-color);
2761
- color: white; }
2762
-
2763
- .empty-condition-list {
2764
- text-align: center;
2765
- padding: 4px;
2766
- margin: 0 20px 0 20px; }
2767
-
2768
- .autoql-close-button {
2769
- background-color: inherit;
2770
- border: none;
2771
- text-align: left;
2772
- font-size: 20px;
2773
- margin-top: -20px;
2774
- float: none !important;
2775
- color: inherit; }
2776
-
2777
- .react-tiny-popover-container {
2778
- background: var(--react-autoql-background-color-primary); }
2779
-
2780
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2781
- flex-grow: 1;
2782
- display: inline;
2783
- width: 90%;
2784
- height: 100%; }
2785
-
2786
- .autoql-condition-locking-menu-container
2787
- .react-autosuggest__suggestions-container--open {
2788
- position: absolute;
2789
- overflow-y: scroll !important;
2790
- padding-top: 5px;
2791
- padding-bottom: 5px;
2792
- display: block;
2793
- font-family: inherit;
2794
- font-size: 15px;
2795
- font-weight: normal;
2796
- z-index: 2;
2797
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2798
- text-align: left;
2799
- width: 95%;
2800
- top: 35px;
2801
- border-radius: 4px;
2802
- margin: 10px auto;
2803
- height: auto;
2804
- max-height: 50vh;
2805
- overflow-y: auto; }
2806
-
2807
- .autoql-condition-locking-menu-container
2808
- .react-autosuggest__suggestions-container--open {
2809
- background-color: var(--react-autoql-background-color-primary);
2810
- border: 1px solid var(--react-autoql-border-color);
2811
- color: var(--react-autoql-text-color-primary); }
2812
-
2813
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2814
- color: var(--react-autoql-text-color-primary); }
2815
-
2816
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2817
- opacity: 0.5; }
2818
-
2819
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2820
- opacity: 0.5; }
2821
-
2822
- .autoql-condition-locking-menu-container input::placeholder {
2823
- opacity: 0.5; }
2824
-
2825
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2826
- margin: 0;
2827
- padding: 0;
2828
- list-style-type: none; }
2829
-
2830
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2831
- cursor: pointer;
2832
- padding: 2px;
2833
- padding-left: 18px;
2834
- letter-spacing: 0.05em;
2835
- line-height: 22.5px; }
2836
-
2837
- .autoql-condition-locking-menu-container
2838
- .react-autosuggest__suggestion--highlighted {
2839
- background-color: rgba(0, 0, 0, 0.1) !important; }
2840
-
2841
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2842
- padding: 10px 0 0 10px;
2843
- font-size: 12px;
2844
- color: #777; }
2845
-
2846
- .react-autoql-cascader {
2847
- position: relative;
2848
- white-space: nowrap;
2849
- overflow: hidden;
2850
- min-width: 300px; }
2851
- .react-autoql-cascader .options-container {
2852
- transition: max-width 0.3s ease;
2853
- display: inline-block;
2854
- vertical-align: top;
2855
- padding: 0 10px;
2856
- margin: 10px 0;
2857
- width: 100%;
2858
- max-width: calc(100% - 20px);
2859
- white-space: pre-wrap; }
2860
- .react-autoql-cascader .options-container.hidden {
2861
- max-width: 0; }
2862
- .react-autoql-cascader .options-container.hidden span {
2863
- white-space: nowrap; }
2864
- .react-autoql-cascader .options-container.hidden .option {
2865
- opacity: 0;
2866
- pointer-events: none; }
2867
- .react-autoql-cascader .options-container .options-title {
2868
- padding: 4px;
2869
- padding-left: 10px;
2870
- font-weight: 600; }
2871
- .react-autoql-cascader .options-container .cascader-back-arrow {
2872
- position: absolute;
2873
- cursor: pointer;
2874
- top: 15px;
2875
- left: 0; }
2876
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2877
- opacity: 0.8; }
2878
- .react-autoql-cascader .options-container .option {
2879
- cursor: pointer;
2880
- padding: 4px;
2881
- display: flex;
2882
- justify-content: space-between;
2883
- border-radius: 2px;
2884
- padding-left: 10px; }
2885
- .react-autoql-cascader .options-container .option .option-arrow {
2886
- opacity: 0.7; }
2887
- .react-autoql-cascader .options-container .option .option-execute-icon {
2888
- opacity: 0;
2889
- color: #fff;
2890
- font-size: 16px;
2891
- vertical-align: middle; }
2892
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2893
- background-color: var(--react-autoql-accent-color, #26a7df);
2894
- color: #fff; }
2895
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2896
- opacity: 1; }
2897
- .react-autoql-cascader .options-container:not(:last-child) {
2898
- border-right: 1px solid #d3d3d352; }
2899
-
2900
- .react-autoql-table-container {
2901
- height: 100%;
2902
- max-width: 100%;
2903
- background-color: inherit; }
2904
-
2905
- .react-autoql-table {
2906
- margin-bottom: 0; }
2907
-
2908
- /* tabulator */
2909
- .react-autoql-table.tabulator,
2910
- .react-autoql-table.tabulator .tabulator-row,
2911
- .react-autoql-table.tabulator .tabulator-header,
2912
- .react-autoql-table.tabulator .tabulator-headers,
2913
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2914
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2915
- background-color: inherit; }
2916
-
2917
- .react-autoql-table-container.supports-drilldown
2918
- .react-autoql-table.tabulator
2919
- .tabulator-row.tabulator-unselectable:hover {
2920
- cursor: pointer !important;
2921
- background-color: var(--react-autoql-hover-color) !important; }
2922
-
2923
- .react-autoql-table.tabulator
2924
- .tabulator-header
2925
- .tabulator-col.tabulator-sortable:hover {
2926
- background-color: var(--react-autoql-hover-color) !important; }
2927
-
2928
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2929
- .react-autoql-table.tabulator .tabulator-cell {
2930
- border-color: var(--react-autoql-border-color); }
2931
-
2932
- .react-autoql-table.tabulator .tabulator-header {
2933
- border-bottom: 2px solid var(--react-autoql-border-color); }
2934
-
2935
- .react-autoql-table.tabulator {
2936
- background-color: inherit;
2937
- height: 100%; }
2938
-
2939
- .react-autoql-table .tabulator-row {
2940
- /* user-select: none; This breaks copy/paste */
2941
- border-bottom: 1px solid var(--react-autoql-border-color); }
2942
-
2943
- .tabulator-cell:not(:first-child) {
2944
- border-left: 1px solid !important;
2945
- border-color: rgba(0, 0, 0, 0.06) !important; }
2946
-
2947
- .react-autoql-table .tabulator-tableHolder {
2948
- max-height: calc(100% - 38px) !important;
2949
- background-color: inherit; }
2950
-
2951
- .react-autoql-table.tabulator
2952
- .tabulator-header
2953
- .tabulator-col
2954
- .tabulator-col-content {
2955
- padding: 8px 5px; }
2956
-
2957
- .react-autoql-table.tabulator
2958
- .tabulator-header
2959
- .tabulator-col
2960
- .tabulator-col-content
2961
- .tabulator-arrow {
2962
- opacity: 0;
2963
- border-left: 4px solid transparent !important;
2964
- border-right: 4px solid transparent !important;
2965
- right: 4px;
2966
- top: calc(50% - 3px); }
2967
-
2968
- .react-autoql-table.tabulator
2969
- .tabulator-header
2970
- .tabulator-col:hover
2971
- .tabulator-col-content
2972
- .tabulator-arrow {
2973
- opacity: 1 !important; }
2974
-
2975
- .react-autoql-table.tabulator
2976
- .tabulator-header
2977
- .tabulator-col.tabulator-sortable[aria-sort='desc']
2978
- .tabulator-col-content
2979
- .tabulator-arrow {
2980
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2981
-
2982
- .react-autoql-table.tabulator
2983
- .tabulator-header
2984
- .tabulator-col.tabulator-sortable[aria-sort='asc']
2985
- .tabulator-col-content
2986
- .tabulator-arrow,
2987
- .react-autoql-table.tabulator
2988
- .tabulator-header
2989
- .tabulator-col.tabulator-sortable[aria-sort='none']
2990
- .tabulator-col-content
2991
- .tabulator-arrow {
2992
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2993
-
2994
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2995
- display: unset;
2996
- opacity: 0;
2997
- background-color: transparent;
2998
- width: 7px;
2999
- height: 7px;
3000
- -webkit-transition: all 0.3s ease;
3001
- transition: all 0.3s ease; }
3050
+ .condition-list {
3051
+ padding: 0;
3052
+ margin: 0 auto; }
3002
3053
 
3003
- .react-autoql-table.tabulator .tabulator-tableHolder {
3004
- min-height: calc(100% - 40px) !important;
3005
- height: calc(100% - 40px) !important;
3006
- max-height: calc(100% - 40px) !important; }
3054
+ .condition-list-item {
3055
+ cursor: pointer;
3056
+ padding: 4px;
3057
+ margin: 0 10px 0 10px;
3058
+ display: flex;
3059
+ justify-content: space-between;
3060
+ border-radius: 2px;
3061
+ padding-left: 10px; }
3062
+ .condition-list-item:hover {
3063
+ background: var(--react-autoql-accent-color);
3064
+ color: white; }
3007
3065
 
3008
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
3009
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
3010
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
3011
- background-color: transparent; }
3066
+ .empty-condition-list {
3067
+ text-align: center;
3068
+ padding: 4px;
3069
+ margin: 0 20px 0 20px; }
3012
3070
 
3013
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
3014
- background-color: rgba(0, 0, 0, 0.2);
3015
- border-radius: 7px;
3016
- border: 0px; }
3071
+ .autoql-close-button {
3072
+ background-color: inherit;
3073
+ border: none;
3074
+ text-align: left;
3075
+ font-size: 20px;
3076
+ margin-top: -20px;
3077
+ float: none !important;
3078
+ color: inherit; }
3017
3079
 
3018
- .react-autoql-table .tabulator-header-filter input {
3019
- border: 1px solid var(--react-autoql-border-color);
3080
+ .react-tiny-popover-container {
3081
+ background: var(--react-autoql-background-color-primary); }
3082
+
3083
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
3084
+ flex-grow: 1;
3085
+ display: inline;
3086
+ width: 90%;
3087
+ height: 100%; }
3088
+
3089
+ .autoql-condition-locking-menu-container
3090
+ .react-autosuggest__suggestions-container--open {
3091
+ position: absolute;
3092
+ overflow-y: scroll !important;
3093
+ padding-top: 5px;
3094
+ padding-bottom: 5px;
3095
+ display: block;
3096
+ font-family: inherit;
3097
+ font-size: 15px;
3098
+ font-weight: normal;
3099
+ z-index: 2;
3100
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3101
+ text-align: left;
3102
+ width: 95%;
3103
+ top: 35px;
3020
3104
  border-radius: 4px;
3021
- background: transparent;
3022
- padding: 4px 9px !important;
3023
- outline: none !important; }
3105
+ margin: 10px auto;
3106
+ height: auto;
3107
+ max-height: 50vh;
3108
+ overflow-y: auto; }
3024
3109
 
3025
- .react-autoql-table .tabulator-header-filter input:focus {
3026
- border: 1px solid #28a8e0; }
3110
+ .autoql-condition-locking-menu-container
3111
+ .react-autosuggest__suggestions-container--open {
3112
+ background-color: var(--react-autoql-background-color-primary);
3113
+ border: 1px solid var(--react-autoql-border-color);
3114
+ color: var(--react-autoql-text-color-primary); }
3027
3115
 
3028
- /* These are necessary because we are always rendering the
3029
- filter (just display: none when not used) instead of re-rendering
3030
- the whole table when the filter button is clicked */
3031
- .react-autoql-table-container:not(.filtering)
3032
- .react-autoql-table
3033
- .tabulator-header-filter {
3034
- display: none; }
3116
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3117
+ color: var(--react-autoql-text-color-primary); }
3035
3118
 
3036
- .react-autoql-table-container:not(.filtering)
3037
- .react-autoql-table
3038
- .tabulator-col {
3039
- height: auto !important; }
3119
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
3120
+ opacity: 0.5; }
3040
3121
 
3041
- .tabulator-table .tabulator-row .tabulator-cell {
3042
- min-height: 38px; }
3122
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3123
+ opacity: 0.5; }
3043
3124
 
3044
- /* Center header titles */
3045
- .react-autoql-table .tabulator-header .tabulator-col {
3046
- text-align: center !important; }
3125
+ .autoql-condition-locking-menu-container input::placeholder {
3126
+ opacity: 0.5; }
3047
3127
 
3048
- .react-autoql-table .tabulator-header .tabulator-col-title {
3049
- padding-left: 10px !important;
3050
- padding-right: 10px !important; }
3128
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3129
+ margin: 0;
3130
+ padding: 0;
3131
+ list-style-type: none; }
3051
3132
 
3052
- .filter-tag {
3053
- color: #2ecc40;
3054
- border: 1px solid;
3055
- padding: 2px 4px;
3056
- border-radius: 4px;
3057
- font-weight: 400;
3058
- font-size: 10px;
3059
- margin-right: 5px;
3060
- vertical-align: top;
3061
- line-height: 21px; }
3133
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3134
+ cursor: pointer;
3135
+ padding: 2px;
3136
+ padding-left: 18px;
3137
+ letter-spacing: 0.05em;
3138
+ line-height: 22.5px; }
3062
3139
 
3063
- .comparison-value-positive {
3064
- color: #2ecc40; }
3140
+ .autoql-condition-locking-menu-container
3141
+ .react-autosuggest__suggestion--highlighted {
3142
+ background-color: rgba(0, 0, 0, 0.1) !important; }
3065
3143
 
3066
- .comparison-value-negative {
3067
- color: #e80000; }
3144
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3145
+ padding: 10px 0 0 10px;
3146
+ font-size: 12px;
3147
+ color: #777; }
3068
3148
 
3069
3149
  .autoql-options-toolbar {
3070
3150
  position: absolute;
@@ -3101,86 +3181,6 @@ the whole table when the filter button is clicked */
3101
3181
  .copy-sql-modal-content:hover .copy-sql-btn {
3102
3182
  opacity: 1; }
3103
3183
 
3104
- .ReactModal__Overlay {
3105
- background-color: transparent !important;
3106
- transition: background-color 0.2s ease-in-out;
3107
- z-index: 9999; }
3108
-
3109
- .ReactModal__Overlay--after-open {
3110
- background-color: rgba(0, 0, 0, 0.25) !important; }
3111
-
3112
- .ReactModal__Overlay--before-close {
3113
- background-color: transparent !important; }
3114
-
3115
- .ReactModal__Content {
3116
- display: flex;
3117
- flex-direction: column;
3118
- transform: scale(0);
3119
- transition: all 0.2s ease-in-out;
3120
- color: var(--react-autoql-text-color-primary);
3121
- border: 1px solid var(--react-autoql-border-color) !important;
3122
- background: var(--react-autoql-background-color-primary) !important;
3123
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
3124
- padding: 0 !important;
3125
- margin: auto auto;
3126
- max-width: 90vw;
3127
- max-height: calc(100vh - 90px); }
3128
- .ReactModal__Content input.react-autoql-input,
3129
- .ReactModal__Content textarea.react-autoql-input,
3130
- .ReactModal__Content textarea {
3131
- border-color: var(--react-autoql-border-color);
3132
- color: var(--react-autoql-text-color-primary);
3133
- background: var(--react-autoql-background-color-primary, white); }
3134
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
3135
- color: var(--react-autoql-text-color-placeholder); }
3136
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
3137
- color: var(--react-autoql-text-color-placeholder); }
3138
- .ReactModal__Content input.react-autoql-input::placeholder,
3139
- .ReactModal__Content textarea.react-autoql-input::placeholder,
3140
- .ReactModal__Content textarea::placeholder {
3141
- color: var(--react-autoql-text-color-placeholder); }
3142
-
3143
- .ReactModal__Overlay--after-open .ReactModal__Content {
3144
- transform: scale(1); }
3145
-
3146
- .ReactModal__Overlay--before-close .ReactModal__Content {
3147
- transform: scale(0); }
3148
-
3149
- .react-autoql-modal-header {
3150
- position: relative;
3151
- text-align: center;
3152
- flex: 0 0 52px;
3153
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
3154
- padding: 14px 60px;
3155
- font-size: 16px; }
3156
-
3157
- .react-autoql-modal-footer {
3158
- position: relative;
3159
- flex: 0 0 52px;
3160
- border-top: 1px solid rgba(0, 0, 0, 0.05);
3161
- text-align: right;
3162
- padding: 8px 10px; }
3163
-
3164
- .react-autoql-modal-body {
3165
- display: flex;
3166
- flex-direction: column;
3167
- padding: 25px;
3168
- flex: 1;
3169
- overflow: hidden; }
3170
- .react-autoql-modal-body h3 {
3171
- color: var(--react-autoql-text-color-primary); }
3172
-
3173
- .react-autoql-modal-close-btn {
3174
- position: absolute !important;
3175
- top: 10px;
3176
- right: 18px;
3177
- font-size: 22px;
3178
- opacity: 0.6 !important;
3179
- cursor: pointer; }
3180
-
3181
- .react-autoql-modal-close-btn:hover {
3182
- opacity: 1 !important; }
3183
-
3184
3184
  .react-autoql-chart-container {
3185
3185
  position: relative;
3186
3186
  height: 100%;
@@ -3280,37 +3280,57 @@ the whole table when the filter button is clicked */
3280
3280
  background: var(--react-autoql-background-color-primary);
3281
3281
  padding: 5px; }
3282
3282
 
3283
- .viz-toolbar {
3284
- position: absolute;
3285
- background: inherit;
3286
- padding: 5px;
3287
- border-radius: 6px;
3288
- line-height: 28px;
3289
- border: 1px solid #d3d3d352; }
3290
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3291
- display: block; }
3292
-
3293
- .react-autoql-toolbar-btn {
3294
- height: 28px;
3295
- width: 28px;
3296
- background: none;
3297
- border: none;
3298
- font-size: 16px;
3299
- line-height: 28px;
3300
- vertical-align: top;
3301
- color: var(--react-autoql-accent-color);
3302
- cursor: pointer;
3303
- outline: none !important; }
3304
-
3305
- .react-autoql-toolbar-btn.green {
3306
- color: #2ecc40; }
3307
-
3308
- .react-autoql-toolbar-btn.red {
3309
- color: #e80000; }
3310
-
3311
- .react-autoql-toolbar-btn:hover {
3312
- opacity: 0.7; }
3313
3283
 
3284
+ .react-autoql-input-container {
3285
+ position: relative;
3286
+ margin: 2px 5px;
3287
+ display: inline-block; }
3288
+ .react-autoql-input-container .react-autoql-input {
3289
+ border: 1px solid rgba(0, 0, 0, 0.1);
3290
+ border-radius: 4px;
3291
+ line-height: 32px;
3292
+ min-height: 34px;
3293
+ padding: 0 10px;
3294
+ width: 100%;
3295
+ outline: none !important;
3296
+ transition: all 0.2s ease;
3297
+ transition-property: border-color, color, opacity; }
3298
+ .react-autoql-input-container .react-autoql-input.with-icon {
3299
+ padding-left: 38px; }
3300
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3301
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3302
+ color: rgba(0, 0, 0, 0.2);
3303
+ opacity: 1;
3304
+ /* Firefox */
3305
+ font-style: italic; }
3306
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3307
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3308
+ color: rgba(0, 0, 0, 0.2);
3309
+ opacity: 1;
3310
+ /* Firefox */
3311
+ font-style: italic; }
3312
+ .react-autoql-input-container .react-autoql-input::placeholder {
3313
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3314
+ color: rgba(0, 0, 0, 0.2);
3315
+ opacity: 1;
3316
+ /* Firefox */
3317
+ font-style: italic; }
3318
+ .react-autoql-input-container .react-autoql-input-icon {
3319
+ position: absolute;
3320
+ left: 12px;
3321
+ top: 8px;
3322
+ opacity: 0.4;
3323
+ transition: all 0.2s ease; }
3324
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3325
+ height: 17px;
3326
+ width: 17px; }
3327
+ .react-autoql-input-container:hover .react-autoql-input,
3328
+ .react-autoql-input-container .react-autoql-input:focus {
3329
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3330
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3331
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3332
+ opacity: 1;
3333
+ color: var(--react-autoql-accent-color, #26a7df); }
3314
3334
 
3315
3335
  .react-autoql-radio-btn-container {
3316
3336
  display: inline-block;
@@ -3383,6 +3403,75 @@ the whole table when the filter button is clicked */
3383
3403
  border-top-right-radius: 4px;
3384
3404
  border-bottom-right-radius: 4px; }
3385
3405
 
3406
+ .react-autoql-steps-container {
3407
+ margin: 10px; }
3408
+
3409
+ .react-autoql-step-container {
3410
+ position: relative;
3411
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3412
+ margin-left: 12px;
3413
+ padding-left: 20px;
3414
+ padding-bottom: 5px;
3415
+ transition: all 0.5s ease; }
3416
+ .react-autoql-step-container.complete {
3417
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3418
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3419
+ border-color: var(--react-autoql-accent-color, #26a7df);
3420
+ background: var(--react-autoql-accent-color, #26a7df);
3421
+ color: #fff; }
3422
+ .react-autoql-step-container.error {
3423
+ border-color: var(--react-autoql-warning-color); }
3424
+ .react-autoql-step-container.error .react-autoql-step-dot {
3425
+ border-color: var(--react-autoql-warning-color);
3426
+ background: var(--react-autoql-warning-color);
3427
+ color: white; }
3428
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3429
+ pointer-events: none;
3430
+ height: 10px;
3431
+ opacity: 0;
3432
+ margin: 0; }
3433
+
3434
+ .react-autoql-step-dot {
3435
+ position: absolute;
3436
+ top: 0;
3437
+ left: -10px;
3438
+ height: 20px;
3439
+ width: 20px;
3440
+ border-radius: 15px;
3441
+ background: var(--react-autoql-background-color-primary, #fff);
3442
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3443
+ transition: all 0.5s ease;
3444
+ font-size: 10.5px;
3445
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3446
+ text-align: center; }
3447
+
3448
+ .react-autoql-step-title-container:hover {
3449
+ cursor: pointer;
3450
+ transition: color 0.2s ease;
3451
+ color: var(--react-autoql-accent-color, #26a7df); }
3452
+
3453
+ .react-autoql-step-title {
3454
+ font-weight: 500;
3455
+ font-size: 15px;
3456
+ line-height: 15px;
3457
+ padding-top: 2px; }
3458
+
3459
+ .react-autoql-step-subtitle {
3460
+ font-size: 13px;
3461
+ padding-top: 6px;
3462
+ padding-bottom: 6px;
3463
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3464
+
3465
+ .react-autoql-step-content {
3466
+ margin: 15px;
3467
+ margin-top: 0; }
3468
+
3469
+ .react-autoql-step-content-container {
3470
+ transition-timing-function: ease;
3471
+ transition-property: height, opacity, margin;
3472
+ transition-duration: 0.5s;
3473
+ opacity: 1; }
3474
+
3386
3475
  .content {
3387
3476
  margin: 2rem; }
3388
3477
 
@@ -3515,125 +3604,36 @@ the whole table when the filter button is clicked */
3515
3604
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3516
3605
  background: var(--react-autoql-accent-color); }
3517
3606
 
3518
- .react-autoql-input-container {
3519
- position: relative;
3520
- margin: 2px 5px;
3521
- display: inline-block; }
3522
- .react-autoql-input-container .react-autoql-input {
3523
- border: 1px solid rgba(0, 0, 0, 0.1);
3524
- border-radius: 4px;
3525
- line-height: 32px;
3526
- min-height: 34px;
3527
- padding: 0 10px;
3528
- width: 100%;
3529
- outline: none !important;
3530
- transition: all 0.2s ease;
3531
- transition-property: border-color, color, opacity; }
3532
- .react-autoql-input-container .react-autoql-input.with-icon {
3533
- padding-left: 38px; }
3534
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3535
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3536
- color: rgba(0, 0, 0, 0.2);
3537
- opacity: 1;
3538
- /* Firefox */
3539
- font-style: italic; }
3540
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3541
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3542
- color: rgba(0, 0, 0, 0.2);
3543
- opacity: 1;
3544
- /* Firefox */
3545
- font-style: italic; }
3546
- .react-autoql-input-container .react-autoql-input::placeholder {
3547
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3548
- color: rgba(0, 0, 0, 0.2);
3549
- opacity: 1;
3550
- /* Firefox */
3551
- font-style: italic; }
3552
- .react-autoql-input-container .react-autoql-input-icon {
3553
- position: absolute;
3554
- left: 12px;
3555
- top: 8px;
3556
- opacity: 0.4;
3557
- transition: all 0.2s ease; }
3558
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3559
- height: 17px;
3560
- width: 17px; }
3561
- .react-autoql-input-container:hover .react-autoql-input,
3562
- .react-autoql-input-container .react-autoql-input:focus {
3563
- border-color: var(--react-autoql-accent-color, #26a7df); }
3564
- .react-autoql-input-container:hover .react-autoql-input-icon,
3565
- .react-autoql-input-container .react-autoql-input-icon.focus {
3566
- opacity: 1;
3567
- color: var(--react-autoql-accent-color, #26a7df); }
3568
-
3569
- .react-autoql-steps-container {
3570
- margin: 10px; }
3571
-
3572
- .react-autoql-step-container {
3573
- position: relative;
3574
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3575
- margin-left: 12px;
3576
- padding-left: 20px;
3577
- padding-bottom: 5px;
3578
- transition: all 0.5s ease; }
3579
- .react-autoql-step-container.complete {
3580
- border-color: var(--react-autoql-accent-color, #26a7df); }
3581
- .react-autoql-step-container.complete .react-autoql-step-dot {
3582
- border-color: var(--react-autoql-accent-color, #26a7df);
3583
- background: var(--react-autoql-accent-color, #26a7df);
3584
- color: #fff; }
3585
- .react-autoql-step-container.error {
3586
- border-color: var(--react-autoql-warning-color); }
3587
- .react-autoql-step-container.error .react-autoql-step-dot {
3588
- border-color: var(--react-autoql-warning-color);
3589
- background: var(--react-autoql-warning-color);
3590
- color: white; }
3591
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3592
- pointer-events: none;
3593
- height: 10px;
3594
- opacity: 0;
3595
- margin: 0; }
3596
-
3597
- .react-autoql-step-dot {
3607
+ .viz-toolbar {
3598
3608
  position: absolute;
3599
- top: 0;
3600
- left: -10px;
3601
- height: 20px;
3602
- width: 20px;
3603
- border-radius: 15px;
3604
- background: var(--react-autoql-background-color-primary, #fff);
3605
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3606
- transition: all 0.5s ease;
3607
- font-size: 10.5px;
3608
- color: var(--react-autoql-text-color-placeholder, lightgray);
3609
- text-align: center; }
3609
+ background: inherit;
3610
+ padding: 5px;
3611
+ border-radius: 6px;
3612
+ line-height: 28px;
3613
+ border: 1px solid #d3d3d352; }
3614
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3615
+ display: block; }
3610
3616
 
3611
- .react-autoql-step-title-container:hover {
3617
+ .react-autoql-toolbar-btn {
3618
+ height: 28px;
3619
+ width: 28px;
3620
+ background: none;
3621
+ border: none;
3622
+ font-size: 16px;
3623
+ line-height: 28px;
3624
+ vertical-align: top;
3625
+ color: var(--react-autoql-accent-color);
3612
3626
  cursor: pointer;
3613
- transition: color 0.2s ease;
3614
- color: var(--react-autoql-accent-color, #26a7df); }
3615
-
3616
- .react-autoql-step-title {
3617
- font-weight: 500;
3618
- font-size: 15px;
3619
- line-height: 15px;
3620
- padding-top: 2px; }
3627
+ outline: none !important; }
3621
3628
 
3622
- .react-autoql-step-subtitle {
3623
- font-size: 13px;
3624
- padding-top: 6px;
3625
- padding-bottom: 6px;
3626
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3629
+ .react-autoql-toolbar-btn.green {
3630
+ color: #2ecc40; }
3627
3631
 
3628
- .react-autoql-step-content {
3629
- margin: 15px;
3630
- margin-top: 0; }
3632
+ .react-autoql-toolbar-btn.red {
3633
+ color: #e80000; }
3631
3634
 
3632
- .react-autoql-step-content-container {
3633
- transition-timing-function: ease;
3634
- transition-property: height, opacity, margin;
3635
- transition-duration: 0.5s;
3636
- opacity: 1; }
3635
+ .react-autoql-toolbar-btn:hover {
3636
+ opacity: 0.7; }
3637
3637
 
3638
3638
  .notification-read-only-group {
3639
3639
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
@@ -3875,7 +3875,6 @@ the whole table when the filter button is clicked */
3875
3875
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3876
3876
 
3877
3877
 
3878
-
3879
3878
  .slack-modal-error-container,
3880
3879
  .slack-modal-empty-list-message {
3881
3880
  display: flex;
@@ -4021,6 +4020,7 @@ the whole table when the filter button is clicked */
4021
4020
  .slack-channel-list-container .connect-channel-btn button {
4022
4021
  width: 200px; }
4023
4022
 
4023
+
4024
4024
  .react-autoql-list-item {
4025
4025
  padding: 0 20px;
4026
4026
  display: flex;