react-autoql 3.4.6 → 3.4.7

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,358 +1,97 @@
1
- .react-autoql-response-content-container:not(.html-content) {
1
+ .react-autoql-bar-container {
2
2
  position: relative;
3
3
  display: flex;
4
- flex-direction: column;
5
- justify-content: center;
6
- align-items: center;
7
- background-color: inherit;
8
- font-size: 14px;
9
- height: 100%;
10
- width: 100%;
11
- overflow: hidden;
12
- color: var(--react-autoql-text-color-primary); }
13
-
14
- .react-autoql-response-content-container.html-content {
15
- position: relative;
16
- background-color: inherit;
17
- text-align: left;
18
- font-size: 14px;
19
- height: 100%;
20
- width: 100%;
21
- overflow: hidden;
22
- color: var(--react-autoql-text-color-primary); }
23
- .react-autoql-response-content-container.html-content table th {
24
- border-bottom: 2px solid var(--react-autoql-border-color); }
25
- .react-autoql-response-content-container.html-content table tr:not(:last-child) {
26
- border-bottom: 1px solid var(--react-autoql-border-color); }
27
- .react-autoql-response-content-container.html-content table td:not(:last-child) {
28
- border-right: 1px solid var(--react-autoql-border-color); }
29
- .react-autoql-response-content-container.html-content table th,
30
- .react-autoql-response-content-container.html-content table td {
31
- padding: 5px 10px; }
32
- .react-autoql-response-content-container.html-content * {
33
- font-size: inherit; }
34
- .react-autoql-response-content-container.html-content sup,
35
- .react-autoql-response-content-container.html-content sub {
36
- font-size: 10px; }
37
- .react-autoql-response-content-container.html-content > *:first-child {
38
- margin-top: 0 !important; }
39
- .react-autoql-response-content-container.html-content > *:last-child {
40
- margin-bottom: 0 !important; }
41
- .react-autoql-response-content-container.html-content caption {
42
- display: table-caption;
43
- text-align: -webkit-center;
44
- padding-top: unset;
45
- padding-bottom: unset;
46
- color: unset;
47
- text-align: unset;
48
- caption-side: unset; }
49
-
50
- .react-autoql-response-content-container.table {
51
- max-height: 100vh !important;
52
- overflow-y: scroll;
53
- scrollbar-width: none; }
54
-
55
- .react-autoql-response-content-container.table::-webkit-scrollbar {
56
- width: 0;
57
- height: 0; }
4
+ flex-direction: row; }
58
5
 
59
- .react-autoql-suggestion-btn {
60
- padding: 6px 14px;
61
- background: transparent;
6
+ .react-autoql-chatbar-input {
7
+ padding: 10px;
8
+ padding-left: 20px;
9
+ margin: 10px;
10
+ height: 42px;
11
+ box-sizing: border-box;
12
+ border-radius: 24px;
13
+ font-size: 16px;
62
14
  font-family: inherit;
63
- font-size: 12px;
64
- margin-bottom: 5px;
15
+ letter-spacing: 0.04em;
65
16
  outline: none !important;
66
- cursor: pointer;
67
- letter-spacing: 0.05em;
68
- transition: all 0.1s ease;
69
- border: 1px solid rgba(0, 0, 0, 0.15);
70
- border-radius: 5px;
71
- color: inherit; }
17
+ width: calc(100% - 20px);
18
+ font-family: inherit;
19
+ /* Default styles outside of data messenger */
20
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
21
+ background: var(--react-autoql-background-color-primary);
22
+ color: #5d5d5d; }
72
23
 
73
- .react-autoql-suggestion-btn:hover {
74
- border-color: transparent;
75
- color: white;
76
- background: var(--react-autoql-accent-color); }
24
+ .react-autoql-chatbar-input.left-padding {
25
+ padding-left: 54px; }
77
26
 
78
- .react-autoql-help-link-btn {
79
- padding: 6px 14px;
80
- background: transparent;
81
- border-radius: 5px;
82
- font-family: inherit;
83
- font-size: 12px;
84
- margin-top: 5px;
85
- outline: none !important;
86
- cursor: pointer;
87
- letter-spacing: 0.05em;
88
- transition: all 0.1s ease;
89
- border-color: #e2e2e26e;
90
- color: inherit; }
27
+ .react-autoql-chatbar-input:disabled {
28
+ background: rgba(0, 0, 0, 0.03); }
91
29
 
92
- .react-autoql-help-link-btn:hover {
93
- opacity: 0.7; }
30
+ .react-autoql-chatbar-input:not(:disabled):hover {
31
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
94
32
 
95
- .react-autoql-help-link-icon {
96
- width: 15px;
97
- height: 15px;
98
- margin-bottom: -3px;
99
- margin-right: 3px; }
33
+ .react-autoql-chatbar-input::-moz-placeholder {
34
+ /* Default color outside of data messenger */
35
+ color: #999 !important; }
100
36
 
101
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
102
- color: var(--react-autoql-success-color); }
37
+ .react-autoql-chatbar-input:-ms-input-placeholder {
38
+ /* Default color outside of data messenger */
39
+ color: #999 !important; }
103
40
 
104
- .react-autoql-suggestion-message {
105
- height: 100%;
106
- width: 100%;
107
- word-break: break-word; }
41
+ .react-autoql-chatbar-input::placeholder {
42
+ /* Default color outside of data messenger */
43
+ color: #999 !important; }
108
44
 
109
- .react-autoql-suggestions-select {
45
+ /* autosuggest */
46
+ .react-autoql-bar-container .react-autosuggest__container,
47
+ .react-autoql-chatbar-input-container {
110
48
  position: relative;
111
- display: inline-block;
112
- height: 30px;
113
- background: none;
114
- outline: none !important;
115
- border: 1px solid;
116
- font-family: inherit;
117
- letter-spacing: 0.05em;
118
- color: #28a8e0;
119
- cursor: pointer;
120
- font-size: inherit; }
121
-
122
- .no-columns-error-message {
123
- position: absolute;
124
- height: 100%;
125
- width: 100%;
126
- display: flex;
127
- justify-content: center;
128
- flex-direction: column;
129
- text-align: center;
130
- padding: 20px;
131
- font-size: 13px; }
132
- .no-columns-error-message .warning-icon {
133
- font-size: 22px;
134
- display: block;
135
- margin-bottom: -13px;
136
- text-align: center; }
137
- .no-columns-error-message .eye-icon {
138
- vertical-align: bottom;
139
- line-height: 18px; }
49
+ flex: 1; }
140
50
 
141
- /* query validation */
142
- .react-autoql-query-validation-selector-container {
143
- display: inline-block;
144
- position: relative; }
51
+ .react-autoql-bar-container .react-autosuggest__input--focused {
52
+ outline: none; }
145
53
 
146
- .react-autoql-select-popup-container.query-validation-select {
147
- padding: 5px 0;
148
- letter-spacing: 0.03em;
149
- font-family: var(--react-autoql-font-family), sans-serif; }
150
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
151
- height: unset;
152
- font-size: 14px;
153
- line-height: 24px;
154
- padding: 0 15px; }
155
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
156
- color: #d84830; }
54
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
55
+ display: none; }
157
56
 
158
- .react-autoql-query-validation-query {
159
- text-align: center; }
57
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
58
+ display: none; }
160
59
 
161
- .react-autoql-query-validation-execute-btn {
162
- height: 38px;
163
- background: none;
164
- border-radius: 4px;
165
- margin-top: 24px;
166
- width: 100%;
167
- color: inherit;
168
- cursor: pointer;
169
- outline: none !important;
170
- border-color: #e2e2e26e;
171
- transition: all 0.2s ease; }
60
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
61
+ position: absolute;
62
+ top: 45px;
63
+ bottom: unset;
64
+ margin: 10px;
65
+ padding-top: 5px;
66
+ padding-bottom: 5px;
67
+ display: block;
68
+ width: calc(100% - 20px);
69
+ height: unset;
70
+ border-radius: 24px;
71
+ font-family: inherit;
72
+ font-size: 15px;
73
+ font-weight: normal;
74
+ z-index: 2;
75
+ overflow: hidden;
76
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
77
+ /* Default styles outside of data messenger */
78
+ background-color: white;
79
+ color: #5d5d5d; }
172
80
 
173
- .react-autoql-query-validation-execute-btn:hover {
174
- border-color: #28a8e0; }
81
+ .react-autoql-bar-container.autosuggest-top
82
+ .react-autosuggest__suggestions-container--open {
83
+ top: unset;
84
+ bottom: 45px; }
175
85
 
176
- .react-autoql-execute-query-icon {
177
- font-size: 16px;
178
- vertical-align: middle !important;
179
- padding-right: 3px !important; }
180
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
181
- height: 19px;
182
- width: 19px;
183
- margin-top: 3px;
184
- margin-right: 4px;
185
- vertical-align: top;
186
- fill: var(--react-autoql-accent-color); }
86
+ .react-autoql-bar-container.autosuggest-bottom
87
+ .react-autosuggest__suggestions-container--open {
88
+ top: 45px;
89
+ bottom: unset; }
187
90
 
188
- .react-autoql-query-validation-select {
189
- position: relative;
190
- display: inline-block;
191
- height: 2em;
192
- background: none;
193
- outline: none !important;
194
- border: none;
195
- letter-spacing: 0.05em;
196
- font-family: inherit;
197
- font-size: inherit;
91
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
198
92
  margin: 0;
199
93
  padding: 0;
200
- border-radius: 0;
201
- border-bottom: 1px dashed;
202
- color: var(--react-autoql-accent-color); }
203
-
204
- .react-autoql-query-validation-delete-button {
205
- position: relative;
206
- cursor: pointer;
207
- margin-bottom: -2px; }
208
-
209
- .react-autoql-chart-tooltip {
210
- font-family: var(--react-autoql-font-family), sans-serif;
211
- letter-spacing: 0.04em;
212
- line-height: 22px;
213
- font-size: 13px;
214
- padding: 7px 15px;
215
- transition: all 0.2s ease !important;
216
- text-align: left !important;
217
- opacity: 1 !important;
218
- z-index: 99999 !important;
219
- /* necessary to show up on top of rc drawer */ }
220
-
221
- .single-value-response {
222
- color: inherit;
223
- cursor: unset; }
224
- .single-value-response:hover {
225
- color: inherit; }
226
-
227
- .single-value-response.with-drilldown:hover {
228
- color: inherit;
229
- text-decoration: underline;
230
- font-weight: 600;
231
- cursor: pointer; }
232
-
233
- .react-autoql-query-validation-container {
234
- width: 100%; }
235
-
236
- .react-autoql-query-validation-description {
237
- margin-bottom: 14px; }
238
-
239
- .context-menu {
240
- background: var(--react-autoql-background-color-primary);
241
- /* height: 100px; */
242
- width: 150px;
243
- padding: 10px 0; }
244
-
245
- .context-menu-list {
246
- list-style-type: none;
247
- width: 100%;
248
- margin: 0;
249
- padding: 0; }
250
-
251
- .context-menu-list li {
252
- color: var(--react-autoql-text-color-primary);
253
- width: 100%;
254
- height: 35px;
255
- line-height: 35px;
256
- padding: 0 20px;
257
- cursor: pointer; }
258
-
259
- .context-menu-list li:hover {
260
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
261
-
262
- .react-autoql-bar-container {
263
- position: relative;
264
- display: flex;
265
- flex-direction: row; }
266
-
267
- .react-autoql-chatbar-input {
268
- padding: 10px;
269
- padding-left: 20px;
270
- margin: 10px;
271
- height: 42px;
272
- box-sizing: border-box;
273
- border-radius: 24px;
274
- font-size: 16px;
275
- font-family: inherit;
276
- letter-spacing: 0.04em;
277
- outline: none !important;
278
- width: calc(100% - 20px);
279
- font-family: inherit;
280
- /* Default styles outside of data messenger */
281
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
282
- background: var(--react-autoql-background-color-primary);
283
- color: #5d5d5d; }
284
-
285
- .react-autoql-chatbar-input.left-padding {
286
- padding-left: 54px; }
287
-
288
- .react-autoql-chatbar-input:disabled {
289
- background: rgba(0, 0, 0, 0.03); }
290
-
291
- .react-autoql-chatbar-input:not(:disabled):hover {
292
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
293
-
294
- .react-autoql-chatbar-input::-moz-placeholder {
295
- /* Default color outside of data messenger */
296
- color: #999 !important; }
297
-
298
- .react-autoql-chatbar-input:-ms-input-placeholder {
299
- /* Default color outside of data messenger */
300
- color: #999 !important; }
301
-
302
- .react-autoql-chatbar-input::placeholder {
303
- /* Default color outside of data messenger */
304
- color: #999 !important; }
305
-
306
- /* autosuggest */
307
- .react-autoql-bar-container .react-autosuggest__container,
308
- .react-autoql-chatbar-input-container {
309
- position: relative;
310
- flex: 1; }
311
-
312
- .react-autoql-bar-container .react-autosuggest__input--focused {
313
- outline: none; }
314
-
315
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
316
- display: none; }
317
-
318
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
319
- display: none; }
320
-
321
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
322
- position: absolute;
323
- top: 45px;
324
- bottom: unset;
325
- margin: 10px;
326
- padding-top: 5px;
327
- padding-bottom: 5px;
328
- display: block;
329
- width: calc(100% - 20px);
330
- height: unset;
331
- border-radius: 24px;
332
- font-family: inherit;
333
- font-size: 15px;
334
- font-weight: normal;
335
- z-index: 2;
336
- overflow: hidden;
337
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
338
- /* Default styles outside of data messenger */
339
- background-color: white;
340
- color: #5d5d5d; }
341
-
342
- .react-autoql-bar-container.autosuggest-top
343
- .react-autosuggest__suggestions-container--open {
344
- top: unset;
345
- bottom: 45px; }
346
-
347
- .react-autoql-bar-container.autosuggest-bottom
348
- .react-autosuggest__suggestions-container--open {
349
- top: 45px;
350
- bottom: unset; }
351
-
352
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
353
- margin: 0;
354
- padding: 0;
355
- list-style-type: none; }
94
+ list-style-type: none; }
356
95
 
357
96
  /* Autocomplete styles */
358
97
  .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
@@ -403,285 +142,62 @@
403
142
  left: 30px;
404
143
  top: 15px; }
405
144
 
406
- .react-autoql-icon {
407
- position: relative;
408
- opacity: 1; }
409
- .react-autoql-icon.warning {
410
- color: var(--react-autoql-warning-color) !important; }
411
- .react-autoql-icon.danger {
412
- color: var(--react-autoql-danger-color) !important; }
145
+ #condition-lock-snackbar-success {
146
+ visibility: hidden;
147
+ min-width: 200px;
148
+ line-height: 1 !important;
149
+ font-size: 14px !important;
150
+ background-color: var(--react-autoql-background-color-secondary);
151
+ color: var(--react-autoql-success-color);
152
+ text-align: center;
153
+ border-radius: 4px;
154
+ padding: 6px;
155
+ position: fixed;
156
+ display: block;
157
+ z-index: 999999999;
158
+ transform: translateX(-10%);
159
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
413
160
 
414
- span.react-autoql-icon {
415
- vertical-align: unset;
416
- text-align: left;
417
- margin: 0;
418
- padding: 0;
419
- float: none !important;
420
- color: inherit; }
421
- span.react-autoql-icon svg {
422
- float: none !important;
423
- color: inherit;
424
- vertical-align: unset;
425
- text-align: left;
426
- margin: 0;
427
- padding: 0;
428
- opacity: 1;
429
- height: 1em;
430
- margin-bottom: -0.1em; }
161
+ .autoql-condition-locking-menu-container
162
+ .react-autosuggest__suggestions-container--open {
163
+ transform: translateX(8%);
164
+ width: 90% !important; }
431
165
 
432
- .slack-logo {
433
- display: inline-block;
434
- height: 100%;
435
- margin-bottom: 3px; }
436
- .slack-logo img {
437
- vertical-align: middle;
438
- height: 1em;
439
- width: 1em; }
166
+ #condition-lock-snackbar-success.show {
167
+ visibility: visible;
168
+ -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
169
+ animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
440
170
 
441
- .react-autoql-badge {
442
- position: absolute;
443
- background: var(--react-autoql-warning-color);
444
- border: 1px solid var(--react-autoql-background-color-primary);
445
- width: 0.5em;
446
- height: 0.5em;
447
- top: -0.1em;
448
- right: -0.25em;
449
- border-radius: 50%;
450
- box-sizing: content-box; }
171
+ .react-autoql-drawer {
172
+ font-family: var(--react-autoql-font-family), sans-serif;
173
+ line-height: 22px; }
451
174
 
452
- .loading-container-centered {
453
- height: 100%;
175
+ .react-autoql-drawer.disable-selection {
176
+ -webkit-user-select: none;
177
+ -moz-user-select: none;
178
+ -ms-user-select: none;
179
+ user-select: none; }
180
+
181
+ .react-autoql-drawer .react-autoql-drawer-content-container {
454
182
  width: 100%;
183
+ height: 100%;
455
184
  display: flex;
185
+ background: var(--react-autoql-background-color-secondary);
186
+ overflow: hidden;
187
+ border-radius: 4px;
456
188
  flex-direction: column;
457
- justify-content: center;
458
- align-items: center; }
189
+ justify-content: stretch; }
459
190
 
460
- .response-loading {
461
- display: inline-block;
462
- position: relative;
463
- width: 64px;
464
- height: 64px; }
465
-
466
- .response-loading div {
467
- position: absolute;
468
- top: 27px;
469
- width: 11px;
470
- height: 11px;
471
- border-radius: 50%;
472
- background: #e2e2e2;
473
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
474
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
475
-
476
- .response-loading div:nth-child(1) {
477
- left: 6px;
478
- -webkit-animation: response-loading1 0.6s infinite;
479
- animation: response-loading1 0.6s infinite; }
480
-
481
- .response-loading div:nth-child(2) {
482
- left: 6px;
483
- -webkit-animation: response-loading2 0.6s infinite;
484
- animation: response-loading2 0.6s infinite; }
485
-
486
- .response-loading div:nth-child(3) {
487
- left: 26px;
488
- -webkit-animation: response-loading2 0.6s infinite;
489
- animation: response-loading2 0.6s infinite; }
490
-
491
- .response-loading div:nth-child(4) {
492
- left: 45px;
493
- -webkit-animation: response-loading3 0.6s infinite;
494
- animation: response-loading3 0.6s infinite; }
495
-
496
- .chat-voice-record-button {
497
- width: 40px;
498
- height: 40px;
499
- border-radius: 24px;
500
- margin: 10px;
501
- margin-left: 0;
502
- font-size: 18px;
503
- line-height: 24px;
504
- outline: none !important;
505
- position: relative;
506
- cursor: pointer;
507
- overflow: hidden;
508
- background: var(--react-autoql-accent-color);
509
- color: white;
510
- border: none;
511
- flex-shrink: 0;
512
- flex-grow: 0; }
513
-
514
- .chat-voice-record-button:hover {
515
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
516
-
517
- .chat-voice-record-button.listening {
518
- background: #ff471a; }
519
-
520
- .chat-voice-record-icon {
521
- vertical-align: top; }
522
-
523
- .react-autoql-tooltip {
524
- font-family: inherit;
525
- letter-spacing: 0.04em;
526
- padding: 7px 15px;
527
- opacity: 1 !important;
528
- z-index: 99999 !important; }
529
-
530
- @-webkit-keyframes slide {
531
- 0% {
532
- transform: translateX(-100%); }
533
- 100% {
534
- transform: translateX(100%); } }
535
-
536
- @keyframes slide {
537
- 0% {
538
- transform: translateX(-100%); }
539
- 100% {
540
- transform: translateX(100%); } }
541
-
542
- @-webkit-keyframes move {
543
- 0% {
544
- left: 0;
545
- opacity: 0; }
546
- 5% {
547
- opacity: 0; }
548
- 48% {
549
- opacity: 0.2; }
550
- 80% {
551
- opacity: 0; }
552
- 100% {
553
- left: 82%; } }
554
-
555
- @keyframes move {
556
- 0% {
557
- left: 0;
558
- opacity: 0; }
559
- 5% {
560
- opacity: 0; }
561
- 48% {
562
- opacity: 0.2; }
563
- 80% {
564
- opacity: 0; }
565
- 100% {
566
- left: 82%; } }
567
-
568
- .react-autoql-dashboard-container {
569
- background: var(--react-autoql-background-color-secondary);
570
- height: 100%;
571
- width: 100%;
572
- overflow: hidden; }
573
-
574
- .react-autoql-dashboard-container.edit-mode {
575
- padding-bottom: 200px; }
576
-
577
- .dashboard-drilldown-modal .ReactModal__Content {
578
- top: unset !important;
579
- margin-top: 20px !important;
580
- max-height: 93vh !important; }
581
-
582
- .dashboard-drilldown-modal .react-autoql-modal-body {
583
- padding: 0; }
584
-
585
- .dashboard-drilldown-modal .react-autoql-table {
586
- opacity: 0.9;
587
- font-size: 11px; }
588
-
589
- .dashboard-drilldown-modal .splitter-layout {
590
- height: calc(100% - 55px); }
591
-
592
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
593
- padding: 20px;
594
- padding-bottom: 10px; }
595
-
596
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
597
- text-align: right;
598
- width: 100%;
599
- padding-right: 20px; }
600
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
601
- position: absolute;
602
- bottom: 5px;
603
- width: 100px;
604
- right: 0; }
605
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
606
- padding-top: 10px;
607
- margin-bottom: -8px; }
608
-
609
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
610
- padding: 20px;
611
- padding-top: 10px;
612
- overflow: hidden;
613
- height: 100%; }
614
-
615
- .empty-dashboard-message-container {
616
- font-family: var(--react-autoql-font-family);
617
- color: var(--react-autoql-text-color-primary);
618
- letter-spacing: 0.02em;
619
- text-align: center;
620
- padding: 100px;
621
- height: 100%;
622
- width: 100%; }
623
-
624
- .empty-dashboard-new-tile-btn {
625
- color: var(--react-autoql-accent-color);
626
- font-weight: bold;
627
- cursor: pointer; }
628
-
629
- #condition-lock-snackbar-success {
630
- visibility: hidden;
631
- min-width: 200px;
632
- line-height: 1 !important;
633
- font-size: 14px !important;
634
- background-color: var(--react-autoql-background-color-secondary);
635
- color: var(--react-autoql-success-color);
636
- text-align: center;
637
- border-radius: 4px;
638
- padding: 6px;
639
- position: fixed;
640
- display: block;
641
- z-index: 999999999;
642
- transform: translateX(-10%);
643
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
644
-
645
- .autoql-condition-locking-menu-container
646
- .react-autosuggest__suggestions-container--open {
647
- transform: translateX(8%);
648
- width: 90% !important; }
649
-
650
- #condition-lock-snackbar-success.show {
651
- visibility: visible;
652
- -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
653
- animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
654
-
655
- .react-autoql-drawer {
656
- font-family: var(--react-autoql-font-family), sans-serif;
657
- line-height: 22px; }
658
-
659
- .react-autoql-drawer.disable-selection {
660
- -webkit-user-select: none;
661
- -moz-user-select: none;
662
- -ms-user-select: none;
663
- user-select: none; }
664
-
665
- .react-autoql-drawer .react-autoql-drawer-content-container {
666
- width: 100%;
667
- height: 100%;
668
- display: flex;
669
- background: var(--react-autoql-background-color-secondary);
670
- overflow: hidden;
671
- border-radius: 4px;
672
- flex-direction: column;
673
- justify-content: stretch; }
674
-
675
- .react-autoql-drawer .chat-header-container {
676
- display: flex;
677
- justify-content: space-between;
678
- width: 100%;
679
- height: 60px;
680
- background: var(--react-autoql-accent-color);
681
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
682
- flex-grow: 0;
683
- flex-shrink: 0;
684
- z-index: 1; }
191
+ .react-autoql-drawer .chat-header-container {
192
+ display: flex;
193
+ justify-content: space-between;
194
+ width: 100%;
195
+ height: 60px;
196
+ background: var(--react-autoql-accent-color);
197
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
198
+ flex-grow: 0;
199
+ flex-shrink: 0;
200
+ z-index: 1; }
685
201
 
686
202
  .react-autoql-drawer .react-autoql-header-right-container {
687
203
  display: flex;
@@ -1219,282 +735,501 @@ span.react-autoql-icon {
1219
735
  top: 30px;
1220
736
  opacity: 0; } }
1221
737
 
1222
- .react-autoql-step-container a {
1223
- color: var(--react-autoql-accent-color, #26a7df); }
738
+ .chat-voice-record-button {
739
+ width: 40px;
740
+ height: 40px;
741
+ border-radius: 24px;
742
+ margin: 10px;
743
+ margin-left: 0;
744
+ font-size: 18px;
745
+ line-height: 24px;
746
+ outline: none !important;
747
+ position: relative;
748
+ cursor: pointer;
749
+ overflow: hidden;
750
+ background: var(--react-autoql-accent-color);
751
+ color: white;
752
+ border: none;
753
+ flex-shrink: 0;
754
+ flex-grow: 0; }
1224
755
 
1225
- .frequency-date-select-container {
1226
- margin-top: 10px; }
756
+ .chat-voice-record-button:hover {
757
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
1227
758
 
1228
- .notification-frequency-step {
1229
- display: flex; }
1230
- .notification-frequency-step .frequency-category-select {
1231
- position: relative;
1232
- padding-top: 9px; }
1233
- .notification-frequency-step .notification-frequency-select {
1234
- margin-left: 8px; }
1235
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1236
- line-height: 33px; }
1237
- .notification-frequency-step .frequency-repeat-follow-text {
1238
- line-height: 32px;
1239
- vertical-align: top; }
1240
- .notification-frequency-step .frequency-settings-container {
1241
- flex: 0 1 400px; }
759
+ .chat-voice-record-button.listening {
760
+ background: #ff471a; }
1242
761
 
1243
- .schedule-builder-timezone-section {
1244
- margin: 10px 5px; }
1245
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1246
- display: inline-block;
1247
- width: 300px; }
762
+ .chat-voice-record-icon {
763
+ vertical-align: top; }
1248
764
 
1249
- .notification-modal-content .react-autoql-step-content p {
1250
- margin-bottom: 0.5em;
1251
- margin-top: 0.5em;
1252
- padding-left: 8px; }
765
+ .react-autoql-tooltip {
766
+ font-family: inherit;
767
+ letter-spacing: 0.04em;
768
+ padding: 7px 15px;
769
+ opacity: 1 !important;
770
+ z-index: 99999 !important; }
1253
771
 
1254
- .notification-modal-content .step-btn-container {
1255
- text-align: right;
1256
- display: flex;
1257
- min-height: 50px; }
772
+ @-webkit-keyframes slide {
773
+ 0% {
774
+ transform: translateX(-100%); }
775
+ 100% {
776
+ transform: translateX(100%); } }
1258
777
 
1259
- .expression-valid-checkmark.react-autoql-icon svg {
1260
- color: var(--react-autoql-success-color); }
778
+ @keyframes slide {
779
+ 0% {
780
+ transform: translateX(-100%); }
781
+ 100% {
782
+ transform: translateX(100%); } }
1261
783
 
1262
- .expression-invalid-message-container {
1263
- max-width: 75%;
1264
- float: left;
1265
- text-align: left !important;
1266
- display: flex;
1267
- flex-direction: row;
1268
- align-items: left;
1269
- justify-content: left; }
784
+ @-webkit-keyframes move {
785
+ 0% {
786
+ left: 0;
787
+ opacity: 0; }
788
+ 5% {
789
+ opacity: 0; }
790
+ 48% {
791
+ opacity: 0.2; }
792
+ 80% {
793
+ opacity: 0; }
794
+ 100% {
795
+ left: 82%; } }
1270
796
 
1271
- .expression-invalid-message {
1272
- color: var(--react-autoql-danger-color);
1273
- display: 'inline-block'; }
797
+ @keyframes move {
798
+ 0% {
799
+ left: 0;
800
+ opacity: 0; }
801
+ 5% {
802
+ opacity: 0; }
803
+ 48% {
804
+ opacity: 0.2; }
805
+ 80% {
806
+ opacity: 0; }
807
+ 100% {
808
+ left: 82%; } }
1274
809
 
1275
- .notification-list-loading-container {
1276
- text-align: center;
1277
- padding-top: 100px;
1278
- color: var(--react-autoql-text-color-primary);
810
+ .loading-container-centered {
1279
811
  height: 100%;
1280
- overflow: hidden;
1281
- background: var(--react-autoql-background-color-secondary); }
1282
-
1283
- .empty-notifications-message {
1284
- color: var(--react-autoql-text-color-primary);
1285
- text-align: center;
1286
- margin-top: 75px; }
1287
- .empty-notifications-message div {
1288
- opacity: 0.6; }
1289
- .empty-notifications-message .empty-notifications-title {
1290
- font-size: 16px;
1291
- font-weight: bold;
1292
- margin-bottom: 5px; }
1293
- .empty-notifications-message .empty-notifications-img {
1294
- width: 250px;
1295
- height: 250px; }
812
+ width: 100%;
813
+ display: flex;
814
+ flex-direction: column;
815
+ justify-content: center;
816
+ align-items: center; }
1296
817
 
1297
- .react-autoql-notification-list-container {
1298
- height: 100%;
1299
- padding: 20px;
1300
- overflow-y: auto;
1301
- background: var(--react-autoql-background-color-secondary); }
818
+ .response-loading {
819
+ display: inline-block;
820
+ position: relative;
821
+ width: 64px;
822
+ height: 64px; }
1302
823
 
1303
- .react-autoql-notification-dismiss-all {
1304
- text-align: right;
1305
- margin-bottom: 12px;
1306
- padding-right: 10px;
1307
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1308
- transition: color 0.1s ease; }
1309
- .react-autoql-notification-dismiss-all span {
1310
- opacity: 0.8;
1311
- cursor: pointer; }
1312
- .react-autoql-notification-dismiss-all span:hover {
1313
- opacity: 1; }
824
+ .response-loading div {
825
+ position: absolute;
826
+ top: 27px;
827
+ width: 11px;
828
+ height: 11px;
829
+ border-radius: 50%;
830
+ background: #e2e2e2;
831
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
832
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
1314
833
 
1315
- .react-autoql-notification-display-name-input {
1316
- width: 100%; }
834
+ .response-loading div:nth-child(1) {
835
+ left: 6px;
836
+ -webkit-animation: response-loading1 0.6s infinite;
837
+ animation: response-loading1 0.6s infinite; }
1317
838
 
1318
- .react-autoql-notification-message-input {
1319
- width: 100%; }
839
+ .response-loading div:nth-child(2) {
840
+ left: 6px;
841
+ -webkit-animation: response-loading2 0.6s infinite;
842
+ animation: response-loading2 0.6s infinite; }
1320
843
 
1321
- .react-autoql-notification-list-item:nth-of-type(0) {
1322
- -webkit-animation-delay: 0s;
1323
- animation-delay: 0s; }
844
+ .response-loading div:nth-child(3) {
845
+ left: 26px;
846
+ -webkit-animation: response-loading2 0.6s infinite;
847
+ animation: response-loading2 0.6s infinite; }
1324
848
 
1325
- .react-autoql-notification-list-item:nth-of-type(1) {
1326
- -webkit-animation-delay: 0.1s;
1327
- animation-delay: 0.1s; }
849
+ .response-loading div:nth-child(4) {
850
+ left: 45px;
851
+ -webkit-animation: response-loading3 0.6s infinite;
852
+ animation: response-loading3 0.6s infinite; }
1328
853
 
1329
- .react-autoql-notification-list-item:nth-of-type(2) {
1330
- -webkit-animation-delay: 0.2s;
1331
- animation-delay: 0.2s; }
854
+ .react-autoql-response-content-container:not(.html-content) {
855
+ position: relative;
856
+ display: flex;
857
+ flex-direction: column;
858
+ justify-content: center;
859
+ align-items: center;
860
+ background-color: inherit;
861
+ font-size: 14px;
862
+ height: 100%;
863
+ width: 100%;
864
+ overflow: hidden;
865
+ color: var(--react-autoql-text-color-primary); }
1332
866
 
1333
- .react-autoql-notification-list-item:nth-of-type(3) {
1334
- -webkit-animation-delay: 0.3s;
1335
- animation-delay: 0.3s; }
867
+ .react-autoql-response-content-container.html-content {
868
+ position: relative;
869
+ background-color: inherit;
870
+ text-align: left;
871
+ font-size: 14px;
872
+ height: 100%;
873
+ width: 100%;
874
+ overflow: hidden;
875
+ color: var(--react-autoql-text-color-primary); }
876
+ .react-autoql-response-content-container.html-content table th {
877
+ border-bottom: 2px solid var(--react-autoql-border-color); }
878
+ .react-autoql-response-content-container.html-content table tr:not(:last-child) {
879
+ border-bottom: 1px solid var(--react-autoql-border-color); }
880
+ .react-autoql-response-content-container.html-content table td:not(:last-child) {
881
+ border-right: 1px solid var(--react-autoql-border-color); }
882
+ .react-autoql-response-content-container.html-content table th,
883
+ .react-autoql-response-content-container.html-content table td {
884
+ padding: 5px 10px; }
885
+ .react-autoql-response-content-container.html-content * {
886
+ font-size: inherit; }
887
+ .react-autoql-response-content-container.html-content sup,
888
+ .react-autoql-response-content-container.html-content sub {
889
+ font-size: 10px; }
890
+ .react-autoql-response-content-container.html-content > *:first-child {
891
+ margin-top: 0 !important; }
892
+ .react-autoql-response-content-container.html-content > *:last-child {
893
+ margin-bottom: 0 !important; }
894
+ .react-autoql-response-content-container.html-content caption {
895
+ display: table-caption;
896
+ text-align: -webkit-center;
897
+ padding-top: unset;
898
+ padding-bottom: unset;
899
+ color: unset;
900
+ text-align: unset;
901
+ caption-side: unset; }
1336
902
 
1337
- .react-autoql-notification-list-item:nth-of-type(4) {
1338
- -webkit-animation-delay: 0.4s;
1339
- animation-delay: 0.4s; }
903
+ .react-autoql-response-content-container.table {
904
+ max-height: 100vh !important;
905
+ overflow-y: scroll;
906
+ scrollbar-width: none; }
1340
907
 
1341
- .react-autoql-notification-list-item:nth-of-type(5) {
1342
- -webkit-animation-delay: 0.5s;
1343
- animation-delay: 0.5s; }
908
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
909
+ width: 0;
910
+ height: 0; }
1344
911
 
1345
- .react-autoql-notification-list-item:nth-of-type(6) {
1346
- -webkit-animation-delay: 0.6s;
1347
- animation-delay: 0.6s; }
912
+ .react-autoql-suggestion-btn {
913
+ padding: 6px 14px;
914
+ background: transparent;
915
+ font-family: inherit;
916
+ font-size: 12px;
917
+ margin-bottom: 5px;
918
+ outline: none !important;
919
+ cursor: pointer;
920
+ letter-spacing: 0.05em;
921
+ transition: all 0.1s ease;
922
+ border: 1px solid rgba(0, 0, 0, 0.15);
923
+ border-radius: 5px;
924
+ color: inherit; }
1348
925
 
1349
- .react-autoql-notification-list-item:nth-of-type(7) {
1350
- -webkit-animation-delay: 0.7s;
1351
- animation-delay: 0.7s; }
926
+ .react-autoql-suggestion-btn:hover {
927
+ border-color: transparent;
928
+ color: white;
929
+ background: var(--react-autoql-accent-color); }
1352
930
 
1353
- .react-autoql-notification-list-item:nth-of-type(8) {
1354
- -webkit-animation-delay: 0.8s;
1355
- animation-delay: 0.8s; }
931
+ .react-autoql-help-link-btn {
932
+ padding: 6px 14px;
933
+ background: transparent;
934
+ border-radius: 5px;
935
+ font-family: inherit;
936
+ font-size: 12px;
937
+ margin-top: 5px;
938
+ outline: none !important;
939
+ cursor: pointer;
940
+ letter-spacing: 0.05em;
941
+ transition: all 0.1s ease;
942
+ border-color: #e2e2e26e;
943
+ color: inherit; }
1356
944
 
1357
- .react-autoql-notification-list-item:nth-of-type(9) {
1358
- -webkit-animation-delay: 0.9s;
1359
- animation-delay: 0.9s; }
945
+ .react-autoql-help-link-btn:hover {
946
+ opacity: 0.7; }
1360
947
 
1361
- .react-autoql-notification-list-item:nth-of-type(10) {
1362
- -webkit-animation-delay: 1s;
1363
- animation-delay: 1s; }
948
+ .react-autoql-help-link-icon {
949
+ width: 15px;
950
+ height: 15px;
951
+ margin-bottom: -3px;
952
+ margin-right: 3px; }
1364
953
 
1365
- @-webkit-keyframes slideIn {
1366
- 0% {
1367
- opacity: 0;
1368
- top: 500px; }
1369
- 100% {
1370
- opacity: 1;
1371
- top: 0; } }
954
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
955
+ color: var(--react-autoql-success-color); }
1372
956
 
1373
- .react-autoql-notifications-button-container {
957
+ .react-autoql-suggestion-message {
958
+ height: 100%;
959
+ width: 100%;
960
+ word-break: break-word; }
961
+
962
+ .react-autoql-suggestions-select {
1374
963
  position: relative;
1375
964
  display: inline-block;
965
+ height: 30px;
966
+ background: none;
967
+ outline: none !important;
968
+ border: 1px solid;
969
+ font-family: inherit;
970
+ letter-spacing: 0.05em;
971
+ color: #28a8e0;
972
+ cursor: pointer;
973
+ font-size: inherit; }
974
+
975
+ .no-columns-error-message {
976
+ position: absolute;
977
+ height: 100%;
978
+ width: 100%;
979
+ display: flex;
980
+ justify-content: center;
981
+ flex-direction: column;
982
+ text-align: center;
983
+ padding: 20px;
984
+ font-size: 13px; }
985
+ .no-columns-error-message .warning-icon {
986
+ font-size: 22px;
987
+ display: block;
988
+ margin-bottom: -13px;
989
+ text-align: center; }
990
+ .no-columns-error-message .eye-icon {
991
+ vertical-align: bottom;
992
+ line-height: 18px; }
993
+
994
+ /* query validation */
995
+ .react-autoql-query-validation-selector-container {
996
+ display: inline-block;
997
+ position: relative; }
998
+
999
+ .react-autoql-select-popup-container.query-validation-select {
1000
+ padding: 5px 0;
1001
+ letter-spacing: 0.03em;
1002
+ font-family: var(--react-autoql-font-family), sans-serif; }
1003
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
1004
+ height: unset;
1005
+ font-size: 14px;
1006
+ line-height: 24px;
1007
+ padding: 0 15px; }
1008
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
1009
+ color: #d84830; }
1010
+
1011
+ .react-autoql-query-validation-query {
1012
+ text-align: center; }
1013
+
1014
+ .react-autoql-query-validation-execute-btn {
1015
+ height: 38px;
1016
+ background: none;
1017
+ border-radius: 4px;
1018
+ margin-top: 24px;
1019
+ width: 100%;
1020
+ color: inherit;
1021
+ cursor: pointer;
1022
+ outline: none !important;
1023
+ border-color: #e2e2e26e;
1024
+ transition: all 0.2s ease; }
1025
+
1026
+ .react-autoql-query-validation-execute-btn:hover {
1027
+ border-color: #28a8e0; }
1028
+
1029
+ .react-autoql-execute-query-icon {
1030
+ font-size: 16px;
1031
+ vertical-align: middle !important;
1032
+ padding-right: 3px !important; }
1033
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
1034
+ height: 19px;
1035
+ width: 19px;
1036
+ margin-top: 3px;
1037
+ margin-right: 4px;
1038
+ vertical-align: top;
1039
+ fill: var(--react-autoql-accent-color); }
1040
+
1041
+ .react-autoql-query-validation-select {
1042
+ position: relative;
1043
+ display: inline-block;
1044
+ height: 2em;
1045
+ background: none;
1046
+ outline: none !important;
1047
+ border: none;
1048
+ letter-spacing: 0.05em;
1049
+ font-family: inherit;
1376
1050
  font-size: inherit;
1377
- line-height: 1em;
1378
- width: 1em; }
1379
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1380
- font-size: 1em;
1381
- line-height: 0;
1382
- vertical-align: bottom; }
1383
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1384
- position: absolute;
1385
- border: 2px solid #fff;
1386
- background: #f5222d;
1387
- border-radius: 6.3em;
1388
- line-height: 1.3em;
1389
- left: 0.6em;
1390
- top: -0.8em;
1391
- padding: 0.15em 0.5em;
1392
- text-align: center;
1393
- color: white;
1394
- font-size: 0.5em; }
1395
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1396
- position: absolute;
1397
- display: inline-block;
1398
- border: 2px solid #fff;
1399
- background: #f5222d;
1400
- border-radius: 50%;
1401
- height: 0.6em;
1402
- width: 0.6em;
1403
- left: 0.5em;
1404
- top: -2px; }
1051
+ margin: 0;
1052
+ padding: 0;
1053
+ border-radius: 0;
1054
+ border-bottom: 1px dashed;
1055
+ color: var(--react-autoql-accent-color); }
1405
1056
 
1406
- .react-autoql-notification-settings {
1407
- background-color: var(--react-autoql-background-color-secondary);
1057
+ .react-autoql-query-validation-delete-button {
1058
+ position: relative;
1059
+ cursor: pointer;
1060
+ margin-bottom: -2px; }
1061
+
1062
+ .react-autoql-chart-tooltip {
1063
+ font-family: var(--react-autoql-font-family), sans-serif;
1064
+ letter-spacing: 0.04em;
1065
+ line-height: 22px;
1066
+ font-size: 13px;
1067
+ padding: 7px 15px;
1068
+ transition: all 0.2s ease !important;
1069
+ text-align: left !important;
1070
+ opacity: 1 !important;
1071
+ z-index: 99999 !important;
1072
+ /* necessary to show up on top of rc drawer */ }
1073
+
1074
+ .single-value-response {
1075
+ color: inherit;
1076
+ cursor: unset; }
1077
+ .single-value-response:hover {
1078
+ color: inherit; }
1079
+
1080
+ .single-value-response.with-drilldown:hover {
1081
+ color: inherit;
1082
+ text-decoration: underline;
1083
+ font-weight: 600;
1084
+ cursor: pointer; }
1085
+
1086
+ .react-autoql-query-validation-container {
1087
+ width: 100%; }
1088
+
1089
+ .react-autoql-query-validation-description {
1090
+ margin-bottom: 14px; }
1091
+
1092
+ .context-menu {
1093
+ background: var(--react-autoql-background-color-primary);
1094
+ /* height: 100px; */
1095
+ width: 150px;
1096
+ padding: 10px 0; }
1097
+
1098
+ .context-menu-list {
1099
+ list-style-type: none;
1100
+ width: 100%;
1101
+ margin: 0;
1102
+ padding: 0; }
1103
+
1104
+ .context-menu-list li {
1408
1105
  color: var(--react-autoql-text-color-primary);
1409
- padding-top: 20px;
1410
- height: 100%; }
1411
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1412
- margin: 20px;
1413
- margin-top: 10px;
1414
- border-radius: 4px;
1415
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1416
- background-color: var(--react-autoql-background-color-primary);
1417
- overflow: hidden; }
1418
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1419
- height: 55px;
1420
- line-height: 55px;
1421
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1422
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1423
- margin-right: 10px;
1424
- cursor: pointer; }
1425
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1426
- padding-right: 20px;
1427
- font-size: 17px;
1428
- opacity: 1;
1429
- cursor: pointer;
1430
- color: var(--react-autoql-accent-color); }
1431
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1432
- background: rgba(0, 0, 0, 0.01); }
1433
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1434
- opacity: 0;
1435
- margin-right: 20px;
1436
- font-size: 16px;
1437
- transition: all 0.2s ease;
1438
- color: var(--react-autoql-text-color-primary);
1439
- cursor: pointer; }
1440
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1441
- color: var(--react-autoql-accent-color);
1442
- opacity: 1 !important; }
1443
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1444
- opacity: 0.5; }
1445
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1446
- display: flex;
1447
- justify-content: space-between;
1448
- height: 56px;
1449
- padding-left: 25px;
1450
- padding-right: 8px;
1451
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1452
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1453
- margin-bottom: 4px;
1454
- margin-right: 8px; }
1455
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1456
- margin-bottom: 4px;
1457
- margin-right: 8px;
1458
- opacity: 0.5;
1459
- pointer-events: none; }
1460
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1461
- display: flex;
1462
- justify-content: space-between;
1463
- align-items: center;
1464
- padding: 5px 20px;
1465
- padding-bottom: 0;
1466
- color: var(--react-autoql-text-color-primary); }
1467
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1468
- display: inline-block;
1469
- height: 35px;
1470
- width: 35px;
1471
- border-radius: 20px;
1472
- background: var(--react-autoql-accent-color, #26a7df);
1473
- color: white;
1474
- line-height: 38px;
1475
- text-align: center;
1476
- font-size: 20px;
1477
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1478
- transition: all 0.2s ease;
1479
- margin-right: 5px;
1480
- cursor: pointer; }
1481
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1482
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1483
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1484
- white-space: nowrap;
1485
- overflow: hidden;
1486
- text-overflow: ellipsis;
1487
- padding-right: 10px; }
1488
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1489
- opacity: 0.5; }
1490
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1106
+ width: 100%;
1107
+ height: 35px;
1108
+ line-height: 35px;
1109
+ padding: 0 20px;
1110
+ cursor: pointer; }
1111
+
1112
+ .context-menu-list li:hover {
1113
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1114
+
1115
+ .react-autoql-icon {
1116
+ position: relative;
1117
+ opacity: 1; }
1118
+ .react-autoql-icon.warning {
1119
+ color: var(--react-autoql-warning-color) !important; }
1120
+ .react-autoql-icon.danger {
1121
+ color: var(--react-autoql-danger-color) !important; }
1122
+
1123
+ span.react-autoql-icon {
1124
+ vertical-align: unset;
1125
+ text-align: left;
1126
+ margin: 0;
1127
+ padding: 0;
1128
+ float: none !important;
1129
+ color: inherit; }
1130
+ span.react-autoql-icon svg {
1131
+ float: none !important;
1132
+ color: inherit;
1133
+ vertical-align: unset;
1134
+ text-align: left;
1135
+ margin: 0;
1136
+ padding: 0;
1137
+ opacity: 1;
1138
+ height: 1em;
1139
+ margin-bottom: -0.1em; }
1140
+
1141
+ .slack-logo {
1142
+ display: inline-block;
1143
+ height: 100%;
1144
+ margin-bottom: 3px; }
1145
+ .slack-logo img {
1491
1146
  vertical-align: middle;
1492
- margin-bottom: 4px;
1493
- height: 18px; }
1494
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1495
- display: flex;
1496
- align-items: center;
1497
- margin-top: -25px; }
1147
+ height: 1em;
1148
+ width: 1em; }
1149
+
1150
+ .react-autoql-badge {
1151
+ position: absolute;
1152
+ background: var(--react-autoql-warning-color);
1153
+ border: 1px solid var(--react-autoql-background-color-primary);
1154
+ width: 0.5em;
1155
+ height: 0.5em;
1156
+ top: -0.1em;
1157
+ right: -0.25em;
1158
+ border-radius: 50%;
1159
+ box-sizing: content-box; }
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
+ .notification-rule-outer-container {
1223
+ position: relative;
1224
+ border: 1px solid transparent;
1225
+ border-radius: 4px;
1226
+ padding-bottom: 5px; }
1227
+
1228
+ .expression-error-message {
1229
+ padding-left: 5px; }
1230
+
1231
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1232
+ border: none; }
1498
1233
 
1499
1234
  .react-autoql-dashboard .react-grid-item {
1500
1235
  background: var(--react-autoql-background-color-primary, #fff);
@@ -1935,104 +1670,286 @@ span.react-autoql-icon {
1935
1670
  vertical-align: bottom;
1936
1671
  line-height: 20px; }
1937
1672
 
1938
- /* React Grid Layout overrides */
1939
- .react-grid-item > .react-resizable-handle {
1940
- z-index: 1;
1941
- position: absolute;
1942
- width: 25px;
1943
- height: 25px;
1944
- bottom: 0;
1945
- right: 0; }
1673
+ /* React Grid Layout overrides */
1674
+ .react-grid-item > .react-resizable-handle {
1675
+ z-index: 1;
1676
+ position: absolute;
1677
+ width: 25px;
1678
+ height: 25px;
1679
+ bottom: 0;
1680
+ right: 0; }
1681
+
1682
+ .react-grid-item > .react-resizable-handle::after {
1683
+ width: 11px !important;
1684
+ height: 11px !important;
1685
+ bottom: 4px;
1686
+ right: 4px;
1687
+ opacity: 0;
1688
+ border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1689
+ border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1690
+ transition: opacity 0.3s ease; }
1691
+
1692
+ .react-grid-item:hover > .react-resizable-handle::after {
1693
+ opacity: 1; }
1694
+
1695
+ .react-grid-placeholder {
1696
+ background: rgba(0, 0, 0, 0.13) !important; }
1697
+
1698
+ /* This fixes the flickering bug in RGL when resizing elements */
1699
+ .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
1700
+ color: inherit; }
1701
+ .react-draggable-transparent-selection input::-moz-placeholder {
1702
+ color: inherit; }
1703
+ .react-draggable-transparent-selection input:-ms-input-placeholder {
1704
+ color: inherit; }
1705
+ .react-draggable-transparent-selection span::selection,
1706
+ .react-draggable-transparent-selection div::selection,
1707
+ .react-draggable-transparent-selection a::selection,
1708
+ .react-draggable-transparent-selection input::selection,
1709
+ .react-draggable-transparent-selection text::selection,
1710
+ .react-draggable-transparent-selection input::placeholder {
1711
+ color: inherit; }
1712
+
1713
+ .dashboard-tile-response-container .layout-pane-primary {
1714
+ overflow: hidden; }
1715
+
1716
+ .splitter-layout,
1717
+ .layout-pane,
1718
+ .dashboard-tile-split-pane-container,
1719
+ .react-autoql-dashboard-drilldown-original {
1720
+ display: flex;
1721
+ align-items: stretch;
1722
+ justify-content: center;
1723
+ width: 100%; }
1724
+
1725
+ .dashboard-tile-response-container .splitter-layout,
1726
+ .dashboard-tile-response-container .layout-pane,
1727
+ .dashboard-tile-response-container .dashboard-tile-split-pane-container {
1728
+ background: inherit; }
1729
+
1730
+ .react-autoql-notification-settings {
1731
+ background-color: var(--react-autoql-background-color-secondary);
1732
+ color: var(--react-autoql-text-color-primary);
1733
+ padding-top: 20px;
1734
+ height: 100%; }
1735
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1736
+ margin: 20px;
1737
+ margin-top: 10px;
1738
+ border-radius: 4px;
1739
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1740
+ background-color: var(--react-autoql-background-color-primary);
1741
+ overflow: hidden; }
1742
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1743
+ height: 55px;
1744
+ line-height: 55px;
1745
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1746
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1747
+ margin-right: 10px;
1748
+ cursor: pointer; }
1749
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1750
+ padding-right: 20px;
1751
+ font-size: 17px;
1752
+ opacity: 1;
1753
+ cursor: pointer;
1754
+ color: var(--react-autoql-accent-color); }
1755
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1756
+ background: rgba(0, 0, 0, 0.01); }
1757
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1758
+ opacity: 0;
1759
+ margin-right: 20px;
1760
+ font-size: 16px;
1761
+ transition: all 0.2s ease;
1762
+ color: var(--react-autoql-text-color-primary);
1763
+ cursor: pointer; }
1764
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1765
+ color: var(--react-autoql-accent-color);
1766
+ opacity: 1 !important; }
1767
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1768
+ opacity: 0.5; }
1769
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1770
+ display: flex;
1771
+ justify-content: space-between;
1772
+ height: 56px;
1773
+ padding-left: 25px;
1774
+ padding-right: 8px;
1775
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1776
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1777
+ margin-bottom: 4px;
1778
+ margin-right: 8px; }
1779
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1780
+ margin-bottom: 4px;
1781
+ margin-right: 8px;
1782
+ opacity: 0.5;
1783
+ pointer-events: none; }
1784
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1785
+ display: flex;
1786
+ justify-content: space-between;
1787
+ align-items: center;
1788
+ padding: 5px 20px;
1789
+ padding-bottom: 0;
1790
+ color: var(--react-autoql-text-color-primary); }
1791
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1792
+ display: inline-block;
1793
+ height: 35px;
1794
+ width: 35px;
1795
+ border-radius: 20px;
1796
+ background: var(--react-autoql-accent-color, #26a7df);
1797
+ color: white;
1798
+ line-height: 38px;
1799
+ text-align: center;
1800
+ font-size: 20px;
1801
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1802
+ transition: all 0.2s ease;
1803
+ margin-right: 5px;
1804
+ cursor: pointer; }
1805
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1806
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1807
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1808
+ white-space: nowrap;
1809
+ overflow: hidden;
1810
+ text-overflow: ellipsis;
1811
+ padding-right: 10px; }
1812
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1813
+ opacity: 0.5; }
1814
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1815
+ vertical-align: middle;
1816
+ margin-bottom: 4px;
1817
+ height: 18px; }
1818
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1819
+ display: flex;
1820
+ align-items: center;
1821
+ margin-top: -25px; }
1822
+
1823
+ .react-autoql-notifications-button-container {
1824
+ position: relative;
1825
+ display: inline-block;
1826
+ font-size: inherit;
1827
+ line-height: 1em;
1828
+ width: 1em; }
1829
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1830
+ font-size: 1em;
1831
+ line-height: 0;
1832
+ vertical-align: bottom; }
1833
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1834
+ position: absolute;
1835
+ border: 2px solid #fff;
1836
+ background: #f5222d;
1837
+ border-radius: 6.3em;
1838
+ line-height: 1.3em;
1839
+ left: 0.6em;
1840
+ top: -0.8em;
1841
+ padding: 0.15em 0.5em;
1842
+ text-align: center;
1843
+ color: white;
1844
+ font-size: 0.5em; }
1845
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1846
+ position: absolute;
1847
+ display: inline-block;
1848
+ border: 2px solid #fff;
1849
+ background: #f5222d;
1850
+ border-radius: 50%;
1851
+ height: 0.6em;
1852
+ width: 0.6em;
1853
+ left: 0.5em;
1854
+ top: -2px; }
1855
+
1856
+ .notification-list-loading-container {
1857
+ text-align: center;
1858
+ padding-top: 100px;
1859
+ color: var(--react-autoql-text-color-primary);
1860
+ height: 100%;
1861
+ overflow: hidden;
1862
+ background: var(--react-autoql-background-color-secondary); }
1863
+
1864
+ .empty-notifications-message {
1865
+ color: var(--react-autoql-text-color-primary);
1866
+ text-align: center;
1867
+ margin-top: 75px; }
1868
+ .empty-notifications-message div {
1869
+ opacity: 0.6; }
1870
+ .empty-notifications-message .empty-notifications-title {
1871
+ font-size: 16px;
1872
+ font-weight: bold;
1873
+ margin-bottom: 5px; }
1874
+ .empty-notifications-message .empty-notifications-img {
1875
+ width: 250px;
1876
+ height: 250px; }
1877
+
1878
+ .react-autoql-notification-list-container {
1879
+ height: 100%;
1880
+ padding: 20px;
1881
+ overflow-y: auto;
1882
+ background: var(--react-autoql-background-color-secondary); }
1946
1883
 
1947
- .react-grid-item > .react-resizable-handle::after {
1948
- width: 11px !important;
1949
- height: 11px !important;
1950
- bottom: 4px;
1951
- right: 4px;
1952
- opacity: 0;
1953
- border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1954
- border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1955
- transition: opacity 0.3s ease; }
1884
+ .react-autoql-notification-dismiss-all {
1885
+ text-align: right;
1886
+ margin-bottom: 12px;
1887
+ padding-right: 10px;
1888
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1889
+ transition: color 0.1s ease; }
1890
+ .react-autoql-notification-dismiss-all span {
1891
+ opacity: 0.8;
1892
+ cursor: pointer; }
1893
+ .react-autoql-notification-dismiss-all span:hover {
1894
+ opacity: 1; }
1956
1895
 
1957
- .react-grid-item:hover > .react-resizable-handle::after {
1958
- opacity: 1; }
1896
+ .react-autoql-notification-display-name-input {
1897
+ width: 100%; }
1959
1898
 
1960
- .react-grid-placeholder {
1961
- background: rgba(0, 0, 0, 0.13) !important; }
1899
+ .react-autoql-notification-message-input {
1900
+ width: 100%; }
1962
1901
 
1963
- /* This fixes the flickering bug in RGL when resizing elements */
1964
- .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
1965
- color: inherit; }
1966
- .react-draggable-transparent-selection input::-moz-placeholder {
1967
- color: inherit; }
1968
- .react-draggable-transparent-selection input:-ms-input-placeholder {
1969
- color: inherit; }
1970
- .react-draggable-transparent-selection span::selection,
1971
- .react-draggable-transparent-selection div::selection,
1972
- .react-draggable-transparent-selection a::selection,
1973
- .react-draggable-transparent-selection input::selection,
1974
- .react-draggable-transparent-selection text::selection,
1975
- .react-draggable-transparent-selection input::placeholder {
1976
- color: inherit; }
1902
+ .react-autoql-notification-list-item:nth-of-type(0) {
1903
+ -webkit-animation-delay: 0s;
1904
+ animation-delay: 0s; }
1977
1905
 
1978
- .dashboard-tile-response-container .layout-pane-primary {
1979
- overflow: hidden; }
1906
+ .react-autoql-notification-list-item:nth-of-type(1) {
1907
+ -webkit-animation-delay: 0.1s;
1908
+ animation-delay: 0.1s; }
1980
1909
 
1981
- .splitter-layout,
1982
- .layout-pane,
1983
- .dashboard-tile-split-pane-container,
1984
- .react-autoql-dashboard-drilldown-original {
1985
- display: flex;
1986
- align-items: stretch;
1987
- justify-content: center;
1988
- width: 100%; }
1910
+ .react-autoql-notification-list-item:nth-of-type(2) {
1911
+ -webkit-animation-delay: 0.2s;
1912
+ animation-delay: 0.2s; }
1989
1913
 
1990
- .dashboard-tile-response-container .splitter-layout,
1991
- .dashboard-tile-response-container .layout-pane,
1992
- .dashboard-tile-response-container .dashboard-tile-split-pane-container {
1993
- background: inherit; }
1914
+ .react-autoql-notification-list-item:nth-of-type(3) {
1915
+ -webkit-animation-delay: 0.3s;
1916
+ animation-delay: 0.3s; }
1994
1917
 
1995
- .notification-rule-add-btn-outer,
1996
- .notification-rule-validate-btn-outer {
1997
- text-align: center;
1998
- border-style: dashed !important;
1999
- height: 38px;
2000
- line-height: 25px;
2001
- margin: 0 !important;
2002
- overflow: hidden; }
1918
+ .react-autoql-notification-list-item:nth-of-type(4) {
1919
+ -webkit-animation-delay: 0.4s;
1920
+ animation-delay: 0.4s; }
2003
1921
 
2004
- .notification-rule-outer-container {
2005
- position: relative;
2006
- border: 1px solid transparent;
2007
- border-radius: 4px; }
2008
- .notification-rule-outer-container.outlined {
2009
- border-color: rgba(0, 0, 0, 0.15);
2010
- padding: 0 20px;
2011
- padding-bottom: 12px; }
1922
+ .react-autoql-notification-list-item:nth-of-type(5) {
1923
+ -webkit-animation-delay: 0.5s;
1924
+ animation-delay: 0.5s; }
2012
1925
 
2013
- .notification-outer-all-any {
2014
- position: absolute;
2015
- left: 0;
2016
- top: 50%; }
1926
+ .react-autoql-notification-list-item:nth-of-type(6) {
1927
+ -webkit-animation-delay: 0.6s;
1928
+ animation-delay: 0.6s; }
2017
1929
 
2018
- .notification-first-group-btn-container {
2019
- display: flex;
2020
- justify-content: space-between; }
1930
+ .react-autoql-notification-list-item:nth-of-type(7) {
1931
+ -webkit-animation-delay: 0.7s;
1932
+ animation-delay: 0.7s; }
2021
1933
 
2022
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2023
- border: none; }
1934
+ .react-autoql-notification-list-item:nth-of-type(8) {
1935
+ -webkit-animation-delay: 0.8s;
1936
+ animation-delay: 0.8s; }
2024
1937
 
2025
- .notification-rule-outer-container {
2026
- position: relative;
2027
- border: 1px solid transparent;
2028
- border-radius: 4px;
2029
- padding-bottom: 5px; }
1938
+ .react-autoql-notification-list-item:nth-of-type(9) {
1939
+ -webkit-animation-delay: 0.9s;
1940
+ animation-delay: 0.9s; }
2030
1941
 
2031
- .expression-error-message {
2032
- padding-left: 5px; }
1942
+ .react-autoql-notification-list-item:nth-of-type(10) {
1943
+ -webkit-animation-delay: 1s;
1944
+ animation-delay: 1s; }
2033
1945
 
2034
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2035
- border: none; }
1946
+ @-webkit-keyframes slideIn {
1947
+ 0% {
1948
+ opacity: 0;
1949
+ top: 500px; }
1950
+ 100% {
1951
+ opacity: 1;
1952
+ top: 0; } }
2036
1953
 
2037
1954
  .react-autoql-notification-list-item {
2038
1955
  display: flex;
@@ -2230,595 +2147,375 @@ span.react-autoql-icon {
2230
2147
  border-radius: 50px;
2231
2148
  height: 45px;
2232
2149
  width: 45px;
2233
- line-height: 45px;
2234
- font-size: 22px;
2235
- color: white;
2236
- background-color: var(--react-autoql-accent-color, #26a7df);
2237
- text-align: center;
2238
- margin-top: 13px;
2239
- margin-right: 17px; }
2240
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
2241
- flex: 1;
2242
- line-height: 23px;
2243
- padding: 13px 0px;
2244
- transition: color 0.2s ease; }
2245
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
2246
- font-size: 18px;
2247
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
2248
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
2249
- font-size: 12px;
2250
- opacity: 0.5; }
2251
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2252
- margin-bottom: -1px; }
2253
-
2254
- .react-autoql-btn {
2255
- border-radius: 4px;
2256
- cursor: pointer;
2257
- outline: none !important;
2258
- transition: all 0.2s ease;
2259
- width: auto;
2260
- display: inline-block; }
2261
-
2262
- .react-autoql-btn.disabled {
2263
- opacity: 0.4;
2264
- cursor: not-allowed;
2265
- pointer-events: none; }
2266
-
2267
- .react-autoql-btn.small {
2268
- padding: 2px 8px;
2269
- margin: 2px 3px; }
2270
-
2271
- .react-autoql-btn.large {
2272
- padding: 5px 16px;
2273
- margin: 2px 5px; }
2274
-
2275
- .react-autoql-btn.default {
2276
- color: inherit;
2277
- border: 1px solid var(--react-autoql-border-color);
2278
- background: inherit; }
2279
- .react-autoql-btn.default:hover {
2280
- border-color: var(--react-autoql-accent-color);
2281
- color: var(--react-autoql-accent-color); }
2282
-
2283
- .react-autoql-btn.primary {
2284
- background: var(--react-autoql-accent-color);
2285
- border: 1px solid var(--react-autoql-accent-color);
2286
- color: white; }
2287
- .react-autoql-btn.primary:hover {
2288
- opacity: 0.8; }
2289
-
2290
- .react-autoql-btn.danger {
2291
- color: var(--react-autoql-danger-color, #ca0b00);
2292
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2293
- background: inherit; }
2294
- .react-autoql-btn.danger:hover {
2295
- background-color: var(--react-autoql-danger-color, #ca0b00);
2296
- color: #fff; }
2297
-
2298
- .chat-single-message-container {
2299
- transition: background-color 0.2s ease;
2300
- padding-top: 6px; }
2301
- .chat-single-message-container:first-of-type {
2302
- margin-top: 10px; }
2303
- .chat-single-message-container .query-more-btn {
2304
- transition: all 0.3s ease;
2305
- font-size: 22px;
2306
- padding: 13px;
2307
- margin-bottom: 6px;
2308
- height: 42px;
2309
- opacity: 0;
2310
- visibility: hidden;
2311
- cursor: pointer; }
2312
- .chat-single-message-container .query-more-btn:hover {
2313
- opacity: 1; }
2314
-
2315
- .chat-condition-item-container {
2316
- position: absolute;
2317
- background: inherit;
2318
- bottom: 0px;
2319
- padding: 5px;
2320
- border-radius: 6px; }
2321
-
2322
- .chat-condition-item {
2323
- background: none !important;
2324
- border: none;
2325
- margin-top: -20px !important;
2326
- padding: 0 !important;
2327
- font-family: var(--react-autoql-font-family);
2328
- color: var(--react-autoql-accent-color);
2329
- text-decoration: underline;
2330
- cursor: pointer; }
2331
-
2332
- .chat-single-message-container.response {
2333
- display: flex;
2334
- justify-content: flex-start;
2335
- padding-left: 20px;
2336
- -webkit-animation: scale-up-bl 0.6s ease;
2337
- animation: scale-up-bl 0.6s ease; }
2150
+ line-height: 45px;
2151
+ font-size: 22px;
2152
+ color: white;
2153
+ background-color: var(--react-autoql-accent-color, #26a7df);
2154
+ text-align: center;
2155
+ margin-top: 13px;
2156
+ margin-right: 17px; }
2157
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
2158
+ flex: 1;
2159
+ line-height: 23px;
2160
+ padding: 13px 0px;
2161
+ transition: color 0.2s ease; }
2162
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
2163
+ font-size: 18px;
2164
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
2165
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
2166
+ font-size: 12px;
2167
+ opacity: 0.5; }
2168
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2169
+ margin-bottom: -1px; }
2338
2170
 
2339
- .chat-single-message-container.request {
2340
- display: flex;
2341
- justify-content: flex-end;
2342
- padding-right: 20px;
2343
- -webkit-animation: scale-up-br 0.6s ease;
2344
- animation: scale-up-br 0.6s ease; }
2171
+ .notification-rule-add-btn-outer,
2172
+ .notification-rule-validate-btn-outer {
2173
+ text-align: center;
2174
+ border-style: dashed !important;
2175
+ height: 38px;
2176
+ line-height: 25px;
2177
+ margin: 0 !important;
2178
+ overflow: hidden; }
2345
2179
 
2346
- .chat-single-message-container .chat-message-bubble {
2180
+ .notification-rule-outer-container {
2347
2181
  position: relative;
2348
- padding: 13px;
2349
- border-radius: 10px;
2350
- max-width: calc(100% - 20px);
2351
- word-wrap: break-word;
2352
- font-family: inherit;
2353
- font-size: 14px;
2354
- letter-spacing: 0.04em;
2355
- box-sizing: border-box;
2356
- /* make small margin on bottom because sometimes react
2357
- custom scrollbar cuts off a pixel or 2 at the bottom */
2358
- margin-bottom: 6px; }
2359
-
2360
- .chat-single-message-container .chat-message-bubble.text {
2361
- max-width: 85%; }
2362
-
2363
- .chat-single-message-container .chat-message-bubble.full-width {
2364
- width: calc(100% - 20px) !important;
2365
- min-width: calc(100% - 20px) !important;
2366
- max-width: calc(100% - 20px) !important; }
2367
-
2368
- .chat-single-message-container.response .chat-message-bubble.active {
2369
- border: 1px solid #c3c3c3; }
2370
-
2371
- .chat-single-message-container.response .chat-message-bubble {
2372
- background: var(--react-autoql-background-color-primary);
2373
- color: var(--react-autoql-text-color-primary);
2374
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2375
-
2376
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2377
- min-width: 125px; }
2378
-
2379
- .chat-single-message-container.request .chat-message-bubble {
2380
- background: var(--react-autoql-accent-color);
2381
- color: white;
2382
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2383
-
2384
- /* Increase height of message to include table filters,
2385
- so we dont have to redraw the whole table */
2386
- .chat-single-message-container.response.filtering-table {
2387
- max-height: calc(85% + 35px) !important; }
2182
+ border: 1px solid transparent;
2183
+ border-radius: 4px; }
2184
+ .notification-rule-outer-container.outlined {
2185
+ border-color: rgba(0, 0, 0, 0.15);
2186
+ padding: 0 20px;
2187
+ padding-bottom: 12px; }
2388
2188
 
2389
- .chat-message-toolbar,
2390
- .chat-message-toolbar.autoql-options-toolbar {
2391
- display: none;
2189
+ .notification-outer-all-any {
2392
2190
  position: absolute;
2393
- background: inherit;
2394
- top: -31px;
2395
- padding: 5px;
2396
- border-radius: 6px;
2397
- line-height: 28px;
2398
- background: var(--react-autoql-background-color-primary);
2399
- border: 1px solid var(--react-autoql-border-color);
2400
- color: var(--react-autoql-accent-color); }
2401
-
2402
- .chat-message-toolbar.right {
2403
- right: -9px; }
2404
-
2405
- .chat-message-toolbar.left {
2406
- left: -9px; }
2407
-
2408
- .chat-message-bubble:hover .chat-message-toolbar,
2409
- .chat-message-bubble .chat-message-toolbar.active {
2410
- display: block; }
2411
-
2412
- .report-problem-text-area {
2413
- border-radius: 4px;
2414
- border: 1px solid rgba(0, 0, 0, 0.15);
2415
- margin-top: 10px;
2416
- padding: 5px 10px;
2417
- outline: none !important; }
2418
-
2419
- .data-limit-warning-icon {
2420
- color: var(--react-autoql-warning-color) !important;
2421
- position: absolute !important;
2422
- bottom: 2px;
2423
- right: 4px;
2424
- font-size: 20px; }
2425
-
2426
- .condition-info-icon-left-align {
2427
- color: var(--react-autoql-accent-color) !important;
2428
- position: absolute !important;
2429
- bottom: 2px;
2430
- right: 10px;
2431
- font-size: 20px; }
2432
-
2433
- .condition-info-icon {
2434
- color: var(--react-autoql-accent-color) !important;
2435
- position: absolute !important;
2436
- bottom: 2px;
2437
- right: 4px;
2438
- font-size: 20px; }
2439
-
2440
- .more-options-menu,
2441
- .report-problem-menu {
2442
- background: var(--react-autoql-background-color-primary);
2443
- padding: 10px 0; }
2444
- .more-options-menu span.react-autoql-icon svg,
2445
- .report-problem-menu span.react-autoql-icon svg {
2446
- margin-right: 3px; }
2447
-
2448
- .interpretation-icon {
2449
- vertical-align: top;
2450
- height: 26px;
2451
- margin: 0 3px;
2452
- font-size: 18px; }
2453
-
2454
- /* Chart icon styles */
2455
- .chart-icon-svg-0,
2456
- .react-autoql-icon-svg-0 {
2457
- fill: currentColor; }
2191
+ left: 0;
2192
+ top: 50%; }
2458
2193
 
2459
- .hm0 {
2460
- opacity: 0.5;
2461
- fill: currentColor;
2462
- enable-background: new; }
2194
+ .notification-first-group-btn-container {
2195
+ display: flex;
2196
+ justify-content: space-between; }
2463
2197
 
2464
- .hm1 {
2465
- fill: currentColor; }
2198
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2199
+ border: none; }
2466
2200
 
2467
- .hm2 {
2468
- opacity: 0.15;
2469
- fill: currentColor;
2470
- enable-background: new; }
2201
+ .notification-modal-content .react-autoql-step-content p {
2202
+ margin-bottom: 0.5em;
2203
+ margin-top: 0.5em;
2204
+ padding-left: 8px; }
2471
2205
 
2472
- .hm3 {
2473
- opacity: 0.6;
2474
- fill: currentColor;
2475
- enable-background: new; }
2206
+ .notification-modal-content .step-btn-container {
2207
+ text-align: right;
2208
+ display: flex;
2209
+ min-height: 50px; }
2476
2210
 
2477
- .hm4 {
2478
- opacity: 0.65;
2479
- fill: currentColor;
2480
- enable-background: new; }
2211
+ .expression-valid-checkmark.react-autoql-icon svg {
2212
+ color: var(--react-autoql-success-color); }
2481
2213
 
2482
- .hm5 {
2483
- fill: currentColor; }
2214
+ .expression-invalid-message-container {
2215
+ max-width: 75%;
2216
+ float: left;
2217
+ text-align: left !important;
2218
+ display: flex;
2219
+ flex-direction: row;
2220
+ align-items: left;
2221
+ justify-content: left; }
2484
2222
 
2485
- .hm6 {
2486
- fill: currentColor; }
2223
+ .expression-invalid-message {
2224
+ color: var(--react-autoql-danger-color);
2225
+ display: 'inline-block'; }
2487
2226
 
2488
- /* animations */
2489
- @-webkit-keyframes scale-up-br {
2490
- 0% {
2491
- transform: scale(0.5);
2492
- transform-origin: 100% 100%; }
2493
- 100% {
2494
- transform: scale(1);
2495
- transform-origin: 100% 100%; } }
2496
- @keyframes scale-up-br {
2497
- 0% {
2498
- transform: scale(0.5);
2499
- transform-origin: 100% 100%; }
2500
- 100% {
2501
- transform: scale(1);
2502
- transform-origin: 100% 100%; } }
2227
+ .react-autoql-step-container a {
2228
+ color: var(--react-autoql-accent-color, #26a7df); }
2503
2229
 
2504
- @-webkit-keyframes scale-up-bl {
2505
- 0% {
2506
- transform: scale(0.5);
2507
- transform-origin: 0% 100%; }
2508
- 100% {
2509
- transform: scale(1);
2510
- transform-origin: 0% 100%; } }
2230
+ .frequency-date-select-container {
2231
+ margin-top: 10px; }
2511
2232
 
2512
- @keyframes scale-up-bl {
2513
- 0% {
2514
- transform: scale(0.5);
2515
- transform-origin: 0% 100%; }
2516
- 100% {
2517
- transform: scale(1);
2518
- transform-origin: 0% 100%; } }
2233
+ .notification-frequency-step {
2234
+ display: flex; }
2235
+ .notification-frequency-step .frequency-category-select {
2236
+ position: relative;
2237
+ padding-top: 9px; }
2238
+ .notification-frequency-step .notification-frequency-select {
2239
+ margin-left: 8px; }
2240
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
2241
+ line-height: 33px; }
2242
+ .notification-frequency-step .frequency-repeat-follow-text {
2243
+ line-height: 32px;
2244
+ vertical-align: top; }
2245
+ .notification-frequency-step .frequency-settings-container {
2246
+ flex: 0 1 400px; }
2519
2247
 
2520
- .react-autoql-cascader {
2521
- position: relative;
2522
- white-space: nowrap;
2523
- overflow: hidden;
2524
- min-width: 300px; }
2525
- .react-autoql-cascader .options-container {
2526
- transition: max-width 0.3s ease;
2248
+ .schedule-builder-timezone-section {
2249
+ margin: 10px 5px; }
2250
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
2527
2251
  display: inline-block;
2528
- vertical-align: top;
2529
- padding: 0 10px;
2530
- margin: 10px 0;
2531
- width: 100%;
2532
- max-width: calc(100% - 20px);
2533
- white-space: pre-wrap; }
2534
- .react-autoql-cascader .options-container.hidden {
2535
- max-width: 0; }
2536
- .react-autoql-cascader .options-container.hidden span {
2537
- white-space: nowrap; }
2538
- .react-autoql-cascader .options-container.hidden .option {
2539
- opacity: 0;
2540
- pointer-events: none; }
2541
- .react-autoql-cascader .options-container .options-title {
2542
- padding: 4px;
2543
- padding-left: 10px;
2544
- font-weight: 600; }
2545
- .react-autoql-cascader .options-container .cascader-back-arrow {
2546
- position: absolute;
2547
- cursor: pointer;
2548
- top: 15px;
2549
- left: 0; }
2550
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2551
- opacity: 0.8; }
2552
- .react-autoql-cascader .options-container .option {
2553
- cursor: pointer;
2554
- padding: 4px;
2555
- display: flex;
2556
- justify-content: space-between;
2557
- border-radius: 2px;
2558
- padding-left: 10px; }
2559
- .react-autoql-cascader .options-container .option .option-arrow {
2560
- opacity: 0.7; }
2561
- .react-autoql-cascader .options-container .option .option-execute-icon {
2562
- opacity: 0;
2563
- color: #fff;
2564
- font-size: 16px;
2565
- vertical-align: middle; }
2566
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2567
- background-color: var(--react-autoql-accent-color, #26a7df);
2568
- color: #fff; }
2569
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2570
- opacity: 1; }
2571
- .react-autoql-cascader .options-container:not(:last-child) {
2572
- border-right: 1px solid #d3d3d352; }
2252
+ width: 300px; }
2573
2253
 
2574
- .ReactModal__Overlay {
2575
- background-color: transparent !important;
2576
- transition: background-color 0.2s ease-in-out;
2577
- z-index: 9999; }
2254
+ .react-autoql-btn {
2255
+ border-radius: 4px;
2256
+ cursor: pointer;
2257
+ outline: none !important;
2258
+ transition: all 0.2s ease;
2259
+ width: auto;
2260
+ display: inline-block; }
2578
2261
 
2579
- .ReactModal__Overlay--after-open {
2580
- background-color: rgba(0, 0, 0, 0.25) !important; }
2262
+ .react-autoql-btn.disabled {
2263
+ opacity: 0.4;
2264
+ cursor: not-allowed;
2265
+ pointer-events: none; }
2581
2266
 
2582
- .ReactModal__Overlay--before-close {
2583
- background-color: transparent !important; }
2267
+ .react-autoql-btn.small {
2268
+ padding: 2px 8px;
2269
+ margin: 2px 3px; }
2584
2270
 
2585
- .ReactModal__Content {
2586
- display: flex;
2587
- flex-direction: column;
2588
- transform: scale(0);
2589
- transition: all 0.2s ease-in-out;
2590
- color: var(--react-autoql-text-color-primary);
2591
- border: 1px solid var(--react-autoql-border-color) !important;
2592
- background: var(--react-autoql-background-color-primary) !important;
2593
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2594
- padding: 0 !important;
2595
- margin: auto auto;
2596
- max-width: 90vw;
2597
- max-height: calc(100vh - 90px); }
2598
- .ReactModal__Content input.react-autoql-input,
2599
- .ReactModal__Content textarea.react-autoql-input,
2600
- .ReactModal__Content textarea {
2601
- border-color: var(--react-autoql-border-color);
2602
- color: var(--react-autoql-text-color-primary);
2603
- background: var(--react-autoql-background-color-primary, white); }
2604
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2605
- color: var(--react-autoql-text-color-placeholder); }
2606
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2607
- color: var(--react-autoql-text-color-placeholder); }
2608
- .ReactModal__Content input.react-autoql-input::placeholder,
2609
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2610
- .ReactModal__Content textarea::placeholder {
2611
- color: var(--react-autoql-text-color-placeholder); }
2271
+ .react-autoql-btn.large {
2272
+ padding: 5px 16px;
2273
+ margin: 2px 5px; }
2612
2274
 
2613
- .ReactModal__Overlay--after-open .ReactModal__Content {
2614
- transform: scale(1); }
2275
+ .react-autoql-btn.default {
2276
+ color: inherit;
2277
+ border: 1px solid var(--react-autoql-border-color);
2278
+ background: inherit; }
2279
+ .react-autoql-btn.default:hover {
2280
+ border-color: var(--react-autoql-accent-color);
2281
+ color: var(--react-autoql-accent-color); }
2615
2282
 
2616
- .ReactModal__Overlay--before-close .ReactModal__Content {
2617
- transform: scale(0); }
2283
+ .react-autoql-btn.primary {
2284
+ background: var(--react-autoql-accent-color);
2285
+ border: 1px solid var(--react-autoql-accent-color);
2286
+ color: white; }
2287
+ .react-autoql-btn.primary:hover {
2288
+ opacity: 0.8; }
2618
2289
 
2619
- .react-autoql-modal-header {
2620
- position: relative;
2621
- text-align: center;
2622
- flex: 0 0 52px;
2623
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2624
- padding: 14px 60px;
2625
- font-size: 16px; }
2290
+ .react-autoql-btn.danger {
2291
+ color: var(--react-autoql-danger-color, #ca0b00);
2292
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2293
+ background: inherit; }
2294
+ .react-autoql-btn.danger:hover {
2295
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2296
+ color: #fff; }
2626
2297
 
2627
- .react-autoql-modal-footer {
2628
- position: relative;
2629
- flex: 0 0 52px;
2630
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2631
- text-align: right;
2632
- padding: 8px 10px; }
2298
+ .chat-single-message-container {
2299
+ transition: background-color 0.2s ease;
2300
+ padding-top: 6px; }
2301
+ .chat-single-message-container:first-of-type {
2302
+ margin-top: 10px; }
2303
+ .chat-single-message-container .query-more-btn {
2304
+ transition: all 0.3s ease;
2305
+ font-size: 22px;
2306
+ padding: 13px;
2307
+ margin-bottom: 6px;
2308
+ height: 42px;
2309
+ opacity: 0;
2310
+ visibility: hidden;
2311
+ cursor: pointer; }
2312
+ .chat-single-message-container .query-more-btn:hover {
2313
+ opacity: 1; }
2633
2314
 
2634
- .react-autoql-modal-body {
2635
- display: flex;
2636
- flex-direction: column;
2637
- padding: 25px;
2638
- flex: 1;
2639
- overflow: hidden; }
2640
- .react-autoql-modal-body h3 {
2641
- color: var(--react-autoql-text-color-primary); }
2315
+ .chat-condition-item-container {
2316
+ position: absolute;
2317
+ background: inherit;
2318
+ bottom: 0px;
2319
+ padding: 5px;
2320
+ border-radius: 6px; }
2642
2321
 
2643
- .react-autoql-modal-close-btn {
2644
- position: absolute !important;
2645
- top: 10px;
2646
- right: 18px;
2647
- font-size: 22px;
2648
- opacity: 0.6 !important;
2322
+ .chat-condition-item {
2323
+ background: none !important;
2324
+ border: none;
2325
+ margin-top: -20px !important;
2326
+ padding: 0 !important;
2327
+ font-family: var(--react-autoql-font-family);
2328
+ color: var(--react-autoql-accent-color);
2329
+ text-decoration: underline;
2649
2330
  cursor: pointer; }
2650
2331
 
2651
- .react-autoql-modal-close-btn:hover {
2652
- opacity: 1 !important; }
2332
+ .chat-single-message-container.response {
2333
+ display: flex;
2334
+ justify-content: flex-start;
2335
+ padding-left: 20px;
2336
+ -webkit-animation: scale-up-bl 0.6s ease;
2337
+ animation: scale-up-bl 0.6s ease; }
2653
2338
 
2654
- .react-autoql-table-container {
2655
- height: 100%;
2656
- max-width: 100%;
2657
- background-color: inherit; }
2339
+ .chat-single-message-container.request {
2340
+ display: flex;
2341
+ justify-content: flex-end;
2342
+ padding-right: 20px;
2343
+ -webkit-animation: scale-up-br 0.6s ease;
2344
+ animation: scale-up-br 0.6s ease; }
2658
2345
 
2659
- .react-autoql-table {
2660
- margin-bottom: 0; }
2346
+ .chat-single-message-container .chat-message-bubble {
2347
+ position: relative;
2348
+ padding: 13px;
2349
+ border-radius: 10px;
2350
+ max-width: calc(100% - 20px);
2351
+ word-wrap: break-word;
2352
+ font-family: inherit;
2353
+ font-size: 14px;
2354
+ letter-spacing: 0.04em;
2355
+ box-sizing: border-box;
2356
+ /* make small margin on bottom because sometimes react
2357
+ custom scrollbar cuts off a pixel or 2 at the bottom */
2358
+ margin-bottom: 6px; }
2661
2359
 
2662
- /* tabulator */
2663
- .react-autoql-table.tabulator,
2664
- .react-autoql-table.tabulator .tabulator-row,
2665
- .react-autoql-table.tabulator .tabulator-header,
2666
- .react-autoql-table.tabulator .tabulator-headers,
2667
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2668
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2669
- background-color: inherit; }
2360
+ .chat-single-message-container .chat-message-bubble.text {
2361
+ max-width: 85%; }
2670
2362
 
2671
- .react-autoql-table-container.supports-drilldown
2672
- .react-autoql-table.tabulator
2673
- .tabulator-row.tabulator-unselectable:hover {
2674
- cursor: pointer !important;
2675
- background-color: var(--react-autoql-hover-color) !important; }
2363
+ .chat-single-message-container .chat-message-bubble.full-width {
2364
+ width: calc(100% - 20px) !important;
2365
+ min-width: calc(100% - 20px) !important;
2366
+ max-width: calc(100% - 20px) !important; }
2676
2367
 
2677
- .react-autoql-table.tabulator
2678
- .tabulator-header
2679
- .tabulator-col.tabulator-sortable:hover {
2680
- background-color: var(--react-autoql-hover-color) !important; }
2368
+ .chat-single-message-container.response .chat-message-bubble.active {
2369
+ border: 1px solid #c3c3c3; }
2681
2370
 
2682
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2683
- .react-autoql-table.tabulator .tabulator-cell {
2684
- border-color: var(--react-autoql-border-color); }
2371
+ .chat-single-message-container.response .chat-message-bubble {
2372
+ background: var(--react-autoql-background-color-primary);
2373
+ color: var(--react-autoql-text-color-primary);
2374
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2685
2375
 
2686
- .react-autoql-table.tabulator .tabulator-header {
2687
- border-bottom: 2px solid var(--react-autoql-border-color); }
2376
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2377
+ min-width: 125px; }
2688
2378
 
2689
- .react-autoql-table.tabulator {
2690
- background-color: inherit;
2691
- height: 100%; }
2379
+ .chat-single-message-container.request .chat-message-bubble {
2380
+ background: var(--react-autoql-accent-color);
2381
+ color: white;
2382
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2692
2383
 
2693
- .react-autoql-table .tabulator-row {
2694
- /* user-select: none; This breaks copy/paste */
2695
- border-bottom: 1px solid var(--react-autoql-border-color); }
2384
+ /* Increase height of message to include table filters,
2385
+ so we dont have to redraw the whole table */
2386
+ .chat-single-message-container.response.filtering-table {
2387
+ max-height: calc(85% + 35px) !important; }
2696
2388
 
2697
- .tabulator-cell:not(:first-child) {
2698
- border-left: 1px solid !important;
2699
- border-color: rgba(0, 0, 0, 0.06) !important; }
2389
+ .chat-message-toolbar,
2390
+ .chat-message-toolbar.autoql-options-toolbar {
2391
+ display: none;
2392
+ position: absolute;
2393
+ background: inherit;
2394
+ top: -31px;
2395
+ padding: 5px;
2396
+ border-radius: 6px;
2397
+ line-height: 28px;
2398
+ background: var(--react-autoql-background-color-primary);
2399
+ border: 1px solid var(--react-autoql-border-color);
2400
+ color: var(--react-autoql-accent-color); }
2700
2401
 
2701
- .react-autoql-table .tabulator-tableHolder {
2702
- max-height: calc(100% - 38px) !important;
2703
- background-color: inherit; }
2402
+ .chat-message-toolbar.right {
2403
+ right: -9px; }
2704
2404
 
2705
- .react-autoql-table.tabulator
2706
- .tabulator-header
2707
- .tabulator-col
2708
- .tabulator-col-content {
2709
- padding: 8px 5px; }
2405
+ .chat-message-toolbar.left {
2406
+ left: -9px; }
2710
2407
 
2711
- .react-autoql-table.tabulator
2712
- .tabulator-header
2713
- .tabulator-col
2714
- .tabulator-col-content
2715
- .tabulator-arrow {
2716
- opacity: 0;
2717
- border-left: 4px solid transparent !important;
2718
- border-right: 4px solid transparent !important;
2719
- right: 4px;
2720
- top: calc(50% - 3px); }
2408
+ .chat-message-bubble:hover .chat-message-toolbar,
2409
+ .chat-message-bubble .chat-message-toolbar.active {
2410
+ display: block; }
2721
2411
 
2722
- .react-autoql-table.tabulator
2723
- .tabulator-header
2724
- .tabulator-col:hover
2725
- .tabulator-col-content
2726
- .tabulator-arrow {
2727
- opacity: 1 !important; }
2412
+ .report-problem-text-area {
2413
+ border-radius: 4px;
2414
+ border: 1px solid rgba(0, 0, 0, 0.15);
2415
+ margin-top: 10px;
2416
+ padding: 5px 10px;
2417
+ outline: none !important; }
2728
2418
 
2729
- .react-autoql-table.tabulator
2730
- .tabulator-header
2731
- .tabulator-col.tabulator-sortable[aria-sort='desc']
2732
- .tabulator-col-content
2733
- .tabulator-arrow {
2734
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2419
+ .data-limit-warning-icon {
2420
+ color: var(--react-autoql-warning-color) !important;
2421
+ position: absolute !important;
2422
+ bottom: 2px;
2423
+ right: 4px;
2424
+ font-size: 20px; }
2735
2425
 
2736
- .react-autoql-table.tabulator
2737
- .tabulator-header
2738
- .tabulator-col.tabulator-sortable[aria-sort='asc']
2739
- .tabulator-col-content
2740
- .tabulator-arrow,
2741
- .react-autoql-table.tabulator
2742
- .tabulator-header
2743
- .tabulator-col.tabulator-sortable[aria-sort='none']
2744
- .tabulator-col-content
2745
- .tabulator-arrow {
2746
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2426
+ .condition-info-icon-left-align {
2427
+ color: var(--react-autoql-accent-color) !important;
2428
+ position: absolute !important;
2429
+ bottom: 2px;
2430
+ right: 10px;
2431
+ font-size: 20px; }
2747
2432
 
2748
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2749
- display: unset;
2750
- opacity: 0;
2751
- background-color: transparent;
2752
- width: 7px;
2753
- height: 7px;
2754
- -webkit-transition: all 0.3s ease;
2755
- transition: all 0.3s ease; }
2433
+ .condition-info-icon {
2434
+ color: var(--react-autoql-accent-color) !important;
2435
+ position: absolute !important;
2436
+ bottom: 2px;
2437
+ right: 4px;
2438
+ font-size: 20px; }
2756
2439
 
2757
- .react-autoql-table.tabulator .tabulator-tableHolder {
2758
- min-height: calc(100% - 40px) !important;
2759
- height: calc(100% - 40px) !important;
2760
- max-height: calc(100% - 40px) !important; }
2440
+ .more-options-menu,
2441
+ .report-problem-menu {
2442
+ background: var(--react-autoql-background-color-primary);
2443
+ padding: 10px 0; }
2444
+ .more-options-menu span.react-autoql-icon svg,
2445
+ .report-problem-menu span.react-autoql-icon svg {
2446
+ margin-right: 3px; }
2761
2447
 
2762
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2763
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2764
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2765
- background-color: transparent; }
2448
+ .interpretation-icon {
2449
+ vertical-align: top;
2450
+ height: 26px;
2451
+ margin: 0 3px;
2452
+ font-size: 18px; }
2766
2453
 
2767
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2768
- background-color: rgba(0, 0, 0, 0.2);
2769
- border-radius: 7px;
2770
- border: 0px; }
2454
+ /* Chart icon styles */
2455
+ .chart-icon-svg-0,
2456
+ .react-autoql-icon-svg-0 {
2457
+ fill: currentColor; }
2771
2458
 
2772
- .react-autoql-table .tabulator-header-filter input {
2773
- border: 1px solid var(--react-autoql-border-color);
2774
- border-radius: 4px;
2775
- background: transparent;
2776
- padding: 4px 9px !important;
2777
- outline: none !important; }
2459
+ .hm0 {
2460
+ opacity: 0.5;
2461
+ fill: currentColor;
2462
+ enable-background: new; }
2778
2463
 
2779
- .react-autoql-table .tabulator-header-filter input:focus {
2780
- border: 1px solid #28a8e0; }
2464
+ .hm1 {
2465
+ fill: currentColor; }
2781
2466
 
2782
- /* These are necessary because we are always rendering the
2783
- filter (just display: none when not used) instead of re-rendering
2784
- the whole table when the filter button is clicked */
2785
- .react-autoql-table-container:not(.filtering)
2786
- .react-autoql-table
2787
- .tabulator-header-filter {
2788
- display: none; }
2467
+ .hm2 {
2468
+ opacity: 0.15;
2469
+ fill: currentColor;
2470
+ enable-background: new; }
2789
2471
 
2790
- .react-autoql-table-container:not(.filtering)
2791
- .react-autoql-table
2792
- .tabulator-col {
2793
- height: auto !important; }
2472
+ .hm3 {
2473
+ opacity: 0.6;
2474
+ fill: currentColor;
2475
+ enable-background: new; }
2794
2476
 
2795
- .tabulator-table .tabulator-row .tabulator-cell {
2796
- min-height: 38px; }
2477
+ .hm4 {
2478
+ opacity: 0.65;
2479
+ fill: currentColor;
2480
+ enable-background: new; }
2797
2481
 
2798
- /* Center header titles */
2799
- .react-autoql-table .tabulator-header .tabulator-col {
2800
- text-align: center !important; }
2482
+ .hm5 {
2483
+ fill: currentColor; }
2801
2484
 
2802
- .react-autoql-table .tabulator-header .tabulator-col-title {
2803
- padding-left: 10px !important;
2804
- padding-right: 10px !important; }
2485
+ .hm6 {
2486
+ fill: currentColor; }
2805
2487
 
2806
- .filter-tag {
2807
- color: #2ecc40;
2808
- border: 1px solid;
2809
- padding: 2px 4px;
2810
- border-radius: 4px;
2811
- font-weight: 400;
2812
- font-size: 10px;
2813
- margin-right: 5px;
2814
- vertical-align: top;
2815
- line-height: 21px; }
2488
+ /* animations */
2489
+ @-webkit-keyframes scale-up-br {
2490
+ 0% {
2491
+ transform: scale(0.5);
2492
+ transform-origin: 100% 100%; }
2493
+ 100% {
2494
+ transform: scale(1);
2495
+ transform-origin: 100% 100%; } }
2496
+ @keyframes scale-up-br {
2497
+ 0% {
2498
+ transform: scale(0.5);
2499
+ transform-origin: 100% 100%; }
2500
+ 100% {
2501
+ transform: scale(1);
2502
+ transform-origin: 100% 100%; } }
2816
2503
 
2817
- .comparison-value-positive {
2818
- color: #2ecc40; }
2504
+ @-webkit-keyframes scale-up-bl {
2505
+ 0% {
2506
+ transform: scale(0.5);
2507
+ transform-origin: 0% 100%; }
2508
+ 100% {
2509
+ transform: scale(1);
2510
+ transform-origin: 0% 100%; } }
2819
2511
 
2820
- .comparison-value-negative {
2821
- color: #e80000; }
2512
+ @keyframes scale-up-bl {
2513
+ 0% {
2514
+ transform: scale(0.5);
2515
+ transform-origin: 0% 100%; }
2516
+ 100% {
2517
+ transform: scale(1);
2518
+ transform-origin: 0% 100%; } }
2822
2519
 
2823
2520
  .query-tips-page-container {
2824
2521
  height: 100%;
@@ -2992,6 +2689,60 @@ the whole table when the filter button is clicked */
2992
2689
  100% {
2993
2690
  opacity: 1; } }
2994
2691
 
2692
+ .react-autoql-cascader {
2693
+ position: relative;
2694
+ white-space: nowrap;
2695
+ overflow: hidden;
2696
+ min-width: 300px; }
2697
+ .react-autoql-cascader .options-container {
2698
+ transition: max-width 0.3s ease;
2699
+ display: inline-block;
2700
+ vertical-align: top;
2701
+ padding: 0 10px;
2702
+ margin: 10px 0;
2703
+ width: 100%;
2704
+ max-width: calc(100% - 20px);
2705
+ white-space: pre-wrap; }
2706
+ .react-autoql-cascader .options-container.hidden {
2707
+ max-width: 0; }
2708
+ .react-autoql-cascader .options-container.hidden span {
2709
+ white-space: nowrap; }
2710
+ .react-autoql-cascader .options-container.hidden .option {
2711
+ opacity: 0;
2712
+ pointer-events: none; }
2713
+ .react-autoql-cascader .options-container .options-title {
2714
+ padding: 4px;
2715
+ padding-left: 10px;
2716
+ font-weight: 600; }
2717
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2718
+ position: absolute;
2719
+ cursor: pointer;
2720
+ top: 15px;
2721
+ left: 0; }
2722
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2723
+ opacity: 0.8; }
2724
+ .react-autoql-cascader .options-container .option {
2725
+ cursor: pointer;
2726
+ padding: 4px;
2727
+ display: flex;
2728
+ justify-content: space-between;
2729
+ border-radius: 2px;
2730
+ padding-left: 10px; }
2731
+ .react-autoql-cascader .options-container .option .option-arrow {
2732
+ opacity: 0.7; }
2733
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2734
+ opacity: 0;
2735
+ color: #fff;
2736
+ font-size: 16px;
2737
+ vertical-align: middle; }
2738
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2739
+ background-color: var(--react-autoql-accent-color, #26a7df);
2740
+ color: #fff; }
2741
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2742
+ opacity: 1; }
2743
+ .react-autoql-cascader .options-container:not(:last-child) {
2744
+ border-right: 1px solid #d3d3d352; }
2745
+
2995
2746
  .react-autoql-condition-locking-input {
2996
2747
  padding: 5px;
2997
2748
  padding-left: 20px;
@@ -3116,35 +2867,284 @@ the whole table when the filter button is clicked */
3116
2867
  .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3117
2868
  color: var(--react-autoql-text-color-primary); }
3118
2869
 
3119
- .autoql-condition-locking-menu-container input::-moz-placeholder {
3120
- opacity: 0.5; }
2870
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
2871
+ opacity: 0.5; }
2872
+
2873
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2874
+ opacity: 0.5; }
2875
+
2876
+ .autoql-condition-locking-menu-container input::placeholder {
2877
+ opacity: 0.5; }
2878
+
2879
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2880
+ margin: 0;
2881
+ padding: 0;
2882
+ list-style-type: none; }
2883
+
2884
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2885
+ cursor: pointer;
2886
+ padding: 2px;
2887
+ padding-left: 18px;
2888
+ letter-spacing: 0.05em;
2889
+ line-height: 22.5px; }
2890
+
2891
+ .autoql-condition-locking-menu-container
2892
+ .react-autosuggest__suggestion--highlighted {
2893
+ background-color: rgba(0, 0, 0, 0.1) !important; }
2894
+
2895
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2896
+ padding: 10px 0 0 10px;
2897
+ font-size: 12px;
2898
+ color: #777; }
2899
+
2900
+ .react-autoql-table-container {
2901
+ height: 100%;
2902
+ max-width: 100%;
2903
+ background-color: inherit; }
2904
+
2905
+ .react-autoql-table {
2906
+ margin-bottom: 0; }
2907
+
2908
+ /* tabulator */
2909
+ .react-autoql-table.tabulator,
2910
+ .react-autoql-table.tabulator .tabulator-row,
2911
+ .react-autoql-table.tabulator .tabulator-header,
2912
+ .react-autoql-table.tabulator .tabulator-headers,
2913
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2914
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2915
+ background-color: inherit; }
2916
+
2917
+ .react-autoql-table-container.supports-drilldown
2918
+ .react-autoql-table.tabulator
2919
+ .tabulator-row.tabulator-unselectable:hover {
2920
+ cursor: pointer !important;
2921
+ background-color: var(--react-autoql-hover-color) !important; }
2922
+
2923
+ .react-autoql-table.tabulator
2924
+ .tabulator-header
2925
+ .tabulator-col.tabulator-sortable:hover {
2926
+ background-color: var(--react-autoql-hover-color) !important; }
2927
+
2928
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2929
+ .react-autoql-table.tabulator .tabulator-cell {
2930
+ border-color: var(--react-autoql-border-color); }
2931
+
2932
+ .react-autoql-table.tabulator .tabulator-header {
2933
+ border-bottom: 2px solid var(--react-autoql-border-color); }
2934
+
2935
+ .react-autoql-table.tabulator {
2936
+ background-color: inherit;
2937
+ height: 100%; }
2938
+
2939
+ .react-autoql-table .tabulator-row {
2940
+ /* user-select: none; This breaks copy/paste */
2941
+ border-bottom: 1px solid var(--react-autoql-border-color); }
2942
+
2943
+ .tabulator-cell:not(:first-child) {
2944
+ border-left: 1px solid !important;
2945
+ border-color: rgba(0, 0, 0, 0.06) !important; }
2946
+
2947
+ .react-autoql-table .tabulator-tableHolder {
2948
+ max-height: calc(100% - 38px) !important;
2949
+ background-color: inherit; }
2950
+
2951
+ .react-autoql-table.tabulator
2952
+ .tabulator-header
2953
+ .tabulator-col
2954
+ .tabulator-col-content {
2955
+ padding: 8px 5px; }
2956
+
2957
+ .react-autoql-table.tabulator
2958
+ .tabulator-header
2959
+ .tabulator-col
2960
+ .tabulator-col-content
2961
+ .tabulator-arrow {
2962
+ opacity: 0;
2963
+ border-left: 4px solid transparent !important;
2964
+ border-right: 4px solid transparent !important;
2965
+ right: 4px;
2966
+ top: calc(50% - 3px); }
2967
+
2968
+ .react-autoql-table.tabulator
2969
+ .tabulator-header
2970
+ .tabulator-col:hover
2971
+ .tabulator-col-content
2972
+ .tabulator-arrow {
2973
+ opacity: 1 !important; }
2974
+
2975
+ .react-autoql-table.tabulator
2976
+ .tabulator-header
2977
+ .tabulator-col.tabulator-sortable[aria-sort='desc']
2978
+ .tabulator-col-content
2979
+ .tabulator-arrow {
2980
+ border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2981
+
2982
+ .react-autoql-table.tabulator
2983
+ .tabulator-header
2984
+ .tabulator-col.tabulator-sortable[aria-sort='asc']
2985
+ .tabulator-col-content
2986
+ .tabulator-arrow,
2987
+ .react-autoql-table.tabulator
2988
+ .tabulator-header
2989
+ .tabulator-col.tabulator-sortable[aria-sort='none']
2990
+ .tabulator-col-content
2991
+ .tabulator-arrow {
2992
+ border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2993
+
2994
+ .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2995
+ display: unset;
2996
+ opacity: 0;
2997
+ background-color: transparent;
2998
+ width: 7px;
2999
+ height: 7px;
3000
+ -webkit-transition: all 0.3s ease;
3001
+ transition: all 0.3s ease; }
3002
+
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
+
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
+
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; }
3017
+
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; }
3024
+
3025
+ .react-autoql-table .tabulator-header-filter input:focus {
3026
+ border: 1px solid #28a8e0; }
3027
+
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; }
3035
+
3036
+ .react-autoql-table-container:not(.filtering)
3037
+ .react-autoql-table
3038
+ .tabulator-col {
3039
+ height: auto !important; }
3040
+
3041
+ .tabulator-table .tabulator-row .tabulator-cell {
3042
+ min-height: 38px; }
3043
+
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; }
3062
+
3063
+ .comparison-value-positive {
3064
+ color: #2ecc40; }
3065
+
3066
+ .comparison-value-negative {
3067
+ color: #e80000; }
3068
+
3069
+ .ReactModal__Overlay {
3070
+ background-color: transparent !important;
3071
+ transition: background-color 0.2s ease-in-out;
3072
+ z-index: 9999; }
3073
+
3074
+ .ReactModal__Overlay--after-open {
3075
+ background-color: rgba(0, 0, 0, 0.25) !important; }
3076
+
3077
+ .ReactModal__Overlay--before-close {
3078
+ background-color: transparent !important; }
3079
+
3080
+ .ReactModal__Content {
3081
+ display: flex;
3082
+ flex-direction: column;
3083
+ transform: scale(0);
3084
+ transition: all 0.2s ease-in-out;
3085
+ color: var(--react-autoql-text-color-primary);
3086
+ border: 1px solid var(--react-autoql-border-color) !important;
3087
+ background: var(--react-autoql-background-color-primary) !important;
3088
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
3089
+ padding: 0 !important;
3090
+ margin: auto auto;
3091
+ max-width: 90vw;
3092
+ max-height: calc(100vh - 90px); }
3093
+ .ReactModal__Content input.react-autoql-input,
3094
+ .ReactModal__Content textarea.react-autoql-input,
3095
+ .ReactModal__Content textarea {
3096
+ border-color: var(--react-autoql-border-color);
3097
+ color: var(--react-autoql-text-color-primary);
3098
+ background: var(--react-autoql-background-color-primary, white); }
3099
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
3100
+ color: var(--react-autoql-text-color-placeholder); }
3101
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
3102
+ color: var(--react-autoql-text-color-placeholder); }
3103
+ .ReactModal__Content input.react-autoql-input::placeholder,
3104
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
3105
+ .ReactModal__Content textarea::placeholder {
3106
+ color: var(--react-autoql-text-color-placeholder); }
3107
+
3108
+ .ReactModal__Overlay--after-open .ReactModal__Content {
3109
+ transform: scale(1); }
3121
3110
 
3122
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3123
- opacity: 0.5; }
3111
+ .ReactModal__Overlay--before-close .ReactModal__Content {
3112
+ transform: scale(0); }
3124
3113
 
3125
- .autoql-condition-locking-menu-container input::placeholder {
3126
- opacity: 0.5; }
3114
+ .react-autoql-modal-header {
3115
+ position: relative;
3116
+ text-align: center;
3117
+ flex: 0 0 52px;
3118
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
3119
+ padding: 14px 60px;
3120
+ font-size: 16px; }
3127
3121
 
3128
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3129
- margin: 0;
3130
- padding: 0;
3131
- list-style-type: none; }
3122
+ .react-autoql-modal-footer {
3123
+ position: relative;
3124
+ flex: 0 0 52px;
3125
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
3126
+ text-align: right;
3127
+ padding: 8px 10px; }
3132
3128
 
3133
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3134
- cursor: pointer;
3135
- padding: 2px;
3136
- padding-left: 18px;
3137
- letter-spacing: 0.05em;
3138
- line-height: 22.5px; }
3129
+ .react-autoql-modal-body {
3130
+ display: flex;
3131
+ flex-direction: column;
3132
+ padding: 25px;
3133
+ flex: 1;
3134
+ overflow: hidden; }
3135
+ .react-autoql-modal-body h3 {
3136
+ color: var(--react-autoql-text-color-primary); }
3139
3137
 
3140
- .autoql-condition-locking-menu-container
3141
- .react-autosuggest__suggestion--highlighted {
3142
- background-color: rgba(0, 0, 0, 0.1) !important; }
3138
+ .react-autoql-modal-close-btn {
3139
+ position: absolute !important;
3140
+ top: 10px;
3141
+ right: 18px;
3142
+ font-size: 22px;
3143
+ opacity: 0.6 !important;
3144
+ cursor: pointer; }
3143
3145
 
3144
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3145
- padding: 10px 0 0 10px;
3146
- font-size: 12px;
3147
- color: #777; }
3146
+ .react-autoql-modal-close-btn:hover {
3147
+ opacity: 1 !important; }
3148
3148
 
3149
3149
  .autoql-options-toolbar {
3150
3150
  position: absolute;
@@ -3206,271 +3206,110 @@ the whole table when the filter button is clicked */
3206
3206
  .react-autoql-chart-container .square:hover {
3207
3207
  fill-opacity: 1 !important; }
3208
3208
 
3209
- .react-autoql-chart-container .vertex-dot:hover,
3210
- .react-autoql-chart-container .line-dot:hover,
3211
- .react-autoql-chart-container .line-dot.active {
3212
- opacity: 1 !important; }
3213
-
3214
- .react-autoql-chart-container .bar.active,
3215
- .react-autoql-chart-container .stacked-bar.active {
3216
- fill-opacity: 1 !important; }
3217
-
3218
- .axis {
3219
- font-family: inherit; }
3220
-
3221
- .pie-chart .labels {
3222
- font-size: 12px;
3223
- font-weight: 600; }
3224
-
3225
- .react-autoql-chart-container g.tick {
3226
- transition: all 0.3s ease; }
3227
-
3228
- .react-autoql-chart-container .react-autoql-heatmap-chart g.tick line,
3229
- .react-autoql-chart-container .react-autoql-bubble-chart g.tick line {
3230
- opacity: 0 !important; }
3231
-
3232
- .axis-selector-container {
3233
- background: var(--react-autoql-background-color-primary);
3234
- color: var(--react-autoql-text-color-primary);
3235
- z-index: 9999;
3236
- padding: 5px 0;
3237
- max-height: 300px;
3238
- min-width: 150px;
3239
- overflow-y: auto; }
3240
- .axis-selector-container .axis-select-option.active {
3241
- background: var(--react-autoql-hover-color); }
3242
- .axis-selector-container .react-autoql-checkbox {
3243
- margin-left: 20px; }
3244
- .axis-selector-container .react-autoql-checkbox .react-autoql-checkbox__input {
3245
- width: 18px;
3246
- height: 18px; }
3247
- .axis-selector-container .react-autoql-list-item {
3248
- padding-left: 25px;
3249
- padding-right: 15px;
3250
- font-size: 12px;
3251
- line-height: 28px; }
3252
- .axis-selector-container .string-select-list-item {
3253
- font-size: 12px;
3254
- line-height: 28px; }
3255
- .axis-selector-container .string-select-list-item.active {
3256
- background: rgba(0, 0, 0, 0.04); }
3257
- .axis-selector-container .number-selector-header {
3258
- margin-top: 10px;
3259
- padding: 0px 18px;
3260
- font-size: 12px;
3261
- padding-bottom: 7px;
3262
- font-weight: 500;
3263
- opacity: 0.6; }
3264
- .axis-selector-container .axis-selector-content {
3265
- list-style-type: none;
3266
- width: 100%;
3267
- margin: 0;
3268
- padding: 0; }
3269
- .axis-selector-container .axis-selector-content li {
3270
- color: var(--react-autoql-text-color-primary);
3271
- width: 100%;
3272
- height: 30px;
3273
- line-height: 30px;
3274
- padding: 0 15px;
3275
- cursor: pointer; }
3276
- .axis-selector-container .axis-selector-content li:hover {
3277
- background: rgba(0, 0, 0, 0.05); }
3278
-
3279
- .axis-selector-apply-btn {
3280
- background: var(--react-autoql-background-color-primary);
3281
- padding: 5px; }
3282
-
3283
-
3284
- .react-autoql-input-container {
3285
- position: relative;
3286
- margin: 2px 5px;
3287
- display: inline-block; }
3288
- .react-autoql-input-container .react-autoql-input {
3289
- border: 1px solid rgba(0, 0, 0, 0.1);
3290
- border-radius: 4px;
3291
- line-height: 32px;
3292
- min-height: 34px;
3293
- padding: 0 10px;
3294
- width: 100%;
3295
- outline: none !important;
3296
- transition: all 0.2s ease;
3297
- transition-property: border-color, color, opacity; }
3298
- .react-autoql-input-container .react-autoql-input.with-icon {
3299
- padding-left: 38px; }
3300
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3301
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3302
- color: rgba(0, 0, 0, 0.2);
3303
- opacity: 1;
3304
- /* Firefox */
3305
- font-style: italic; }
3306
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3307
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3308
- color: rgba(0, 0, 0, 0.2);
3309
- opacity: 1;
3310
- /* Firefox */
3311
- font-style: italic; }
3312
- .react-autoql-input-container .react-autoql-input::placeholder {
3313
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3314
- color: rgba(0, 0, 0, 0.2);
3315
- opacity: 1;
3316
- /* Firefox */
3317
- font-style: italic; }
3318
- .react-autoql-input-container .react-autoql-input-icon {
3319
- position: absolute;
3320
- left: 12px;
3321
- top: 8px;
3322
- opacity: 0.4;
3323
- transition: all 0.2s ease; }
3324
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3325
- height: 17px;
3326
- width: 17px; }
3327
- .react-autoql-input-container:hover .react-autoql-input,
3328
- .react-autoql-input-container .react-autoql-input:focus {
3329
- border-color: var(--react-autoql-accent-color, #26a7df); }
3330
- .react-autoql-input-container:hover .react-autoql-input-icon,
3331
- .react-autoql-input-container .react-autoql-input-icon.focus {
3332
- opacity: 1;
3333
- color: var(--react-autoql-accent-color, #26a7df); }
3334
-
3335
- .react-autoql-radio-btn-container {
3336
- display: inline-block;
3337
- border-radius: 4px; }
3338
- .react-autoql-radio-btn-container [type='radio']:checked,
3339
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3340
- position: absolute;
3341
- left: -9999px; }
3342
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3343
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3344
- position: relative;
3345
- padding-left: 28px;
3346
- cursor: pointer;
3347
- line-height: 20px;
3348
- display: inline-block; }
3349
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3350
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3351
- content: '';
3352
- position: absolute;
3353
- left: 1px;
3354
- top: 1px;
3355
- width: 18px;
3356
- height: 18px;
3357
- border: 1px solid #ddd;
3358
- border-radius: 100%;
3359
- background: #fff; }
3360
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3361
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3362
- content: '';
3363
- width: 12px;
3364
- height: 12px;
3365
- background: var(--react-autoql-accent-color, #26a7df);
3366
- position: absolute;
3367
- top: 4px;
3368
- left: 4px;
3369
- border-radius: 100%;
3370
- transition: all 0.2s ease; }
3371
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3372
- opacity: 0;
3373
- transform: scale(0); }
3374
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3375
- opacity: 1;
3376
- transform: scale(1); }
3377
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3378
- position: relative;
3379
- display: inline-block;
3380
- padding: 3px 12px;
3381
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3382
- margin-left: -1px;
3383
- transition: all 0.2s ease;
3384
- cursor: pointer; }
3385
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3386
- background-color: var(--react-autoql-accent-color, #26a7df);
3387
- border-color: var(--react-autoql-accent-color, #26a7df);
3388
- color: #fff;
3389
- z-index: 3; }
3390
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3391
- background-color: inherit;
3392
- color: var(--react-autoql-accent-color, #26a7df);
3393
- z-index: 3; }
3394
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3395
- border-color: var(--react-autoql-accent-color, #26a7df);
3396
- color: var(--react-autoql-accent-color, #26a7df);
3397
- z-index: 2; }
3398
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3399
- border-top-left-radius: 4px;
3400
- border-bottom-left-radius: 4px;
3401
- margin-left: 0; }
3402
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3403
- border-top-right-radius: 4px;
3404
- border-bottom-right-radius: 4px; }
3209
+ .react-autoql-chart-container .vertex-dot:hover,
3210
+ .react-autoql-chart-container .line-dot:hover,
3211
+ .react-autoql-chart-container .line-dot.active {
3212
+ opacity: 1 !important; }
3405
3213
 
3406
- .react-autoql-steps-container {
3407
- margin: 10px; }
3214
+ .react-autoql-chart-container .bar.active,
3215
+ .react-autoql-chart-container .stacked-bar.active {
3216
+ fill-opacity: 1 !important; }
3408
3217
 
3409
- .react-autoql-step-container {
3410
- position: relative;
3411
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3412
- margin-left: 12px;
3413
- padding-left: 20px;
3414
- padding-bottom: 5px;
3415
- transition: all 0.5s ease; }
3416
- .react-autoql-step-container.complete {
3417
- border-color: var(--react-autoql-accent-color, #26a7df); }
3418
- .react-autoql-step-container.complete .react-autoql-step-dot {
3419
- border-color: var(--react-autoql-accent-color, #26a7df);
3420
- background: var(--react-autoql-accent-color, #26a7df);
3421
- color: #fff; }
3422
- .react-autoql-step-container.error {
3423
- border-color: var(--react-autoql-warning-color); }
3424
- .react-autoql-step-container.error .react-autoql-step-dot {
3425
- border-color: var(--react-autoql-warning-color);
3426
- background: var(--react-autoql-warning-color);
3427
- color: white; }
3428
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3429
- pointer-events: none;
3430
- height: 10px;
3431
- opacity: 0;
3432
- margin: 0; }
3218
+ .axis {
3219
+ font-family: inherit; }
3433
3220
 
3434
- .react-autoql-step-dot {
3221
+ .pie-chart .labels {
3222
+ font-size: 12px;
3223
+ font-weight: 600; }
3224
+
3225
+ .react-autoql-chart-container g.tick {
3226
+ transition: all 0.3s ease; }
3227
+
3228
+ .react-autoql-chart-container .react-autoql-heatmap-chart g.tick line,
3229
+ .react-autoql-chart-container .react-autoql-bubble-chart g.tick line {
3230
+ opacity: 0 !important; }
3231
+
3232
+ .axis-selector-container {
3233
+ background: var(--react-autoql-background-color-primary);
3234
+ color: var(--react-autoql-text-color-primary);
3235
+ z-index: 9999;
3236
+ padding: 5px 0;
3237
+ max-height: 300px;
3238
+ min-width: 150px;
3239
+ overflow-y: auto; }
3240
+ .axis-selector-container .axis-select-option.active {
3241
+ background: var(--react-autoql-hover-color); }
3242
+ .axis-selector-container .react-autoql-checkbox {
3243
+ margin-left: 20px; }
3244
+ .axis-selector-container .react-autoql-checkbox .react-autoql-checkbox__input {
3245
+ width: 18px;
3246
+ height: 18px; }
3247
+ .axis-selector-container .react-autoql-list-item {
3248
+ padding-left: 25px;
3249
+ padding-right: 15px;
3250
+ font-size: 12px;
3251
+ line-height: 28px; }
3252
+ .axis-selector-container .string-select-list-item {
3253
+ font-size: 12px;
3254
+ line-height: 28px; }
3255
+ .axis-selector-container .string-select-list-item.active {
3256
+ background: rgba(0, 0, 0, 0.04); }
3257
+ .axis-selector-container .number-selector-header {
3258
+ margin-top: 10px;
3259
+ padding: 0px 18px;
3260
+ font-size: 12px;
3261
+ padding-bottom: 7px;
3262
+ font-weight: 500;
3263
+ opacity: 0.6; }
3264
+ .axis-selector-container .axis-selector-content {
3265
+ list-style-type: none;
3266
+ width: 100%;
3267
+ margin: 0;
3268
+ padding: 0; }
3269
+ .axis-selector-container .axis-selector-content li {
3270
+ color: var(--react-autoql-text-color-primary);
3271
+ width: 100%;
3272
+ height: 30px;
3273
+ line-height: 30px;
3274
+ padding: 0 15px;
3275
+ cursor: pointer; }
3276
+ .axis-selector-container .axis-selector-content li:hover {
3277
+ background: rgba(0, 0, 0, 0.05); }
3278
+
3279
+ .axis-selector-apply-btn {
3280
+ background: var(--react-autoql-background-color-primary);
3281
+ padding: 5px; }
3282
+
3283
+ .viz-toolbar {
3435
3284
  position: absolute;
3436
- top: 0;
3437
- left: -10px;
3438
- height: 20px;
3439
- width: 20px;
3440
- border-radius: 15px;
3441
- background: var(--react-autoql-background-color-primary, #fff);
3442
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3443
- transition: all 0.5s ease;
3444
- font-size: 10.5px;
3445
- color: var(--react-autoql-text-color-placeholder, lightgray);
3446
- text-align: center; }
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; }
3447
3292
 
3448
- .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);
3449
3302
  cursor: pointer;
3450
- transition: color 0.2s ease;
3451
- color: var(--react-autoql-accent-color, #26a7df); }
3452
-
3453
- .react-autoql-step-title {
3454
- font-weight: 500;
3455
- font-size: 15px;
3456
- line-height: 15px;
3457
- padding-top: 2px; }
3303
+ outline: none !important; }
3458
3304
 
3459
- .react-autoql-step-subtitle {
3460
- font-size: 13px;
3461
- padding-top: 6px;
3462
- padding-bottom: 6px;
3463
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3305
+ .react-autoql-toolbar-btn.green {
3306
+ color: #2ecc40; }
3464
3307
 
3465
- .react-autoql-step-content {
3466
- margin: 15px;
3467
- margin-top: 0; }
3308
+ .react-autoql-toolbar-btn.red {
3309
+ color: #e80000; }
3468
3310
 
3469
- .react-autoql-step-content-container {
3470
- transition-timing-function: ease;
3471
- transition-property: height, opacity, margin;
3472
- transition-duration: 0.5s;
3473
- opacity: 1; }
3311
+ .react-autoql-toolbar-btn:hover {
3312
+ opacity: 0.7; }
3474
3313
 
3475
3314
  .content {
3476
3315
  margin: 2rem; }
@@ -3582,58 +3421,272 @@ the whole table when the filter button is clicked */
3582
3421
  + .react-autoql-checkbox--switch__label::after {
3583
3422
  content: 'on'; }
3584
3423
 
3585
- .react-autoql-checkbox--switch__input:checked::before {
3586
- right: 2px;
3587
- left: 18px;
3588
- top: 2px;
3589
- bottom: 2px; }
3424
+ .react-autoql-checkbox--switch__input:checked::before {
3425
+ right: 2px;
3426
+ left: 18px;
3427
+ top: 2px;
3428
+ bottom: 2px; }
3429
+
3430
+ .react-autoql-checkbox-label {
3431
+ padding-left: 6px;
3432
+ line-height: 100%; }
3433
+
3434
+ .react-autoql-modal-container
3435
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3436
+ .react-autoql-drawer
3437
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3438
+ border-color: var(--react-autoql-accent-color); }
3439
+
3440
+ .react-autoql-modal-container
3441
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3442
+ .react-autoql-drawer
3443
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3444
+ background: var(--react-autoql-accent-color); }
3445
+
3446
+ .react-autoql-input-container {
3447
+ position: relative;
3448
+ margin: 2px 5px;
3449
+ display: inline-block; }
3450
+ .react-autoql-input-container .react-autoql-input {
3451
+ border: 1px solid rgba(0, 0, 0, 0.1);
3452
+ border-radius: 4px;
3453
+ line-height: 32px;
3454
+ min-height: 34px;
3455
+ padding: 0 10px;
3456
+ width: 100%;
3457
+ outline: none !important;
3458
+ transition: all 0.2s ease;
3459
+ transition-property: border-color, color, opacity; }
3460
+ .react-autoql-input-container .react-autoql-input.with-icon {
3461
+ padding-left: 38px; }
3462
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3463
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3464
+ color: rgba(0, 0, 0, 0.2);
3465
+ opacity: 1;
3466
+ /* Firefox */
3467
+ font-style: italic; }
3468
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3469
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3470
+ color: rgba(0, 0, 0, 0.2);
3471
+ opacity: 1;
3472
+ /* Firefox */
3473
+ font-style: italic; }
3474
+ .react-autoql-input-container .react-autoql-input::placeholder {
3475
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3476
+ color: rgba(0, 0, 0, 0.2);
3477
+ opacity: 1;
3478
+ /* Firefox */
3479
+ font-style: italic; }
3480
+ .react-autoql-input-container .react-autoql-input-icon {
3481
+ position: absolute;
3482
+ left: 12px;
3483
+ top: 8px;
3484
+ opacity: 0.4;
3485
+ transition: all 0.2s ease; }
3486
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3487
+ height: 17px;
3488
+ width: 17px; }
3489
+ .react-autoql-input-container:hover .react-autoql-input,
3490
+ .react-autoql-input-container .react-autoql-input:focus {
3491
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3492
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3493
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3494
+ opacity: 1;
3495
+ color: var(--react-autoql-accent-color, #26a7df); }
3496
+
3497
+
3498
+ .react-autoql-steps-container {
3499
+ margin: 10px; }
3500
+
3501
+ .react-autoql-step-container {
3502
+ position: relative;
3503
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3504
+ margin-left: 12px;
3505
+ padding-left: 20px;
3506
+ padding-bottom: 5px;
3507
+ transition: all 0.5s ease; }
3508
+ .react-autoql-step-container.complete {
3509
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3510
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3511
+ border-color: var(--react-autoql-accent-color, #26a7df);
3512
+ background: var(--react-autoql-accent-color, #26a7df);
3513
+ color: #fff; }
3514
+ .react-autoql-step-container.error {
3515
+ border-color: var(--react-autoql-warning-color); }
3516
+ .react-autoql-step-container.error .react-autoql-step-dot {
3517
+ border-color: var(--react-autoql-warning-color);
3518
+ background: var(--react-autoql-warning-color);
3519
+ color: white; }
3520
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3521
+ pointer-events: none;
3522
+ height: 10px;
3523
+ opacity: 0;
3524
+ margin: 0; }
3525
+
3526
+ .react-autoql-step-dot {
3527
+ position: absolute;
3528
+ top: 0;
3529
+ left: -10px;
3530
+ height: 20px;
3531
+ width: 20px;
3532
+ border-radius: 15px;
3533
+ background: var(--react-autoql-background-color-primary, #fff);
3534
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3535
+ transition: all 0.5s ease;
3536
+ font-size: 10.5px;
3537
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3538
+ text-align: center; }
3590
3539
 
3591
- .react-autoql-checkbox-label {
3592
- padding-left: 6px;
3593
- line-height: 100%; }
3540
+ .react-autoql-step-title-container:hover {
3541
+ cursor: pointer;
3542
+ transition: color 0.2s ease;
3543
+ color: var(--react-autoql-accent-color, #26a7df); }
3594
3544
 
3595
- .react-autoql-modal-container
3596
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3597
- .react-autoql-drawer
3598
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3599
- border-color: var(--react-autoql-accent-color); }
3545
+ .react-autoql-step-title {
3546
+ font-weight: 500;
3547
+ font-size: 15px;
3548
+ line-height: 15px;
3549
+ padding-top: 2px; }
3600
3550
 
3601
- .react-autoql-modal-container
3602
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3603
- .react-autoql-drawer
3604
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3605
- background: var(--react-autoql-accent-color); }
3551
+ .react-autoql-step-subtitle {
3552
+ font-size: 13px;
3553
+ padding-top: 6px;
3554
+ padding-bottom: 6px;
3555
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3606
3556
 
3607
- .viz-toolbar {
3608
- position: absolute;
3609
- background: inherit;
3610
- padding: 5px;
3611
- border-radius: 6px;
3612
- line-height: 28px;
3613
- border: 1px solid #d3d3d352; }
3614
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3615
- display: block; }
3557
+ .react-autoql-step-content {
3558
+ margin: 15px;
3559
+ margin-top: 0; }
3616
3560
 
3617
- .react-autoql-toolbar-btn {
3618
- height: 28px;
3619
- width: 28px;
3620
- background: none;
3621
- border: none;
3622
- font-size: 16px;
3623
- line-height: 28px;
3624
- vertical-align: top;
3625
- color: var(--react-autoql-accent-color);
3626
- cursor: pointer;
3627
- outline: none !important; }
3561
+ .react-autoql-step-content-container {
3562
+ transition-timing-function: ease;
3563
+ transition-property: height, opacity, margin;
3564
+ transition-duration: 0.5s;
3565
+ opacity: 1; }
3628
3566
 
3629
- .react-autoql-toolbar-btn.green {
3630
- color: #2ecc40; }
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; }
3631
3637
 
3632
- .react-autoql-toolbar-btn.red {
3633
- color: #e80000; }
3638
+ .react-autoql-notification-rule-container {
3639
+ display: flex; }
3640
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3641
+ display: flex;
3642
+ flex-direction: column;
3643
+ flex: 1;
3644
+ width: 100%; }
3645
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3646
+ display: flex;
3647
+ flex: 1; }
3648
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3649
+ display: flex;
3650
+ padding: 2px 0;
3651
+ border-radius: 4px;
3652
+ transition: all 0.3s ease;
3653
+ flex: 1; }
3654
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3655
+ flex: 0;
3656
+ flex-basis: 33px; }
3657
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3658
+ flex: 1;
3659
+ margin-left: 4px; }
3660
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3661
+ cursor: pointer;
3662
+ opacity: 0.6;
3663
+ padding: 6px; }
3664
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3665
+ opacity: 1; }
3666
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3667
+ display: none; }
3668
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3669
+ margin: 0; }
3670
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3671
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3672
+ + .react-autoql-rule-term-type-selector {
3673
+ color: var(--react-autoql-accent-color, #26a7df);
3674
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3634
3675
 
3635
- .react-autoql-toolbar-btn:hover {
3636
- opacity: 0.7; }
3676
+ .read-only-rule-term {
3677
+ display: inline-block;
3678
+ border: 1px solid rgba(0, 0, 0, 0.06);
3679
+ background: rgba(0, 0, 0, 0.02);
3680
+ padding: 3px 7px;
3681
+ line-height: 1.5em;
3682
+ margin-right: 5px;
3683
+ margin-bottom: 2px;
3684
+ margin-top: 2px;
3685
+ border-radius: 4px; }
3686
+
3687
+ .expression-term-validation-error {
3688
+ padding: 0 10px;
3689
+ color: var(--react-autoql-warning-color); }
3637
3690
 
3638
3691
  .notification-read-only-group {
3639
3692
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
@@ -3753,59 +3806,6 @@ the whole table when the filter button is clicked */
3753
3806
  opacity: 1;
3754
3807
  color: var(--react-autoql-accent-color); }
3755
3808
 
3756
- .react-autoql-notification-rule-container {
3757
- display: flex; }
3758
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3759
- display: flex;
3760
- flex-direction: column;
3761
- flex: 1;
3762
- width: 100%; }
3763
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3764
- display: flex;
3765
- flex: 1; }
3766
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3767
- display: flex;
3768
- padding: 2px 0;
3769
- border-radius: 4px;
3770
- transition: all 0.3s ease;
3771
- flex: 1; }
3772
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3773
- flex: 0;
3774
- flex-basis: 33px; }
3775
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3776
- flex: 1;
3777
- margin-left: 4px; }
3778
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3779
- cursor: pointer;
3780
- opacity: 0.6;
3781
- padding: 6px; }
3782
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3783
- opacity: 1; }
3784
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3785
- display: none; }
3786
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3787
- margin: 0; }
3788
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3789
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3790
- + .react-autoql-rule-term-type-selector {
3791
- color: var(--react-autoql-accent-color, #26a7df);
3792
- border-color: var(--react-autoql-accent-color, #26a7df); }
3793
-
3794
- .read-only-rule-term {
3795
- display: inline-block;
3796
- border: 1px solid rgba(0, 0, 0, 0.06);
3797
- background: rgba(0, 0, 0, 0.02);
3798
- padding: 3px 7px;
3799
- line-height: 1.5em;
3800
- margin-right: 5px;
3801
- margin-bottom: 2px;
3802
- margin-top: 2px;
3803
- border-radius: 4px; }
3804
-
3805
- .expression-term-validation-error {
3806
- padding: 0 10px;
3807
- color: var(--react-autoql-warning-color); }
3808
-
3809
3809
  .spinner-loader {
3810
3810
  display: inline-block;
3811
3811
  width: 14px;
@@ -3875,6 +3875,7 @@ the whole table when the filter button is clicked */
3875
3875
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3876
3876
 
3877
3877
 
3878
+
3878
3879
  .slack-modal-error-container,
3879
3880
  .slack-modal-empty-list-message {
3880
3881
  display: flex;
@@ -4020,7 +4021,6 @@ the whole table when the filter button is clicked */
4020
4021
  .slack-channel-list-container .connect-channel-btn button {
4021
4022
  width: 200px; }
4022
4023
 
4023
-
4024
4024
  .react-autoql-list-item {
4025
4025
  padding: 0 20px;
4026
4026
  display: flex;