react-autoql 4.1.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,150 @@
1
1
 
2
+ .react-autoql-bar-container {
3
+ position: relative;
4
+ display: flex;
5
+ flex-direction: row; }
6
+
7
+ .react-autoql-chatbar-input {
8
+ padding: 10px;
9
+ padding-left: 20px;
10
+ margin: 10px;
11
+ height: 42px;
12
+ width: calc(100% - 20px);
13
+ white-space: nowrap;
14
+ box-sizing: border-box;
15
+ border-radius: 24px;
16
+ font-size: 16px;
17
+ font-family: inherit;
18
+ letter-spacing: 0.04em;
19
+ outline: none !important;
20
+ width: calc(100% - 20px);
21
+ font-family: inherit;
22
+ /* Default styles outside of data messenger */
23
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
24
+ background: var(--react-autoql-background-color-primary);
25
+ color: #5d5d5d; }
26
+
27
+ .react-autoql-chatbar-input.left-padding {
28
+ padding-left: 54px; }
29
+
30
+ .react-autoql-chatbar-input:disabled {
31
+ background: rgba(0, 0, 0, 0.03); }
32
+
33
+ .react-autoql-chatbar-input:not(:disabled):hover {
34
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
35
+
36
+ .react-autoql-chatbar-input::-moz-placeholder {
37
+ /* Default color outside of data messenger */
38
+ color: #999 !important; }
39
+
40
+ .react-autoql-chatbar-input:-ms-input-placeholder {
41
+ /* Default color outside of data messenger */
42
+ color: #999 !important; }
43
+
44
+ .react-autoql-chatbar-input::placeholder {
45
+ /* Default color outside of data messenger */
46
+ color: #999 !important; }
47
+
48
+ /* autosuggest */
49
+ .react-autoql-bar-container .react-autosuggest__container,
50
+ .react-autoql-chatbar-input-container {
51
+ position: relative;
52
+ flex: 1; }
53
+
54
+ .react-autoql-bar-container .react-autosuggest__input--focused {
55
+ outline: none; }
56
+
57
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
58
+ display: none; }
59
+
60
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
61
+ display: none; }
62
+
63
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
64
+ position: absolute;
65
+ top: 45px;
66
+ bottom: unset;
67
+ margin: 10px;
68
+ padding-top: 5px;
69
+ padding-bottom: 5px;
70
+ display: block;
71
+ width: calc(100% - 20px);
72
+ height: unset;
73
+ border-radius: 24px;
74
+ font-family: inherit;
75
+ font-size: 15px;
76
+ font-weight: normal;
77
+ z-index: 2;
78
+ overflow: hidden;
79
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
80
+ /* Default styles outside of data messenger */
81
+ background-color: white;
82
+ color: #5d5d5d; }
83
+
84
+ .react-autoql-bar-container.autosuggest-top
85
+ .react-autosuggest__suggestions-container--open {
86
+ top: unset;
87
+ bottom: 45px; }
88
+
89
+ .react-autoql-bar-container.autosuggest-bottom
90
+ .react-autosuggest__suggestions-container--open {
91
+ top: 45px;
92
+ bottom: unset; }
93
+
94
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
95
+ margin: 0;
96
+ padding: 0;
97
+ list-style-type: none; }
98
+
99
+ /* Autocomplete styles */
100
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
101
+ background-color: var(--react-autoql-background-color-primary);
102
+ border: 1px solid var(--react-autoql-border-color);
103
+ color: var(--react-autoql-text-color-primary); }
104
+
105
+ .react-autoql-bar-container .react-autosuggest__suggestion {
106
+ color: var(--react-autoql-text-color-primary); }
107
+
108
+ .react-autoql-chatbar-input {
109
+ border: 1px solid var(--react-autoql-border-color);
110
+ color: var(--react-autoql-text-color-primary); }
111
+
112
+ .react-autoql-chatbar-input::-moz-placeholder {
113
+ color: var(--react-autoql-text-color-placeholder); }
114
+
115
+ .react-autoql-chatbar-input:-ms-input-placeholder {
116
+ color: var(--react-autoql-text-color-placeholder); }
117
+
118
+ .react-autoql-chatbar-input::placeholder {
119
+ color: var(--react-autoql-text-color-placeholder); }
120
+
121
+ .react-autoql-bar-container .react-autosuggest__suggestion {
122
+ cursor: pointer;
123
+ padding: 2px;
124
+ padding-left: 18px;
125
+ letter-spacing: 0.05em;
126
+ line-height: 22.5px; }
127
+
128
+ .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
129
+ background-color: rgba(0, 0, 0, 0.1) !important; }
130
+
131
+ .react-autoql-bar-container .react-autosuggest__section-title {
132
+ padding: 10px 0 0 10px;
133
+ font-size: 12px;
134
+ color: #777; }
135
+
136
+ .input-response-loading-container {
137
+ position: absolute;
138
+ right: 23px;
139
+ top: -2px; }
140
+
141
+ .chat-bar-input-icon {
142
+ position: absolute;
143
+ color: #28a8e0;
144
+ font-size: 20px;
145
+ left: 30px;
146
+ top: 15px; }
147
+
2
148
  .chat-voice-record-button {
3
149
  width: 40px;
4
150
  height: 40px;
@@ -29,6 +175,7 @@
29
175
  .react-autoql-tooltip {
30
176
  font-family: inherit;
31
177
  letter-spacing: 0.04em;
178
+ text-align: left;
32
179
  padding: 7px 15px;
33
180
  opacity: 1 !important;
34
181
  z-index: 99999 !important; }
@@ -71,85 +218,259 @@
71
218
  100% {
72
219
  left: 82%; } }
73
220
 
74
- .filter-lock-menu {
75
- z-index: 99999 !important;
76
- transition: opacity 0.1s ease 0s !important;
77
- border: 1px solid #ababab52;
78
- border-radius: 4px;
79
- box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
80
- opacity: 1;
81
- min-width: 500px;
82
- max-width: 70vw;
83
- height: 350px;
84
- background: var(--react-autoql-background-color-primary);
85
- color: var(--react-autoql-text-color-primary); }
86
- .filter-lock-menu .filter-lock-toast-container {
87
- top: 0;
88
- position: absolute; }
89
- .filter-lock-menu .filter-lock-toast-container .Toastify__toast {
90
- min-height: 48px; }
91
- .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body {
92
- justify-content: center; }
93
- .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body > div:last-child {
94
- flex: unset; }
221
+ .react-autoql-icon {
222
+ position: relative;
223
+ opacity: 1; }
224
+ .react-autoql-icon.warning {
225
+ color: var(--react-autoql-warning-color) !important; }
226
+ .react-autoql-icon.danger {
227
+ color: var(--react-autoql-danger-color) !important; }
95
228
 
96
- .filter-lock-menu-content {
97
- padding: 15px 20px;
229
+ span.react-autoql-icon {
230
+ vertical-align: unset;
231
+ text-align: left;
232
+ margin: 0;
233
+ padding: 0;
234
+ float: none !important;
235
+ color: inherit; }
236
+ span.react-autoql-icon svg {
237
+ float: none !important;
238
+ color: inherit;
239
+ vertical-align: unset;
240
+ text-align: left;
241
+ margin: 0;
242
+ padding: 0;
243
+ opacity: 1;
244
+ height: 1em;
245
+ margin-bottom: -0.15em; }
246
+
247
+ .slack-logo {
248
+ display: inline-block;
249
+ height: 100%;
250
+ margin-bottom: 3px; }
251
+ .slack-logo img {
252
+ vertical-align: middle;
253
+ height: 1em;
254
+ width: 1em; }
255
+
256
+ .react-autoql-badge {
257
+ position: absolute;
258
+ background: var(--react-autoql-warning-color);
259
+ border: 1px solid var(--react-autoql-background-color-primary);
260
+ width: 0.5em;
261
+ height: 0.5em;
262
+ top: -0.1em;
263
+ right: -0.25em;
264
+ border-radius: 50%;
265
+ box-sizing: content-box; }
266
+
267
+ .loading-container-centered {
268
+ height: 100%;
269
+ width: 100%;
98
270
  display: flex;
99
271
  flex-direction: column;
100
- justify-content: stretch;
101
- height: 100%; }
102
- .filter-lock-menu-content.closed {
103
- opacity: 0; }
104
- .filter-lock-menu-content h3 {
105
- margin-top: 3px;
106
- margin-bottom: 15px;
107
- color: var(--react-autoql-text-color-primary); }
108
- .filter-lock-menu-content h4 {
109
- margin-top: 3px;
110
- margin-bottom: 5px;
111
- color: var(--react-autoql-text-color-primary); }
112
- .filter-lock-menu-content .react-autoql-condition-list-loading-container,
113
- .filter-lock-menu-content .react-autoql-empty-condition-list,
114
- .filter-lock-menu-content .react-autoql-filter-list-container {
115
- flex: 1; }
116
- .filter-lock-menu-content .filter-lock-menu-header {
117
- flex: 0;
118
- width: 100%;
119
- display: flex;
120
- align-items: flex-start;
121
- justify-content: space-between; }
122
- .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-btn {
123
- border: none;
124
- margin: 0;
125
- padding: 0;
126
- font-size: 20px; }
127
- .filter-lock-menu-content .filter-lock-menu-footer {
128
- width: 100%;
129
- display: flex;
130
- justify-content: flex-end; }
131
- .filter-lock-menu-content .react-autoql-empty-condition-list {
132
- opacity: 0.8;
133
- width: 100%;
134
- text-align: center;
135
- padding-top: 70px; }
136
- .filter-lock-menu-content .react-autoql-filter-list-container {
137
- margin-top: 10px; }
138
- .filter-lock-menu-content .react-autoql-filter-list-container .flex {
272
+ justify-content: center;
273
+ align-items: center; }
274
+
275
+ .response-loading {
276
+ display: inline-block;
277
+ position: relative;
278
+ width: 64px;
279
+ height: 64px; }
280
+
281
+ .response-loading div {
282
+ position: absolute;
283
+ top: 27px;
284
+ width: 11px;
285
+ height: 11px;
286
+ border-radius: 50%;
287
+ background: #e2e2e2;
288
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
289
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
290
+
291
+ .response-loading div:nth-child(1) {
292
+ left: 6px;
293
+ -webkit-animation: response-loading1 0.6s infinite;
294
+ animation: response-loading1 0.6s infinite; }
295
+
296
+ .response-loading div:nth-child(2) {
297
+ left: 6px;
298
+ -webkit-animation: response-loading2 0.6s infinite;
299
+ animation: response-loading2 0.6s infinite; }
300
+
301
+ .response-loading div:nth-child(3) {
302
+ left: 26px;
303
+ -webkit-animation: response-loading2 0.6s infinite;
304
+ animation: response-loading2 0.6s infinite; }
305
+
306
+ .response-loading div:nth-child(4) {
307
+ left: 45px;
308
+ -webkit-animation: response-loading3 0.6s infinite;
309
+ animation: response-loading3 0.6s infinite; }
310
+
311
+ .react-autoql-dashboard-container {
312
+ background: var(--react-autoql-background-color-secondary);
313
+ height: 100%;
314
+ width: 100%;
315
+ overflow: hidden; }
316
+
317
+ .react-autoql-dashboard-container.edit-mode {
318
+ padding-bottom: 200px; }
319
+
320
+ .dashboard-drilldown-modal .ReactModal__Content {
321
+ top: unset !important;
322
+ margin-top: 20px !important;
323
+ max-height: 93vh !important; }
324
+
325
+ .dashboard-drilldown-modal .react-autoql-modal-body {
326
+ padding: 0; }
327
+
328
+ .dashboard-drilldown-modal .react-autoql-table {
329
+ opacity: 0.9;
330
+ font-size: 11px; }
331
+
332
+ .dashboard-drilldown-modal .splitter-layout {
333
+ height: calc(100% - 55px); }
334
+
335
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
336
+ padding: 20px;
337
+ padding-bottom: 10px; }
338
+
339
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
340
+ text-align: right;
341
+ width: 100%;
342
+ padding-right: 20px; }
343
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
344
+ position: absolute;
345
+ bottom: 5px;
346
+ width: 100px;
347
+ right: 0; }
348
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
349
+ padding-top: 10px;
350
+ margin-bottom: -8px; }
351
+
352
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
353
+ padding: 20px;
354
+ padding-top: 10px;
355
+ overflow: hidden;
356
+ height: 100%;
357
+ width: 100%; }
358
+
359
+ .empty-dashboard-message-container {
360
+ font-family: var(--react-autoql-font-family);
361
+ color: var(--react-autoql-text-color-primary);
362
+ letter-spacing: 0.02em;
363
+ text-align: center;
364
+ padding: 100px;
365
+ height: 100%;
366
+ width: 100%; }
367
+
368
+ .empty-dashboard-new-tile-btn {
369
+ color: var(--react-autoql-accent-color);
370
+ font-weight: bold;
371
+ cursor: pointer; }
372
+
373
+ .filter-lock-menu {
374
+ z-index: 99999 !important;
375
+ transition: opacity 0.1s ease 0s !important;
376
+ border: 1px solid #ababab52;
377
+ border-radius: 4px;
378
+ box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
379
+ opacity: 1;
380
+ min-width: 500px;
381
+ max-width: 70vw;
382
+ min-height: 350px;
383
+ max-height: 90vh;
384
+ background: var(--react-autoql-background-color-primary);
385
+ color: var(--react-autoql-text-color-primary);
386
+ overflow-y: auto !important; }
387
+ .filter-lock-menu .filter-lock-toast-container {
388
+ top: 0;
389
+ position: absolute; }
390
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast {
391
+ min-height: 48px; }
392
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body {
393
+ justify-content: center; }
394
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body > div:last-child {
395
+ flex: unset; }
396
+ .filter-lock-menu .include-exclude-toggle-group {
397
+ height: 23px;
398
+ font-size: 12px;
399
+ font-weight: 200; }
400
+ .filter-lock-menu .include-exclude-toggle-group .react-autoql-radio-btn.active {
401
+ background-color: var(--react-autoql-border-color); }
402
+ .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn:hover, .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn.active {
403
+ color: var(--react-autoql-accent-color);
404
+ border-color: var(--react-autoql-accent-color); }
405
+ .filter-lock-menu .include-exclude-toggle-group :nth-child(2).react-autoql-radio-btn:hover, .filter-lock-menu .include-exclude-toggle-group :nth-child(2).react-autoql-radio-btn.active {
406
+ color: var(--react-autoql-danger-color);
407
+ border-color: var(--react-autoql-danger-color); }
408
+
409
+ .filter-lock-menu-content {
410
+ padding: 15px 20px;
411
+ display: flex;
412
+ flex-direction: column;
413
+ justify-content: stretch;
414
+ height: 100%; }
415
+ .filter-lock-menu-content.closed {
416
+ opacity: 0; }
417
+ .filter-lock-menu-content h3 {
418
+ margin-top: 3px;
419
+ margin-bottom: 15px;
420
+ color: var(--react-autoql-text-color-primary); }
421
+ .filter-lock-menu-content h4 {
422
+ margin-top: 3px;
423
+ margin-bottom: 5px;
424
+ color: var(--react-autoql-text-color-primary);
425
+ display: inline-flex; }
426
+ .filter-lock-menu-content .react-autoql-condition-list-loading-container,
427
+ .filter-lock-menu-content .react-autoql-empty-condition-list,
428
+ .filter-lock-menu-content .react-autoql-filter-list-container {
429
+ flex: 1 1 245px; }
430
+ .filter-lock-menu-content .filter-lock-menu-header {
431
+ flex: 0;
432
+ width: 100%;
433
+ display: flex;
434
+ align-items: flex-start;
435
+ justify-content: space-between; }
436
+ .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-btn {
437
+ border: none;
438
+ margin: 0;
439
+ padding: 0;
440
+ font-size: 20px; }
441
+ .filter-lock-menu-content .filter-lock-menu-footer {
442
+ width: 100%;
443
+ display: flex;
444
+ justify-content: flex-end; }
445
+ .filter-lock-menu-content .react-autoql-empty-condition-list {
446
+ opacity: 0.8;
447
+ width: 100%;
448
+ text-align: center;
449
+ padding-top: 70px; }
450
+ .filter-lock-menu-content .react-autoql-filter-list-container {
451
+ margin: 10px 0; }
452
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex {
139
453
  width: 100%;
140
454
  display: flex;
141
455
  flex-direction: row;
142
456
  justify-content: space-between;
143
457
  flex-wrap: nowrap;
144
- white-space: nowrap;
145
458
  margin-bottom: 4px; }
146
459
  .filter-lock-menu-content .react-autoql-filter-list-container .flex .persist-toggle-column,
147
460
  .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-condition-table-list-item {
148
- margin-right: 25px; }
461
+ margin-right: 25px;
462
+ max-width: 350px; }
149
463
  .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon {
150
464
  cursor: pointer; }
151
465
  .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon:hover {
152
466
  color: var(--react-autoql-danger-color); }
467
+ .filter-lock-menu-content .react-autoql-filter-list-container .filter-lock-category-title {
468
+ padding-right: 10px;
469
+ padding-top: 1px;
470
+ max-width: 195px;
471
+ overflow: hidden; }
472
+ .filter-lock-menu-content .react-autoql-filter-list-container .persist-toggle-column .react-autoql-icon {
473
+ margin-left: 3px; }
153
474
  .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-highlight-row {
154
475
  background-color: var(--react-autoql-accent-color);
155
476
  color: white;
@@ -264,373 +585,75 @@
264
585
  background-color: var(--react-autoql-background-color-primary);
265
586
  color: var(--react-autoql-text-color-primary); } }
266
587
 
267
- .react-autoql-bar-container {
588
+ @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
589
+ .react-autoql-response-content-container {
268
590
  position: relative;
269
591
  display: flex;
270
- flex-direction: row; }
592
+ flex-direction: column;
593
+ justify-content: center;
594
+ align-items: flex-start;
595
+ background-color: inherit;
596
+ font-size: 14px;
597
+ overflow: hidden;
598
+ max-height: 100%;
599
+ max-width: 100%;
600
+ width: 100%;
601
+ height: 100%;
602
+ color: var(--react-autoql-text-color-primary); }
271
603
 
272
- .react-autoql-chatbar-input {
273
- padding: 10px;
274
- padding-left: 20px;
275
- margin: 10px;
276
- height: 42px;
277
- width: calc(100% - 20px);
278
- white-space: nowrap;
279
- box-sizing: border-box;
280
- border-radius: 24px;
281
- font-size: 16px;
604
+ .react-autoql-response-content-container.table {
605
+ max-height: 100vh !important;
606
+ overflow-y: scroll;
607
+ scrollbar-width: none;
608
+ margin-bottom: 0 !important;
609
+ height: 100%;
610
+ width: 100%; }
611
+
612
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
613
+ width: 0;
614
+ height: 0; }
615
+
616
+ .react-autoql-suggestion-btn {
617
+ padding: 6px 14px;
618
+ background: transparent;
282
619
  font-family: inherit;
283
- letter-spacing: 0.04em;
620
+ font-size: 12px;
621
+ margin-bottom: 5px;
284
622
  outline: none !important;
285
- width: calc(100% - 20px);
286
- font-family: inherit;
287
- /* Default styles outside of data messenger */
288
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
289
- background: var(--react-autoql-background-color-primary);
290
- color: #5d5d5d; }
291
-
292
- .react-autoql-chatbar-input.left-padding {
293
- padding-left: 54px; }
623
+ cursor: pointer;
624
+ letter-spacing: 0.05em;
625
+ transition: all 0.1s ease;
626
+ border: 1px solid rgba(0, 0, 0, 0.15);
627
+ border-radius: 5px;
628
+ color: inherit; }
294
629
 
295
- .react-autoql-chatbar-input:disabled {
296
- background: rgba(0, 0, 0, 0.03); }
630
+ .react-autoql-suggestion-btn:hover {
631
+ border-color: transparent;
632
+ color: white;
633
+ background: var(--react-autoql-accent-color); }
297
634
 
298
- .react-autoql-chatbar-input:not(:disabled):hover {
299
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
635
+ .react-autoql-help-link-btn {
636
+ padding: 6px 14px;
637
+ background: transparent;
638
+ border-radius: 5px;
639
+ font-family: inherit;
640
+ font-size: 12px;
641
+ margin-top: 5px;
642
+ outline: none !important;
643
+ cursor: pointer;
644
+ letter-spacing: 0.05em;
645
+ transition: all 0.1s ease;
646
+ border-color: #e2e2e26e;
647
+ color: inherit; }
300
648
 
301
- .react-autoql-chatbar-input::-moz-placeholder {
302
- /* Default color outside of data messenger */
303
- color: #999 !important; }
649
+ .react-autoql-help-link-btn:hover {
650
+ opacity: 0.7; }
304
651
 
305
- .react-autoql-chatbar-input:-ms-input-placeholder {
306
- /* Default color outside of data messenger */
307
- color: #999 !important; }
308
-
309
- .react-autoql-chatbar-input::placeholder {
310
- /* Default color outside of data messenger */
311
- color: #999 !important; }
312
-
313
- /* autosuggest */
314
- .react-autoql-bar-container .react-autosuggest__container,
315
- .react-autoql-chatbar-input-container {
316
- position: relative;
317
- flex: 1; }
318
-
319
- .react-autoql-bar-container .react-autosuggest__input--focused {
320
- outline: none; }
321
-
322
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
323
- display: none; }
324
-
325
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
326
- display: none; }
327
-
328
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
329
- position: absolute;
330
- top: 45px;
331
- bottom: unset;
332
- margin: 10px;
333
- padding-top: 5px;
334
- padding-bottom: 5px;
335
- display: block;
336
- width: calc(100% - 20px);
337
- height: unset;
338
- border-radius: 24px;
339
- font-family: inherit;
340
- font-size: 15px;
341
- font-weight: normal;
342
- z-index: 2;
343
- overflow: hidden;
344
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
345
- /* Default styles outside of data messenger */
346
- background-color: white;
347
- color: #5d5d5d; }
348
-
349
- .react-autoql-bar-container.autosuggest-top
350
- .react-autosuggest__suggestions-container--open {
351
- top: unset;
352
- bottom: 45px; }
353
-
354
- .react-autoql-bar-container.autosuggest-bottom
355
- .react-autosuggest__suggestions-container--open {
356
- top: 45px;
357
- bottom: unset; }
358
-
359
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
360
- margin: 0;
361
- padding: 0;
362
- list-style-type: none; }
363
-
364
- /* Autocomplete styles */
365
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
366
- background-color: var(--react-autoql-background-color-primary);
367
- border: 1px solid var(--react-autoql-border-color);
368
- color: var(--react-autoql-text-color-primary); }
369
-
370
- .react-autoql-bar-container .react-autosuggest__suggestion {
371
- color: var(--react-autoql-text-color-primary); }
372
-
373
- .react-autoql-chatbar-input {
374
- border: 1px solid var(--react-autoql-border-color);
375
- color: var(--react-autoql-text-color-primary); }
376
-
377
- .react-autoql-chatbar-input::-moz-placeholder {
378
- color: var(--react-autoql-text-color-placeholder); }
379
-
380
- .react-autoql-chatbar-input:-ms-input-placeholder {
381
- color: var(--react-autoql-text-color-placeholder); }
382
-
383
- .react-autoql-chatbar-input::placeholder {
384
- color: var(--react-autoql-text-color-placeholder); }
385
-
386
- .react-autoql-bar-container .react-autosuggest__suggestion {
387
- cursor: pointer;
388
- padding: 2px;
389
- padding-left: 18px;
390
- letter-spacing: 0.05em;
391
- line-height: 22.5px; }
392
-
393
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
394
- background-color: rgba(0, 0, 0, 0.1) !important; }
395
-
396
- .react-autoql-bar-container .react-autosuggest__section-title {
397
- padding: 10px 0 0 10px;
398
- font-size: 12px;
399
- color: #777; }
400
-
401
- .input-response-loading-container {
402
- position: absolute;
403
- right: 23px;
404
- top: -2px; }
405
-
406
- .chat-bar-input-icon {
407
- position: absolute;
408
- color: #28a8e0;
409
- font-size: 20px;
410
- left: 30px;
411
- top: 15px; }
412
-
413
- .react-autoql-icon {
414
- position: relative;
415
- opacity: 1; }
416
- .react-autoql-icon.warning {
417
- color: var(--react-autoql-warning-color) !important; }
418
- .react-autoql-icon.danger {
419
- color: var(--react-autoql-danger-color) !important; }
420
-
421
- span.react-autoql-icon {
422
- vertical-align: unset;
423
- text-align: left;
424
- margin: 0;
425
- padding: 0;
426
- float: none !important;
427
- color: inherit; }
428
- span.react-autoql-icon svg {
429
- float: none !important;
430
- color: inherit;
431
- vertical-align: unset;
432
- text-align: left;
433
- margin: 0;
434
- padding: 0;
435
- opacity: 1;
436
- height: 1em;
437
- margin-bottom: -0.15em; }
438
-
439
- .slack-logo {
440
- display: inline-block;
441
- height: 100%;
442
- margin-bottom: 3px; }
443
- .slack-logo img {
444
- vertical-align: middle;
445
- height: 1em;
446
- width: 1em; }
447
-
448
- .react-autoql-badge {
449
- position: absolute;
450
- background: var(--react-autoql-warning-color);
451
- border: 1px solid var(--react-autoql-background-color-primary);
452
- width: 0.5em;
453
- height: 0.5em;
454
- top: -0.1em;
455
- right: -0.25em;
456
- border-radius: 50%;
457
- box-sizing: content-box; }
458
-
459
- .loading-container-centered {
460
- height: 100%;
461
- width: 100%;
462
- display: flex;
463
- flex-direction: column;
464
- justify-content: center;
465
- align-items: center; }
466
-
467
- .response-loading {
468
- display: inline-block;
469
- position: relative;
470
- width: 64px;
471
- height: 64px; }
472
-
473
- .response-loading div {
474
- position: absolute;
475
- top: 27px;
476
- width: 11px;
477
- height: 11px;
478
- border-radius: 50%;
479
- background: #e2e2e2;
480
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
481
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
482
-
483
- .response-loading div:nth-child(1) {
484
- left: 6px;
485
- -webkit-animation: response-loading1 0.6s infinite;
486
- animation: response-loading1 0.6s infinite; }
487
-
488
- .response-loading div:nth-child(2) {
489
- left: 6px;
490
- -webkit-animation: response-loading2 0.6s infinite;
491
- animation: response-loading2 0.6s infinite; }
492
-
493
- .response-loading div:nth-child(3) {
494
- left: 26px;
495
- -webkit-animation: response-loading2 0.6s infinite;
496
- animation: response-loading2 0.6s infinite; }
497
-
498
- .response-loading div:nth-child(4) {
499
- left: 45px;
500
- -webkit-animation: response-loading3 0.6s infinite;
501
- animation: response-loading3 0.6s infinite; }
502
-
503
- .react-autoql-dashboard-container {
504
- background: var(--react-autoql-background-color-secondary);
505
- height: 100%;
506
- width: 100%;
507
- overflow: hidden; }
508
-
509
- .react-autoql-dashboard-container.edit-mode {
510
- padding-bottom: 200px; }
511
-
512
- .dashboard-drilldown-modal .ReactModal__Content {
513
- top: unset !important;
514
- margin-top: 20px !important;
515
- max-height: 93vh !important; }
516
-
517
- .dashboard-drilldown-modal .react-autoql-modal-body {
518
- padding: 0; }
519
-
520
- .dashboard-drilldown-modal .react-autoql-table {
521
- opacity: 0.9;
522
- font-size: 11px; }
523
-
524
- .dashboard-drilldown-modal .splitter-layout {
525
- height: calc(100% - 55px); }
526
-
527
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
528
- padding: 20px;
529
- padding-bottom: 10px; }
530
-
531
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
532
- text-align: right;
533
- width: 100%;
534
- padding-right: 20px; }
535
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
536
- position: absolute;
537
- bottom: 5px;
538
- width: 100px;
539
- right: 0; }
540
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
541
- padding-top: 10px;
542
- margin-bottom: -8px; }
543
-
544
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
545
- padding: 20px;
546
- padding-top: 10px;
547
- overflow: hidden;
548
- height: 100%;
549
- width: 100%; }
550
-
551
- .empty-dashboard-message-container {
552
- font-family: var(--react-autoql-font-family);
553
- color: var(--react-autoql-text-color-primary);
554
- letter-spacing: 0.02em;
555
- text-align: center;
556
- padding: 100px;
557
- height: 100%;
558
- width: 100%; }
559
-
560
- .empty-dashboard-new-tile-btn {
561
- color: var(--react-autoql-accent-color);
562
- font-weight: bold;
563
- cursor: pointer; }
564
-
565
- @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
566
- .react-autoql-response-content-container {
567
- position: relative;
568
- display: flex;
569
- flex-direction: column;
570
- justify-content: center;
571
- align-items: center;
572
- background-color: inherit;
573
- font-size: 14px;
574
- overflow: hidden;
575
- max-height: 100%;
576
- max-width: 100%;
577
- width: 100%;
578
- height: 100%;
579
- color: var(--react-autoql-text-color-primary); }
580
-
581
- .react-autoql-response-content-container.table {
582
- max-height: 100vh !important;
583
- overflow-y: scroll;
584
- scrollbar-width: none;
585
- margin-bottom: 0 !important;
586
- height: 100%;
587
- width: 100%; }
588
-
589
- .react-autoql-response-content-container.table::-webkit-scrollbar {
590
- width: 0;
591
- height: 0; }
592
-
593
- .react-autoql-suggestion-btn {
594
- padding: 6px 14px;
595
- background: transparent;
596
- font-family: inherit;
597
- font-size: 12px;
598
- margin-bottom: 5px;
599
- outline: none !important;
600
- cursor: pointer;
601
- letter-spacing: 0.05em;
602
- transition: all 0.1s ease;
603
- border: 1px solid rgba(0, 0, 0, 0.15);
604
- border-radius: 5px;
605
- color: inherit; }
606
-
607
- .react-autoql-suggestion-btn:hover {
608
- border-color: transparent;
609
- color: white;
610
- background: var(--react-autoql-accent-color); }
611
-
612
- .react-autoql-help-link-btn {
613
- padding: 6px 14px;
614
- background: transparent;
615
- border-radius: 5px;
616
- font-family: inherit;
617
- font-size: 12px;
618
- margin-top: 5px;
619
- outline: none !important;
620
- cursor: pointer;
621
- letter-spacing: 0.05em;
622
- transition: all 0.1s ease;
623
- border-color: #e2e2e26e;
624
- color: inherit; }
625
-
626
- .react-autoql-help-link-btn:hover {
627
- opacity: 0.7; }
628
-
629
- .react-autoql-help-link-icon {
630
- width: 15px;
631
- height: 15px;
632
- margin-bottom: -3px;
633
- margin-right: 3px; }
652
+ .react-autoql-help-link-icon {
653
+ width: 15px;
654
+ height: 15px;
655
+ margin-bottom: -3px;
656
+ margin-right: 3px; }
634
657
 
635
658
  .react-autoql-suggestion-message {
636
659
  height: 100%;
@@ -756,18 +779,20 @@ span.react-autoql-icon {
756
779
  z-index: 99999 !important;
757
780
  /* necessary to show up on top of rc drawer */ }
758
781
 
759
- .single-value-response {
760
- color: inherit;
761
- cursor: unset;
762
- font-size: 20px; }
763
- .single-value-response:hover {
764
- color: inherit; }
765
-
766
- .single-value-response.with-drilldown:hover {
767
- color: inherit;
768
- text-decoration: underline;
769
- font-weight: 600;
770
- cursor: pointer; }
782
+ .single-value-response-container {
783
+ width: 100%;
784
+ text-align: center; }
785
+ .single-value-response-container .single-value-response {
786
+ color: inherit;
787
+ cursor: unset;
788
+ font-size: 20px; }
789
+ .single-value-response-container .single-value-response:hover {
790
+ color: inherit; }
791
+ .single-value-response-container .single-value-response.with-drilldown:hover {
792
+ color: inherit;
793
+ text-decoration: underline;
794
+ font-weight: 600;
795
+ cursor: pointer; }
771
796
 
772
797
  .react-autoql-query-validation-container {
773
798
  width: 100%; }
@@ -1090,6 +1115,7 @@ span.react-autoql-icon {
1090
1115
  line-height: 1.5em;
1091
1116
  padding: 7px 15px;
1092
1117
  transition: none;
1118
+ text-align: left;
1093
1119
  opacity: 1 !important;
1094
1120
  z-index: 99999 !important;
1095
1121
  /* necessary to show up on top of rc drawer */ }
@@ -1394,6 +1420,36 @@ span.react-autoql-icon {
1394
1420
  left: 0.5em;
1395
1421
  top: -2px; }
1396
1422
 
1423
+ .notification-rule-add-btn-outer,
1424
+ .notification-rule-validate-btn-outer {
1425
+ text-align: center;
1426
+ border-style: dashed !important;
1427
+ height: 38px;
1428
+ line-height: 25px;
1429
+ margin: 0 !important;
1430
+ overflow: hidden; }
1431
+
1432
+ .notification-rule-outer-container {
1433
+ position: relative;
1434
+ border: 1px solid transparent;
1435
+ border-radius: 4px; }
1436
+ .notification-rule-outer-container.outlined {
1437
+ border-color: rgba(0, 0, 0, 0.15);
1438
+ padding: 0 20px;
1439
+ padding-bottom: 12px; }
1440
+
1441
+ .notification-outer-all-any {
1442
+ position: absolute;
1443
+ left: 0;
1444
+ top: 50%; }
1445
+
1446
+ .notification-first-group-btn-container {
1447
+ display: flex;
1448
+ justify-content: space-between; }
1449
+
1450
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1451
+ border: none; }
1452
+
1397
1453
  .react-autoql-notification-list-item {
1398
1454
  display: flex;
1399
1455
  flex-direction: column;
@@ -1610,130 +1666,6 @@ span.react-autoql-icon {
1610
1666
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1611
1667
  margin-bottom: -1px; }
1612
1668
 
1613
- .react-autoql-notification-settings {
1614
- background-color: var(--react-autoql-background-color-secondary);
1615
- color: var(--react-autoql-text-color-primary);
1616
- padding-top: 20px;
1617
- height: 100%; }
1618
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1619
- margin: 20px;
1620
- margin-top: 10px;
1621
- border-radius: 4px;
1622
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1623
- background-color: var(--react-autoql-background-color-primary);
1624
- overflow: hidden; }
1625
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1626
- height: 55px;
1627
- line-height: 55px;
1628
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1629
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1630
- margin-right: 10px;
1631
- cursor: pointer; }
1632
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
1633
- margin-right: 10px; }
1634
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1635
- padding-right: 20px;
1636
- font-size: 17px;
1637
- opacity: 1;
1638
- cursor: pointer;
1639
- color: var(--react-autoql-accent-color); }
1640
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1641
- background: rgba(0, 0, 0, 0.01); }
1642
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1643
- opacity: 0;
1644
- margin-right: 20px;
1645
- font-size: 16px;
1646
- transition: all 0.2s ease;
1647
- color: var(--react-autoql-text-color-primary);
1648
- cursor: pointer; }
1649
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1650
- color: var(--react-autoql-accent-color);
1651
- opacity: 1 !important; }
1652
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1653
- opacity: 0.5; }
1654
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1655
- display: flex;
1656
- justify-content: space-between;
1657
- height: 56px;
1658
- padding-left: 25px;
1659
- padding-right: 8px;
1660
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1661
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1662
- margin-bottom: 4px;
1663
- margin-right: 8px; }
1664
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1665
- margin-bottom: 4px;
1666
- margin-right: 8px;
1667
- opacity: 0.5;
1668
- pointer-events: none; }
1669
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1670
- display: flex;
1671
- justify-content: space-between;
1672
- align-items: center;
1673
- padding: 5px 20px;
1674
- padding-bottom: 0;
1675
- color: var(--react-autoql-text-color-primary); }
1676
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1677
- display: inline-block;
1678
- height: 35px;
1679
- width: 35px;
1680
- border-radius: 20px;
1681
- background: var(--react-autoql-accent-color, #26a7df);
1682
- color: var(--react-autoql-accent-text-color);
1683
- line-height: 38px;
1684
- text-align: center;
1685
- font-size: 20px;
1686
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1687
- transition: all 0.2s ease;
1688
- margin-right: 5px;
1689
- cursor: pointer; }
1690
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1691
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1692
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1693
- white-space: nowrap;
1694
- overflow: hidden;
1695
- text-overflow: ellipsis;
1696
- padding-right: 10px; }
1697
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1698
- opacity: 0.5; }
1699
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1700
- vertical-align: middle;
1701
- height: 18px; }
1702
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1703
- display: flex;
1704
- align-items: center;
1705
- margin-top: -25px; }
1706
-
1707
- .notification-rule-add-btn-outer,
1708
- .notification-rule-validate-btn-outer {
1709
- text-align: center;
1710
- border-style: dashed !important;
1711
- height: 38px;
1712
- line-height: 25px;
1713
- margin: 0 !important;
1714
- overflow: hidden; }
1715
-
1716
- .notification-rule-outer-container {
1717
- position: relative;
1718
- border: 1px solid transparent;
1719
- border-radius: 4px; }
1720
- .notification-rule-outer-container.outlined {
1721
- border-color: rgba(0, 0, 0, 0.15);
1722
- padding: 0 20px;
1723
- padding-bottom: 12px; }
1724
-
1725
- .notification-outer-all-any {
1726
- position: absolute;
1727
- left: 0;
1728
- top: 50%; }
1729
-
1730
- .notification-first-group-btn-container {
1731
- display: flex;
1732
- justify-content: space-between; }
1733
-
1734
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1735
- border: none; }
1736
-
1737
1669
  .notification-rule-outer-container {
1738
1670
  position: relative;
1739
1671
  border: 1px solid transparent;
@@ -1844,6 +1776,100 @@ span.react-autoql-icon {
1844
1776
  opacity: 1;
1845
1777
  top: 0; } }
1846
1778
 
1779
+ .react-autoql-notification-settings {
1780
+ background-color: var(--react-autoql-background-color-secondary);
1781
+ color: var(--react-autoql-text-color-primary);
1782
+ padding-top: 20px;
1783
+ height: 100%; }
1784
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1785
+ margin: 20px;
1786
+ margin-top: 10px;
1787
+ border-radius: 4px;
1788
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1789
+ background-color: var(--react-autoql-background-color-primary);
1790
+ overflow: hidden; }
1791
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1792
+ height: 55px;
1793
+ line-height: 55px;
1794
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1795
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1796
+ margin-right: 10px;
1797
+ cursor: pointer; }
1798
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
1799
+ margin-right: 10px; }
1800
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1801
+ padding-right: 20px;
1802
+ font-size: 17px;
1803
+ opacity: 1;
1804
+ cursor: pointer;
1805
+ color: var(--react-autoql-accent-color); }
1806
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1807
+ background: rgba(0, 0, 0, 0.01); }
1808
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1809
+ opacity: 0;
1810
+ margin-right: 20px;
1811
+ font-size: 16px;
1812
+ transition: all 0.2s ease;
1813
+ color: var(--react-autoql-text-color-primary);
1814
+ cursor: pointer; }
1815
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1816
+ color: var(--react-autoql-accent-color);
1817
+ opacity: 1 !important; }
1818
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1819
+ opacity: 0.5; }
1820
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1821
+ display: flex;
1822
+ justify-content: space-between;
1823
+ height: 56px;
1824
+ padding-left: 25px;
1825
+ padding-right: 8px;
1826
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1827
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1828
+ margin-bottom: 4px;
1829
+ margin-right: 8px; }
1830
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1831
+ margin-bottom: 4px;
1832
+ margin-right: 8px;
1833
+ opacity: 0.5;
1834
+ pointer-events: none; }
1835
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1836
+ display: flex;
1837
+ justify-content: space-between;
1838
+ align-items: center;
1839
+ padding: 5px 20px;
1840
+ padding-bottom: 0;
1841
+ color: var(--react-autoql-text-color-primary); }
1842
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1843
+ display: inline-block;
1844
+ height: 35px;
1845
+ width: 35px;
1846
+ border-radius: 20px;
1847
+ background: var(--react-autoql-accent-color, #26a7df);
1848
+ color: var(--react-autoql-accent-text-color);
1849
+ line-height: 38px;
1850
+ text-align: center;
1851
+ font-size: 20px;
1852
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1853
+ transition: all 0.2s ease;
1854
+ margin-right: 5px;
1855
+ cursor: pointer; }
1856
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1857
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1858
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1859
+ white-space: nowrap;
1860
+ overflow: hidden;
1861
+ text-overflow: ellipsis;
1862
+ padding-right: 10px; }
1863
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1864
+ opacity: 0.5; }
1865
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1866
+ vertical-align: middle;
1867
+ height: 18px; }
1868
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1869
+ display: flex;
1870
+ align-items: center;
1871
+ margin-top: -25px; }
1872
+
1847
1873
  .react-autoql-step-container a {
1848
1874
  color: var(--react-autoql-accent-color, #26a7df); }
1849
1875
 
@@ -1879,7 +1905,7 @@ span.react-autoql-icon {
1879
1905
  .notification-modal-content .step-btn-container {
1880
1906
  text-align: right;
1881
1907
  display: flex;
1882
- min-height: 50px; }
1908
+ min-height: 20px; }
1883
1909
 
1884
1910
  .expression-valid-checkmark.react-autoql-icon svg {
1885
1911
  color: var(--react-autoql-success-color); }
@@ -2380,6 +2406,7 @@ span.react-autoql-icon {
2380
2406
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2381
2407
  background: inherit; }
2382
2408
 
2409
+
2383
2410
  .react-autoql-btn {
2384
2411
  border-radius: 4px;
2385
2412
  cursor: pointer;
@@ -2398,7 +2425,7 @@ span.react-autoql-icon {
2398
2425
  margin: 2px 3px; }
2399
2426
 
2400
2427
  .react-autoql-btn.large {
2401
- padding: 5px 16px;
2428
+ padding: 10px 16px;
2402
2429
  margin: 2px 5px; }
2403
2430
 
2404
2431
  .react-autoql-btn.default {
@@ -2424,6 +2451,172 @@ span.react-autoql-icon {
2424
2451
  background-color: var(--react-autoql-danger-color, #ca0b00);
2425
2452
  color: #fff; }
2426
2453
 
2454
+ .ReactModal__Overlay {
2455
+ background-color: transparent !important;
2456
+ transition: background-color 0.2s ease-in-out;
2457
+ z-index: 9999; }
2458
+
2459
+ .ReactModal__Overlay--after-open {
2460
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2461
+
2462
+ .ReactModal__Overlay--before-close {
2463
+ background-color: transparent !important; }
2464
+
2465
+ .ReactModal__Content {
2466
+ display: flex;
2467
+ flex-direction: column;
2468
+ transform: scale(0);
2469
+ transition: all 0.2s ease-in-out;
2470
+ color: var(--react-autoql-text-color-primary);
2471
+ border: 1px solid var(--react-autoql-border-color) !important;
2472
+ background: var(--react-autoql-background-color-primary) !important;
2473
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2474
+ padding: 0 !important;
2475
+ margin: auto auto;
2476
+ max-width: 90vw;
2477
+ max-height: calc(100vh - 90px); }
2478
+ .ReactModal__Content input.react-autoql-input,
2479
+ .ReactModal__Content textarea.react-autoql-input,
2480
+ .ReactModal__Content textarea {
2481
+ border-color: var(--react-autoql-border-color);
2482
+ color: var(--react-autoql-text-color-primary);
2483
+ background: var(--react-autoql-background-color-primary, white); }
2484
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2485
+ color: var(--react-autoql-text-color-placeholder); }
2486
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2487
+ color: var(--react-autoql-text-color-placeholder); }
2488
+ .ReactModal__Content input.react-autoql-input::placeholder,
2489
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2490
+ .ReactModal__Content textarea::placeholder {
2491
+ color: var(--react-autoql-text-color-placeholder); }
2492
+
2493
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2494
+ transform: scale(1); }
2495
+
2496
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2497
+ transform: scale(0); }
2498
+
2499
+ .react-autoql-modal-header {
2500
+ position: relative;
2501
+ text-align: center;
2502
+ flex: 0 0 52px;
2503
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2504
+ padding: 14px 60px;
2505
+ font-size: 16px; }
2506
+
2507
+ .react-autoql-modal-footer {
2508
+ position: relative;
2509
+ flex: 0 0 52px;
2510
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2511
+ text-align: right;
2512
+ padding: 8px 10px; }
2513
+
2514
+ .react-autoql-modal-body {
2515
+ display: flex;
2516
+ flex-direction: column;
2517
+ padding: 25px;
2518
+ flex: 1;
2519
+ overflow: hidden; }
2520
+ .react-autoql-modal-body h3 {
2521
+ color: var(--react-autoql-text-color-primary); }
2522
+
2523
+ .react-autoql-modal-close-btn {
2524
+ position: absolute !important;
2525
+ top: 10px;
2526
+ right: 18px;
2527
+ font-size: 22px;
2528
+ opacity: 0.6 !important;
2529
+ cursor: pointer; }
2530
+
2531
+ .react-autoql-modal-close-btn:hover {
2532
+ opacity: 1 !important; }
2533
+
2534
+ .react-autoql-radio-btn-container.react-autoql-radio-btn-container-list {
2535
+ display: inline-block; }
2536
+
2537
+ .react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons {
2538
+ display: inline-flex;
2539
+ justify-content: stretch;
2540
+ align-items: stretch;
2541
+ border-radius: 4px; }
2542
+ .react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons .react-autoql-radio-btn {
2543
+ display: inline-flex;
2544
+ justify-content: center;
2545
+ align-items: center; }
2546
+
2547
+ .react-autoql-radio-btn-container [type='radio']:checked,
2548
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
2549
+ position: absolute;
2550
+ left: -9999px; }
2551
+
2552
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
2553
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
2554
+ position: relative;
2555
+ padding-left: 28px;
2556
+ cursor: pointer;
2557
+ line-height: 20px;
2558
+ display: inline-block; }
2559
+
2560
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
2561
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
2562
+ content: '';
2563
+ position: absolute;
2564
+ left: 1px;
2565
+ top: 1px;
2566
+ width: 18px;
2567
+ height: 18px;
2568
+ border: 1px solid #ddd;
2569
+ border-radius: 100%;
2570
+ background: #fff; }
2571
+
2572
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
2573
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
2574
+ content: '';
2575
+ width: 12px;
2576
+ height: 12px;
2577
+ background: var(--react-autoql-accent-color, #26a7df);
2578
+ position: absolute;
2579
+ top: 4px;
2580
+ left: 4px;
2581
+ border-radius: 100%;
2582
+ transition: all 0.2s ease; }
2583
+
2584
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
2585
+ opacity: 0;
2586
+ transform: scale(0); }
2587
+
2588
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
2589
+ opacity: 1;
2590
+ transform: scale(1); }
2591
+
2592
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
2593
+ position: relative;
2594
+ display: inline-block;
2595
+ padding: 3px 12px;
2596
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
2597
+ margin-left: -1px;
2598
+ transition: all 0.2s ease;
2599
+ cursor: pointer; }
2600
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:not(:first-child) {
2601
+ border-left: 1px solid transparent; }
2602
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
2603
+ background-color: var(--react-autoql-accent-color, #26a7df);
2604
+ border-color: var(--react-autoql-accent-color, #26a7df);
2605
+ color: #fff; }
2606
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
2607
+ background-color: inherit;
2608
+ color: var(--react-autoql-accent-color, #26a7df); }
2609
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
2610
+ border-color: var(--react-autoql-accent-color, #26a7df);
2611
+ color: var(--react-autoql-accent-color, #26a7df); }
2612
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
2613
+ border-top-left-radius: 4px;
2614
+ border-bottom-left-radius: 4px;
2615
+ margin-left: 0; }
2616
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
2617
+ border-top-right-radius: 4px;
2618
+ border-bottom-right-radius: 4px; }
2619
+
2427
2620
  .content {
2428
2621
  margin: 2rem; }
2429
2622
 
@@ -2522,120 +2715,211 @@ span.react-autoql-icon {
2522
2715
  background: var(--react-autoql-background-color-tertiary);
2523
2716
  border: 1px solid var(--react-autoql-background-color-tertiary); }
2524
2717
 
2525
- .react-autoql-checkbox--switch__input::before {
2526
- top: 2px;
2527
- right: 18px;
2528
- bottom: 2px;
2529
- left: 2px;
2530
- border-radius: 50%;
2531
- background: #fff; }
2718
+ .react-autoql-checkbox--switch__input::before {
2719
+ top: 2px;
2720
+ right: 18px;
2721
+ bottom: 2px;
2722
+ left: 2px;
2723
+ border-radius: 50%;
2724
+ background: #fff; }
2725
+
2726
+ .react-autoql-checkbox--switch__input:checked
2727
+ + .react-autoql-checkbox--switch__label::after {
2728
+ content: 'on'; }
2729
+
2730
+ .react-autoql-checkbox--switch__input:checked::before {
2731
+ right: 2px;
2732
+ left: 18px;
2733
+ top: 2px;
2734
+ bottom: 2px; }
2735
+
2736
+ .react-autoql-checkbox-label {
2737
+ padding-left: 6px;
2738
+ line-height: 100%; }
2739
+
2740
+ .react-autoql-modal-container
2741
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
2742
+ .react-autoql-drawer
2743
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
2744
+ border-color: var(--react-autoql-accent-color); }
2745
+
2746
+ .react-autoql-modal-container
2747
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
2748
+ .react-autoql-drawer
2749
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
2750
+ background: var(--react-autoql-accent-color); }
2751
+
2752
+ .query-tips-page-container {
2753
+ height: 100%;
2754
+ padding: 10px; }
2755
+ .query-tips-page-container .chat-bar-input-icon {
2756
+ top: 20px;
2757
+ left: 26px; }
2758
+ .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2759
+ padding-left: 46px; }
2760
+
2761
+ .query-tips-result-container {
2762
+ color: var(--react-autoql-text-color-primary);
2763
+ padding: 0px 20px;
2764
+ text-align: center;
2765
+ max-width: 550px;
2766
+ margin: 0 auto; }
2767
+ .query-tips-result-container .query-tip-list-container {
2768
+ margin-bottom: 20px; }
2769
+ .query-tips-result-container .animated-item {
2770
+ -webkit-animation: fadeIn 0.3s linear;
2771
+ animation: fadeIn 0.3s linear;
2772
+ -webkit-animation-fill-mode: both;
2773
+ animation-fill-mode: both; }
2774
+ .query-tips-result-container .query-tip-item {
2775
+ position: relative;
2776
+ padding: 13px;
2777
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
2778
+ cursor: pointer; }
2779
+ .query-tips-result-container .query-tip-item:first-child {
2780
+ border-top: none; }
2781
+ .query-tips-result-container .query-tip-item .execute-btn {
2782
+ position: absolute;
2783
+ right: 10px;
2784
+ top: 4px;
2785
+ font-size: 20px;
2786
+ visibility: hidden;
2787
+ opacity: 0; }
2788
+ .query-tips-result-container .query-tip-item:hover {
2789
+ font-weight: bold;
2790
+ color: var(--react-autoql-accent-color); }
2791
+ .query-tips-result-container .query-tip-item:hover .execute-btn {
2792
+ visibility: visible;
2793
+ opacity: 1; }
2794
+ .query-tips-result-container .query-tips-result-placeholder {
2795
+ margin-top: 50px;
2796
+ opacity: 0.6; }
2797
+
2798
+ .chat-bar-loading-spinner {
2799
+ position: absolute;
2800
+ right: 20px;
2801
+ top: 22px; }
2532
2802
 
2533
- .react-autoql-checkbox--switch__input:checked
2534
- + .react-autoql-checkbox--switch__label::after {
2535
- content: 'on'; }
2803
+ #react-paginate {
2804
+ position: relative;
2805
+ background: transparent;
2806
+ padding: 8px; }
2807
+ #react-paginate ul {
2808
+ display: inline-block;
2809
+ padding-left: 0;
2810
+ margin-bottom: 0; }
2811
+ #react-paginate li {
2812
+ display: inline-block;
2813
+ color: var(--react-autoql-text-color-primary);
2814
+ cursor: pointer;
2815
+ margin-right: 3px;
2816
+ border-radius: 5px;
2817
+ margin-bottom: 0;
2818
+ -webkit-user-select: none;
2819
+ -moz-user-select: none;
2820
+ -ms-user-select: none;
2821
+ user-select: none; }
2822
+ #react-paginate li:hover {
2823
+ opacity: 0.7;
2824
+ border-radius: 50%; }
2825
+ #react-paginate li a {
2826
+ display: inline-block;
2827
+ color: var(--react-autoql-text-color-primary);
2828
+ outline: none;
2829
+ width: 28px;
2830
+ height: 28px;
2831
+ line-height: 28px; }
2832
+ #react-paginate li.selected {
2833
+ background: var(--react-autoql-accent-color);
2834
+ border-radius: 50%;
2835
+ outline: none; }
2836
+ #react-paginate li.selected a {
2837
+ color: var(--react-autoql-accent-text-color); }
2838
+ #react-paginate .pagination-next.disabled,
2839
+ #react-paginate .pagination-previous.disabled {
2840
+ opacity: 0.5;
2841
+ pointer-events: none; }
2842
+ #react-paginate .pagination-previous,
2843
+ #react-paginate .pagination-next {
2844
+ position: absolute;
2845
+ font-size: 18px; }
2846
+ #react-paginate .pagination-previous a,
2847
+ #react-paginate .pagination-next a {
2848
+ color: var(--react-autoql-text-color-primary); }
2849
+ #react-paginate .pagination-previous {
2850
+ left: 20px; }
2851
+ #react-paginate .pagination-next {
2852
+ right: 20px; }
2536
2853
 
2537
- .react-autoql-checkbox--switch__input:checked::before {
2538
- right: 2px;
2539
- left: 18px;
2540
- top: 2px;
2541
- bottom: 2px; }
2854
+ .animated-item:nth-child(1) {
2855
+ -webkit-animation-delay: 0.08s;
2856
+ animation-delay: 0.08s; }
2542
2857
 
2543
- .react-autoql-checkbox-label {
2544
- padding-left: 6px;
2545
- line-height: 100%; }
2858
+ .animated-item:nth-child(2) {
2859
+ -webkit-animation-delay: 0.16s;
2860
+ animation-delay: 0.16s; }
2546
2861
 
2547
- .react-autoql-modal-container
2548
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
2549
- .react-autoql-drawer
2550
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
2551
- border-color: var(--react-autoql-accent-color); }
2862
+ .animated-item:nth-child(3) {
2863
+ -webkit-animation-delay: 0.24s;
2864
+ animation-delay: 0.24s; }
2552
2865
 
2553
- .react-autoql-modal-container
2554
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
2555
- .react-autoql-drawer
2556
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
2557
- background: var(--react-autoql-accent-color); }
2866
+ .animated-item:nth-child(4) {
2867
+ -webkit-animation-delay: 0.32s;
2868
+ animation-delay: 0.32s; }
2558
2869
 
2870
+ .animated-item:nth-child(5) {
2871
+ -webkit-animation-delay: 0.4s;
2872
+ animation-delay: 0.4s; }
2559
2873
 
2560
- .ReactModal__Overlay {
2561
- background-color: transparent !important;
2562
- transition: background-color 0.2s ease-in-out;
2563
- z-index: 9999; }
2874
+ .animated-item:nth-child(6) {
2875
+ -webkit-animation-delay: 0.48s;
2876
+ animation-delay: 0.48s; }
2564
2877
 
2565
- .ReactModal__Overlay--after-open {
2566
- background-color: rgba(0, 0, 0, 0.25) !important; }
2878
+ .animated-item:nth-child(7) {
2879
+ -webkit-animation-delay: 0.56s;
2880
+ animation-delay: 0.56s; }
2567
2881
 
2568
- .ReactModal__Overlay--before-close {
2569
- background-color: transparent !important; }
2882
+ .animated-item:nth-child(8) {
2883
+ -webkit-animation-delay: 0.64s;
2884
+ animation-delay: 0.64s; }
2570
2885
 
2571
- .ReactModal__Content {
2572
- display: flex;
2573
- flex-direction: column;
2574
- transform: scale(0);
2575
- transition: all 0.2s ease-in-out;
2576
- color: var(--react-autoql-text-color-primary);
2577
- border: 1px solid var(--react-autoql-border-color) !important;
2578
- background: var(--react-autoql-background-color-primary) !important;
2579
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2580
- padding: 0 !important;
2581
- margin: auto auto;
2582
- max-width: 90vw;
2583
- max-height: calc(100vh - 90px); }
2584
- .ReactModal__Content input.react-autoql-input,
2585
- .ReactModal__Content textarea.react-autoql-input,
2586
- .ReactModal__Content textarea {
2587
- border-color: var(--react-autoql-border-color);
2588
- color: var(--react-autoql-text-color-primary);
2589
- background: var(--react-autoql-background-color-primary, white); }
2590
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2591
- color: var(--react-autoql-text-color-placeholder); }
2592
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2593
- color: var(--react-autoql-text-color-placeholder); }
2594
- .ReactModal__Content input.react-autoql-input::placeholder,
2595
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2596
- .ReactModal__Content textarea::placeholder {
2597
- color: var(--react-autoql-text-color-placeholder); }
2886
+ .animated-item:nth-child(9) {
2887
+ -webkit-animation-delay: 0.72s;
2888
+ animation-delay: 0.72s; }
2598
2889
 
2599
- .ReactModal__Overlay--after-open .ReactModal__Content {
2600
- transform: scale(1); }
2890
+ .animated-item:nth-child(10) {
2891
+ -webkit-animation-delay: 0.8s;
2892
+ animation-delay: 0.8s; }
2601
2893
 
2602
- .ReactModal__Overlay--before-close .ReactModal__Content {
2603
- transform: scale(0); }
2894
+ .animated-item:nth-child(11) {
2895
+ -webkit-animation-delay: 0.88s;
2896
+ animation-delay: 0.88s; }
2604
2897
 
2605
- .react-autoql-modal-header {
2606
- position: relative;
2607
- text-align: center;
2608
- flex: 0 0 52px;
2609
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2610
- padding: 14px 60px;
2611
- font-size: 16px; }
2898
+ .animated-item:nth-child(12) {
2899
+ -webkit-animation-delay: 0.96s;
2900
+ animation-delay: 0.96s; }
2612
2901
 
2613
- .react-autoql-modal-footer {
2614
- position: relative;
2615
- flex: 0 0 52px;
2616
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2617
- text-align: right;
2618
- padding: 8px 10px; }
2902
+ .animated-item:nth-child(13) {
2903
+ -webkit-animation-delay: 1.04s;
2904
+ animation-delay: 1.04s; }
2619
2905
 
2620
- .react-autoql-modal-body {
2621
- display: flex;
2622
- flex-direction: column;
2623
- padding: 25px;
2624
- flex: 1;
2625
- overflow: hidden; }
2626
- .react-autoql-modal-body h3 {
2627
- color: var(--react-autoql-text-color-primary); }
2906
+ .animated-item:nth-child(14) {
2907
+ -webkit-animation-delay: 1.12s;
2908
+ animation-delay: 1.12s; }
2628
2909
 
2629
- .react-autoql-modal-close-btn {
2630
- position: absolute !important;
2631
- top: 10px;
2632
- right: 18px;
2633
- font-size: 22px;
2634
- opacity: 0.6 !important;
2635
- cursor: pointer; }
2910
+ .animated-item:nth-child(15) {
2911
+ -webkit-animation-delay: 1.2s;
2912
+ animation-delay: 1.2s; }
2636
2913
 
2637
- .react-autoql-modal-close-btn:hover {
2638
- opacity: 1 !important; }
2914
+ @-webkit-keyframes fadeIn {
2915
+ 0% {
2916
+ opacity: 0;
2917
+ top: 100px; }
2918
+ 75% {
2919
+ opacity: 0.5;
2920
+ top: 0px; }
2921
+ 100% {
2922
+ opacity: 1; } }
2639
2923
 
2640
2924
  .react-autoql-cascader {
2641
2925
  position: relative;
@@ -2691,6 +2975,41 @@ span.react-autoql-icon {
2691
2975
  .react-autoql-cascader .options-container:not(:last-child) {
2692
2976
  border-right: 1px solid #d3d3d352; }
2693
2977
 
2978
+ .autoql-options-toolbar {
2979
+ position: absolute;
2980
+ background: inherit;
2981
+ padding: 5px;
2982
+ border-radius: 6px;
2983
+ line-height: 28px;
2984
+ background: var(--react-autoql-background-color-primary);
2985
+ border: 1px solid var(--react-autoql-border-color); }
2986
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2987
+ display: block; }
2988
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2989
+ color: var(--react-autoql-text-color-primary); }
2990
+
2991
+ .copy-sql-modal-content {
2992
+ position: relative;
2993
+ height: 60vh; }
2994
+ .copy-sql-modal-content .copy-sql-formatted-text {
2995
+ height: 100%;
2996
+ width: 100%;
2997
+ padding: 10px;
2998
+ resize: none;
2999
+ background: var(--react-autoql-background-color-secondary); }
3000
+ .copy-sql-modal-content .copy-sql-btn {
3001
+ color: var(--react-autoql-text-color);
3002
+ background-color: var(--react-autoql-background-color-primary);
3003
+ position: absolute;
3004
+ top: 3px;
3005
+ right: 0;
3006
+ opacity: 0;
3007
+ transition: opacity 0.3s ease; }
3008
+ .copy-sql-modal-content .sql-copied {
3009
+ color: var(--react-autoql-success-color) !important; }
3010
+ .copy-sql-modal-content:hover .copy-sql-btn {
3011
+ opacity: 1; }
3012
+
2694
3013
  .chat-single-message-container {
2695
3014
  transition: background-color 0.2s ease;
2696
3015
  padding-top: 6px;
@@ -2708,6 +3027,9 @@ span.react-autoql-icon {
2708
3027
  cursor: pointer; }
2709
3028
  .chat-single-message-container .query-more-btn:hover {
2710
3029
  opacity: 1; }
3030
+ .chat-single-message-container .spinner-loader:after {
3031
+ border: 1px solid var(--react-autoql-accent-color);
3032
+ border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent; }
2711
3033
 
2712
3034
  .chat-condition-item-container {
2713
3035
  position: absolute;
@@ -2903,213 +3225,6 @@ span.react-autoql-icon {
2903
3225
  transform: scale(1);
2904
3226
  transform-origin: 0% 100%; } }
2905
3227
 
2906
- .autoql-options-toolbar {
2907
- position: absolute;
2908
- background: inherit;
2909
- padding: 5px;
2910
- border-radius: 6px;
2911
- line-height: 28px;
2912
- background: var(--react-autoql-background-color-primary);
2913
- border: 1px solid var(--react-autoql-border-color); }
2914
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2915
- display: block; }
2916
- .autoql-options-toolbar .react-autoql-toolbar-btn {
2917
- color: var(--react-autoql-text-color-primary); }
2918
-
2919
- .copy-sql-modal-content {
2920
- position: relative;
2921
- height: 60vh; }
2922
- .copy-sql-modal-content .copy-sql-formatted-text {
2923
- height: 100%;
2924
- width: 100%;
2925
- padding: 10px;
2926
- resize: none;
2927
- background: var(--react-autoql-background-color-secondary); }
2928
- .copy-sql-modal-content .copy-sql-btn {
2929
- color: var(--react-autoql-text-color);
2930
- background-color: var(--react-autoql-background-color-primary);
2931
- position: absolute;
2932
- top: 3px;
2933
- right: 0;
2934
- opacity: 0;
2935
- transition: opacity 0.3s ease; }
2936
- .copy-sql-modal-content .sql-copied {
2937
- color: var(--react-autoql-success-color) !important; }
2938
- .copy-sql-modal-content:hover .copy-sql-btn {
2939
- opacity: 1; }
2940
-
2941
- .query-tips-page-container {
2942
- height: 100%;
2943
- padding: 10px; }
2944
- .query-tips-page-container .chat-bar-input-icon {
2945
- top: 20px;
2946
- left: 26px; }
2947
- .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2948
- padding-left: 46px; }
2949
-
2950
- .query-tips-result-container {
2951
- color: var(--react-autoql-text-color-primary);
2952
- padding: 0px 20px;
2953
- text-align: center;
2954
- max-width: 550px;
2955
- margin: 0 auto; }
2956
- .query-tips-result-container .query-tip-list-container {
2957
- margin-bottom: 20px; }
2958
- .query-tips-result-container .animated-item {
2959
- -webkit-animation: fadeIn 0.3s linear;
2960
- animation: fadeIn 0.3s linear;
2961
- -webkit-animation-fill-mode: both;
2962
- animation-fill-mode: both; }
2963
- .query-tips-result-container .query-tip-item {
2964
- position: relative;
2965
- padding: 13px;
2966
- border-top: 1px solid rgba(0, 0, 0, 0.04);
2967
- cursor: pointer; }
2968
- .query-tips-result-container .query-tip-item:first-child {
2969
- border-top: none; }
2970
- .query-tips-result-container .query-tip-item .execute-btn {
2971
- position: absolute;
2972
- right: 10px;
2973
- top: 4px;
2974
- font-size: 20px;
2975
- visibility: hidden;
2976
- opacity: 0; }
2977
- .query-tips-result-container .query-tip-item:hover {
2978
- font-weight: bold;
2979
- color: var(--react-autoql-accent-color); }
2980
- .query-tips-result-container .query-tip-item:hover .execute-btn {
2981
- visibility: visible;
2982
- opacity: 1; }
2983
- .query-tips-result-container .query-tips-result-placeholder {
2984
- margin-top: 50px;
2985
- opacity: 0.6; }
2986
-
2987
- .chat-bar-loading-spinner {
2988
- position: absolute;
2989
- right: 20px;
2990
- top: 22px; }
2991
-
2992
- #react-paginate {
2993
- position: relative;
2994
- background: transparent;
2995
- padding: 8px; }
2996
- #react-paginate ul {
2997
- display: inline-block;
2998
- padding-left: 0;
2999
- margin-bottom: 0; }
3000
- #react-paginate li {
3001
- display: inline-block;
3002
- color: var(--react-autoql-text-color-primary);
3003
- cursor: pointer;
3004
- margin-right: 3px;
3005
- border-radius: 5px;
3006
- margin-bottom: 0;
3007
- -webkit-user-select: none;
3008
- -moz-user-select: none;
3009
- -ms-user-select: none;
3010
- user-select: none; }
3011
- #react-paginate li:hover {
3012
- opacity: 0.7;
3013
- border-radius: 50%; }
3014
- #react-paginate li a {
3015
- display: inline-block;
3016
- color: var(--react-autoql-text-color-primary);
3017
- outline: none;
3018
- width: 28px;
3019
- height: 28px;
3020
- line-height: 28px; }
3021
- #react-paginate li.selected {
3022
- background: var(--react-autoql-accent-color);
3023
- border-radius: 50%;
3024
- outline: none; }
3025
- #react-paginate li.selected a {
3026
- color: var(--react-autoql-accent-text-color); }
3027
- #react-paginate .pagination-next.disabled,
3028
- #react-paginate .pagination-previous.disabled {
3029
- opacity: 0.5;
3030
- pointer-events: none; }
3031
- #react-paginate .pagination-previous,
3032
- #react-paginate .pagination-next {
3033
- position: absolute;
3034
- font-size: 18px; }
3035
- #react-paginate .pagination-previous a,
3036
- #react-paginate .pagination-next a {
3037
- color: var(--react-autoql-text-color-primary); }
3038
- #react-paginate .pagination-previous {
3039
- left: 20px; }
3040
- #react-paginate .pagination-next {
3041
- right: 20px; }
3042
-
3043
- .animated-item:nth-child(1) {
3044
- -webkit-animation-delay: 0.08s;
3045
- animation-delay: 0.08s; }
3046
-
3047
- .animated-item:nth-child(2) {
3048
- -webkit-animation-delay: 0.16s;
3049
- animation-delay: 0.16s; }
3050
-
3051
- .animated-item:nth-child(3) {
3052
- -webkit-animation-delay: 0.24s;
3053
- animation-delay: 0.24s; }
3054
-
3055
- .animated-item:nth-child(4) {
3056
- -webkit-animation-delay: 0.32s;
3057
- animation-delay: 0.32s; }
3058
-
3059
- .animated-item:nth-child(5) {
3060
- -webkit-animation-delay: 0.4s;
3061
- animation-delay: 0.4s; }
3062
-
3063
- .animated-item:nth-child(6) {
3064
- -webkit-animation-delay: 0.48s;
3065
- animation-delay: 0.48s; }
3066
-
3067
- .animated-item:nth-child(7) {
3068
- -webkit-animation-delay: 0.56s;
3069
- animation-delay: 0.56s; }
3070
-
3071
- .animated-item:nth-child(8) {
3072
- -webkit-animation-delay: 0.64s;
3073
- animation-delay: 0.64s; }
3074
-
3075
- .animated-item:nth-child(9) {
3076
- -webkit-animation-delay: 0.72s;
3077
- animation-delay: 0.72s; }
3078
-
3079
- .animated-item:nth-child(10) {
3080
- -webkit-animation-delay: 0.8s;
3081
- animation-delay: 0.8s; }
3082
-
3083
- .animated-item:nth-child(11) {
3084
- -webkit-animation-delay: 0.88s;
3085
- animation-delay: 0.88s; }
3086
-
3087
- .animated-item:nth-child(12) {
3088
- -webkit-animation-delay: 0.96s;
3089
- animation-delay: 0.96s; }
3090
-
3091
- .animated-item:nth-child(13) {
3092
- -webkit-animation-delay: 1.04s;
3093
- animation-delay: 1.04s; }
3094
-
3095
- .animated-item:nth-child(14) {
3096
- -webkit-animation-delay: 1.12s;
3097
- animation-delay: 1.12s; }
3098
-
3099
- .animated-item:nth-child(15) {
3100
- -webkit-animation-delay: 1.2s;
3101
- animation-delay: 1.2s; }
3102
-
3103
- @-webkit-keyframes fadeIn {
3104
- 0% {
3105
- opacity: 0;
3106
- top: 100px; }
3107
- 75% {
3108
- opacity: 0.5;
3109
- top: 0px; }
3110
- 100% {
3111
- opacity: 1; } }
3112
-
3113
3228
  .react-autoql-table-container {
3114
3229
  flex: 1;
3115
3230
  max-width: 100%;
@@ -3393,6 +3508,7 @@ span.react-autoql-icon {
3393
3508
  background: var(--react-autoql-background-color-primary);
3394
3509
  padding: 5px; }
3395
3510
 
3511
+
3396
3512
  .viz-toolbar {
3397
3513
  position: absolute;
3398
3514
  background: inherit;
@@ -3424,77 +3540,56 @@ span.react-autoql-icon {
3424
3540
  .react-autoql-toolbar-btn:hover {
3425
3541
  opacity: 0.7; }
3426
3542
 
3427
-
3428
- .react-autoql-radio-btn-container {
3429
- display: inline-block;
3430
- border-radius: 4px; }
3431
- .react-autoql-radio-btn-container [type='radio']:checked,
3432
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3433
- position: absolute;
3434
- left: -9999px; }
3435
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3436
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3437
- position: relative;
3438
- padding-left: 28px;
3439
- cursor: pointer;
3440
- line-height: 20px;
3441
- display: inline-block; }
3442
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3443
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3444
- content: '';
3445
- position: absolute;
3446
- left: 1px;
3447
- top: 1px;
3448
- width: 18px;
3449
- height: 18px;
3450
- border: 1px solid #ddd;
3451
- border-radius: 100%;
3452
- background: #fff; }
3453
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3454
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3455
- content: '';
3456
- width: 12px;
3457
- height: 12px;
3458
- background: var(--react-autoql-accent-color, #26a7df);
3543
+ .react-autoql-input-container {
3544
+ position: relative;
3545
+ margin: 2px 5px;
3546
+ display: inline-block; }
3547
+ .react-autoql-input-container .react-autoql-input {
3548
+ border: 1px solid rgba(0, 0, 0, 0.1);
3549
+ border-radius: 4px;
3550
+ line-height: 32px;
3551
+ min-height: 34px;
3552
+ padding: 0 10px;
3553
+ width: 100%;
3554
+ outline: none !important;
3555
+ transition: all 0.2s ease;
3556
+ transition-property: border-color, color, opacity; }
3557
+ .react-autoql-input-container .react-autoql-input.with-icon {
3558
+ padding-left: 38px; }
3559
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3560
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3561
+ color: rgba(0, 0, 0, 0.2);
3562
+ opacity: 1;
3563
+ /* Firefox */
3564
+ font-style: italic; }
3565
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3566
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3567
+ color: rgba(0, 0, 0, 0.2);
3568
+ opacity: 1;
3569
+ /* Firefox */
3570
+ font-style: italic; }
3571
+ .react-autoql-input-container .react-autoql-input::placeholder {
3572
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3573
+ color: rgba(0, 0, 0, 0.2);
3574
+ opacity: 1;
3575
+ /* Firefox */
3576
+ font-style: italic; }
3577
+ .react-autoql-input-container .react-autoql-input-icon {
3459
3578
  position: absolute;
3460
- top: 4px;
3461
- left: 4px;
3462
- border-radius: 100%;
3579
+ left: 12px;
3580
+ top: 8px;
3581
+ opacity: 0.4;
3463
3582
  transition: all 0.2s ease; }
3464
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3465
- opacity: 0;
3466
- transform: scale(0); }
3467
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3583
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3584
+ height: 17px;
3585
+ width: 17px; }
3586
+ .react-autoql-input-container:hover .react-autoql-input,
3587
+ .react-autoql-input-container .react-autoql-input:focus {
3588
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3589
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3590
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3468
3591
  opacity: 1;
3469
- transform: scale(1); }
3470
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3471
- position: relative;
3472
- display: inline-block;
3473
- padding: 3px 12px;
3474
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3475
- margin-left: -1px;
3476
- transition: all 0.2s ease;
3477
- cursor: pointer; }
3478
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3479
- background-color: var(--react-autoql-accent-color, #26a7df);
3480
- border-color: var(--react-autoql-accent-color, #26a7df);
3481
- color: #fff;
3482
- z-index: 3; }
3483
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3484
- background-color: inherit;
3485
- color: var(--react-autoql-accent-color, #26a7df);
3486
- z-index: 3; }
3487
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3488
- border-color: var(--react-autoql-accent-color, #26a7df);
3489
- color: var(--react-autoql-accent-color, #26a7df);
3490
- z-index: 2; }
3491
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3492
- border-top-left-radius: 4px;
3493
- border-bottom-left-radius: 4px;
3494
- margin-left: 0; }
3495
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3496
- border-top-right-radius: 4px;
3497
- border-bottom-right-radius: 4px; }
3592
+ color: var(--react-autoql-accent-color, #26a7df); }
3498
3593
 
3499
3594
  .react-autoql-steps-container {
3500
3595
  margin: 10px; }
@@ -3565,56 +3660,58 @@ span.react-autoql-icon {
3565
3660
  transition-duration: 0.5s;
3566
3661
  opacity: 1; }
3567
3662
 
3568
- .react-autoql-input-container {
3569
- position: relative;
3570
- margin: 2px 5px;
3571
- display: inline-block; }
3572
- .react-autoql-input-container .react-autoql-input {
3573
- border: 1px solid rgba(0, 0, 0, 0.1);
3663
+ .react-autoql-notification-rule-container {
3664
+ display: flex; }
3665
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3666
+ display: flex;
3667
+ flex-direction: column;
3668
+ flex: 1;
3669
+ width: 100%; }
3670
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3671
+ display: flex;
3672
+ flex: 1; }
3673
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3674
+ display: flex;
3675
+ padding: 2px 0;
3574
3676
  border-radius: 4px;
3575
- line-height: 32px;
3576
- min-height: 34px;
3577
- padding: 0 10px;
3578
- width: 100%;
3579
- outline: none !important;
3580
- transition: all 0.2s ease;
3581
- transition-property: border-color, color, opacity; }
3582
- .react-autoql-input-container .react-autoql-input.with-icon {
3583
- padding-left: 38px; }
3584
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3585
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3586
- color: rgba(0, 0, 0, 0.2);
3587
- opacity: 1;
3588
- /* Firefox */
3589
- font-style: italic; }
3590
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3591
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3592
- color: rgba(0, 0, 0, 0.2);
3593
- opacity: 1;
3594
- /* Firefox */
3595
- font-style: italic; }
3596
- .react-autoql-input-container .react-autoql-input::placeholder {
3597
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3598
- color: rgba(0, 0, 0, 0.2);
3599
- opacity: 1;
3600
- /* Firefox */
3601
- font-style: italic; }
3602
- .react-autoql-input-container .react-autoql-input-icon {
3603
- position: absolute;
3604
- left: 12px;
3605
- top: 8px;
3606
- opacity: 0.4;
3607
- transition: all 0.2s ease; }
3608
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3609
- height: 17px;
3610
- width: 17px; }
3611
- .react-autoql-input-container:hover .react-autoql-input,
3612
- .react-autoql-input-container .react-autoql-input:focus {
3613
- border-color: var(--react-autoql-accent-color, #26a7df); }
3614
- .react-autoql-input-container:hover .react-autoql-input-icon,
3615
- .react-autoql-input-container .react-autoql-input-icon.focus {
3616
- opacity: 1;
3617
- color: var(--react-autoql-accent-color, #26a7df); }
3677
+ transition: all 0.3s ease;
3678
+ flex: 1; }
3679
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3680
+ flex: 0;
3681
+ flex-basis: 33px; }
3682
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3683
+ flex: 1;
3684
+ margin-left: 4px; }
3685
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3686
+ cursor: pointer;
3687
+ opacity: 0.6;
3688
+ padding: 6px; }
3689
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3690
+ opacity: 1; }
3691
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3692
+ display: none; }
3693
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3694
+ margin: 0; }
3695
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3696
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3697
+ + .react-autoql-rule-term-type-selector {
3698
+ color: var(--react-autoql-accent-color, #26a7df);
3699
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3700
+
3701
+ .read-only-rule-term {
3702
+ display: inline-block;
3703
+ border: 1px solid rgba(0, 0, 0, 0.06);
3704
+ background: rgba(0, 0, 0, 0.02);
3705
+ padding: 3px 7px;
3706
+ line-height: 1.5em;
3707
+ margin-right: 5px;
3708
+ margin-bottom: 2px;
3709
+ margin-top: 2px;
3710
+ border-radius: 4px; }
3711
+
3712
+ .expression-term-validation-error {
3713
+ padding: 0 10px;
3714
+ color: var(--react-autoql-warning-color); }
3618
3715
 
3619
3716
  .notification-read-only-group {
3620
3717
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
@@ -3734,59 +3831,6 @@ span.react-autoql-icon {
3734
3831
  opacity: 1;
3735
3832
  color: var(--react-autoql-accent-color); }
3736
3833
 
3737
- .react-autoql-notification-rule-container {
3738
- display: flex; }
3739
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3740
- display: flex;
3741
- flex-direction: column;
3742
- flex: 1;
3743
- width: 100%; }
3744
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3745
- display: flex;
3746
- flex: 1; }
3747
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3748
- display: flex;
3749
- padding: 2px 0;
3750
- border-radius: 4px;
3751
- transition: all 0.3s ease;
3752
- flex: 1; }
3753
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3754
- flex: 0;
3755
- flex-basis: 33px; }
3756
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3757
- flex: 1;
3758
- margin-left: 4px; }
3759
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3760
- cursor: pointer;
3761
- opacity: 0.6;
3762
- padding: 6px; }
3763
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3764
- opacity: 1; }
3765
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3766
- display: none; }
3767
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3768
- margin: 0; }
3769
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3770
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3771
- + .react-autoql-rule-term-type-selector {
3772
- color: var(--react-autoql-accent-color, #26a7df);
3773
- border-color: var(--react-autoql-accent-color, #26a7df); }
3774
-
3775
- .read-only-rule-term {
3776
- display: inline-block;
3777
- border: 1px solid rgba(0, 0, 0, 0.06);
3778
- background: rgba(0, 0, 0, 0.02);
3779
- padding: 3px 7px;
3780
- line-height: 1.5em;
3781
- margin-right: 5px;
3782
- margin-bottom: 2px;
3783
- margin-top: 2px;
3784
- border-radius: 4px; }
3785
-
3786
- .expression-term-validation-error {
3787
- padding: 0 10px;
3788
- color: var(--react-autoql-warning-color); }
3789
-
3790
3834
  .spinner-loader {
3791
3835
  display: inline-block;
3792
3836
  width: 14px;
@@ -3800,8 +3844,8 @@ span.react-autoql-icon {
3800
3844
  height: 16px;
3801
3845
  margin: 0px;
3802
3846
  border-radius: 50%;
3803
- border: 1px solid var(--react-autoql-accent-color);
3804
- border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent;
3847
+ border: 1px solid currentColor;
3848
+ border-color: currentColor transparent currentColor transparent;
3805
3849
  -webkit-animation: spinner-loader 1.2s linear infinite;
3806
3850
  animation: spinner-loader 1.2s linear infinite; }
3807
3851
 
@@ -3819,6 +3863,44 @@ span.react-autoql-icon {
3819
3863
 
3820
3864
 
3821
3865
 
3866
+ .react-autoql-select {
3867
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3868
+ border-radius: 4px;
3869
+ background: var(--react-autoql-background-color-primary, white);
3870
+ display: inline-block;
3871
+ font-size: 13px;
3872
+ line-height: 32px;
3873
+ height: 34px;
3874
+ margin: 0 3px;
3875
+ padding: 0 11px;
3876
+ color: var(--react-autoql-accent-color, #26a7df);
3877
+ transition: all 0.2s ease;
3878
+ cursor: pointer; }
3879
+ .react-autoql-select:hover {
3880
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3881
+
3882
+ .react-autoql-select-popup-container {
3883
+ background: var(--react-autoql-background-color-primary, white);
3884
+ padding: 10px 0;
3885
+ max-height: 300px;
3886
+ overflow-y: auto; }
3887
+ .react-autoql-select-popup-container .react-autoql-select-option.active {
3888
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3889
+ .react-autoql-select-popup-container .react-autoql-select-popup {
3890
+ list-style-type: none;
3891
+ width: 100%;
3892
+ margin: 0;
3893
+ padding: 0; }
3894
+ .react-autoql-select-popup-container .react-autoql-select-popup li {
3895
+ color: var(--react-autoql-text-color-primary);
3896
+ width: 100%;
3897
+ height: 35px;
3898
+ line-height: 35px;
3899
+ padding: 0 20px;
3900
+ cursor: pointer; }
3901
+ .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3902
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3903
+
3822
3904
  .slack-modal-error-container,
3823
3905
  .slack-modal-empty-list-message {
3824
3906
  display: flex;
@@ -3964,44 +4046,6 @@ span.react-autoql-icon {
3964
4046
  .slack-channel-list-container .connect-channel-btn button {
3965
4047
  width: 200px; }
3966
4048
 
3967
- .react-autoql-select {
3968
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3969
- border-radius: 4px;
3970
- background: var(--react-autoql-background-color-primary, white);
3971
- display: inline-block;
3972
- font-size: 13px;
3973
- line-height: 32px;
3974
- height: 34px;
3975
- margin: 0 3px;
3976
- padding: 0 11px;
3977
- color: var(--react-autoql-accent-color, #26a7df);
3978
- transition: all 0.2s ease;
3979
- cursor: pointer; }
3980
- .react-autoql-select:hover {
3981
- border-color: var(--react-autoql-accent-color, #26a7df); }
3982
-
3983
- .react-autoql-select-popup-container {
3984
- background: var(--react-autoql-background-color-primary, white);
3985
- padding: 10px 0;
3986
- max-height: 300px;
3987
- overflow-y: auto; }
3988
- .react-autoql-select-popup-container .react-autoql-select-option.active {
3989
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3990
- .react-autoql-select-popup-container .react-autoql-select-popup {
3991
- list-style-type: none;
3992
- width: 100%;
3993
- margin: 0;
3994
- padding: 0; }
3995
- .react-autoql-select-popup-container .react-autoql-select-popup li {
3996
- color: var(--react-autoql-text-color-primary);
3997
- width: 100%;
3998
- height: 35px;
3999
- line-height: 35px;
4000
- padding: 0 20px;
4001
- cursor: pointer; }
4002
- .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4003
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4004
-
4005
4049
  .react-autoql-select-with-arrow div {
4006
4050
  color: inherit; }
4007
4051