react-autoql 3.4.1 → 3.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,121 +1,3 @@
1
- .chat-voice-record-button {
2
- width: 40px;
3
- height: 40px;
4
- border-radius: 24px;
5
- margin: 10px;
6
- margin-left: 0;
7
- font-size: 18px;
8
- line-height: 24px;
9
- outline: none !important;
10
- position: relative;
11
- cursor: pointer;
12
- overflow: hidden;
13
- background: var(--react-autoql-accent-color);
14
- color: white;
15
- border: none;
16
- flex-shrink: 0;
17
- flex-grow: 0; }
18
-
19
- .chat-voice-record-button:hover {
20
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
21
-
22
- .chat-voice-record-button.listening {
23
- background: #ff471a; }
24
-
25
- .chat-voice-record-icon {
26
- vertical-align: top; }
27
-
28
- .react-autoql-tooltip {
29
- font-family: inherit;
30
- letter-spacing: 0.04em;
31
- padding: 7px 15px;
32
- opacity: 1 !important;
33
- z-index: 99999 !important; }
34
-
35
- @-webkit-keyframes slide {
36
- 0% {
37
- transform: translateX(-100%); }
38
- 100% {
39
- transform: translateX(100%); } }
40
-
41
- @keyframes slide {
42
- 0% {
43
- transform: translateX(-100%); }
44
- 100% {
45
- transform: translateX(100%); } }
46
-
47
- @-webkit-keyframes move {
48
- 0% {
49
- left: 0;
50
- opacity: 0; }
51
- 5% {
52
- opacity: 0; }
53
- 48% {
54
- opacity: 0.2; }
55
- 80% {
56
- opacity: 0; }
57
- 100% {
58
- left: 82%; } }
59
-
60
- @keyframes move {
61
- 0% {
62
- left: 0;
63
- opacity: 0; }
64
- 5% {
65
- opacity: 0; }
66
- 48% {
67
- opacity: 0.2; }
68
- 80% {
69
- opacity: 0; }
70
- 100% {
71
- left: 82%; } }
72
-
73
- .react-autoql-icon {
74
- position: relative;
75
- opacity: 1; }
76
- .react-autoql-icon.warning {
77
- color: var(--react-autoql-warning-color) !important; }
78
- .react-autoql-icon.danger {
79
- color: var(--react-autoql-danger-color) !important; }
80
-
81
- span.react-autoql-icon {
82
- vertical-align: unset;
83
- text-align: left;
84
- margin: 0;
85
- padding: 0;
86
- float: none !important;
87
- color: inherit; }
88
- span.react-autoql-icon svg {
89
- float: none !important;
90
- color: inherit;
91
- vertical-align: unset;
92
- text-align: left;
93
- margin: 0;
94
- padding: 0;
95
- opacity: 1;
96
- height: 1em;
97
- margin-bottom: -0.1em; }
98
-
99
- .slack-logo {
100
- display: inline-block;
101
- height: 100%;
102
- margin-bottom: 3px; }
103
- .slack-logo img {
104
- vertical-align: middle;
105
- height: 1em;
106
- width: 1em; }
107
-
108
- .react-autoql-badge {
109
- position: absolute;
110
- background: var(--react-autoql-warning-color);
111
- border: 1px solid var(--react-autoql-background-color-primary);
112
- width: 0.5em;
113
- height: 0.5em;
114
- top: -0.1em;
115
- right: -0.25em;
116
- border-radius: 50%;
117
- box-sizing: content-box; }
118
-
119
1
  .react-autoql-response-content-container:not(.html-content) {
120
2
  position: relative;
121
3
  display: flex;
@@ -377,229 +259,113 @@ span.react-autoql-icon {
377
259
  .context-menu-list li:hover {
378
260
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
379
261
 
380
- .react-autoql-bar-container {
262
+ .chat-voice-record-button {
263
+ width: 40px;
264
+ height: 40px;
265
+ border-radius: 24px;
266
+ margin: 10px;
267
+ margin-left: 0;
268
+ font-size: 18px;
269
+ line-height: 24px;
270
+ outline: none !important;
381
271
  position: relative;
382
- display: flex;
383
- flex-direction: row; }
272
+ cursor: pointer;
273
+ overflow: hidden;
274
+ background: var(--react-autoql-accent-color);
275
+ color: white;
276
+ border: none;
277
+ flex-shrink: 0;
278
+ flex-grow: 0; }
384
279
 
385
- .react-autoql-chatbar-input {
386
- padding: 10px;
387
- padding-left: 20px;
388
- margin: 10px;
389
- height: 42px;
390
- box-sizing: border-box;
391
- border-radius: 24px;
392
- font-size: 16px;
280
+ .chat-voice-record-button:hover {
281
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
282
+
283
+ .chat-voice-record-button.listening {
284
+ background: #ff471a; }
285
+
286
+ .chat-voice-record-icon {
287
+ vertical-align: top; }
288
+
289
+ .react-autoql-tooltip {
393
290
  font-family: inherit;
394
291
  letter-spacing: 0.04em;
395
- outline: none !important;
396
- width: calc(100% - 20px);
397
- font-family: inherit;
398
- /* Default styles outside of data messenger */
399
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
400
- background: var(--react-autoql-background-color-primary);
401
- color: #5d5d5d; }
292
+ padding: 7px 15px;
293
+ opacity: 1 !important;
294
+ z-index: 99999 !important; }
402
295
 
403
- .react-autoql-chatbar-input.left-padding {
404
- padding-left: 54px; }
296
+ @-webkit-keyframes slide {
297
+ 0% {
298
+ transform: translateX(-100%); }
299
+ 100% {
300
+ transform: translateX(100%); } }
405
301
 
406
- .react-autoql-chatbar-input:disabled {
407
- background: rgba(0, 0, 0, 0.03); }
302
+ @keyframes slide {
303
+ 0% {
304
+ transform: translateX(-100%); }
305
+ 100% {
306
+ transform: translateX(100%); } }
408
307
 
409
- .react-autoql-chatbar-input:not(:disabled):hover {
410
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
308
+ @-webkit-keyframes move {
309
+ 0% {
310
+ left: 0;
311
+ opacity: 0; }
312
+ 5% {
313
+ opacity: 0; }
314
+ 48% {
315
+ opacity: 0.2; }
316
+ 80% {
317
+ opacity: 0; }
318
+ 100% {
319
+ left: 82%; } }
411
320
 
412
- .react-autoql-chatbar-input::-moz-placeholder {
413
- /* Default color outside of data messenger */
414
- color: #999 !important; }
321
+ @keyframes move {
322
+ 0% {
323
+ left: 0;
324
+ opacity: 0; }
325
+ 5% {
326
+ opacity: 0; }
327
+ 48% {
328
+ opacity: 0.2; }
329
+ 80% {
330
+ opacity: 0; }
331
+ 100% {
332
+ left: 82%; } }
415
333
 
416
- .react-autoql-chatbar-input:-ms-input-placeholder {
417
- /* Default color outside of data messenger */
418
- color: #999 !important; }
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); }
419
349
 
420
- .react-autoql-chatbar-input::placeholder {
421
- /* Default color outside of data messenger */
422
- color: #999 !important; }
350
+ .autoql-condition-locking-menu-container
351
+ .react-autosuggest__suggestions-container--open {
352
+ transform: translateX(8%);
353
+ width: 90% !important; }
423
354
 
424
- /* autosuggest */
425
- .react-autoql-bar-container .react-autosuggest__container,
426
- .react-autoql-chatbar-input-container {
427
- position: relative;
428
- flex: 1; }
355
+ #condition-lock-snackbar-success.show {
356
+ visibility: visible;
357
+ -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
358
+ animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
429
359
 
430
- .react-autoql-bar-container .react-autosuggest__input--focused {
431
- outline: none; }
360
+ .react-autoql-drawer {
361
+ font-family: var(--react-autoql-font-family), sans-serif;
362
+ line-height: 22px; }
432
363
 
433
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
434
- display: none; }
435
-
436
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
437
- display: none; }
438
-
439
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
440
- position: absolute;
441
- top: 45px;
442
- bottom: unset;
443
- margin: 10px;
444
- padding-top: 5px;
445
- padding-bottom: 5px;
446
- display: block;
447
- width: calc(100% - 20px);
448
- height: unset;
449
- border-radius: 24px;
450
- font-family: inherit;
451
- font-size: 15px;
452
- font-weight: normal;
453
- z-index: 2;
454
- overflow: hidden;
455
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
456
- /* Default styles outside of data messenger */
457
- background-color: white;
458
- color: #5d5d5d; }
459
-
460
- .react-autoql-bar-container.autosuggest-top
461
- .react-autosuggest__suggestions-container--open {
462
- top: unset;
463
- bottom: 45px; }
464
-
465
- .react-autoql-bar-container.autosuggest-bottom
466
- .react-autosuggest__suggestions-container--open {
467
- top: 45px;
468
- bottom: unset; }
469
-
470
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
471
- margin: 0;
472
- padding: 0;
473
- list-style-type: none; }
474
-
475
- /* Autocomplete styles */
476
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
477
- background-color: var(--react-autoql-background-color-primary);
478
- border: 1px solid var(--react-autoql-border-color);
479
- color: var(--react-autoql-text-color-primary); }
480
-
481
- .react-autoql-bar-container .react-autosuggest__suggestion {
482
- color: var(--react-autoql-text-color-primary); }
483
-
484
- .react-autoql-chatbar-input {
485
- border: 1px solid var(--react-autoql-border-color);
486
- color: var(--react-autoql-text-color-primary); }
487
-
488
- .react-autoql-chatbar-input::-moz-placeholder {
489
- color: var(--react-autoql-text-color-placeholder); }
490
-
491
- .react-autoql-chatbar-input:-ms-input-placeholder {
492
- color: var(--react-autoql-text-color-placeholder); }
493
-
494
- .react-autoql-chatbar-input::placeholder {
495
- color: var(--react-autoql-text-color-placeholder); }
496
-
497
- .react-autoql-bar-container .react-autosuggest__suggestion {
498
- cursor: pointer;
499
- padding: 2px;
500
- padding-left: 18px;
501
- letter-spacing: 0.05em;
502
- line-height: 22.5px; }
503
-
504
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
505
- background-color: rgba(0, 0, 0, 0.1) !important; }
506
-
507
- .react-autoql-bar-container .react-autosuggest__section-title {
508
- padding: 10px 0 0 10px;
509
- font-size: 12px;
510
- color: #777; }
511
-
512
- .input-response-loading-container {
513
- position: absolute;
514
- right: 23px;
515
- top: -2px; }
516
-
517
- .chat-bar-input-icon {
518
- position: absolute;
519
- color: #28a8e0;
520
- font-size: 20px;
521
- left: 30px;
522
- top: 15px; }
523
-
524
- .loading-container-centered {
525
- height: 100%;
526
- width: 100%;
527
- display: flex;
528
- flex-direction: column;
529
- justify-content: center;
530
- align-items: center; }
531
-
532
- .response-loading {
533
- display: inline-block;
534
- position: relative;
535
- width: 64px;
536
- height: 64px; }
537
-
538
- .response-loading div {
539
- position: absolute;
540
- top: 27px;
541
- width: 11px;
542
- height: 11px;
543
- border-radius: 50%;
544
- background: #e2e2e2;
545
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
546
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
547
-
548
- .response-loading div:nth-child(1) {
549
- left: 6px;
550
- -webkit-animation: response-loading1 0.6s infinite;
551
- animation: response-loading1 0.6s infinite; }
552
-
553
- .response-loading div:nth-child(2) {
554
- left: 6px;
555
- -webkit-animation: response-loading2 0.6s infinite;
556
- animation: response-loading2 0.6s infinite; }
557
-
558
- .response-loading div:nth-child(3) {
559
- left: 26px;
560
- -webkit-animation: response-loading2 0.6s infinite;
561
- animation: response-loading2 0.6s infinite; }
562
-
563
- .response-loading div:nth-child(4) {
564
- left: 45px;
565
- -webkit-animation: response-loading3 0.6s infinite;
566
- animation: response-loading3 0.6s infinite; }
567
-
568
- #condition-lock-snackbar-success {
569
- visibility: hidden;
570
- min-width: 200px;
571
- line-height: 1 !important;
572
- font-size: 14px !important;
573
- background-color: var(--react-autoql-background-color-secondary);
574
- color: var(--react-autoql-success-color);
575
- text-align: center;
576
- border-radius: 4px;
577
- padding: 6px;
578
- position: fixed;
579
- display: block;
580
- z-index: 999999999;
581
- transform: translateX(-10%);
582
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
583
-
584
- .autoql-condition-locking-menu-container
585
- .react-autosuggest__suggestions-container--open {
586
- transform: translateX(8%);
587
- width: 90% !important; }
588
-
589
- #condition-lock-snackbar-success.show {
590
- visibility: visible;
591
- -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
592
- animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
593
-
594
- .react-autoql-drawer {
595
- font-family: var(--react-autoql-font-family), sans-serif;
596
- line-height: 22px; }
597
-
598
- .react-autoql-drawer.disable-selection {
599
- -webkit-user-select: none;
600
- -moz-user-select: none;
601
- -ms-user-select: none;
602
- user-select: none; }
364
+ .react-autoql-drawer.disable-selection {
365
+ -webkit-user-select: none;
366
+ -moz-user-select: none;
367
+ -ms-user-select: none;
368
+ user-select: none; }
603
369
 
604
370
  .react-autoql-drawer .react-autoql-drawer-content-container {
605
371
  width: 100%;
@@ -1158,220 +924,318 @@ span.react-autoql-icon {
1158
924
  top: 30px;
1159
925
  opacity: 0; } }
1160
926
 
1161
- .react-autoql-dashboard-container {
1162
- background: var(--react-autoql-background-color-secondary);
927
+ .loading-container-centered {
1163
928
  height: 100%;
1164
929
  width: 100%;
1165
- overflow: hidden; }
1166
-
1167
- .react-autoql-dashboard-container.edit-mode {
1168
- padding-bottom: 200px; }
1169
-
1170
- .dashboard-drilldown-modal .ReactModal__Content {
1171
- top: unset !important;
1172
- margin-top: 20px !important;
1173
- max-height: 93vh !important; }
1174
-
1175
- .dashboard-drilldown-modal .react-autoql-modal-body {
1176
- padding: 0; }
1177
-
1178
- .dashboard-drilldown-modal .react-autoql-table {
1179
- opacity: 0.9;
1180
- font-size: 11px; }
930
+ display: flex;
931
+ flex-direction: column;
932
+ justify-content: center;
933
+ align-items: center; }
1181
934
 
1182
- .dashboard-drilldown-modal .splitter-layout {
1183
- height: calc(100% - 55px); }
935
+ .response-loading {
936
+ display: inline-block;
937
+ position: relative;
938
+ width: 64px;
939
+ height: 64px; }
1184
940
 
1185
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1186
- padding: 20px;
1187
- padding-bottom: 10px; }
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); }
1188
950
 
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; }
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; }
1201
955
 
1202
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1203
- padding: 20px;
1204
- padding-top: 10px;
1205
- overflow: hidden;
1206
- height: 100%; }
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; }
1207
960
 
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%; }
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; }
1216
965
 
1217
- .empty-dashboard-new-tile-btn {
1218
- color: var(--react-autoql-accent-color);
1219
- font-weight: bold;
1220
- cursor: pointer; }
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; }
1221
970
 
1222
- .notification-rule-outer-container {
971
+ .react-autoql-icon {
1223
972
  position: relative;
1224
- border: 1px solid transparent;
1225
- border-radius: 4px;
1226
- padding-bottom: 5px; }
1227
-
1228
- .expression-error-message {
1229
- padding-left: 5px; }
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; }
1230
978
 
1231
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1232
- border: none; }
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; }
1233
996
 
1234
- .notification-list-loading-container {
1235
- text-align: center;
1236
- padding-top: 100px;
1237
- color: var(--react-autoql-text-color-primary);
997
+ .slack-logo {
998
+ display: inline-block;
1238
999
  height: 100%;
1239
- overflow: hidden;
1240
- background: var(--react-autoql-background-color-secondary); }
1000
+ margin-bottom: 3px; }
1001
+ .slack-logo img {
1002
+ vertical-align: middle;
1003
+ height: 1em;
1004
+ width: 1em; }
1241
1005
 
1242
- .empty-notifications-message {
1243
- color: var(--react-autoql-text-color-primary);
1244
- text-align: center;
1245
- margin-top: 75px; }
1246
- .empty-notifications-message div {
1247
- opacity: 0.6; }
1248
- .empty-notifications-message .empty-notifications-title {
1249
- font-size: 16px;
1250
- font-weight: bold;
1251
- margin-bottom: 5px; }
1252
- .empty-notifications-message .empty-notifications-img {
1253
- width: 250px;
1254
- height: 250px; }
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; }
1255
1016
 
1256
- .react-autoql-notification-list-container {
1257
- height: 100%;
1258
- padding: 20px;
1259
- overflow-y: auto;
1260
- background: var(--react-autoql-background-color-secondary); }
1017
+ .react-autoql-bar-container {
1018
+ position: relative;
1019
+ display: flex;
1020
+ flex-direction: row; }
1261
1021
 
1262
- .react-autoql-notification-dismiss-all {
1263
- text-align: right;
1264
- margin-bottom: 12px;
1265
- padding-right: 10px;
1266
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1267
- transition: color 0.1s ease; }
1268
- .react-autoql-notification-dismiss-all span {
1269
- opacity: 0.8;
1270
- cursor: pointer; }
1271
- .react-autoql-notification-dismiss-all span:hover {
1272
- opacity: 1; }
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; }
1273
1039
 
1274
- .react-autoql-notification-display-name-input {
1275
- width: 100%; }
1040
+ .react-autoql-chatbar-input.left-padding {
1041
+ padding-left: 54px; }
1276
1042
 
1277
- .react-autoql-notification-message-input {
1278
- width: 100%; }
1043
+ .react-autoql-chatbar-input:disabled {
1044
+ background: rgba(0, 0, 0, 0.03); }
1279
1045
 
1280
- .react-autoql-notification-list-item:nth-of-type(0) {
1281
- -webkit-animation-delay: 0s;
1282
- animation-delay: 0s; }
1046
+ .react-autoql-chatbar-input:not(:disabled):hover {
1047
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
1283
1048
 
1284
- .react-autoql-notification-list-item:nth-of-type(1) {
1285
- -webkit-animation-delay: 0.1s;
1286
- animation-delay: 0.1s; }
1049
+ .react-autoql-chatbar-input::-moz-placeholder {
1050
+ /* Default color outside of data messenger */
1051
+ color: #999 !important; }
1287
1052
 
1288
- .react-autoql-notification-list-item:nth-of-type(2) {
1289
- -webkit-animation-delay: 0.2s;
1290
- animation-delay: 0.2s; }
1053
+ .react-autoql-chatbar-input:-ms-input-placeholder {
1054
+ /* Default color outside of data messenger */
1055
+ color: #999 !important; }
1291
1056
 
1292
- .react-autoql-notification-list-item:nth-of-type(3) {
1293
- -webkit-animation-delay: 0.3s;
1294
- animation-delay: 0.3s; }
1057
+ .react-autoql-chatbar-input::placeholder {
1058
+ /* Default color outside of data messenger */
1059
+ color: #999 !important; }
1295
1060
 
1296
- .react-autoql-notification-list-item:nth-of-type(4) {
1297
- -webkit-animation-delay: 0.4s;
1298
- animation-delay: 0.4s; }
1061
+ /* autosuggest */
1062
+ .react-autoql-bar-container .react-autosuggest__container,
1063
+ .react-autoql-chatbar-input-container {
1064
+ position: relative;
1065
+ flex: 1; }
1299
1066
 
1300
- .react-autoql-notification-list-item:nth-of-type(5) {
1301
- -webkit-animation-delay: 0.5s;
1302
- animation-delay: 0.5s; }
1067
+ .react-autoql-bar-container .react-autosuggest__input--focused {
1068
+ outline: none; }
1303
1069
 
1304
- .react-autoql-notification-list-item:nth-of-type(6) {
1305
- -webkit-animation-delay: 0.6s;
1306
- animation-delay: 0.6s; }
1070
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
1071
+ display: none; }
1307
1072
 
1308
- .react-autoql-notification-list-item:nth-of-type(7) {
1309
- -webkit-animation-delay: 0.7s;
1310
- animation-delay: 0.7s; }
1073
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
1074
+ display: none; }
1311
1075
 
1312
- .react-autoql-notification-list-item:nth-of-type(8) {
1313
- -webkit-animation-delay: 0.8s;
1314
- animation-delay: 0.8s; }
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; }
1315
1096
 
1316
- .react-autoql-notification-list-item:nth-of-type(9) {
1317
- -webkit-animation-delay: 0.9s;
1318
- animation-delay: 0.9s; }
1097
+ .react-autoql-bar-container.autosuggest-top
1098
+ .react-autosuggest__suggestions-container--open {
1099
+ top: unset;
1100
+ bottom: 45px; }
1319
1101
 
1320
- .react-autoql-notification-list-item:nth-of-type(10) {
1321
- -webkit-animation-delay: 1s;
1322
- animation-delay: 1s; }
1102
+ .react-autoql-bar-container.autosuggest-bottom
1103
+ .react-autosuggest__suggestions-container--open {
1104
+ top: 45px;
1105
+ bottom: unset; }
1323
1106
 
1324
- @-webkit-keyframes slideIn {
1325
- 0% {
1326
- opacity: 0;
1327
- top: 500px; }
1328
- 100% {
1329
- opacity: 1;
1330
- top: 0; } }
1107
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
1108
+ margin: 0;
1109
+ padding: 0;
1110
+ list-style-type: none; }
1331
1111
 
1332
- .notification-modal-content .react-autoql-step-content p {
1333
- margin-bottom: 0.5em;
1334
- margin-top: 0.5em;
1335
- padding-left: 8px; }
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); }
1336
1117
 
1337
- .notification-modal-content .step-btn-container {
1338
- text-align: right;
1339
- display: flex;
1340
- min-height: 50px; }
1118
+ .react-autoql-bar-container .react-autosuggest__suggestion {
1119
+ color: var(--react-autoql-text-color-primary); }
1341
1120
 
1342
- .expression-valid-checkmark.react-autoql-icon svg {
1343
- color: var(--react-autoql-success-color); }
1121
+ .react-autoql-chatbar-input {
1122
+ border: 1px solid var(--react-autoql-border-color);
1123
+ color: var(--react-autoql-text-color-primary); }
1344
1124
 
1345
- .expression-invalid-message-container {
1346
- max-width: 75%;
1347
- float: left;
1348
- text-align: left !important;
1349
- display: flex;
1350
- flex-direction: row;
1351
- align-items: left;
1352
- justify-content: left; }
1125
+ .react-autoql-chatbar-input::-moz-placeholder {
1126
+ color: var(--react-autoql-text-color-placeholder); }
1353
1127
 
1354
- .expression-invalid-message {
1355
- color: var(--react-autoql-danger-color);
1356
- display: 'inline-block'; }
1128
+ .react-autoql-chatbar-input:-ms-input-placeholder {
1129
+ color: var(--react-autoql-text-color-placeholder); }
1357
1130
 
1358
- .react-autoql-notifications-button-container {
1359
- position: relative;
1360
- display: inline-block;
1361
- font-size: inherit;
1362
- line-height: 1em;
1363
- width: 1em; }
1364
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1365
- font-size: 1em;
1366
- line-height: 0;
1367
- vertical-align: bottom; }
1368
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1369
- position: absolute;
1370
- border: 2px solid #fff;
1371
- background: #f5222d;
1372
- border-radius: 6.3em;
1373
- line-height: 1.3em;
1374
- left: 0.6em;
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; }
1153
+
1154
+ .chat-bar-input-icon {
1155
+ position: absolute;
1156
+ color: #28a8e0;
1157
+ font-size: 20px;
1158
+ left: 30px;
1159
+ top: 15px; }
1160
+
1161
+ .react-autoql-dashboard-container {
1162
+ background: var(--react-autoql-background-color-secondary);
1163
+ height: 100%;
1164
+ width: 100%;
1165
+ overflow: hidden; }
1166
+
1167
+ .react-autoql-dashboard-container.edit-mode {
1168
+ padding-bottom: 200px; }
1169
+
1170
+ .dashboard-drilldown-modal .ReactModal__Content {
1171
+ top: unset !important;
1172
+ margin-top: 20px !important;
1173
+ max-height: 93vh !important; }
1174
+
1175
+ .dashboard-drilldown-modal .react-autoql-modal-body {
1176
+ padding: 0; }
1177
+
1178
+ .dashboard-drilldown-modal .react-autoql-table {
1179
+ opacity: 0.9;
1180
+ font-size: 11px; }
1181
+
1182
+ .dashboard-drilldown-modal .splitter-layout {
1183
+ height: calc(100% - 55px); }
1184
+
1185
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1186
+ padding: 20px;
1187
+ padding-bottom: 10px; }
1188
+
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; }
1201
+
1202
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1203
+ padding: 20px;
1204
+ padding-top: 10px;
1205
+ overflow: hidden;
1206
+ height: 100%; }
1207
+
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%; }
1216
+
1217
+ .empty-dashboard-new-tile-btn {
1218
+ color: var(--react-autoql-accent-color);
1219
+ font-weight: bold;
1220
+ cursor: pointer; }
1221
+
1222
+ .react-autoql-notifications-button-container {
1223
+ position: relative;
1224
+ display: inline-block;
1225
+ font-size: inherit;
1226
+ line-height: 1em;
1227
+ width: 1em; }
1228
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1229
+ font-size: 1em;
1230
+ line-height: 0;
1231
+ vertical-align: bottom; }
1232
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1233
+ position: absolute;
1234
+ border: 2px solid #fff;
1235
+ background: #f5222d;
1236
+ border-radius: 6.3em;
1237
+ line-height: 1.3em;
1238
+ left: 0.6em;
1375
1239
  top: -0.8em;
1376
1240
  padding: 0.15em 0.5em;
1377
1241
  text-align: center;
@@ -1418,126 +1282,6 @@ span.react-autoql-icon {
1418
1282
  .data-alerts-container.read-only .react-autoql-notification-group-container {
1419
1283
  border: none; }
1420
1284
 
1421
- .react-autoql-notification-settings {
1422
- background-color: var(--react-autoql-background-color-secondary);
1423
- color: var(--react-autoql-text-color-primary);
1424
- padding-top: 20px;
1425
- height: 100%; }
1426
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1427
- margin: 20px;
1428
- margin-top: 10px;
1429
- border-radius: 4px;
1430
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1431
- background-color: var(--react-autoql-background-color-primary);
1432
- overflow: hidden; }
1433
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1434
- height: 55px;
1435
- line-height: 55px;
1436
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1437
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1438
- margin-right: 10px;
1439
- cursor: pointer; }
1440
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1441
- padding-right: 20px;
1442
- font-size: 17px;
1443
- opacity: 1;
1444
- cursor: pointer;
1445
- color: var(--react-autoql-accent-color); }
1446
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1447
- background: rgba(0, 0, 0, 0.01); }
1448
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1449
- opacity: 0;
1450
- margin-right: 20px;
1451
- font-size: 16px;
1452
- transition: all 0.2s ease;
1453
- color: var(--react-autoql-text-color-primary);
1454
- cursor: pointer; }
1455
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1456
- color: var(--react-autoql-accent-color);
1457
- opacity: 1 !important; }
1458
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1459
- opacity: 0.5; }
1460
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1461
- display: flex;
1462
- justify-content: space-between;
1463
- height: 56px;
1464
- padding-left: 25px;
1465
- padding-right: 8px;
1466
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1467
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1468
- margin-bottom: 4px;
1469
- margin-right: 8px; }
1470
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1471
- margin-bottom: 4px;
1472
- margin-right: 8px;
1473
- opacity: 0.5;
1474
- pointer-events: none; }
1475
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1476
- display: flex;
1477
- justify-content: space-between;
1478
- align-items: center;
1479
- padding: 5px 20px;
1480
- padding-bottom: 0;
1481
- color: var(--react-autoql-text-color-primary); }
1482
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1483
- display: inline-block;
1484
- height: 35px;
1485
- width: 35px;
1486
- border-radius: 20px;
1487
- background: var(--react-autoql-accent-color, #26a7df);
1488
- color: white;
1489
- line-height: 38px;
1490
- text-align: center;
1491
- font-size: 20px;
1492
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1493
- transition: all 0.2s ease;
1494
- margin-right: 5px;
1495
- cursor: pointer; }
1496
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1497
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1498
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1499
- white-space: nowrap;
1500
- overflow: hidden;
1501
- text-overflow: ellipsis;
1502
- padding-right: 10px; }
1503
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1504
- opacity: 0.5; }
1505
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1506
- vertical-align: middle;
1507
- margin-bottom: 4px;
1508
- height: 18px; }
1509
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1510
- display: flex;
1511
- align-items: center;
1512
- margin-top: -25px; }
1513
-
1514
- .react-autoql-step-container a {
1515
- color: var(--react-autoql-accent-color, #26a7df); }
1516
-
1517
- .frequency-date-select-container {
1518
- margin-top: 10px; }
1519
-
1520
- .notification-frequency-step {
1521
- display: flex; }
1522
- .notification-frequency-step .frequency-category-select {
1523
- position: relative;
1524
- padding-top: 9px; }
1525
- .notification-frequency-step .notification-frequency-select {
1526
- margin-left: 8px; }
1527
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1528
- line-height: 33px; }
1529
- .notification-frequency-step .frequency-repeat-follow-text {
1530
- line-height: 32px;
1531
- vertical-align: top; }
1532
- .notification-frequency-step .frequency-settings-container {
1533
- flex: 0 1 400px; }
1534
-
1535
- .schedule-builder-timezone-section {
1536
- margin: 10px 5px; }
1537
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1538
- display: inline-block;
1539
- width: 300px; }
1540
-
1541
1285
  .react-autoql-notification-list-item {
1542
1286
  display: flex;
1543
1287
  flex-direction: column;
@@ -1755,31 +1499,249 @@ span.react-autoql-icon {
1755
1499
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1756
1500
  margin-bottom: -1px; }
1757
1501
 
1758
- .react-autoql-dashboard .react-grid-item {
1759
- background: var(--react-autoql-background-color-primary, #fff);
1760
- color: var(--react-autoql-text-color-primary, #404040);
1761
- font-family: var(--react-autoql-font-family), sans-serif;
1762
- overflow: hidden;
1763
- border-radius: 4px;
1764
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1765
-
1766
- .react-autoql-dashboard-tile-inner-div {
1767
- height: 100%;
1768
- width: 100%;
1769
- background: inherit;
1770
- position: relative;
1771
- text-align: center;
1772
- display: flex;
1773
- justify-content: flex-start;
1774
- flex-direction: column;
1775
- align-items: center; }
1502
+ .react-autoql-step-container a {
1503
+ color: var(--react-autoql-accent-color, #26a7df); }
1776
1504
 
1777
- .dashboard-data-limit-warning-icon {
1778
- color: var(--react-autoql-warning-color) !important;
1779
- position: absolute !important;
1780
- bottom: 40px;
1781
- right: 16px;
1782
- font-size: 20px; }
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
+ .react-autoql-notification-settings {
1530
+ background-color: var(--react-autoql-background-color-secondary);
1531
+ color: var(--react-autoql-text-color-primary);
1532
+ padding-top: 20px;
1533
+ height: 100%; }
1534
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1535
+ margin: 20px;
1536
+ margin-top: 10px;
1537
+ border-radius: 4px;
1538
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1539
+ background-color: var(--react-autoql-background-color-primary);
1540
+ overflow: hidden; }
1541
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1542
+ height: 55px;
1543
+ line-height: 55px;
1544
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1545
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1546
+ margin-right: 10px;
1547
+ cursor: pointer; }
1548
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1549
+ padding-right: 20px;
1550
+ font-size: 17px;
1551
+ opacity: 1;
1552
+ cursor: pointer;
1553
+ color: var(--react-autoql-accent-color); }
1554
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1555
+ background: rgba(0, 0, 0, 0.01); }
1556
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1557
+ opacity: 0;
1558
+ margin-right: 20px;
1559
+ font-size: 16px;
1560
+ transition: all 0.2s ease;
1561
+ color: var(--react-autoql-text-color-primary);
1562
+ cursor: pointer; }
1563
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1564
+ color: var(--react-autoql-accent-color);
1565
+ opacity: 1 !important; }
1566
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1567
+ opacity: 0.5; }
1568
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1569
+ display: flex;
1570
+ justify-content: space-between;
1571
+ height: 56px;
1572
+ padding-left: 25px;
1573
+ padding-right: 8px;
1574
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1575
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1576
+ margin-bottom: 4px;
1577
+ margin-right: 8px; }
1578
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1579
+ margin-bottom: 4px;
1580
+ margin-right: 8px;
1581
+ opacity: 0.5;
1582
+ pointer-events: none; }
1583
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1584
+ display: flex;
1585
+ justify-content: space-between;
1586
+ align-items: center;
1587
+ padding: 5px 20px;
1588
+ padding-bottom: 0;
1589
+ color: var(--react-autoql-text-color-primary); }
1590
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1591
+ display: inline-block;
1592
+ height: 35px;
1593
+ width: 35px;
1594
+ border-radius: 20px;
1595
+ background: var(--react-autoql-accent-color, #26a7df);
1596
+ color: white;
1597
+ line-height: 38px;
1598
+ text-align: center;
1599
+ font-size: 20px;
1600
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1601
+ transition: all 0.2s ease;
1602
+ margin-right: 5px;
1603
+ cursor: pointer; }
1604
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1605
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1606
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1607
+ white-space: nowrap;
1608
+ overflow: hidden;
1609
+ text-overflow: ellipsis;
1610
+ padding-right: 10px; }
1611
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1612
+ opacity: 0.5; }
1613
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1614
+ vertical-align: middle;
1615
+ margin-bottom: 4px;
1616
+ height: 18px; }
1617
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1618
+ display: flex;
1619
+ align-items: center;
1620
+ margin-top: -25px; }
1621
+
1622
+ .notification-list-loading-container {
1623
+ text-align: center;
1624
+ padding-top: 100px;
1625
+ color: var(--react-autoql-text-color-primary);
1626
+ height: 100%;
1627
+ 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; }
1643
+
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 {
1729
+ height: 100%;
1730
+ width: 100%;
1731
+ background: inherit;
1732
+ position: relative;
1733
+ text-align: center;
1734
+ display: flex;
1735
+ justify-content: flex-start;
1736
+ flex-direction: column;
1737
+ align-items: center; }
1738
+
1739
+ .dashboard-data-limit-warning-icon {
1740
+ color: var(--react-autoql-warning-color) !important;
1741
+ position: absolute !important;
1742
+ bottom: 40px;
1743
+ right: 16px;
1744
+ font-size: 20px; }
1783
1745
 
1784
1746
  .react-autoql-dashboard-tile-drag-handle {
1785
1747
  transition: opacity 0.3s ease;
@@ -2251,272 +2213,43 @@ span.react-autoql-icon {
2251
2213
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2252
2214
  background: inherit; }
2253
2215
 
2254
- .react-autoql-table-container {
2255
- height: 100%;
2256
- max-width: 100%;
2257
- background-color: inherit; }
2258
-
2259
- .react-autoql-table {
2260
- margin-bottom: 0; }
2261
-
2262
- /* tabulator */
2263
- .react-autoql-table.tabulator,
2264
- .react-autoql-table.tabulator .tabulator-row,
2265
- .react-autoql-table.tabulator .tabulator-header,
2266
- .react-autoql-table.tabulator .tabulator-headers,
2267
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2268
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2269
- background-color: inherit; }
2270
-
2271
- .react-autoql-table-container.supports-drilldown
2272
- .react-autoql-table.tabulator
2273
- .tabulator-row.tabulator-unselectable:hover {
2274
- cursor: pointer !important;
2275
- background-color: var(--react-autoql-hover-color) !important; }
2276
-
2277
- .react-autoql-table.tabulator
2278
- .tabulator-header
2279
- .tabulator-col.tabulator-sortable:hover {
2280
- background-color: var(--react-autoql-hover-color) !important; }
2281
-
2282
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2283
- .react-autoql-table.tabulator .tabulator-cell {
2284
- border-color: var(--react-autoql-border-color); }
2285
-
2286
- .react-autoql-table.tabulator .tabulator-header {
2287
- border-bottom: 2px solid var(--react-autoql-border-color); }
2288
-
2289
- .react-autoql-table.tabulator {
2290
- background-color: inherit;
2291
- height: 100%; }
2292
-
2293
- .react-autoql-table .tabulator-row {
2294
- /* user-select: none; This breaks copy/paste */
2295
- border-bottom: 1px solid var(--react-autoql-border-color); }
2296
-
2297
- .tabulator-cell:not(:first-child) {
2298
- border-left: 1px solid !important;
2299
- border-color: rgba(0, 0, 0, 0.06) !important; }
2300
-
2301
- .react-autoql-table .tabulator-tableHolder {
2302
- max-height: calc(100% - 38px) !important;
2303
- background-color: inherit; }
2304
-
2305
- .react-autoql-table.tabulator
2306
- .tabulator-header
2307
- .tabulator-col
2308
- .tabulator-col-content {
2309
- padding: 8px 5px; }
2310
-
2311
- .react-autoql-table.tabulator
2312
- .tabulator-header
2313
- .tabulator-col
2314
- .tabulator-col-content
2315
- .tabulator-arrow {
2316
- opacity: 0;
2317
- border-left: 4px solid transparent !important;
2318
- border-right: 4px solid transparent !important;
2319
- right: 4px;
2320
- top: calc(50% - 3px); }
2321
-
2322
- .react-autoql-table.tabulator
2323
- .tabulator-header
2324
- .tabulator-col:hover
2325
- .tabulator-col-content
2326
- .tabulator-arrow {
2327
- opacity: 1 !important; }
2328
-
2329
- .react-autoql-table.tabulator
2330
- .tabulator-header
2331
- .tabulator-col.tabulator-sortable[aria-sort='desc']
2332
- .tabulator-col-content
2333
- .tabulator-arrow {
2334
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2335
-
2336
- .react-autoql-table.tabulator
2337
- .tabulator-header
2338
- .tabulator-col.tabulator-sortable[aria-sort='asc']
2339
- .tabulator-col-content
2340
- .tabulator-arrow,
2341
- .react-autoql-table.tabulator
2342
- .tabulator-header
2343
- .tabulator-col.tabulator-sortable[aria-sort='none']
2344
- .tabulator-col-content
2345
- .tabulator-arrow {
2346
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2347
-
2348
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2349
- display: unset;
2350
- opacity: 0;
2351
- background-color: transparent;
2352
- width: 7px;
2353
- height: 7px;
2354
- -webkit-transition: all 0.3s ease;
2355
- transition: all 0.3s ease; }
2356
-
2357
- .react-autoql-table.tabulator .tabulator-tableHolder {
2358
- min-height: calc(100% - 40px) !important;
2359
- height: calc(100% - 40px) !important;
2360
- max-height: calc(100% - 40px) !important; }
2361
-
2362
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2363
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2364
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2365
- background-color: transparent; }
2366
-
2367
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2368
- background-color: rgba(0, 0, 0, 0.2);
2369
- border-radius: 7px;
2370
- border: 0px; }
2371
-
2372
- .react-autoql-table .tabulator-header-filter input {
2373
- border: 1px solid var(--react-autoql-border-color);
2374
- border-radius: 4px;
2375
- background: transparent;
2376
- padding: 4px 9px !important;
2377
- outline: none !important; }
2378
-
2379
- .react-autoql-table .tabulator-header-filter input:focus {
2380
- border: 1px solid #28a8e0; }
2381
-
2382
- /* These are necessary because we are always rendering the
2383
- filter (just display: none when not used) instead of re-rendering
2384
- the whole table when the filter button is clicked */
2385
- .react-autoql-table-container:not(.filtering)
2386
- .react-autoql-table
2387
- .tabulator-header-filter {
2388
- display: none; }
2389
-
2390
- .react-autoql-table-container:not(.filtering)
2391
- .react-autoql-table
2392
- .tabulator-col {
2393
- height: auto !important; }
2394
-
2395
- .tabulator-table .tabulator-row .tabulator-cell {
2396
- min-height: 38px; }
2397
-
2398
- /* Center header titles */
2399
- .react-autoql-table .tabulator-header .tabulator-col {
2400
- text-align: center !important; }
2401
-
2402
- .react-autoql-table .tabulator-header .tabulator-col-title {
2403
- padding-left: 10px !important;
2404
- padding-right: 10px !important; }
2405
-
2406
- .filter-tag {
2407
- color: #2ecc40;
2408
- border: 1px solid;
2409
- padding: 2px 4px;
2410
- border-radius: 4px;
2411
- font-weight: 400;
2412
- font-size: 10px;
2413
- margin-right: 5px;
2414
- vertical-align: top;
2415
- line-height: 21px; }
2416
-
2417
- .comparison-value-positive {
2418
- color: #2ecc40; }
2419
-
2420
- .comparison-value-negative {
2421
- color: #e80000; }
2422
-
2423
- .react-autoql-btn {
2424
- border-radius: 4px;
2425
- cursor: pointer;
2426
- outline: none !important;
2427
- transition: all 0.2s ease;
2428
- width: auto;
2429
- display: inline-block; }
2430
-
2431
- .react-autoql-btn.disabled {
2432
- opacity: 0.4;
2433
- cursor: not-allowed;
2434
- pointer-events: none; }
2435
-
2436
- .react-autoql-btn.small {
2437
- padding: 2px 8px;
2438
- margin: 2px 3px; }
2439
-
2440
- .react-autoql-btn.large {
2441
- padding: 5px 16px;
2442
- margin: 2px 5px; }
2443
-
2444
- .react-autoql-btn.default {
2445
- color: inherit;
2446
- border: 1px solid var(--react-autoql-border-color);
2447
- background: inherit; }
2448
- .react-autoql-btn.default:hover {
2449
- border-color: var(--react-autoql-accent-color);
2450
- color: var(--react-autoql-accent-color); }
2451
-
2452
- .react-autoql-btn.primary {
2453
- background: var(--react-autoql-accent-color);
2454
- border: 1px solid var(--react-autoql-accent-color);
2455
- color: white; }
2456
- .react-autoql-btn.primary:hover {
2457
- opacity: 0.8; }
2458
-
2459
- .react-autoql-btn.danger {
2460
- color: var(--react-autoql-danger-color, #ca0b00);
2461
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2462
- background: inherit; }
2463
- .react-autoql-btn.danger:hover {
2464
- background-color: var(--react-autoql-danger-color, #ca0b00);
2465
- color: #fff; }
2466
-
2467
- .react-autoql-cascader {
2468
- position: relative;
2469
- white-space: nowrap;
2470
- overflow: hidden;
2471
- min-width: 300px; }
2472
- .react-autoql-cascader .options-container {
2473
- transition: max-width 0.3s ease;
2474
- display: inline-block;
2475
- vertical-align: top;
2476
- padding: 0 10px;
2477
- margin: 10px 0;
2478
- width: 100%;
2479
- max-width: calc(100% - 20px);
2480
- white-space: pre-wrap; }
2481
- .react-autoql-cascader .options-container.hidden {
2482
- max-width: 0; }
2483
- .react-autoql-cascader .options-container.hidden span {
2484
- white-space: nowrap; }
2485
- .react-autoql-cascader .options-container.hidden .option {
2486
- opacity: 0;
2487
- pointer-events: none; }
2488
- .react-autoql-cascader .options-container .options-title {
2489
- padding: 4px;
2490
- padding-left: 10px;
2491
- font-weight: 600; }
2492
- .react-autoql-cascader .options-container .cascader-back-arrow {
2493
- position: absolute;
2494
- cursor: pointer;
2495
- top: 15px;
2496
- left: 0; }
2497
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2498
- opacity: 0.8; }
2499
- .react-autoql-cascader .options-container .option {
2500
- cursor: pointer;
2501
- padding: 4px;
2502
- display: flex;
2503
- justify-content: space-between;
2504
- border-radius: 2px;
2505
- padding-left: 10px; }
2506
- .react-autoql-cascader .options-container .option .option-arrow {
2507
- opacity: 0.7; }
2508
- .react-autoql-cascader .options-container .option .option-execute-icon {
2509
- opacity: 0;
2510
- color: #fff;
2511
- font-size: 16px;
2512
- vertical-align: middle; }
2513
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2514
- background-color: var(--react-autoql-accent-color, #26a7df);
2515
- color: #fff; }
2516
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2517
- opacity: 1; }
2518
- .react-autoql-cascader .options-container:not(:last-child) {
2519
- border-right: 1px solid #d3d3d352; }
2216
+ .notification-modal-content .react-autoql-step-content p {
2217
+ margin-bottom: 0.5em;
2218
+ margin-top: 0.5em;
2219
+ padding-left: 8px; }
2220
+
2221
+ .notification-modal-content .step-btn-container {
2222
+ text-align: right;
2223
+ display: flex;
2224
+ min-height: 50px; }
2225
+
2226
+ .expression-valid-checkmark.react-autoql-icon svg {
2227
+ color: var(--react-autoql-success-color); }
2228
+
2229
+ .expression-invalid-message-container {
2230
+ max-width: 75%;
2231
+ float: left;
2232
+ text-align: left !important;
2233
+ display: flex;
2234
+ flex-direction: row;
2235
+ align-items: left;
2236
+ justify-content: left; }
2237
+
2238
+ .expression-invalid-message {
2239
+ color: var(--react-autoql-danger-color);
2240
+ display: 'inline-block'; }
2241
+
2242
+ .notification-rule-outer-container {
2243
+ position: relative;
2244
+ border: 1px solid transparent;
2245
+ border-radius: 4px;
2246
+ padding-bottom: 5px; }
2247
+
2248
+ .expression-error-message {
2249
+ padding-left: 5px; }
2250
+
2251
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2252
+ border: none; }
2520
2253
 
2521
2254
  .query-tips-page-container {
2522
2255
  height: 100%;
@@ -2620,75 +2353,341 @@ the whole table when the filter button is clicked */
2620
2353
  #react-paginate .pagination-next {
2621
2354
  right: 20px; }
2622
2355
 
2623
- .animated-item:nth-child(1) {
2624
- -webkit-animation-delay: 0.08s;
2625
- animation-delay: 0.08s; }
2356
+ .animated-item:nth-child(1) {
2357
+ -webkit-animation-delay: 0.08s;
2358
+ animation-delay: 0.08s; }
2359
+
2360
+ .animated-item:nth-child(2) {
2361
+ -webkit-animation-delay: 0.16s;
2362
+ animation-delay: 0.16s; }
2363
+
2364
+ .animated-item:nth-child(3) {
2365
+ -webkit-animation-delay: 0.24s;
2366
+ animation-delay: 0.24s; }
2367
+
2368
+ .animated-item:nth-child(4) {
2369
+ -webkit-animation-delay: 0.32s;
2370
+ animation-delay: 0.32s; }
2371
+
2372
+ .animated-item:nth-child(5) {
2373
+ -webkit-animation-delay: 0.4s;
2374
+ animation-delay: 0.4s; }
2375
+
2376
+ .animated-item:nth-child(6) {
2377
+ -webkit-animation-delay: 0.48s;
2378
+ animation-delay: 0.48s; }
2379
+
2380
+ .animated-item:nth-child(7) {
2381
+ -webkit-animation-delay: 0.56s;
2382
+ animation-delay: 0.56s; }
2383
+
2384
+ .animated-item:nth-child(8) {
2385
+ -webkit-animation-delay: 0.64s;
2386
+ animation-delay: 0.64s; }
2387
+
2388
+ .animated-item:nth-child(9) {
2389
+ -webkit-animation-delay: 0.72s;
2390
+ animation-delay: 0.72s; }
2391
+
2392
+ .animated-item:nth-child(10) {
2393
+ -webkit-animation-delay: 0.8s;
2394
+ animation-delay: 0.8s; }
2395
+
2396
+ .animated-item:nth-child(11) {
2397
+ -webkit-animation-delay: 0.88s;
2398
+ animation-delay: 0.88s; }
2399
+
2400
+ .animated-item:nth-child(12) {
2401
+ -webkit-animation-delay: 0.96s;
2402
+ animation-delay: 0.96s; }
2403
+
2404
+ .animated-item:nth-child(13) {
2405
+ -webkit-animation-delay: 1.04s;
2406
+ animation-delay: 1.04s; }
2407
+
2408
+ .animated-item:nth-child(14) {
2409
+ -webkit-animation-delay: 1.12s;
2410
+ animation-delay: 1.12s; }
2411
+
2412
+ .animated-item:nth-child(15) {
2413
+ -webkit-animation-delay: 1.2s;
2414
+ animation-delay: 1.2s; }
2415
+
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; } }
2425
+
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; }
2442
+
2443
+ .chat-condition-item-container {
2444
+ position: absolute;
2445
+ background: inherit;
2446
+ bottom: 0px;
2447
+ padding: 5px;
2448
+ border-radius: 6px; }
2449
+
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; }
2459
+
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; }
2466
+
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; }
2473
+
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; }
2487
+
2488
+ .chat-single-message-container .chat-message-bubble.text {
2489
+ max-width: 85%; }
2490
+
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; }
2495
+
2496
+ .chat-single-message-container.response .chat-message-bubble.active {
2497
+ border: 1px solid #c3c3c3; }
2498
+
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); }
2503
+
2504
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2505
+ min-width: 125px; }
2506
+
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); }
2511
+
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; }
2516
+
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); }
2529
+
2530
+ .chat-message-toolbar.right {
2531
+ right: -9px; }
2532
+
2533
+ .chat-message-toolbar.left {
2534
+ left: -9px; }
2535
+
2536
+ .chat-message-bubble:hover .chat-message-toolbar,
2537
+ .chat-message-bubble .chat-message-toolbar.active {
2538
+ display: block; }
2539
+
2540
+ .report-problem-text-area {
2541
+ 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; }
2553
+
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; }
2560
+
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; }
2567
+
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; }
2575
+
2576
+ .interpretation-icon {
2577
+ vertical-align: top;
2578
+ height: 26px;
2579
+ margin: 0 3px;
2580
+ font-size: 18px; }
2626
2581
 
2627
- .animated-item:nth-child(2) {
2628
- -webkit-animation-delay: 0.16s;
2629
- animation-delay: 0.16s; }
2582
+ /* Chart icon styles */
2583
+ .chart-icon-svg-0,
2584
+ .react-autoql-icon-svg-0 {
2585
+ fill: currentColor; }
2630
2586
 
2631
- .animated-item:nth-child(3) {
2632
- -webkit-animation-delay: 0.24s;
2633
- animation-delay: 0.24s; }
2587
+ .hm0 {
2588
+ opacity: 0.5;
2589
+ fill: currentColor;
2590
+ enable-background: new; }
2634
2591
 
2635
- .animated-item:nth-child(4) {
2636
- -webkit-animation-delay: 0.32s;
2637
- animation-delay: 0.32s; }
2592
+ .hm1 {
2593
+ fill: currentColor; }
2638
2594
 
2639
- .animated-item:nth-child(5) {
2640
- -webkit-animation-delay: 0.4s;
2641
- animation-delay: 0.4s; }
2595
+ .hm2 {
2596
+ opacity: 0.15;
2597
+ fill: currentColor;
2598
+ enable-background: new; }
2642
2599
 
2643
- .animated-item:nth-child(6) {
2644
- -webkit-animation-delay: 0.48s;
2645
- animation-delay: 0.48s; }
2600
+ .hm3 {
2601
+ opacity: 0.6;
2602
+ fill: currentColor;
2603
+ enable-background: new; }
2646
2604
 
2647
- .animated-item:nth-child(7) {
2648
- -webkit-animation-delay: 0.56s;
2649
- animation-delay: 0.56s; }
2605
+ .hm4 {
2606
+ opacity: 0.65;
2607
+ fill: currentColor;
2608
+ enable-background: new; }
2650
2609
 
2651
- .animated-item:nth-child(8) {
2652
- -webkit-animation-delay: 0.64s;
2653
- animation-delay: 0.64s; }
2610
+ .hm5 {
2611
+ fill: currentColor; }
2654
2612
 
2655
- .animated-item:nth-child(9) {
2656
- -webkit-animation-delay: 0.72s;
2657
- animation-delay: 0.72s; }
2613
+ .hm6 {
2614
+ fill: currentColor; }
2658
2615
 
2659
- .animated-item:nth-child(10) {
2660
- -webkit-animation-delay: 0.8s;
2661
- animation-delay: 0.8s; }
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%; } }
2662
2631
 
2663
- .animated-item:nth-child(11) {
2664
- -webkit-animation-delay: 0.88s;
2665
- animation-delay: 0.88s; }
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%; } }
2666
2639
 
2667
- .animated-item:nth-child(12) {
2668
- -webkit-animation-delay: 0.96s;
2669
- animation-delay: 0.96s; }
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%; } }
2670
2647
 
2671
- .animated-item:nth-child(13) {
2672
- -webkit-animation-delay: 1.04s;
2673
- animation-delay: 1.04s; }
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; }
2674
2655
 
2675
- .animated-item:nth-child(14) {
2676
- -webkit-animation-delay: 1.12s;
2677
- animation-delay: 1.12s; }
2656
+ .react-autoql-btn.disabled {
2657
+ opacity: 0.4;
2658
+ cursor: not-allowed;
2659
+ pointer-events: none; }
2678
2660
 
2679
- .animated-item:nth-child(15) {
2680
- -webkit-animation-delay: 1.2s;
2681
- animation-delay: 1.2s; }
2661
+ .react-autoql-btn.small {
2662
+ padding: 2px 8px;
2663
+ margin: 2px 3px; }
2682
2664
 
2683
- @-webkit-keyframes fadeIn {
2684
- 0% {
2685
- opacity: 0;
2686
- top: 100px; }
2687
- 75% {
2688
- opacity: 0.5;
2689
- top: 0px; }
2690
- 100% {
2691
- opacity: 1; } }
2665
+ .react-autoql-btn.large {
2666
+ padding: 5px 16px;
2667
+ margin: 2px 5px; }
2668
+
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); }
2676
+
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; }
2683
+
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; }
2692
2691
 
2693
2692
  .react-autoql-condition-locking-input {
2694
2693
  padding: 5px;
@@ -2844,227 +2843,228 @@ the whole table when the filter button is clicked */
2844
2843
  font-size: 12px;
2845
2844
  color: #777; }
2846
2845
 
2847
- .chat-single-message-container {
2848
- transition: background-color 0.2s ease;
2849
- padding-top: 6px; }
2850
- .chat-single-message-container:first-of-type {
2851
- margin-top: 10px; }
2852
- .chat-single-message-container .query-more-btn {
2853
- transition: all 0.3s ease;
2854
- font-size: 22px;
2855
- padding: 13px;
2856
- margin-bottom: 6px;
2857
- height: 42px;
2858
- opacity: 0;
2859
- visibility: hidden;
2860
- cursor: pointer; }
2861
- .chat-single-message-container .query-more-btn:hover {
2862
- opacity: 1; }
2863
-
2864
- .chat-condition-item-container {
2865
- position: absolute;
2866
- background: inherit;
2867
- bottom: 0px;
2868
- padding: 5px;
2869
- border-radius: 6px; }
2870
-
2871
- .chat-condition-item {
2872
- background: none !important;
2873
- border: none;
2874
- margin-top: -20px !important;
2875
- padding: 0 !important;
2876
- font-family: var(--react-autoql-font-family);
2877
- color: var(--react-autoql-accent-color);
2878
- text-decoration: underline;
2879
- cursor: pointer; }
2880
-
2881
- .chat-single-message-container.response {
2882
- display: flex;
2883
- justify-content: flex-start;
2884
- padding-left: 20px;
2885
- -webkit-animation: scale-up-bl 0.6s ease;
2886
- animation: scale-up-bl 0.6s ease; }
2887
-
2888
- .chat-single-message-container.request {
2889
- display: flex;
2890
- justify-content: flex-end;
2891
- padding-right: 20px;
2892
- -webkit-animation: scale-up-br 0.6s ease;
2893
- animation: scale-up-br 0.6s ease; }
2894
-
2895
- .chat-single-message-container .chat-message-bubble {
2846
+ .react-autoql-cascader {
2896
2847
  position: relative;
2897
- padding: 13px;
2898
- border-radius: 10px;
2899
- max-width: calc(100% - 20px);
2900
- word-wrap: break-word;
2901
- font-family: inherit;
2902
- font-size: 14px;
2903
- letter-spacing: 0.04em;
2904
- box-sizing: border-box;
2905
- /* make small margin on bottom because sometimes react
2906
- custom scrollbar cuts off a pixel or 2 at the bottom */
2907
- margin-bottom: 6px; }
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; }
2908
2899
 
2909
- .chat-single-message-container .chat-message-bubble.text {
2910
- max-width: 85%; }
2900
+ .react-autoql-table-container {
2901
+ height: 100%;
2902
+ max-width: 100%;
2903
+ background-color: inherit; }
2911
2904
 
2912
- .chat-single-message-container .chat-message-bubble.full-width {
2913
- width: calc(100% - 20px) !important;
2914
- min-width: calc(100% - 20px) !important;
2915
- max-width: calc(100% - 20px) !important; }
2905
+ .react-autoql-table {
2906
+ margin-bottom: 0; }
2916
2907
 
2917
- .chat-single-message-container.response .chat-message-bubble.active {
2918
- border: 1px solid #c3c3c3; }
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; }
2919
2916
 
2920
- .chat-single-message-container.response .chat-message-bubble {
2921
- background: var(--react-autoql-background-color-primary);
2922
- color: var(--react-autoql-text-color-primary);
2923
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
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; }
2924
2922
 
2925
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2926
- min-width: 125px; }
2923
+ .react-autoql-table.tabulator
2924
+ .tabulator-header
2925
+ .tabulator-col.tabulator-sortable:hover {
2926
+ background-color: var(--react-autoql-hover-color) !important; }
2927
2927
 
2928
- .chat-single-message-container.request .chat-message-bubble {
2929
- background: var(--react-autoql-accent-color);
2930
- color: white;
2931
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2928
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2929
+ .react-autoql-table.tabulator .tabulator-cell {
2930
+ border-color: var(--react-autoql-border-color); }
2932
2931
 
2933
- /* Increase height of message to include table filters,
2934
- so we dont have to redraw the whole table */
2935
- .chat-single-message-container.response.filtering-table {
2936
- max-height: calc(85% + 35px) !important; }
2932
+ .react-autoql-table.tabulator .tabulator-header {
2933
+ border-bottom: 2px solid var(--react-autoql-border-color); }
2937
2934
 
2938
- .chat-message-toolbar,
2939
- .chat-message-toolbar.autoql-options-toolbar {
2940
- display: none;
2941
- position: absolute;
2942
- background: inherit;
2943
- top: -31px;
2944
- padding: 5px;
2945
- border-radius: 6px;
2946
- line-height: 28px;
2947
- background: var(--react-autoql-background-color-primary);
2948
- border: 1px solid var(--react-autoql-border-color);
2949
- color: var(--react-autoql-accent-color); }
2935
+ .react-autoql-table.tabulator {
2936
+ background-color: inherit;
2937
+ height: 100%; }
2950
2938
 
2951
- .chat-message-toolbar.right {
2952
- right: -9px; }
2939
+ .react-autoql-table .tabulator-row {
2940
+ /* user-select: none; This breaks copy/paste */
2941
+ border-bottom: 1px solid var(--react-autoql-border-color); }
2953
2942
 
2954
- .chat-message-toolbar.left {
2955
- left: -9px; }
2943
+ .tabulator-cell:not(:first-child) {
2944
+ border-left: 1px solid !important;
2945
+ border-color: rgba(0, 0, 0, 0.06) !important; }
2956
2946
 
2957
- .chat-message-bubble:hover .chat-message-toolbar,
2958
- .chat-message-bubble .chat-message-toolbar.active {
2959
- display: block; }
2947
+ .react-autoql-table .tabulator-tableHolder {
2948
+ max-height: calc(100% - 38px) !important;
2949
+ background-color: inherit; }
2960
2950
 
2961
- .report-problem-text-area {
2962
- border-radius: 4px;
2963
- border: 1px solid rgba(0, 0, 0, 0.15);
2964
- margin-top: 10px;
2965
- padding: 5px 10px;
2966
- outline: none !important; }
2951
+ .react-autoql-table.tabulator
2952
+ .tabulator-header
2953
+ .tabulator-col
2954
+ .tabulator-col-content {
2955
+ padding: 8px 5px; }
2967
2956
 
2968
- .data-limit-warning-icon {
2969
- color: var(--react-autoql-warning-color) !important;
2970
- position: absolute !important;
2971
- bottom: 2px;
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;
2972
2965
  right: 4px;
2973
- font-size: 20px; }
2966
+ top: calc(50% - 3px); }
2974
2967
 
2975
- .condition-info-icon-left-align {
2976
- color: var(--react-autoql-accent-color) !important;
2977
- position: absolute !important;
2978
- bottom: 2px;
2979
- right: 10px;
2980
- font-size: 20px; }
2968
+ .react-autoql-table.tabulator
2969
+ .tabulator-header
2970
+ .tabulator-col:hover
2971
+ .tabulator-col-content
2972
+ .tabulator-arrow {
2973
+ opacity: 1 !important; }
2981
2974
 
2982
- .condition-info-icon {
2983
- color: var(--react-autoql-accent-color) !important;
2984
- position: absolute !important;
2985
- bottom: 2px;
2986
- right: 4px;
2987
- font-size: 20px; }
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; }
2988
2981
 
2989
- .more-options-menu,
2990
- .report-problem-menu {
2991
- background: var(--react-autoql-background-color-primary);
2992
- padding: 10px 0; }
2993
- .more-options-menu span.react-autoql-icon svg,
2994
- .report-problem-menu span.react-autoql-icon svg {
2995
- margin-right: 3px; }
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; }
2996
2993
 
2997
- .interpretation-icon {
2998
- vertical-align: top;
2999
- height: 26px;
3000
- margin: 0 3px;
3001
- font-size: 18px; }
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; }
3002
3002
 
3003
- /* Chart icon styles */
3004
- .chart-icon-svg-0,
3005
- .react-autoql-icon-svg-0 {
3006
- fill: currentColor; }
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; }
3007
3007
 
3008
- .hm0 {
3009
- opacity: 0.5;
3010
- fill: currentColor;
3011
- enable-background: new; }
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; }
3012
3012
 
3013
- .hm1 {
3014
- fill: currentColor; }
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; }
3015
3017
 
3016
- .hm2 {
3017
- opacity: 0.15;
3018
- fill: currentColor;
3019
- enable-background: new; }
3018
+ .react-autoql-table .tabulator-header-filter input {
3019
+ border: 1px solid var(--react-autoql-border-color);
3020
+ border-radius: 4px;
3021
+ background: transparent;
3022
+ padding: 4px 9px !important;
3023
+ outline: none !important; }
3020
3024
 
3021
- .hm3 {
3022
- opacity: 0.6;
3023
- fill: currentColor;
3024
- enable-background: new; }
3025
+ .react-autoql-table .tabulator-header-filter input:focus {
3026
+ border: 1px solid #28a8e0; }
3025
3027
 
3026
- .hm4 {
3027
- opacity: 0.65;
3028
- fill: currentColor;
3029
- enable-background: new; }
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; }
3030
3035
 
3031
- .hm5 {
3032
- fill: currentColor; }
3036
+ .react-autoql-table-container:not(.filtering)
3037
+ .react-autoql-table
3038
+ .tabulator-col {
3039
+ height: auto !important; }
3033
3040
 
3034
- .hm6 {
3035
- fill: currentColor; }
3041
+ .tabulator-table .tabulator-row .tabulator-cell {
3042
+ min-height: 38px; }
3036
3043
 
3037
- /* animations */
3038
- @-webkit-keyframes scale-up-br {
3039
- 0% {
3040
- transform: scale(0.5);
3041
- transform-origin: 100% 100%; }
3042
- 100% {
3043
- transform: scale(1);
3044
- transform-origin: 100% 100%; } }
3045
- @keyframes scale-up-br {
3046
- 0% {
3047
- transform: scale(0.5);
3048
- transform-origin: 100% 100%; }
3049
- 100% {
3050
- transform: scale(1);
3051
- transform-origin: 100% 100%; } }
3044
+ /* Center header titles */
3045
+ .react-autoql-table .tabulator-header .tabulator-col {
3046
+ text-align: center !important; }
3047
+
3048
+ .react-autoql-table .tabulator-header .tabulator-col-title {
3049
+ padding-left: 10px !important;
3050
+ padding-right: 10px !important; }
3051
+
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; }
3052
3062
 
3053
- @-webkit-keyframes scale-up-bl {
3054
- 0% {
3055
- transform: scale(0.5);
3056
- transform-origin: 0% 100%; }
3057
- 100% {
3058
- transform: scale(1);
3059
- transform-origin: 0% 100%; } }
3063
+ .comparison-value-positive {
3064
+ color: #2ecc40; }
3060
3065
 
3061
- @keyframes scale-up-bl {
3062
- 0% {
3063
- transform: scale(0.5);
3064
- transform-origin: 0% 100%; }
3065
- 100% {
3066
- transform: scale(1);
3067
- transform-origin: 0% 100%; } }
3066
+ .comparison-value-negative {
3067
+ color: #e80000; }
3068
3068
 
3069
3069
  .autoql-options-toolbar {
3070
3070
  position: absolute;
@@ -3280,126 +3280,108 @@ so we dont have to redraw the whole table */
3280
3280
  background: var(--react-autoql-background-color-primary);
3281
3281
  padding: 5px; }
3282
3282
 
3283
- .react-autoql-steps-container {
3284
- margin: 10px; }
3285
-
3286
- .react-autoql-step-container {
3287
- position: relative;
3288
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3289
- margin-left: 12px;
3290
- padding-left: 20px;
3291
- padding-bottom: 5px;
3292
- transition: all 0.5s ease; }
3293
- .react-autoql-step-container.complete {
3294
- border-color: var(--react-autoql-accent-color, #26a7df); }
3295
- .react-autoql-step-container.complete .react-autoql-step-dot {
3296
- border-color: var(--react-autoql-accent-color, #26a7df);
3297
- background: var(--react-autoql-accent-color, #26a7df);
3298
- color: #fff; }
3299
- .react-autoql-step-container.error {
3300
- border-color: var(--react-autoql-warning-color); }
3301
- .react-autoql-step-container.error .react-autoql-step-dot {
3302
- border-color: var(--react-autoql-warning-color);
3303
- background: var(--react-autoql-warning-color);
3304
- color: white; }
3305
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3306
- pointer-events: none;
3307
- height: 10px;
3308
- opacity: 0;
3309
- margin: 0; }
3310
-
3311
- .react-autoql-step-dot {
3283
+ .viz-toolbar {
3312
3284
  position: absolute;
3313
- top: 0;
3314
- left: -10px;
3315
- height: 20px;
3316
- width: 20px;
3317
- border-radius: 15px;
3318
- background: var(--react-autoql-background-color-primary, #fff);
3319
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3320
- transition: all 0.5s ease;
3321
- font-size: 10.5px;
3322
- color: var(--react-autoql-text-color-placeholder, lightgray);
3323
- text-align: center; }
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; }
3324
3292
 
3325
- .react-autoql-step-title-container:hover {
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);
3326
3302
  cursor: pointer;
3327
- transition: color 0.2s ease;
3328
- color: var(--react-autoql-accent-color, #26a7df); }
3329
-
3330
- .react-autoql-step-title {
3331
- font-weight: 500;
3332
- font-size: 15px;
3333
- line-height: 15px;
3334
- padding-top: 2px; }
3303
+ outline: none !important; }
3335
3304
 
3336
- .react-autoql-step-subtitle {
3337
- font-size: 13px;
3338
- padding-top: 6px;
3339
- padding-bottom: 6px;
3340
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3305
+ .react-autoql-toolbar-btn.green {
3306
+ color: #2ecc40; }
3341
3307
 
3342
- .react-autoql-step-content {
3343
- margin: 15px;
3344
- margin-top: 0; }
3308
+ .react-autoql-toolbar-btn.red {
3309
+ color: #e80000; }
3345
3310
 
3346
- .react-autoql-step-content-container {
3347
- transition-timing-function: ease;
3348
- transition-property: height, opacity, margin;
3349
- transition-duration: 0.5s;
3350
- opacity: 1; }
3311
+ .react-autoql-toolbar-btn:hover {
3312
+ opacity: 0.7; }
3351
3313
 
3352
3314
 
3353
- .react-autoql-input-container {
3354
- position: relative;
3355
- margin: 2px 5px;
3356
- display: inline-block; }
3357
- .react-autoql-input-container .react-autoql-input {
3358
- border: 1px solid rgba(0, 0, 0, 0.1);
3359
- border-radius: 4px;
3360
- line-height: 32px;
3361
- min-height: 34px;
3362
- padding: 0 10px;
3363
- width: 100%;
3364
- outline: none !important;
3365
- transition: all 0.2s ease;
3366
- transition-property: border-color, color, opacity; }
3367
- .react-autoql-input-container .react-autoql-input.with-icon {
3368
- padding-left: 38px; }
3369
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3370
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3371
- color: rgba(0, 0, 0, 0.2);
3372
- opacity: 1;
3373
- /* Firefox */
3374
- font-style: italic; }
3375
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3376
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3377
- color: rgba(0, 0, 0, 0.2);
3378
- opacity: 1;
3379
- /* Firefox */
3380
- font-style: italic; }
3381
- .react-autoql-input-container .react-autoql-input::placeholder {
3382
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3383
- color: rgba(0, 0, 0, 0.2);
3384
- opacity: 1;
3385
- /* Firefox */
3386
- font-style: italic; }
3387
- .react-autoql-input-container .react-autoql-input-icon {
3315
+ .react-autoql-radio-btn-container {
3316
+ display: inline-block;
3317
+ border-radius: 4px; }
3318
+ .react-autoql-radio-btn-container [type='radio']:checked,
3319
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3388
3320
  position: absolute;
3389
- left: 12px;
3390
- top: 8px;
3391
- opacity: 0.4;
3321
+ left: -9999px; }
3322
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
3323
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3324
+ position: relative;
3325
+ padding-left: 28px;
3326
+ cursor: pointer;
3327
+ line-height: 20px;
3328
+ display: inline-block; }
3329
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3330
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3331
+ content: '';
3332
+ position: absolute;
3333
+ left: 1px;
3334
+ top: 1px;
3335
+ width: 18px;
3336
+ height: 18px;
3337
+ border: 1px solid #ddd;
3338
+ border-radius: 100%;
3339
+ background: #fff; }
3340
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3341
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3342
+ content: '';
3343
+ width: 12px;
3344
+ height: 12px;
3345
+ background: var(--react-autoql-accent-color, #26a7df);
3346
+ position: absolute;
3347
+ top: 4px;
3348
+ left: 4px;
3349
+ border-radius: 100%;
3392
3350
  transition: all 0.2s ease; }
3393
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3394
- height: 17px;
3395
- width: 17px; }
3396
- .react-autoql-input-container:hover .react-autoql-input,
3397
- .react-autoql-input-container .react-autoql-input:focus {
3398
- border-color: var(--react-autoql-accent-color, #26a7df); }
3399
- .react-autoql-input-container:hover .react-autoql-input-icon,
3400
- .react-autoql-input-container .react-autoql-input-icon.focus {
3351
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3352
+ opacity: 0;
3353
+ transform: scale(0); }
3354
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3401
3355
  opacity: 1;
3402
- color: var(--react-autoql-accent-color, #26a7df); }
3356
+ transform: scale(1); }
3357
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
3358
+ position: relative;
3359
+ display: inline-block;
3360
+ padding: 3px 12px;
3361
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3362
+ margin-left: -1px;
3363
+ transition: all 0.2s ease;
3364
+ cursor: pointer; }
3365
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3366
+ background-color: var(--react-autoql-accent-color, #26a7df);
3367
+ border-color: var(--react-autoql-accent-color, #26a7df);
3368
+ color: #fff;
3369
+ z-index: 3; }
3370
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3371
+ background-color: inherit;
3372
+ color: var(--react-autoql-accent-color, #26a7df);
3373
+ z-index: 3; }
3374
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3375
+ border-color: var(--react-autoql-accent-color, #26a7df);
3376
+ color: var(--react-autoql-accent-color, #26a7df);
3377
+ z-index: 2; }
3378
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3379
+ border-top-left-radius: 4px;
3380
+ border-bottom-left-radius: 4px;
3381
+ margin-left: 0; }
3382
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3383
+ border-top-right-radius: 4px;
3384
+ border-bottom-right-radius: 4px; }
3403
3385
 
3404
3386
  .content {
3405
3387
  margin: 2rem; }
@@ -3521,119 +3503,137 @@ so we dont have to redraw the whole table */
3521
3503
  padding-left: 6px;
3522
3504
  line-height: 100%; }
3523
3505
 
3524
- .react-autoql-modal-container
3525
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3526
- .react-autoql-drawer
3527
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3528
- border-color: var(--react-autoql-accent-color); }
3506
+ .react-autoql-modal-container
3507
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3508
+ .react-autoql-drawer
3509
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3510
+ border-color: var(--react-autoql-accent-color); }
3511
+
3512
+ .react-autoql-modal-container
3513
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3514
+ .react-autoql-drawer
3515
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3516
+ background: var(--react-autoql-accent-color); }
3517
+
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; }
3529
3571
 
3530
- .react-autoql-modal-container
3531
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3532
- .react-autoql-drawer
3533
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3534
- background: var(--react-autoql-accent-color); }
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; }
3535
3596
 
3536
- .viz-toolbar {
3597
+ .react-autoql-step-dot {
3537
3598
  position: absolute;
3538
- background: inherit;
3539
- padding: 5px;
3540
- border-radius: 6px;
3541
- line-height: 28px;
3542
- border: 1px solid #d3d3d352; }
3543
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3544
- display: block; }
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; }
3545
3610
 
3546
- .react-autoql-toolbar-btn {
3547
- height: 28px;
3548
- width: 28px;
3549
- background: none;
3550
- border: none;
3551
- font-size: 16px;
3552
- line-height: 28px;
3553
- vertical-align: top;
3554
- color: var(--react-autoql-accent-color);
3611
+ .react-autoql-step-title-container:hover {
3555
3612
  cursor: pointer;
3556
- outline: none !important; }
3613
+ transition: color 0.2s ease;
3614
+ color: var(--react-autoql-accent-color, #26a7df); }
3557
3615
 
3558
- .react-autoql-toolbar-btn.green {
3559
- color: #2ecc40; }
3616
+ .react-autoql-step-title {
3617
+ font-weight: 500;
3618
+ font-size: 15px;
3619
+ line-height: 15px;
3620
+ padding-top: 2px; }
3560
3621
 
3561
- .react-autoql-toolbar-btn.red {
3562
- color: #e80000; }
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)); }
3563
3627
 
3564
- .react-autoql-toolbar-btn:hover {
3565
- opacity: 0.7; }
3628
+ .react-autoql-step-content {
3629
+ margin: 15px;
3630
+ margin-top: 0; }
3566
3631
 
3567
- .react-autoql-radio-btn-container {
3568
- display: inline-block;
3569
- border-radius: 4px; }
3570
- .react-autoql-radio-btn-container [type='radio']:checked,
3571
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3572
- position: absolute;
3573
- left: -9999px; }
3574
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3575
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3576
- position: relative;
3577
- padding-left: 28px;
3578
- cursor: pointer;
3579
- line-height: 20px;
3580
- display: inline-block; }
3581
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3582
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3583
- content: '';
3584
- position: absolute;
3585
- left: 1px;
3586
- top: 1px;
3587
- width: 18px;
3588
- height: 18px;
3589
- border: 1px solid #ddd;
3590
- border-radius: 100%;
3591
- background: #fff; }
3592
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3593
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3594
- content: '';
3595
- width: 12px;
3596
- height: 12px;
3597
- background: var(--react-autoql-accent-color, #26a7df);
3598
- position: absolute;
3599
- top: 4px;
3600
- left: 4px;
3601
- border-radius: 100%;
3602
- transition: all 0.2s ease; }
3603
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3604
- opacity: 0;
3605
- transform: scale(0); }
3606
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3607
- opacity: 1;
3608
- transform: scale(1); }
3609
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3610
- position: relative;
3611
- display: inline-block;
3612
- padding: 3px 12px;
3613
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3614
- margin-left: -1px;
3615
- transition: all 0.2s ease;
3616
- cursor: pointer; }
3617
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3618
- background-color: var(--react-autoql-accent-color, #26a7df);
3619
- border-color: var(--react-autoql-accent-color, #26a7df);
3620
- color: #fff;
3621
- z-index: 3; }
3622
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3623
- background-color: inherit;
3624
- color: var(--react-autoql-accent-color, #26a7df);
3625
- z-index: 3; }
3626
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3627
- border-color: var(--react-autoql-accent-color, #26a7df);
3628
- color: var(--react-autoql-accent-color, #26a7df);
3629
- z-index: 2; }
3630
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3631
- border-top-left-radius: 4px;
3632
- border-bottom-left-radius: 4px;
3633
- margin-left: 0; }
3634
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3635
- border-top-right-radius: 4px;
3636
- border-bottom-right-radius: 4px; }
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; }
3637
3637
 
3638
3638
  .notification-read-only-group {
3639
3639
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
@@ -3806,6 +3806,36 @@ so we dont have to redraw the whole table */
3806
3806
  padding: 0 10px;
3807
3807
  color: var(--react-autoql-warning-color); }
3808
3808
 
3809
+ .spinner-loader {
3810
+ display: inline-block;
3811
+ width: 14px;
3812
+ height: 14px;
3813
+ margin-right: 6px; }
3814
+
3815
+ .spinner-loader:after {
3816
+ content: " ";
3817
+ display: block;
3818
+ width: 16px;
3819
+ height: 16px;
3820
+ margin: 0px;
3821
+ border-radius: 50%;
3822
+ border: 1px solid currentColor;
3823
+ border-color: currentColor transparent currentColor transparent;
3824
+ -webkit-animation: spinner-loader 1.2s linear infinite;
3825
+ animation: spinner-loader 1.2s linear infinite; }
3826
+
3827
+ @-webkit-keyframes spinner-loader {
3828
+ 0% {
3829
+ transform: rotate(0deg); }
3830
+ 100% {
3831
+ transform: rotate(360deg); } }
3832
+
3833
+ @keyframes spinner-loader {
3834
+ 0% {
3835
+ transform: rotate(0deg); }
3836
+ 100% {
3837
+ transform: rotate(360deg); } }
3838
+
3809
3839
  .react-autoql-select {
3810
3840
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3811
3841
  border-radius: 4px;
@@ -3844,35 +3874,7 @@ so we dont have to redraw the whole table */
3844
3874
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3845
3875
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3846
3876
 
3847
- .spinner-loader {
3848
- display: inline-block;
3849
- width: 14px;
3850
- height: 14px;
3851
- margin-right: 6px; }
3852
-
3853
- .spinner-loader:after {
3854
- content: " ";
3855
- display: block;
3856
- width: 16px;
3857
- height: 16px;
3858
- margin: 0px;
3859
- border-radius: 50%;
3860
- border: 1px solid currentColor;
3861
- border-color: currentColor transparent currentColor transparent;
3862
- -webkit-animation: spinner-loader 1.2s linear infinite;
3863
- animation: spinner-loader 1.2s linear infinite; }
3864
-
3865
- @-webkit-keyframes spinner-loader {
3866
- 0% {
3867
- transform: rotate(0deg); }
3868
- 100% {
3869
- transform: rotate(360deg); } }
3870
3877
 
3871
- @keyframes spinner-loader {
3872
- 0% {
3873
- transform: rotate(0deg); }
3874
- 100% {
3875
- transform: rotate(360deg); } }
3876
3878
 
3877
3879
  .slack-modal-error-container,
3878
3880
  .slack-modal-empty-list-message {
@@ -4019,8 +4021,6 @@ so we dont have to redraw the whole table */
4019
4021
  .slack-channel-list-container .connect-channel-btn button {
4020
4022
  width: 200px; }
4021
4023
 
4022
-
4023
-
4024
4024
  .react-autoql-list-item {
4025
4025
  padding: 0 20px;
4026
4026
  display: flex;