react-autoql 3.4.7 → 3.5.1

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,103 +1,404 @@
1
- .react-autoql-bar-container {
1
+ @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
2
+ .react-autoql-response-content-container:not(.html-content) {
2
3
  position: relative;
3
4
  display: flex;
4
- flex-direction: row; }
5
+ flex-direction: column;
6
+ justify-content: center;
7
+ align-items: center;
8
+ background-color: inherit;
9
+ font-size: 14px;
10
+ height: 100%;
11
+ width: 100%;
12
+ overflow: hidden;
13
+ color: var(--react-autoql-text-color-primary); }
5
14
 
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;
15
+ .react-autoql-response-content-container.html-content {
16
+ position: relative;
17
+ background-color: inherit;
18
+ text-align: left;
19
+ font-size: 14px;
20
+ height: 95%;
21
+ width: 100%;
22
+ overflow: hidden;
23
+ color: var(--react-autoql-text-color-primary); }
24
+ .react-autoql-response-content-container.html-content table th {
25
+ border-bottom: 2px solid var(--react-autoql-border-color); }
26
+ .react-autoql-response-content-container.html-content table tr:not(:last-child) {
27
+ border-bottom: 1px solid var(--react-autoql-border-color); }
28
+ .react-autoql-response-content-container.html-content table td:not(:last-child) {
29
+ border-right: 1px solid var(--react-autoql-border-color); }
30
+ .react-autoql-response-content-container.html-content table th,
31
+ .react-autoql-response-content-container.html-content table td {
32
+ padding: 5px 10px; }
33
+ .react-autoql-response-content-container.html-content * {
34
+ font-size: inherit; }
35
+ .react-autoql-response-content-container.html-content sup,
36
+ .react-autoql-response-content-container.html-content sub {
37
+ font-size: 10px; }
38
+ .react-autoql-response-content-container.html-content > *:first-child {
39
+ margin-top: 0 !important; }
40
+ .react-autoql-response-content-container.html-content > *:last-child {
41
+ margin-bottom: 0 !important; }
42
+ .react-autoql-response-content-container.html-content caption {
43
+ display: table-caption;
44
+ text-align: -webkit-center;
45
+ padding-top: unset;
46
+ padding-bottom: unset;
47
+ color: unset;
48
+ text-align: unset;
49
+ caption-side: unset; }
50
+
51
+ .react-autoql-response-content-container.table {
52
+ max-height: 100vh !important;
53
+ overflow-y: scroll;
54
+ scrollbar-width: none;
55
+ margin-bottom: 0 !important; }
56
+
57
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
58
+ width: 0;
59
+ height: 0; }
60
+
61
+ .react-autoql-suggestion-btn {
62
+ padding: 6px 14px;
63
+ background: transparent;
14
64
  font-family: inherit;
15
- letter-spacing: 0.04em;
65
+ font-size: 12px;
66
+ margin-bottom: 5px;
16
67
  outline: none !important;
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; }
68
+ cursor: pointer;
69
+ letter-spacing: 0.05em;
70
+ transition: all 0.1s ease;
71
+ border: 1px solid rgba(0, 0, 0, 0.15);
72
+ border-radius: 5px;
73
+ color: inherit; }
23
74
 
24
- .react-autoql-chatbar-input.left-padding {
25
- padding-left: 54px; }
75
+ .react-autoql-suggestion-btn:hover {
76
+ border-color: transparent;
77
+ color: white;
78
+ background: var(--react-autoql-accent-color); }
26
79
 
27
- .react-autoql-chatbar-input:disabled {
28
- background: rgba(0, 0, 0, 0.03); }
80
+ .react-autoql-help-link-btn {
81
+ padding: 6px 14px;
82
+ background: transparent;
83
+ border-radius: 5px;
84
+ font-family: inherit;
85
+ font-size: 12px;
86
+ margin-top: 5px;
87
+ outline: none !important;
88
+ cursor: pointer;
89
+ letter-spacing: 0.05em;
90
+ transition: all 0.1s ease;
91
+ border-color: #e2e2e26e;
92
+ color: inherit; }
29
93
 
30
- .react-autoql-chatbar-input:not(:disabled):hover {
31
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
94
+ .react-autoql-help-link-btn:hover {
95
+ opacity: 0.7; }
32
96
 
33
- .react-autoql-chatbar-input::-moz-placeholder {
34
- /* Default color outside of data messenger */
35
- color: #999 !important; }
97
+ .react-autoql-help-link-icon {
98
+ width: 15px;
99
+ height: 15px;
100
+ margin-bottom: -3px;
101
+ margin-right: 3px; }
36
102
 
37
- .react-autoql-chatbar-input:-ms-input-placeholder {
38
- /* Default color outside of data messenger */
39
- color: #999 !important; }
103
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
104
+ color: var(--react-autoql-success-color); }
40
105
 
41
- .react-autoql-chatbar-input::placeholder {
42
- /* Default color outside of data messenger */
43
- color: #999 !important; }
106
+ .react-autoql-suggestion-message {
107
+ height: 100%;
108
+ width: 100%;
109
+ word-break: break-word; }
44
110
 
45
- /* autosuggest */
46
- .react-autoql-bar-container .react-autosuggest__container,
47
- .react-autoql-chatbar-input-container {
111
+ .react-autoql-suggestions-select {
48
112
  position: relative;
49
- flex: 1; }
113
+ display: inline-block;
114
+ height: 30px;
115
+ background: none;
116
+ outline: none !important;
117
+ border: 1px solid;
118
+ font-family: inherit;
119
+ letter-spacing: 0.05em;
120
+ color: #28a8e0;
121
+ cursor: pointer;
122
+ font-size: inherit; }
50
123
 
51
- .react-autoql-bar-container .react-autosuggest__input--focused {
52
- outline: none; }
124
+ .no-columns-error-message {
125
+ position: absolute;
126
+ height: 100%;
127
+ width: 100%;
128
+ display: flex;
129
+ justify-content: center;
130
+ flex-direction: column;
131
+ text-align: center;
132
+ padding: 20px;
133
+ font-size: 13px; }
134
+ .no-columns-error-message .warning-icon {
135
+ font-size: 22px;
136
+ display: block;
137
+ margin-bottom: -13px;
138
+ text-align: center; }
139
+ .no-columns-error-message .eye-icon {
140
+ vertical-align: bottom;
141
+ line-height: 18px; }
53
142
 
54
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
55
- display: none; }
143
+ /* query validation */
144
+ .react-autoql-query-validation-selector-container {
145
+ display: inline-block;
146
+ position: relative; }
56
147
 
57
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
58
- display: none; }
148
+ .react-autoql-select-popup-container.query-validation-select {
149
+ padding: 5px 0;
150
+ letter-spacing: 0.03em;
151
+ font-family: var(--react-autoql-font-family), sans-serif; }
152
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
153
+ height: unset;
154
+ font-size: 14px;
155
+ line-height: 24px;
156
+ padding: 0 15px; }
157
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
158
+ color: #d84830; }
59
159
 
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; }
160
+ .react-autoql-query-validation-query {
161
+ text-align: center; }
80
162
 
81
- .react-autoql-bar-container.autosuggest-top
82
- .react-autosuggest__suggestions-container--open {
83
- top: unset;
84
- bottom: 45px; }
163
+ .react-autoql-query-validation-execute-btn {
164
+ height: 38px;
165
+ background: none;
166
+ border-radius: 4px;
167
+ margin-top: 24px;
168
+ width: 100%;
169
+ color: inherit;
170
+ cursor: pointer;
171
+ outline: none !important;
172
+ border-color: #e2e2e26e;
173
+ transition: all 0.2s ease; }
85
174
 
86
- .react-autoql-bar-container.autosuggest-bottom
87
- .react-autosuggest__suggestions-container--open {
88
- top: 45px;
89
- bottom: unset; }
175
+ .react-autoql-query-validation-execute-btn:hover {
176
+ border-color: #28a8e0; }
90
177
 
91
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
178
+ .react-autoql-execute-query-icon {
179
+ font-size: 16px;
180
+ vertical-align: middle !important;
181
+ padding-right: 3px !important; }
182
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
183
+ height: 19px;
184
+ width: 19px;
185
+ margin-top: 3px;
186
+ margin-right: 4px;
187
+ vertical-align: top;
188
+ fill: var(--react-autoql-accent-color); }
189
+
190
+ .react-autoql-query-validation-select {
191
+ position: relative;
192
+ display: inline-block;
193
+ height: 2em;
194
+ background: none;
195
+ outline: none !important;
196
+ border: none;
197
+ letter-spacing: 0.05em;
198
+ font-family: inherit;
199
+ font-size: inherit;
92
200
  margin: 0;
93
201
  padding: 0;
94
- list-style-type: none; }
95
-
96
- /* Autocomplete styles */
97
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
98
- background-color: var(--react-autoql-background-color-primary);
99
- border: 1px solid var(--react-autoql-border-color);
100
- color: var(--react-autoql-text-color-primary); }
202
+ border-radius: 0;
203
+ border-bottom: 1px dashed;
204
+ color: var(--react-autoql-accent-color); }
205
+
206
+ .react-autoql-query-validation-delete-button {
207
+ position: relative;
208
+ cursor: pointer;
209
+ margin-bottom: -2px; }
210
+
211
+ .react-autoql-chart-tooltip {
212
+ font-family: var(--react-autoql-font-family), sans-serif;
213
+ letter-spacing: 0.04em;
214
+ line-height: 22px;
215
+ font-size: 13px;
216
+ padding: 7px 15px;
217
+ transition: all 0.2s ease !important;
218
+ text-align: left !important;
219
+ opacity: 1 !important;
220
+ z-index: 99999 !important;
221
+ /* necessary to show up on top of rc drawer */ }
222
+
223
+ .single-value-response {
224
+ color: inherit;
225
+ cursor: unset;
226
+ font-size: 20px; }
227
+ .single-value-response:hover {
228
+ color: inherit; }
229
+
230
+ .single-value-response.with-drilldown:hover {
231
+ color: inherit;
232
+ text-decoration: underline;
233
+ font-weight: 600;
234
+ cursor: pointer; }
235
+
236
+ .react-autoql-query-validation-container {
237
+ width: 100%; }
238
+
239
+ .react-autoql-query-validation-description {
240
+ margin-bottom: 14px; }
241
+
242
+ .context-menu {
243
+ background: var(--react-autoql-background-color-primary);
244
+ /* height: 100px; */
245
+ width: 150px;
246
+ padding: 10px 0; }
247
+
248
+ .context-menu-list {
249
+ list-style-type: none;
250
+ width: 100%;
251
+ margin: 0;
252
+ padding: 0; }
253
+
254
+ .context-menu-list li {
255
+ color: var(--react-autoql-text-color-primary);
256
+ width: 100%;
257
+ height: 35px;
258
+ line-height: 35px;
259
+ padding: 0 20px;
260
+ cursor: pointer; }
261
+
262
+ .context-menu-list li:hover {
263
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
264
+
265
+ .react-autoql-condition-link {
266
+ background: none !important;
267
+ border: none;
268
+ padding: 0 !important;
269
+ text-decoration: none;
270
+ white-space: nowrap;
271
+ cursor: pointer;
272
+ color: var(--react-autoql-accent-color); }
273
+ .react-autoql-condition-link:hover {
274
+ opacity: 0.9; }
275
+
276
+ .react-autoql-condition-link-filtered {
277
+ text-decoration: none;
278
+ white-space: nowrap;
279
+ cursor: pointer;
280
+ color: var(--react-autoql-accent-color); }
281
+ .react-autoql-condition-link-filtered .react-autoql-custom-icon {
282
+ font-size: 14px;
283
+ vertical-align: middle;
284
+ margin-top: -4px; }
285
+ .react-autoql-condition-link-filtered:hover {
286
+ opacity: 0.9;
287
+ border: none !important; }
288
+ .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
289
+ opacity: 0.9; }
290
+
291
+ .react-autoql-condition-lock-reverse-translation {
292
+ color: var(--react-autoql-text-color-primary);
293
+ background-color: var(--react-autoql-background-color-secondary);
294
+ border-radius: 5px;
295
+ padding: 4px 6px 4px 6px;
296
+ margin: 2px;
297
+ min-height: 26px;
298
+ min-width: 300px; }
299
+
300
+ .react-autoql-bar-container {
301
+ position: relative;
302
+ display: flex;
303
+ flex-direction: row; }
304
+
305
+ .react-autoql-chatbar-input {
306
+ padding: 10px;
307
+ padding-left: 20px;
308
+ margin: 10px;
309
+ height: 42px;
310
+ width: calc(100% - 20px);
311
+ white-space: nowrap;
312
+ box-sizing: border-box;
313
+ border-radius: 24px;
314
+ font-size: 16px;
315
+ font-family: inherit;
316
+ letter-spacing: 0.04em;
317
+ outline: none !important;
318
+ width: calc(100% - 20px);
319
+ font-family: inherit;
320
+ /* Default styles outside of data messenger */
321
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
322
+ background: var(--react-autoql-background-color-primary);
323
+ color: #5d5d5d; }
324
+
325
+ .react-autoql-chatbar-input.left-padding {
326
+ padding-left: 54px; }
327
+
328
+ .react-autoql-chatbar-input:disabled {
329
+ background: rgba(0, 0, 0, 0.03); }
330
+
331
+ .react-autoql-chatbar-input:not(:disabled):hover {
332
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
333
+
334
+ .react-autoql-chatbar-input::-moz-placeholder {
335
+ /* Default color outside of data messenger */
336
+ color: #999 !important; }
337
+
338
+ .react-autoql-chatbar-input:-ms-input-placeholder {
339
+ /* Default color outside of data messenger */
340
+ color: #999 !important; }
341
+
342
+ .react-autoql-chatbar-input::placeholder {
343
+ /* Default color outside of data messenger */
344
+ color: #999 !important; }
345
+
346
+ /* autosuggest */
347
+ .react-autoql-bar-container .react-autosuggest__container,
348
+ .react-autoql-chatbar-input-container {
349
+ position: relative;
350
+ flex: 1; }
351
+
352
+ .react-autoql-bar-container .react-autosuggest__input--focused {
353
+ outline: none; }
354
+
355
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
356
+ display: none; }
357
+
358
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
359
+ display: none; }
360
+
361
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
362
+ position: absolute;
363
+ top: 45px;
364
+ bottom: unset;
365
+ margin: 10px;
366
+ padding-top: 5px;
367
+ padding-bottom: 5px;
368
+ display: block;
369
+ width: calc(100% - 20px);
370
+ height: unset;
371
+ border-radius: 24px;
372
+ font-family: inherit;
373
+ font-size: 15px;
374
+ font-weight: normal;
375
+ z-index: 2;
376
+ overflow: hidden;
377
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
378
+ /* Default styles outside of data messenger */
379
+ background-color: white;
380
+ color: #5d5d5d; }
381
+
382
+ .react-autoql-bar-container.autosuggest-top
383
+ .react-autosuggest__suggestions-container--open {
384
+ top: unset;
385
+ bottom: 45px; }
386
+
387
+ .react-autoql-bar-container.autosuggest-bottom
388
+ .react-autosuggest__suggestions-container--open {
389
+ top: 45px;
390
+ bottom: unset; }
391
+
392
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
393
+ margin: 0;
394
+ padding: 0;
395
+ list-style-type: none; }
396
+
397
+ /* Autocomplete styles */
398
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
399
+ background-color: var(--react-autoql-background-color-primary);
400
+ border: 1px solid var(--react-autoql-border-color);
401
+ color: var(--react-autoql-text-color-primary); }
101
402
 
102
403
  .react-autoql-bar-container .react-autosuggest__suggestion {
103
404
  color: var(--react-autoql-text-color-primary); }
@@ -142,61 +443,258 @@
142
443
  left: 30px;
143
444
  top: 15px; }
144
445
 
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); }
446
+ .chat-voice-record-button {
447
+ width: 40px;
448
+ height: 40px;
449
+ border-radius: 24px;
450
+ margin: 10px;
451
+ margin-left: 0;
452
+ font-size: 18px;
453
+ line-height: 24px;
454
+ outline: none !important;
455
+ position: relative;
456
+ cursor: pointer;
457
+ overflow: hidden;
458
+ background: var(--react-autoql-accent-color);
459
+ color: white;
460
+ border: none;
461
+ flex-shrink: 0;
462
+ flex-grow: 0; }
160
463
 
161
- .autoql-condition-locking-menu-container
162
- .react-autosuggest__suggestions-container--open {
163
- transform: translateX(8%);
164
- width: 90% !important; }
464
+ .chat-voice-record-button:hover {
465
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
165
466
 
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; }
467
+ .chat-voice-record-button.listening {
468
+ background: #ff471a; }
170
469
 
171
- .react-autoql-drawer {
172
- font-family: var(--react-autoql-font-family), sans-serif;
173
- line-height: 22px; }
470
+ .chat-voice-record-icon {
471
+ vertical-align: top; }
174
472
 
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; }
473
+ .react-autoql-tooltip {
474
+ font-family: inherit;
475
+ letter-spacing: 0.04em;
476
+ padding: 7px 15px;
477
+ opacity: 1 !important;
478
+ z-index: 99999 !important; }
180
479
 
181
- .react-autoql-drawer .react-autoql-drawer-content-container {
182
- width: 100%;
183
- height: 100%;
184
- display: flex;
185
- background: var(--react-autoql-background-color-secondary);
186
- overflow: hidden;
187
- border-radius: 4px;
188
- flex-direction: column;
189
- justify-content: stretch; }
480
+ @-webkit-keyframes slide {
481
+ 0% {
482
+ transform: translateX(-100%); }
483
+ 100% {
484
+ transform: translateX(100%); } }
190
485
 
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;
486
+ @keyframes slide {
487
+ 0% {
488
+ transform: translateX(-100%); }
489
+ 100% {
490
+ transform: translateX(100%); } }
491
+
492
+ @-webkit-keyframes move {
493
+ 0% {
494
+ left: 0;
495
+ opacity: 0; }
496
+ 5% {
497
+ opacity: 0; }
498
+ 48% {
499
+ opacity: 0.2; }
500
+ 80% {
501
+ opacity: 0; }
502
+ 100% {
503
+ left: 82%; } }
504
+
505
+ @keyframes move {
506
+ 0% {
507
+ left: 0;
508
+ opacity: 0; }
509
+ 5% {
510
+ opacity: 0; }
511
+ 48% {
512
+ opacity: 0.2; }
513
+ 80% {
514
+ opacity: 0; }
515
+ 100% {
516
+ left: 82%; } }
517
+
518
+ .react-autoql-icon {
519
+ position: relative;
520
+ opacity: 1; }
521
+ .react-autoql-icon.warning {
522
+ color: var(--react-autoql-warning-color) !important; }
523
+ .react-autoql-icon.danger {
524
+ color: var(--react-autoql-danger-color) !important; }
525
+
526
+ span.react-autoql-icon {
527
+ vertical-align: unset;
528
+ text-align: left;
529
+ margin: 0;
530
+ padding: 0;
531
+ float: none !important;
532
+ color: inherit; }
533
+ span.react-autoql-icon svg {
534
+ float: none !important;
535
+ color: inherit;
536
+ vertical-align: unset;
537
+ text-align: left;
538
+ margin: 0;
539
+ padding: 0;
540
+ opacity: 1;
541
+ height: 1em;
542
+ margin-bottom: -0.1em; }
543
+
544
+ .slack-logo {
545
+ display: inline-block;
546
+ height: 100%;
547
+ margin-bottom: 3px; }
548
+ .slack-logo img {
549
+ vertical-align: middle;
550
+ height: 1em;
551
+ width: 1em; }
552
+
553
+ .react-autoql-badge {
554
+ position: absolute;
555
+ background: var(--react-autoql-warning-color);
556
+ border: 1px solid var(--react-autoql-background-color-primary);
557
+ width: 0.5em;
558
+ height: 0.5em;
559
+ top: -0.1em;
560
+ right: -0.25em;
561
+ border-radius: 50%;
562
+ box-sizing: content-box; }
563
+
564
+ .loading-container-centered {
565
+ height: 100%;
566
+ width: 100%;
567
+ display: flex;
568
+ flex-direction: column;
569
+ justify-content: center;
570
+ align-items: center; }
571
+
572
+ .response-loading {
573
+ display: inline-block;
574
+ position: relative;
575
+ width: 64px;
576
+ height: 64px; }
577
+
578
+ .response-loading div {
579
+ position: absolute;
580
+ top: 27px;
581
+ width: 11px;
582
+ height: 11px;
583
+ border-radius: 50%;
584
+ background: #e2e2e2;
585
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
586
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
587
+
588
+ .response-loading div:nth-child(1) {
589
+ left: 6px;
590
+ -webkit-animation: response-loading1 0.6s infinite;
591
+ animation: response-loading1 0.6s infinite; }
592
+
593
+ .response-loading div:nth-child(2) {
594
+ left: 6px;
595
+ -webkit-animation: response-loading2 0.6s infinite;
596
+ animation: response-loading2 0.6s infinite; }
597
+
598
+ .response-loading div:nth-child(3) {
599
+ left: 26px;
600
+ -webkit-animation: response-loading2 0.6s infinite;
601
+ animation: response-loading2 0.6s infinite; }
602
+
603
+ .response-loading div:nth-child(4) {
604
+ left: 45px;
605
+ -webkit-animation: response-loading3 0.6s infinite;
606
+ animation: response-loading3 0.6s infinite; }
607
+
608
+ .react-autoql-dashboard-container {
609
+ background: var(--react-autoql-background-color-secondary);
610
+ height: 100%;
611
+ width: 100%;
612
+ overflow: hidden; }
613
+
614
+ .react-autoql-dashboard-container.edit-mode {
615
+ padding-bottom: 200px; }
616
+
617
+ .dashboard-drilldown-modal .ReactModal__Content {
618
+ top: unset !important;
619
+ margin-top: 20px !important;
620
+ max-height: 93vh !important; }
621
+
622
+ .dashboard-drilldown-modal .react-autoql-modal-body {
623
+ padding: 0; }
624
+
625
+ .dashboard-drilldown-modal .react-autoql-table {
626
+ opacity: 0.9;
627
+ font-size: 11px; }
628
+
629
+ .dashboard-drilldown-modal .splitter-layout {
630
+ height: calc(100% - 55px); }
631
+
632
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
633
+ padding: 20px;
634
+ padding-bottom: 10px; }
635
+
636
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
637
+ text-align: right;
638
+ width: 100%;
639
+ padding-right: 20px; }
640
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
641
+ position: absolute;
642
+ bottom: 5px;
643
+ width: 100px;
644
+ right: 0; }
645
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
646
+ padding-top: 10px;
647
+ margin-bottom: -8px; }
648
+
649
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
650
+ padding: 20px;
651
+ padding-top: 10px;
652
+ overflow: hidden;
653
+ height: 100%; }
654
+
655
+ .empty-dashboard-message-container {
656
+ font-family: var(--react-autoql-font-family);
657
+ color: var(--react-autoql-text-color-primary);
658
+ letter-spacing: 0.02em;
659
+ text-align: center;
660
+ padding: 100px;
661
+ height: 100%;
662
+ width: 100%; }
663
+
664
+ .empty-dashboard-new-tile-btn {
665
+ color: var(--react-autoql-accent-color);
666
+ font-weight: bold;
667
+ cursor: pointer; }
668
+
669
+ .react-autoql-drawer {
670
+ font-family: var(--react-autoql-font-family), sans-serif;
671
+ line-height: 22px; }
672
+
673
+ .react-autoql-drawer.disable-selection {
674
+ -webkit-user-select: none;
675
+ -moz-user-select: none;
676
+ -ms-user-select: none;
677
+ user-select: none; }
678
+
679
+ .react-autoql-drawer .react-autoql-drawer-content-container {
680
+ width: 100%;
681
+ height: 100%;
682
+ display: flex;
683
+ background: var(--react-autoql-background-color-secondary);
684
+ overflow: hidden;
685
+ border-radius: 4px;
686
+ flex-direction: column;
687
+ justify-content: stretch; }
688
+
689
+ .react-autoql-drawer .chat-header-container {
690
+ display: flex;
691
+ justify-content: space-between;
692
+ width: 100%;
693
+ height: 60px;
694
+ background: var(--react-autoql-accent-color);
695
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
696
+ flex-grow: 0;
697
+ flex-shrink: 0;
200
698
  z-index: 1; }
201
699
 
202
700
  .react-autoql-drawer .react-autoql-header-right-container {
@@ -254,8 +752,7 @@
254
752
 
255
753
  .react-autoql-drawer .chat-bar-container {
256
754
  position: relative;
257
- padding: 10px;
258
- padding-top: 30px; }
755
+ padding: 10px; }
259
756
 
260
757
  .react-autoql-drawer .chat-drawer-chat-bar {
261
758
  flex-shrink: 0;
@@ -443,6 +940,7 @@
443
940
  .react-autoql-drawer-tooltip {
444
941
  font-family: var(--react-autoql-font-family), sans-serif;
445
942
  letter-spacing: 0.04em;
943
+ line-height: 0.9em;
446
944
  padding: 7px 15px;
447
945
  transition: none;
448
946
  opacity: 1 !important;
@@ -463,7 +961,8 @@
463
961
 
464
962
  .react-autoql-condition-lock-menu {
465
963
  color: var(--react-autoql-text-color-primary);
466
- background: var(--react-autoql-background-color-primary); }
964
+ background: var(--react-autoql-background-color-primary);
965
+ min-height: 300px; }
467
966
 
468
967
  .react-tiny-popover-container {
469
968
  z-index: 9999;
@@ -703,22 +1202,6 @@
703
1202
  100% {
704
1203
  transform: translateY(0%); } }
705
1204
 
706
- @-webkit-keyframes snackbarFadein {
707
- from {
708
- top: 30px;
709
- opacity: 0; }
710
- to {
711
- top: 60px;
712
- opacity: 1; } }
713
-
714
- @keyframes snackbarFadein {
715
- from {
716
- top: 30px;
717
- opacity: 0; }
718
- to {
719
- top: 60px;
720
- opacity: 1; } }
721
-
722
1205
  @-webkit-keyframes snackbarFadeout {
723
1206
  from {
724
1207
  top: 60px;
@@ -735,997 +1218,409 @@
735
1218
  top: 30px;
736
1219
  opacity: 0; } }
737
1220
 
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;
1221
+ .react-autoql-notifications-button-container {
747
1222
  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; }
755
-
756
- .chat-voice-record-button:hover {
757
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
758
-
759
- .chat-voice-record-button.listening {
760
- background: #ff471a; }
761
-
762
- .chat-voice-record-icon {
763
- vertical-align: top; }
764
-
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; }
1223
+ display: inline-block;
1224
+ font-size: inherit;
1225
+ line-height: 1em;
1226
+ width: 1em; }
1227
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1228
+ font-size: 1em;
1229
+ line-height: 0;
1230
+ vertical-align: bottom; }
1231
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1232
+ position: absolute;
1233
+ border: 2px solid #fff;
1234
+ background: #f5222d;
1235
+ border-radius: 6.3em;
1236
+ line-height: 1.3em;
1237
+ left: 0.6em;
1238
+ top: -0.8em;
1239
+ padding: 0.15em 0.5em;
1240
+ text-align: center;
1241
+ color: white;
1242
+ font-size: 0.5em; }
1243
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1244
+ position: absolute;
1245
+ display: inline-block;
1246
+ border: 2px solid #fff;
1247
+ background: #f5222d;
1248
+ border-radius: 50%;
1249
+ height: 0.6em;
1250
+ width: 0.6em;
1251
+ left: 0.5em;
1252
+ top: -2px; }
771
1253
 
772
- @-webkit-keyframes slide {
773
- 0% {
774
- transform: translateX(-100%); }
775
- 100% {
776
- transform: translateX(100%); } }
1254
+ .notification-list-loading-container {
1255
+ text-align: center;
1256
+ padding-top: 100px;
1257
+ color: var(--react-autoql-text-color-primary);
1258
+ height: 100%;
1259
+ overflow: hidden;
1260
+ background: var(--react-autoql-background-color-secondary); }
777
1261
 
778
- @keyframes slide {
779
- 0% {
780
- transform: translateX(-100%); }
781
- 100% {
782
- transform: translateX(100%); } }
1262
+ .empty-notifications-message {
1263
+ color: var(--react-autoql-text-color-primary);
1264
+ text-align: center;
1265
+ margin-top: 75px; }
1266
+ .empty-notifications-message div {
1267
+ opacity: 0.6; }
1268
+ .empty-notifications-message .empty-notifications-title {
1269
+ font-size: 16px;
1270
+ font-weight: bold;
1271
+ margin-bottom: 5px; }
1272
+ .empty-notifications-message .empty-notifications-img {
1273
+ width: 250px;
1274
+ height: 250px; }
783
1275
 
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%; } }
1276
+ .react-autoql-notification-list-container {
1277
+ height: 100%;
1278
+ padding: 20px;
1279
+ overflow-y: auto;
1280
+ background: var(--react-autoql-background-color-secondary); }
796
1281
 
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%; } }
1282
+ .react-autoql-notification-dismiss-all {
1283
+ text-align: right;
1284
+ margin-bottom: 12px;
1285
+ padding-right: 10px;
1286
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1287
+ transition: color 0.1s ease; }
1288
+ .react-autoql-notification-dismiss-all span {
1289
+ opacity: 0.8;
1290
+ cursor: pointer; }
1291
+ .react-autoql-notification-dismiss-all span:hover {
1292
+ opacity: 1; }
809
1293
 
810
- .loading-container-centered {
811
- height: 100%;
812
- width: 100%;
813
- display: flex;
814
- flex-direction: column;
815
- justify-content: center;
816
- align-items: center; }
1294
+ .react-autoql-notification-display-name-input {
1295
+ width: 100%; }
817
1296
 
818
- .response-loading {
819
- display: inline-block;
820
- position: relative;
821
- width: 64px;
822
- height: 64px; }
1297
+ .react-autoql-notification-message-input {
1298
+ width: 100%; }
823
1299
 
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); }
1300
+ .react-autoql-notification-list-item:nth-of-type(0) {
1301
+ -webkit-animation-delay: 0s;
1302
+ animation-delay: 0s; }
833
1303
 
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; }
1304
+ .react-autoql-notification-list-item:nth-of-type(1) {
1305
+ -webkit-animation-delay: 0.1s;
1306
+ animation-delay: 0.1s; }
838
1307
 
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; }
1308
+ .react-autoql-notification-list-item:nth-of-type(2) {
1309
+ -webkit-animation-delay: 0.2s;
1310
+ animation-delay: 0.2s; }
843
1311
 
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; }
1312
+ .react-autoql-notification-list-item:nth-of-type(3) {
1313
+ -webkit-animation-delay: 0.3s;
1314
+ animation-delay: 0.3s; }
848
1315
 
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; }
1316
+ .react-autoql-notification-list-item:nth-of-type(4) {
1317
+ -webkit-animation-delay: 0.4s;
1318
+ animation-delay: 0.4s; }
853
1319
 
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); }
1320
+ .react-autoql-notification-list-item:nth-of-type(5) {
1321
+ -webkit-animation-delay: 0.5s;
1322
+ animation-delay: 0.5s; }
866
1323
 
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; }
1324
+ .react-autoql-notification-list-item:nth-of-type(6) {
1325
+ -webkit-animation-delay: 0.6s;
1326
+ animation-delay: 0.6s; }
902
1327
 
903
- .react-autoql-response-content-container.table {
904
- max-height: 100vh !important;
905
- overflow-y: scroll;
906
- scrollbar-width: none; }
1328
+ .react-autoql-notification-list-item:nth-of-type(7) {
1329
+ -webkit-animation-delay: 0.7s;
1330
+ animation-delay: 0.7s; }
907
1331
 
908
- .react-autoql-response-content-container.table::-webkit-scrollbar {
909
- width: 0;
910
- height: 0; }
1332
+ .react-autoql-notification-list-item:nth-of-type(8) {
1333
+ -webkit-animation-delay: 0.8s;
1334
+ animation-delay: 0.8s; }
911
1335
 
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; }
1336
+ .react-autoql-notification-list-item:nth-of-type(9) {
1337
+ -webkit-animation-delay: 0.9s;
1338
+ animation-delay: 0.9s; }
925
1339
 
926
- .react-autoql-suggestion-btn:hover {
927
- border-color: transparent;
928
- color: white;
929
- background: var(--react-autoql-accent-color); }
1340
+ .react-autoql-notification-list-item:nth-of-type(10) {
1341
+ -webkit-animation-delay: 1s;
1342
+ animation-delay: 1s; }
930
1343
 
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; }
944
-
945
- .react-autoql-help-link-btn:hover {
946
- opacity: 0.7; }
947
-
948
- .react-autoql-help-link-icon {
949
- width: 15px;
950
- height: 15px;
951
- margin-bottom: -3px;
952
- margin-right: 3px; }
953
-
954
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
955
- color: var(--react-autoql-success-color); }
956
-
957
- .react-autoql-suggestion-message {
958
- height: 100%;
959
- width: 100%;
960
- word-break: break-word; }
961
-
962
- .react-autoql-suggestions-select {
963
- position: relative;
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;
1050
- font-size: inherit;
1051
- margin: 0;
1052
- padding: 0;
1053
- border-radius: 0;
1054
- border-bottom: 1px dashed;
1055
- color: var(--react-autoql-accent-color); }
1056
-
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 {
1105
- color: var(--react-autoql-text-color-primary);
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 {
1146
- vertical-align: middle;
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; }
1233
-
1234
- .react-autoql-dashboard .react-grid-item {
1235
- background: var(--react-autoql-background-color-primary, #fff);
1236
- color: var(--react-autoql-text-color-primary, #404040);
1237
- font-family: var(--react-autoql-font-family), sans-serif;
1238
- overflow: hidden;
1239
- border-radius: 4px;
1240
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1241
-
1242
- .react-autoql-dashboard-tile-inner-div {
1243
- height: 100%;
1244
- width: 100%;
1245
- background: inherit;
1246
- position: relative;
1247
- text-align: center;
1248
- display: flex;
1249
- justify-content: flex-start;
1250
- flex-direction: column;
1251
- align-items: center; }
1252
-
1253
- .dashboard-data-limit-warning-icon {
1254
- color: var(--react-autoql-warning-color) !important;
1255
- position: absolute !important;
1256
- bottom: 40px;
1257
- right: 16px;
1258
- font-size: 20px; }
1259
-
1260
- .react-autoql-dashboard-tile-drag-handle {
1261
- transition: opacity 0.3s ease;
1262
- position: absolute;
1263
- background-color: var(--react-autoql-border-color, #f7f7f7);
1264
- cursor: move;
1265
- opacity: 0; }
1266
- .react-autoql-dashboard-tile-drag-handle.top {
1267
- top: 0;
1268
- left: 0;
1269
- width: 100%;
1270
- height: 15px; }
1271
- .react-autoql-dashboard-tile-drag-handle.bottom {
1272
- bottom: 0;
1273
- left: 0;
1274
- width: 100%;
1275
- height: 15px; }
1276
- .react-autoql-dashboard-tile-drag-handle.left {
1277
- top: 0;
1278
- left: 0;
1279
- width: 15px;
1280
- height: 100%; }
1281
- .react-autoql-dashboard-tile-drag-handle.right {
1282
- top: 0;
1283
- right: 0;
1284
- width: 15px;
1285
- height: 100%; }
1286
-
1287
- .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1288
- opacity: 1; }
1289
-
1290
- .react-autoql-dashboard-tile .autoql-options-toolbar {
1291
- transition: opacity 0.3s ease, color 0.3s ease;
1292
- visibility: hidden;
1293
- opacity: 0;
1294
- bottom: 8px;
1295
- right: 8px;
1296
- z-index: 1; }
1297
-
1298
- .dashboard-tile-viz-toolbar-container {
1299
- transition: opacity 0.3s ease, color 0.3s ease;
1300
- color: var(--react-autoql-accent-color);
1301
- position: absolute;
1302
- bottom: 0;
1303
- left: 0;
1304
- padding: 7px;
1305
- z-index: 1;
1306
- opacity: 0;
1307
- visibility: hidden; }
1308
- .dashboard-tile-viz-toolbar-container .viz-toolbar,
1309
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1310
- position: relative;
1311
- display: inline-block;
1312
- background: var(--react-autoql-background-color-primary); }
1313
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1314
- margin-right: 7px; }
1315
- .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1316
- font-size: 14px; }
1317
-
1318
- .split-view-btn {
1319
- z-index: 1; }
1320
-
1321
- .split-view-query-btn {
1322
- transition: opacity 0.3s ease, color 0.3s ease;
1323
- color: var(--react-autoql-accent-color);
1324
- position: absolute;
1325
- top: 7px;
1326
- left: 7px;
1327
- bottom: unset;
1328
- z-index: 1;
1329
- visibility: hidden;
1330
- opacity: 0; }
1331
-
1332
- .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1333
- .react-autoql-dashboard-tile:hover .split-view-query-btn,
1334
- .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1335
- visibility: visible;
1336
- opacity: 1; }
1337
-
1338
- .react-autoql-dashboard-tile-inner-div .single-value-response {
1339
- font-size: 32px;
1340
- margin-top: -6px;
1341
- opacity: 0.9; }
1342
-
1343
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1344
- height: calc(100% - 47px);
1345
- width: 100%;
1346
- padding-top: 0;
1347
- background: inherit; }
1348
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1349
- opacity: 0.8; }
1350
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1351
- height: 1px !important;
1352
- color: var(--react-autoql-border-color);
1353
- opacity: 0.3;
1354
- pointer-events: none; }
1355
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1356
- opacity: 0.9;
1357
- color: var(--react-autoql-text-color-primary);
1358
- font-size: 11px; }
1359
-
1360
- .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1361
- padding: 0; }
1362
-
1363
- .react-autoql-dashboard-tile-inner-div
1364
- .dashboard-tile-response-wrapper.editing .layout-splitter {
1365
- display: block;
1366
- pointer-events: unset;
1367
- height: 4px !important;
1368
- color: var(--react-autoql-text-color-primary);
1369
- opacity: 0.8; }
1370
-
1371
- /* Safetynet styles specific to dashboard tiles */
1372
- .react-autoql-dashboard-tile-inner-div
1373
- .dashboard-tile-response-wrapper.editing {
1374
- height: 100%;
1375
- width: 100%;
1376
- overflow-x: auto;
1377
- overflow-y: hidden; }
1378
-
1379
- .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1380
- white-space: nowrap; }
1381
-
1382
- .dashboard-tile-response-wrapper.small
1383
- .react-autoql-query-validation-description,
1384
- .dashboard-tile-response-wrapper.small
1385
- .react-autoql-suggestion-message-description,
1386
- .dashboard-tile-response-wrapper.small
1387
- .react-autoql-query-validation-execute-btn {
1388
- display: none; }
1389
-
1390
- .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1391
- position: relative;
1392
- height: 100%;
1393
- width: 100%;
1394
- background: inherit;
1395
- cursor: default; }
1396
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1397
- padding: 20px;
1398
- padding-top: 15px;
1399
- width: 100%; }
1400
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1401
- padding: 7px; }
1402
-
1403
- .dashboard-tile-title-container {
1404
- width: 100%;
1405
- text-align: left;
1406
- padding: 19px 25px 0 25px;
1407
- height: 47px;
1408
- white-space: nowrap;
1409
- overflow: hidden;
1410
- text-overflow: ellipsis;
1411
- flex-shrink: 0;
1412
- flex-grow: 0; }
1413
- .dashboard-tile-title-container .dashboard-tile-title {
1414
- color: var(--react-autoql-accent-color, #26a7df); }
1415
-
1416
- .dashboard-tile-title-container .dashboard-tile-title {
1417
- font-weight: bold;
1418
- font-size: 14px; }
1419
-
1420
- .dashboard-tile-edit-wrapper {
1421
- display: flex;
1422
- width: 100%;
1423
- height: 55px;
1424
- padding: 20px 20px 0 25px;
1425
- flex-shrink: 0;
1426
- flex-grow: 0; }
1427
-
1428
- .dashboard-tile-play-button {
1429
- cursor: default;
1430
- flex-grow: 0;
1431
- flex-shrink: 0; }
1432
-
1433
- .dashboard-tile-play-button span.react-autoql-icon svg {
1434
- cursor: pointer;
1435
- width: 25px;
1436
- height: 33px;
1437
- margin-left: 10px;
1438
- color: var(--react-autoql-accent-color); }
1439
-
1440
- .dashboard-tile-play-button.disabled svg {
1441
- opacity: 0.5;
1442
- cursor: not-allowed; }
1443
-
1444
- .dashboard-tile-play-button:not(.disabled) svg:hover {
1445
- opacity: 0.8; }
1446
-
1447
- .dashboard-tile-delete-button {
1448
- opacity: 0;
1449
- font-size: 17px;
1450
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1451
- position: absolute;
1452
- top: 0px;
1453
- right: 2px;
1454
- cursor: pointer;
1455
- transition: opacity 0.3s ease;
1456
- z-index: 1; }
1457
-
1458
- .react-grid-item:hover .dashboard-tile-delete-button {
1459
- opacity: 1; }
1460
-
1461
- .dashboard-tile-loading-container {
1462
- display: flex;
1463
- height: 100%;
1464
- width: 100%;
1465
- padding: 20px;
1466
- align-items: center;
1467
- justify-content: center; }
1468
-
1469
- .dashboard-tile-title-divider {
1470
- height: 2px;
1471
- background: currentColor;
1472
- width: 75px;
1473
- margin-top: 4px;
1474
- opacity: 0.07; }
1344
+ @-webkit-keyframes slideIn {
1345
+ 0% {
1346
+ opacity: 0;
1347
+ top: 500px; }
1348
+ 100% {
1349
+ opacity: 1;
1350
+ top: 0; } }
1475
1351
 
1476
- /* Input box styling for edit mode */
1477
- .dashboard-tile-input-container {
1352
+ .react-autoql-notification-list-item {
1478
1353
  display: flex;
1479
- width: 100%;
1480
- height: 100%;
1481
- font-size: 15px; }
1482
- .dashboard-tile-input-container .dashboard-tile-input,
1483
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1484
- width: 100%;
1485
- height: 100%;
1486
- padding: 12px;
1487
- padding-left: 33px;
1488
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1489
- outline: none !important;
1490
- color: var(--react-autoql-text-color-primary, #356f90);
1491
- background: var(--react-autoql-background-color-primary, #fff); }
1492
-
1493
- .query-focused .dashboard-tile-left-input-container,
1494
- .title-focused .dashboard-tile-right-input-container {
1495
- width: 70%; }
1496
-
1497
- .dashboard-tile-right-input-container {
1498
- z-index: 2; }
1499
-
1500
- .dashboard-tile-right-input-container,
1501
- .dashboard-tile-left-input-container {
1502
- position: relative;
1503
- width: 0;
1504
- flex-grow: 1;
1505
- transition: width 0.3s ease; }
1506
- .dashboard-tile-right-input-container .query-input-icon,
1507
- .dashboard-tile-right-input-container .title-input-icon,
1508
- .dashboard-tile-left-input-container .query-input-icon,
1509
- .dashboard-tile-left-input-container .title-input-icon {
1510
- color: var(--react-autoql-accent-color);
1511
- position: absolute;
1512
- pointer-events: none;
1513
- z-index: 1; }
1514
- .dashboard-tile-right-input-container .query-input-icon,
1515
- .dashboard-tile-left-input-container .query-input-icon {
1516
- font-size: 18px;
1517
- top: 4px;
1518
- left: 10px; }
1519
- .dashboard-tile-right-input-container .title-input-icon,
1520
- .dashboard-tile-left-input-container .title-input-icon {
1521
- font-size: 16px;
1522
- top: 7px;
1523
- left: 11px; }
1524
-
1525
- .dashboard-tile-input.second.query {
1526
- transition: all 0.3s ease;
1527
- border: 1px solid transparent;
1528
- outline: none !important;
1529
- color: var(--react-autoql-text-color-primary, #356f90);
1530
- background: var(--react-autoql-background-color-primary);
1531
- margin: 0px;
1532
- padding: 0px;
1533
- width: 0px;
1534
- height: 28px;
1535
- pointer-events: none; }
1536
- .dashboard-tile-input.second.query.open {
1537
- width: 200px;
1538
- padding: 12px;
1539
- margin-left: 5px;
1540
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1541
- pointer-events: unset; }
1542
-
1543
- .dashboard-tile-input:hover,
1544
- .dashboard-tile-input:focus,
1545
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
1546
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
1547
- border: 1px solid #26a7e9 !important;
1548
- border-color: var(--react-autoql-accent-color) !important; }
1549
-
1550
- .dashboard-tile-input-container .dashboard-tile-input.query,
1551
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1552
- padding-left: 36px;
1553
- border-top-left-radius: 4px;
1554
- border-bottom-left-radius: 4px; }
1555
-
1556
- .dashboard-tile-input-container .dashboard-tile-input.title {
1557
- border-left: none;
1558
- border-top-right-radius: 4px;
1559
- border-bottom-right-radius: 4px;
1560
- z-index: 2; }
1561
-
1562
- .dashboard-tile-input-container .dashboard-tile-input.title:hover,
1563
- .dashboard-tile-input-container .dashboard-tile-input.title:focus,
1564
- .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
1565
- .dashboard-tile-right-input-container:hover .dashboard-tile-input {
1566
- /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
1567
- margin-left: -2px; }
1568
-
1569
- /* Autocomplete styles */
1570
- .dashboard-tile-input-container .react-autosuggest__container {
1354
+ flex-direction: column;
1355
+ flex-basis: auto;
1356
+ --accent-color: #26a7df;
1571
1357
  position: relative;
1572
- width: 100%;
1573
- height: 100%;
1574
- padding: 0;
1575
- margin: 0; }
1576
-
1577
- .dashboard-tile-input-container
1578
- .react-autosuggest__suggestions-container--open {
1579
- background-color: var(--react-autoql-background-color-primary);
1580
- border: 1px solid var(--react-autoql-border-color);
1581
- color: var(--react-autoql-text-color-primary); }
1582
-
1583
- .dashboard-tile-input-container .react-autosuggest__suggestion {
1584
- color: var(--react-autoql-text-color-primary); }
1585
-
1586
- .dashboard-tile-input-container input::-moz-placeholder {
1587
- opacity: 0.5; }
1588
-
1589
- .dashboard-tile-input-container input:-ms-input-placeholder {
1590
- opacity: 0.5; }
1591
-
1592
- .dashboard-tile-input-container input::placeholder {
1593
- opacity: 0.5; }
1594
-
1595
- .react-autoql-dashboard .edit-mode-placeholder-icon {
1596
- display: inline-block;
1597
- line-height: 22px;
1598
- vertical-align: middle;
1599
- height: 23px; }
1600
-
1601
- .dashboard-tile-input-container
1602
- .react-autosuggest__suggestions-container--open {
1603
- position: absolute;
1604
- bottom: unset;
1605
- padding-top: 5px;
1606
- padding-bottom: 5px;
1607
- display: block;
1608
- height: unset;
1609
- border-radius: 24px;
1610
- font-family: inherit;
1611
- font-size: 15px;
1612
- font-weight: normal;
1613
- z-index: 2;
1614
1358
  overflow: hidden;
1615
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1616
- text-align: left;
1617
- width: 100%;
1618
- top: 35px;
1359
+ background: var(--react-autoql-background-color-primary, #fff);
1619
1360
  border-radius: 4px;
1620
- margin: 0; }
1621
-
1622
- .dashboard-tile-input-container .react-autosuggest__suggestions-list {
1623
- margin: 0;
1624
- padding: 0;
1625
- list-style-type: none; }
1626
-
1627
- .dashboard-tile-input-container .react-autosuggest__suggestion {
1628
- cursor: pointer;
1629
- padding: 2px;
1630
- padding-left: 18px;
1631
- letter-spacing: 0.05em;
1632
- line-height: 22.5px; }
1633
-
1634
- .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
1635
- background-color: rgba(0, 0, 0, 0.1) !important; }
1361
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1362
+ margin-bottom: 8px;
1363
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1364
+ font-family: var(--react-autoql-font-family), sans-serif;
1365
+ transition: all 1s ease;
1366
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1367
+ -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1368
+ animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1369
+ -webkit-animation-fill-mode: both;
1370
+ animation-fill-mode: both;
1371
+ -webkit-animation-delay: 0s;
1372
+ animation-delay: 0s; }
1373
+ .react-autoql-notification-list-item .single-value-response {
1374
+ font-size: 32px;
1375
+ margin-top: -6px;
1376
+ opacity: 0.9; }
1377
+ .react-autoql-notification-list-item .viz-toolbar {
1378
+ position: relative;
1379
+ border: none; }
1380
+ .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1381
+ height: 33px; }
1382
+ .react-autoql-notification-list-item .react-autoql-notification-details-title {
1383
+ font-weight: 600;
1384
+ padding-top: 20px;
1385
+ padding-bottom: 5px; }
1386
+ .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1387
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1388
+ .react-autoql-notification-list-item .react-autoql-notification-details {
1389
+ overflow: hidden; }
1390
+ .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
1391
+ overflow: auto; }
1392
+ .react-autoql-notification-list-item:hover:not(.expanded) {
1393
+ background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
1394
+ .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
1395
+ opacity: 1; }
1396
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
1397
+ color: var(--react-autoql-accent-color, #26a7df) !important; }
1398
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
1399
+ margin-top: 3px;
1400
+ color: var(--react-autoql-accent-color, #26a7df); }
1401
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
1402
+ opacity: 1; }
1403
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
1404
+ display: flex;
1405
+ flex-direction: column;
1406
+ justify-content: stretch;
1407
+ transition: height 0.2s ease;
1408
+ height: 0;
1409
+ opacity: 0; }
1410
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
1411
+ height: 400px;
1412
+ opacity: 1; }
1413
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content {
1414
+ flex: 0;
1415
+ flex-basis: 55px;
1416
+ text-align: center;
1417
+ padding: 8px;
1418
+ border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1419
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
1420
+ line-height: 40px;
1421
+ opacity: 0.6;
1422
+ font-style: italic; }
1423
+ .react-autoql-notification-list-item .react-autoql-notification-description {
1424
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1425
+ opacity: 0.8;
1426
+ font-size: 14px; }
1427
+ .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
1428
+ display: flex;
1429
+ flex-direction: row;
1430
+ justify-content: space-between;
1431
+ padding-left: 22px;
1432
+ cursor: pointer; }
1433
+ .react-autoql-notification-list-item .react-autoql-notification-query-title {
1434
+ flex: 0 0 auto;
1435
+ font-size: 14px;
1436
+ font-family: inherit;
1437
+ color: currentcolor;
1438
+ opacity: 0.9;
1439
+ font-weight: 600;
1440
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1441
+ text-align: center;
1442
+ margin: 0 10px;
1443
+ padding-top: 20px;
1444
+ padding-bottom: 7px; }
1445
+ .react-autoql-notification-list-item .react-autoql-notification-details-container {
1446
+ flex: 1;
1447
+ display: flex;
1448
+ flex-direction: row;
1449
+ align-items: stretch;
1450
+ justify-content: stretch;
1451
+ overflow: hidden; }
1452
+ .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
1453
+ flex: 1 1;
1454
+ padding: 20px;
1455
+ padding-top: 0;
1456
+ opacity: 0.9;
1457
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1458
+ .react-autoql-notification-list-item .react-autoql-notification-data-container {
1459
+ display: flex;
1460
+ flex-direction: row;
1461
+ justify-content: stretch;
1462
+ flex: 3 3 0px;
1463
+ overflow: hidden; }
1464
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
1465
+ flex: 1;
1466
+ height: 100%;
1467
+ width: 0;
1468
+ display: flex;
1469
+ flex-direction: column;
1470
+ padding: 0px 20px 10px 20px; }
1471
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
1472
+ width: 100%;
1473
+ padding: 0 10px; }
1474
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
1475
+ opacity: 0.9;
1476
+ color: currentColor;
1477
+ font-size: 11px; }
1478
+ .react-autoql-notification-list-item .react-autoql-notification-data-title {
1479
+ line-height: 22px;
1480
+ font-size: 12px;
1481
+ text-align: right;
1482
+ color: var(--react-autoql-text-color-primary);
1483
+ opacity: 0.5;
1484
+ padding: 8px 20px; }
1485
+ .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
1486
+ margin-top: -3px;
1487
+ vertical-align: middle; }
1488
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
1489
+ font-size: 21px;
1490
+ margin: 11px;
1491
+ width: 40px;
1492
+ height: 40px;
1493
+ padding: 10px;
1494
+ border-radius: 26px;
1495
+ display: inline-block;
1496
+ line-height: 20px;
1497
+ background-color: transparent;
1498
+ transition: background-color 0.2s ease;
1499
+ cursor: pointer; }
1500
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
1501
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
1502
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
1503
+ font-size: 18px;
1504
+ margin-top: 3px;
1505
+ margin-right: 3px;
1506
+ opacity: 0;
1507
+ width: 36px;
1508
+ height: 36px;
1509
+ padding: 9px;
1510
+ border-radius: 20px;
1511
+ display: inline-block;
1512
+ line-height: 20px;
1513
+ background-color: transparent;
1514
+ transition: all 0.2s ease;
1515
+ cursor: pointer; }
1516
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
1517
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
1518
+ .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
1519
+ position: absolute;
1520
+ top: -7px;
1521
+ left: -7px;
1522
+ color: var(--react-autoql-accent-color, #26a7df);
1523
+ line-height: 10px;
1524
+ background: var(--react-autoql-background-color-primary, #fff);
1525
+ border-radius: 10px;
1526
+ font-size: 17px; }
1527
+ .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
1528
+ height: 100%;
1529
+ opacity: 0;
1530
+ position: absolute;
1531
+ left: 0px;
1532
+ top: 0;
1533
+ width: 4px;
1534
+ background: var(--react-autoql-accent-color, #26a7df);
1535
+ transition-property: opacity;
1536
+ transition-duration: 0.2s;
1537
+ transition-timing-function: ease; }
1538
+ .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
1539
+ flex: 0 0 50px;
1540
+ padding: 10px;
1541
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1542
+ .react-autoql-notification-list-item .react-autoql-notification-img-container {
1543
+ flex: 0 0 60px; }
1544
+ .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
1545
+ border-radius: 50px;
1546
+ height: 45px;
1547
+ width: 45px;
1548
+ line-height: 45px;
1549
+ font-size: 22px;
1550
+ color: white;
1551
+ background-color: var(--react-autoql-accent-color, #26a7df);
1552
+ text-align: center;
1553
+ margin-top: 13px;
1554
+ margin-right: 17px; }
1555
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
1556
+ flex: 1;
1557
+ line-height: 23px;
1558
+ padding: 13px 0px;
1559
+ transition: color 0.2s ease; }
1560
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
1561
+ font-size: 18px;
1562
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
1563
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
1564
+ font-size: 12px;
1565
+ opacity: 0.5; }
1566
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1567
+ margin-bottom: -1px; }
1636
1568
 
1637
- .dashboard-tile-input-container .react-autosuggest__section-title {
1638
- padding: 10px 0 0 10px;
1639
- font-size: 12px;
1640
- color: #777; }
1569
+ .notification-modal-content .react-autoql-step-content p {
1570
+ margin-bottom: 0.5em;
1571
+ margin-top: 0.5em;
1572
+ padding-left: 8px; }
1641
1573
 
1642
- /* Dragging placeholder styles */
1643
- .react-autoql-db-dragging-placeholder-container {
1644
- height: 100%;
1645
- width: 100%;
1646
- padding: 20px 30px;
1574
+ .notification-modal-content .step-btn-container {
1575
+ text-align: right;
1647
1576
  display: flex;
1648
- flex-direction: column; }
1649
-
1650
- .react-autoql-db-dragging-placeholder-title {
1651
- width: 100%;
1652
- height: 35px;
1653
- background: #f3f3f3;
1654
- border-top-right-radius: 4px;
1655
- border-top-left-radius: 4px;
1656
- flex-shrink: 0;
1657
- flex-grow: 0; }
1658
-
1659
- .react-autoql-db-dragging-placeholder-content {
1660
- width: 100%;
1661
- height: 100%;
1662
- background: #f9f9f9;
1663
- border-bottom-right-radius: 4px;
1664
- border-bottom-left-radius: 4px; }
1665
-
1666
- .dashboard-tile-placeholder-text {
1667
- font-size: 15px;
1668
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
1669
- .dashboard-tile-placeholder-text .play-icon {
1670
- vertical-align: bottom;
1671
- line-height: 20px; }
1577
+ min-height: 50px; }
1672
1578
 
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; }
1579
+ .expression-valid-checkmark.react-autoql-icon svg {
1580
+ color: var(--react-autoql-success-color); }
1681
1581
 
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; }
1582
+ .expression-invalid-message-container {
1583
+ max-width: 75%;
1584
+ float: left;
1585
+ text-align: left !important;
1586
+ display: flex;
1587
+ flex-direction: row;
1588
+ align-items: left;
1589
+ justify-content: left; }
1691
1590
 
1692
- .react-grid-item:hover > .react-resizable-handle::after {
1693
- opacity: 1; }
1591
+ .expression-invalid-message {
1592
+ color: var(--react-autoql-danger-color);
1593
+ display: 'inline-block'; }
1694
1594
 
1695
- .react-grid-placeholder {
1696
- background: rgba(0, 0, 0, 0.13) !important; }
1595
+ .notification-rule-add-btn-outer,
1596
+ .notification-rule-validate-btn-outer {
1597
+ text-align: center;
1598
+ border-style: dashed !important;
1599
+ height: 38px;
1600
+ line-height: 25px;
1601
+ margin: 0 !important;
1602
+ overflow: hidden; }
1697
1603
 
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; }
1604
+ .notification-rule-outer-container {
1605
+ position: relative;
1606
+ border: 1px solid transparent;
1607
+ border-radius: 4px; }
1608
+ .notification-rule-outer-container.outlined {
1609
+ border-color: rgba(0, 0, 0, 0.15);
1610
+ padding: 0 20px;
1611
+ padding-bottom: 12px; }
1712
1612
 
1713
- .dashboard-tile-response-container .layout-pane-primary {
1714
- overflow: hidden; }
1613
+ .notification-outer-all-any {
1614
+ position: absolute;
1615
+ left: 0;
1616
+ top: 50%; }
1715
1617
 
1716
- .splitter-layout,
1717
- .layout-pane,
1718
- .dashboard-tile-split-pane-container,
1719
- .react-autoql-dashboard-drilldown-original {
1618
+ .notification-first-group-btn-container {
1720
1619
  display: flex;
1721
- align-items: stretch;
1722
- justify-content: center;
1723
- width: 100%; }
1620
+ justify-content: space-between; }
1724
1621
 
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; }
1622
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1623
+ border: none; }
1729
1624
 
1730
1625
  .react-autoql-notification-settings {
1731
1626
  background-color: var(--react-autoql-background-color-secondary);
@@ -1813,443 +1708,715 @@ span.react-autoql-icon {
1813
1708
  opacity: 0.5; }
1814
1709
  .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1815
1710
  vertical-align: middle;
1816
- margin-bottom: 4px;
1817
1711
  height: 18px; }
1818
1712
  .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1819
1713
  display: flex;
1820
1714
  align-items: center;
1821
1715
  margin-top: -25px; }
1822
1716
 
1823
- .react-autoql-notifications-button-container {
1717
+ .notification-rule-outer-container {
1824
1718
  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;
1719
+ border: 1px solid transparent;
1720
+ border-radius: 4px;
1721
+ padding-bottom: 5px; }
1722
+
1723
+ .expression-error-message {
1724
+ padding-left: 5px; }
1725
+
1726
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1727
+ border: none; }
1728
+
1729
+ .react-autoql-step-container a {
1730
+ color: var(--react-autoql-accent-color, #26a7df); }
1731
+
1732
+ .frequency-date-select-container {
1733
+ margin-top: 10px; }
1734
+
1735
+ .notification-frequency-step {
1736
+ display: flex; }
1737
+ .notification-frequency-step .frequency-category-select {
1738
+ position: relative;
1739
+ padding-top: 9px; }
1740
+ .notification-frequency-step .notification-frequency-select {
1741
+ margin-left: 8px; }
1742
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1743
+ line-height: 33px; }
1744
+ .notification-frequency-step .frequency-repeat-follow-text {
1745
+ line-height: 32px;
1746
+ vertical-align: top; }
1747
+ .notification-frequency-step .frequency-settings-container {
1748
+ flex: 0 1 400px; }
1749
+
1750
+ .schedule-builder-timezone-section {
1751
+ margin: 10px 5px; }
1752
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1847
1753
  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; }
1754
+ width: 300px; }
1755
+
1756
+ .react-autoql-dashboard .react-grid-item {
1757
+ background: var(--react-autoql-background-color-primary, #fff);
1758
+ color: var(--react-autoql-text-color-primary, #404040);
1759
+ font-family: var(--react-autoql-font-family), sans-serif;
1760
+ overflow: hidden;
1761
+ border-radius: 4px;
1762
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1763
+
1764
+ .react-autoql-dashboard-tile-inner-div {
1765
+ height: 100%;
1766
+ width: 100%;
1767
+ background: inherit;
1768
+ position: relative;
1769
+ text-align: center;
1770
+ display: flex;
1771
+ justify-content: flex-start;
1772
+ flex-direction: column;
1773
+ align-items: center; }
1774
+
1775
+ .dashboard-data-limit-warning-icon {
1776
+ color: var(--react-autoql-warning-color) !important;
1777
+ position: absolute !important;
1778
+ bottom: 40px;
1779
+ right: 16px;
1780
+ font-size: 20px; }
1781
+
1782
+ .react-autoql-dashboard-tile-drag-handle {
1783
+ transition: opacity 0.3s ease;
1784
+ position: absolute;
1785
+ background-color: var(--react-autoql-border-color, #f7f7f7);
1786
+ cursor: move;
1787
+ opacity: 0; }
1788
+ .react-autoql-dashboard-tile-drag-handle.top {
1789
+ top: 0;
1790
+ left: 0;
1791
+ width: 100%;
1792
+ height: 15px; }
1793
+ .react-autoql-dashboard-tile-drag-handle.bottom {
1794
+ bottom: 0;
1795
+ left: 0;
1796
+ width: 100%;
1797
+ height: 15px; }
1798
+ .react-autoql-dashboard-tile-drag-handle.left {
1799
+ top: 0;
1800
+ left: 0;
1801
+ width: 15px;
1802
+ height: 100%; }
1803
+ .react-autoql-dashboard-tile-drag-handle.right {
1804
+ top: 0;
1805
+ right: 0;
1806
+ width: 15px;
1807
+ height: 100%; }
1808
+
1809
+ .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1810
+ opacity: 1; }
1811
+
1812
+ .react-autoql-dashboard-tile .autoql-options-toolbar {
1813
+ transition: opacity 0.3s ease, color 0.3s ease;
1814
+ visibility: hidden;
1815
+ opacity: 0;
1816
+ bottom: 8px;
1817
+ right: 8px;
1818
+ z-index: 1; }
1819
+
1820
+ .dashboard-tile-viz-toolbar-container {
1821
+ transition: opacity 0.3s ease, color 0.3s ease;
1822
+ color: var(--react-autoql-accent-color);
1823
+ position: absolute;
1824
+ bottom: 0;
1825
+ left: 0;
1826
+ padding: 7px;
1827
+ z-index: 1;
1828
+ opacity: 0;
1829
+ visibility: hidden; }
1830
+ .dashboard-tile-viz-toolbar-container .viz-toolbar,
1831
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1832
+ position: relative;
1833
+ display: inline-block;
1834
+ background: var(--react-autoql-background-color-primary); }
1835
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1836
+ margin-right: 7px; }
1837
+ .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1838
+ font-size: 14px; }
1839
+
1840
+ .split-view-btn {
1841
+ z-index: 1; }
1842
+
1843
+ .split-view-query-btn {
1844
+ transition: opacity 0.3s ease, color 0.3s ease;
1845
+ color: var(--react-autoql-accent-color);
1846
+ position: absolute;
1847
+ top: 7px;
1848
+ left: 7px;
1849
+ bottom: unset;
1850
+ z-index: 1;
1851
+ visibility: hidden;
1852
+ opacity: 0; }
1853
+
1854
+ .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1855
+ .react-autoql-dashboard-tile:hover .split-view-query-btn,
1856
+ .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1857
+ visibility: visible;
1858
+ opacity: 1; }
1859
+
1860
+ .react-autoql-dashboard-tile-inner-div .single-value-response {
1861
+ font-size: 32px;
1862
+ margin-top: -6px;
1863
+ opacity: 0.9; }
1864
+
1865
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1866
+ height: calc(100% - 47px);
1867
+ width: 100%;
1868
+ padding-top: 0;
1869
+ background: inherit; }
1870
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1871
+ opacity: 0.8; }
1872
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1873
+ height: 1px !important;
1874
+ color: var(--react-autoql-border-color);
1875
+ opacity: 0.3;
1876
+ pointer-events: none; }
1877
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1878
+ opacity: 0.9;
1879
+ color: var(--react-autoql-text-color-primary);
1880
+ font-size: 11px; }
1881
+
1882
+ .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1883
+ padding: 0; }
1884
+
1885
+ .react-autoql-dashboard-tile-inner-div
1886
+ .dashboard-tile-response-wrapper.editing .layout-splitter {
1887
+ display: block;
1888
+ pointer-events: unset;
1889
+ height: 4px !important;
1890
+ color: var(--react-autoql-text-color-primary);
1891
+ opacity: 0.8; }
1892
+
1893
+ /* Safetynet styles specific to dashboard tiles */
1894
+ .react-autoql-dashboard-tile-inner-div
1895
+ .dashboard-tile-response-wrapper.editing {
1896
+ height: 100%;
1897
+ width: 100%;
1898
+ overflow-x: auto;
1899
+ overflow-y: hidden; }
1900
+
1901
+ .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1902
+ white-space: nowrap; }
1903
+
1904
+ .dashboard-tile-response-wrapper.small
1905
+ .react-autoql-query-validation-description,
1906
+ .dashboard-tile-response-wrapper.small
1907
+ .react-autoql-suggestion-message-description,
1908
+ .dashboard-tile-response-wrapper.small
1909
+ .react-autoql-query-validation-execute-btn {
1910
+ display: none; }
1911
+
1912
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1913
+ position: relative;
1914
+ height: 100%;
1915
+ width: 100%;
1916
+ background: inherit;
1917
+ cursor: default; }
1918
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1919
+ padding: 20px;
1920
+ padding-top: 15px;
1921
+ width: 100%; }
1922
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1923
+ padding: 7px; }
1855
1924
 
1856
- .notification-list-loading-container {
1857
- text-align: center;
1858
- padding-top: 100px;
1859
- color: var(--react-autoql-text-color-primary);
1860
- height: 100%;
1925
+ .dashboard-tile-title-container {
1926
+ width: 100%;
1927
+ text-align: left;
1928
+ padding: 19px 25px 0 25px;
1929
+ height: 47px;
1930
+ white-space: nowrap;
1861
1931
  overflow: hidden;
1862
- background: var(--react-autoql-background-color-secondary); }
1932
+ text-overflow: ellipsis;
1933
+ flex-shrink: 0;
1934
+ flex-grow: 0; }
1935
+ .dashboard-tile-title-container .dashboard-tile-title {
1936
+ color: var(--react-autoql-accent-color, #26a7df); }
1863
1937
 
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; }
1938
+ .dashboard-tile-title-container .dashboard-tile-title {
1939
+ font-weight: bold;
1940
+ font-size: 14px; }
1877
1941
 
1878
- .react-autoql-notification-list-container {
1942
+ .dashboard-tile-edit-wrapper {
1943
+ display: flex;
1944
+ width: 100%;
1945
+ height: 55px;
1946
+ padding: 20px 20px 0 25px;
1947
+ flex-shrink: 0;
1948
+ flex-grow: 0; }
1949
+
1950
+ .dashboard-tile-play-button {
1951
+ cursor: default;
1952
+ flex-grow: 0;
1953
+ flex-shrink: 0; }
1954
+
1955
+ .dashboard-tile-play-button span.react-autoql-icon svg {
1956
+ cursor: pointer;
1957
+ width: 25px;
1958
+ height: 33px;
1959
+ margin-left: 10px;
1960
+ color: var(--react-autoql-accent-color); }
1961
+
1962
+ .dashboard-tile-play-button.disabled svg {
1963
+ opacity: 0.5;
1964
+ cursor: not-allowed; }
1965
+
1966
+ .dashboard-tile-play-button:not(.disabled) svg:hover {
1967
+ opacity: 0.8; }
1968
+
1969
+ .dashboard-tile-delete-button {
1970
+ opacity: 0;
1971
+ font-size: 17px;
1972
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1973
+ position: absolute;
1974
+ top: 0px;
1975
+ right: 2px;
1976
+ cursor: pointer;
1977
+ transition: opacity 0.3s ease;
1978
+ z-index: 1; }
1979
+
1980
+ .react-grid-item:hover .dashboard-tile-delete-button {
1981
+ opacity: 1; }
1982
+
1983
+ .dashboard-tile-loading-container {
1984
+ display: flex;
1879
1985
  height: 100%;
1986
+ width: 100%;
1880
1987
  padding: 20px;
1881
- overflow-y: auto;
1882
- background: var(--react-autoql-background-color-secondary); }
1988
+ align-items: center;
1989
+ justify-content: center; }
1883
1990
 
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; }
1991
+ .dashboard-tile-title-divider {
1992
+ height: 2px;
1993
+ background: currentColor;
1994
+ width: 75px;
1995
+ margin-top: 4px;
1996
+ opacity: 0.07; }
1895
1997
 
1896
- .react-autoql-notification-display-name-input {
1897
- width: 100%; }
1998
+ /* Input box styling for edit mode */
1999
+ .dashboard-tile-input-container {
2000
+ display: flex;
2001
+ width: 100%;
2002
+ height: 100%;
2003
+ font-size: 15px; }
2004
+ .dashboard-tile-input-container .dashboard-tile-input,
2005
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2006
+ width: 100%;
2007
+ height: 100%;
2008
+ padding: 12px;
2009
+ padding-left: 33px;
2010
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2011
+ outline: none !important;
2012
+ color: var(--react-autoql-text-color-primary, #356f90);
2013
+ background: var(--react-autoql-background-color-primary, #fff); }
1898
2014
 
1899
- .react-autoql-notification-message-input {
1900
- width: 100%; }
2015
+ .query-focused .dashboard-tile-left-input-container,
2016
+ .title-focused .dashboard-tile-right-input-container {
2017
+ width: 70%; }
1901
2018
 
1902
- .react-autoql-notification-list-item:nth-of-type(0) {
1903
- -webkit-animation-delay: 0s;
1904
- animation-delay: 0s; }
2019
+ .dashboard-tile-right-input-container {
2020
+ z-index: 2; }
1905
2021
 
1906
- .react-autoql-notification-list-item:nth-of-type(1) {
1907
- -webkit-animation-delay: 0.1s;
1908
- animation-delay: 0.1s; }
2022
+ .dashboard-tile-right-input-container,
2023
+ .dashboard-tile-left-input-container {
2024
+ position: relative;
2025
+ width: 0;
2026
+ flex-grow: 1;
2027
+ transition: width 0.3s ease; }
2028
+ .dashboard-tile-right-input-container .query-input-icon,
2029
+ .dashboard-tile-right-input-container .title-input-icon,
2030
+ .dashboard-tile-left-input-container .query-input-icon,
2031
+ .dashboard-tile-left-input-container .title-input-icon {
2032
+ color: var(--react-autoql-accent-color);
2033
+ position: absolute;
2034
+ pointer-events: none;
2035
+ z-index: 1; }
2036
+ .dashboard-tile-right-input-container .query-input-icon,
2037
+ .dashboard-tile-left-input-container .query-input-icon {
2038
+ font-size: 18px;
2039
+ top: 4px;
2040
+ left: 10px; }
2041
+ .dashboard-tile-right-input-container .title-input-icon,
2042
+ .dashboard-tile-left-input-container .title-input-icon {
2043
+ font-size: 16px;
2044
+ top: 7px;
2045
+ left: 11px; }
1909
2046
 
1910
- .react-autoql-notification-list-item:nth-of-type(2) {
1911
- -webkit-animation-delay: 0.2s;
1912
- animation-delay: 0.2s; }
2047
+ .dashboard-tile-input.second.query {
2048
+ transition: all 0.3s ease;
2049
+ border: 1px solid transparent;
2050
+ outline: none !important;
2051
+ color: var(--react-autoql-text-color-primary, #356f90);
2052
+ background: var(--react-autoql-background-color-primary);
2053
+ margin: 0px;
2054
+ padding: 0px;
2055
+ width: 0px;
2056
+ height: 28px;
2057
+ pointer-events: none; }
2058
+ .dashboard-tile-input.second.query.open {
2059
+ width: 200px;
2060
+ padding: 12px;
2061
+ margin-left: 5px;
2062
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2063
+ pointer-events: unset; }
1913
2064
 
1914
- .react-autoql-notification-list-item:nth-of-type(3) {
1915
- -webkit-animation-delay: 0.3s;
1916
- animation-delay: 0.3s; }
2065
+ .dashboard-tile-input:hover,
2066
+ .dashboard-tile-input:focus,
2067
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
2068
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
2069
+ border: 1px solid #26a7e9 !important;
2070
+ border-color: var(--react-autoql-accent-color) !important; }
1917
2071
 
1918
- .react-autoql-notification-list-item:nth-of-type(4) {
1919
- -webkit-animation-delay: 0.4s;
1920
- animation-delay: 0.4s; }
2072
+ .dashboard-tile-input-container .dashboard-tile-input.query,
2073
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2074
+ padding-left: 36px;
2075
+ border-top-left-radius: 4px;
2076
+ border-bottom-left-radius: 4px; }
1921
2077
 
1922
- .react-autoql-notification-list-item:nth-of-type(5) {
1923
- -webkit-animation-delay: 0.5s;
1924
- animation-delay: 0.5s; }
2078
+ .dashboard-tile-input-container .dashboard-tile-input.title {
2079
+ border-left: none;
2080
+ border-top-right-radius: 4px;
2081
+ border-bottom-right-radius: 4px;
2082
+ z-index: 2; }
1925
2083
 
1926
- .react-autoql-notification-list-item:nth-of-type(6) {
1927
- -webkit-animation-delay: 0.6s;
1928
- animation-delay: 0.6s; }
2084
+ .dashboard-tile-input-container .dashboard-tile-input.title:hover,
2085
+ .dashboard-tile-input-container .dashboard-tile-input.title:focus,
2086
+ .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
2087
+ .dashboard-tile-right-input-container:hover .dashboard-tile-input {
2088
+ /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
2089
+ margin-left: -2px; }
1929
2090
 
1930
- .react-autoql-notification-list-item:nth-of-type(7) {
1931
- -webkit-animation-delay: 0.7s;
1932
- animation-delay: 0.7s; }
2091
+ /* Autocomplete styles */
2092
+ .dashboard-tile-input-container .react-autosuggest__container {
2093
+ position: relative;
2094
+ width: 100%;
2095
+ height: 100%;
2096
+ padding: 0;
2097
+ margin: 0; }
2098
+
2099
+ .dashboard-tile-input-container
2100
+ .react-autosuggest__suggestions-container--open {
2101
+ background-color: var(--react-autoql-background-color-primary);
2102
+ border: 1px solid var(--react-autoql-border-color);
2103
+ color: var(--react-autoql-text-color-primary); }
2104
+
2105
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
2106
+ color: var(--react-autoql-text-color-primary); }
2107
+
2108
+ .dashboard-tile-input-container input::-moz-placeholder {
2109
+ opacity: 0.5; }
2110
+
2111
+ .dashboard-tile-input-container input:-ms-input-placeholder {
2112
+ opacity: 0.5; }
2113
+
2114
+ .dashboard-tile-input-container input::placeholder {
2115
+ opacity: 0.5; }
2116
+
2117
+ .react-autoql-dashboard .edit-mode-placeholder-icon {
2118
+ display: inline-block;
2119
+ line-height: 22px;
2120
+ vertical-align: middle;
2121
+ height: 23px; }
2122
+
2123
+ .dashboard-tile-input-container
2124
+ .react-autosuggest__suggestions-container--open {
2125
+ position: absolute;
2126
+ bottom: unset;
2127
+ padding-top: 5px;
2128
+ padding-bottom: 5px;
2129
+ display: block;
2130
+ height: unset;
2131
+ border-radius: 24px;
2132
+ font-family: inherit;
2133
+ font-size: 15px;
2134
+ font-weight: normal;
2135
+ z-index: 2;
2136
+ overflow: hidden;
2137
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2138
+ text-align: left;
2139
+ width: 100%;
2140
+ top: 35px;
2141
+ border-radius: 4px;
2142
+ margin: 0; }
1933
2143
 
1934
- .react-autoql-notification-list-item:nth-of-type(8) {
1935
- -webkit-animation-delay: 0.8s;
1936
- animation-delay: 0.8s; }
2144
+ .dashboard-tile-input-container .react-autosuggest__suggestions-list {
2145
+ margin: 0;
2146
+ padding: 0;
2147
+ list-style-type: none; }
1937
2148
 
1938
- .react-autoql-notification-list-item:nth-of-type(9) {
1939
- -webkit-animation-delay: 0.9s;
1940
- animation-delay: 0.9s; }
2149
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
2150
+ cursor: pointer;
2151
+ padding: 2px;
2152
+ padding-left: 18px;
2153
+ letter-spacing: 0.05em;
2154
+ line-height: 22.5px; }
1941
2155
 
1942
- .react-autoql-notification-list-item:nth-of-type(10) {
1943
- -webkit-animation-delay: 1s;
1944
- animation-delay: 1s; }
2156
+ .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
2157
+ background-color: rgba(0, 0, 0, 0.1) !important; }
1945
2158
 
1946
- @-webkit-keyframes slideIn {
1947
- 0% {
1948
- opacity: 0;
1949
- top: 500px; }
1950
- 100% {
1951
- opacity: 1;
1952
- top: 0; } }
2159
+ .dashboard-tile-input-container .react-autosuggest__section-title {
2160
+ padding: 10px 0 0 10px;
2161
+ font-size: 12px;
2162
+ color: #777; }
1953
2163
 
1954
- .react-autoql-notification-list-item {
1955
- display: flex;
1956
- flex-direction: column;
1957
- flex-basis: auto;
1958
- --accent-color: #26a7df;
1959
- position: relative;
1960
- overflow: hidden;
1961
- background: var(--react-autoql-background-color-primary, #fff);
1962
- border-radius: 4px;
1963
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1964
- margin-bottom: 8px;
1965
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1966
- font-family: var(--react-autoql-font-family), sans-serif;
1967
- transition: all 1s ease;
1968
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1969
- -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1970
- animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1971
- -webkit-animation-fill-mode: both;
1972
- animation-fill-mode: both;
1973
- -webkit-animation-delay: 0s;
1974
- animation-delay: 0s; }
1975
- .react-autoql-notification-list-item .single-value-response {
1976
- font-size: 32px;
1977
- margin-top: -6px;
1978
- opacity: 0.9; }
1979
- .react-autoql-notification-list-item .viz-toolbar {
1980
- position: relative;
1981
- border: none; }
1982
- .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1983
- height: 33px; }
1984
- .react-autoql-notification-list-item .react-autoql-notification-details-title {
1985
- font-weight: 600;
1986
- padding-top: 20px;
1987
- padding-bottom: 5px; }
1988
- .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1989
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1990
- .react-autoql-notification-list-item .react-autoql-notification-details {
1991
- overflow: hidden; }
1992
- .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
1993
- overflow: auto; }
1994
- .react-autoql-notification-list-item:hover:not(.expanded) {
1995
- background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
1996
- .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
1997
- opacity: 1; }
1998
- .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
1999
- color: var(--react-autoql-accent-color, #26a7df) !important; }
2000
- .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
2001
- margin-top: 3px;
2002
- color: var(--react-autoql-accent-color, #26a7df); }
2003
- .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
2004
- opacity: 1; }
2005
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
2006
- display: flex;
2007
- flex-direction: column;
2008
- justify-content: stretch;
2009
- transition: height 0.2s ease;
2010
- height: 0;
2011
- opacity: 0; }
2012
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
2013
- height: 400px;
2014
- opacity: 1; }
2015
- .react-autoql-notification-list-item .react-autoql-notification-extra-content {
2016
- flex: 0;
2017
- flex-basis: 55px;
2018
- text-align: center;
2019
- padding: 8px;
2020
- border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2021
- .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
2022
- line-height: 40px;
2023
- opacity: 0.6;
2024
- font-style: italic; }
2025
- .react-autoql-notification-list-item .react-autoql-notification-description {
2026
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
2027
- opacity: 0.8;
2028
- font-size: 14px; }
2029
- .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
2030
- display: flex;
2031
- flex-direction: row;
2032
- justify-content: space-between;
2033
- padding-left: 22px;
2034
- cursor: pointer; }
2035
- .react-autoql-notification-list-item .react-autoql-notification-query-title {
2036
- flex: 0 0 auto;
2037
- font-size: 14px;
2038
- font-family: inherit;
2039
- color: currentcolor;
2040
- opacity: 0.9;
2041
- font-weight: 600;
2042
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2043
- text-align: center;
2044
- margin: 0 10px;
2045
- padding-top: 20px;
2046
- padding-bottom: 7px; }
2047
- .react-autoql-notification-list-item .react-autoql-notification-details-container {
2048
- flex: 1;
2049
- display: flex;
2050
- flex-direction: row;
2051
- align-items: stretch;
2052
- justify-content: stretch;
2053
- overflow: hidden; }
2054
- .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
2055
- flex: 1 1;
2056
- padding: 20px;
2057
- padding-top: 0;
2058
- opacity: 0.9;
2059
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2060
- .react-autoql-notification-list-item .react-autoql-notification-data-container {
2061
- display: flex;
2062
- flex-direction: row;
2063
- justify-content: stretch;
2064
- flex: 3 3 0px;
2065
- overflow: hidden; }
2066
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
2067
- flex: 1;
2068
- height: 100%;
2069
- width: 0;
2070
- display: flex;
2071
- flex-direction: column;
2072
- padding: 0px 20px 10px 20px; }
2073
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
2074
- width: 100%;
2075
- padding: 0 10px; }
2076
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
2077
- opacity: 0.9;
2078
- color: currentColor;
2079
- font-size: 11px; }
2080
- .react-autoql-notification-list-item .react-autoql-notification-data-title {
2081
- line-height: 22px;
2082
- font-size: 12px;
2083
- text-align: right;
2084
- color: var(--react-autoql-text-color-primary);
2085
- opacity: 0.5;
2086
- padding: 8px 20px; }
2087
- .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
2088
- margin-top: -3px;
2089
- vertical-align: middle; }
2090
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
2091
- font-size: 21px;
2092
- margin: 11px;
2093
- width: 40px;
2094
- height: 40px;
2095
- padding: 10px;
2096
- border-radius: 26px;
2097
- display: inline-block;
2098
- line-height: 20px;
2099
- background-color: transparent;
2100
- transition: background-color 0.2s ease;
2101
- cursor: pointer; }
2102
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
2103
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
2104
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
2105
- font-size: 18px;
2106
- margin-top: 3px;
2107
- margin-right: 3px;
2108
- opacity: 0;
2109
- width: 36px;
2110
- height: 36px;
2111
- padding: 9px;
2112
- border-radius: 20px;
2113
- display: inline-block;
2114
- line-height: 20px;
2115
- background-color: transparent;
2116
- transition: all 0.2s ease;
2117
- cursor: pointer; }
2118
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
2119
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
2120
- .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
2121
- position: absolute;
2122
- top: -7px;
2123
- left: -7px;
2124
- color: var(--react-autoql-accent-color, #26a7df);
2125
- line-height: 10px;
2126
- background: var(--react-autoql-background-color-primary, #fff);
2127
- border-radius: 10px;
2128
- font-size: 17px; }
2129
- .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
2130
- height: 100%;
2131
- opacity: 0;
2132
- position: absolute;
2133
- left: 0px;
2134
- top: 0;
2135
- width: 4px;
2136
- background: var(--react-autoql-accent-color, #26a7df);
2137
- transition-property: opacity;
2138
- transition-duration: 0.2s;
2139
- transition-timing-function: ease; }
2140
- .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
2141
- flex: 0 0 50px;
2142
- padding: 10px;
2143
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2144
- .react-autoql-notification-list-item .react-autoql-notification-img-container {
2145
- flex: 0 0 60px; }
2146
- .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
2147
- border-radius: 50px;
2148
- height: 45px;
2149
- width: 45px;
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; }
2164
+ /* Dragging placeholder styles */
2165
+ .react-autoql-db-dragging-placeholder-container {
2166
+ height: 100%;
2167
+ width: 100%;
2168
+ padding: 20px 30px;
2169
+ display: flex;
2170
+ flex-direction: column; }
2170
2171
 
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; }
2172
+ .react-autoql-db-dragging-placeholder-title {
2173
+ width: 100%;
2174
+ height: 35px;
2175
+ background: #f3f3f3;
2176
+ border-top-right-radius: 4px;
2177
+ border-top-left-radius: 4px;
2178
+ flex-shrink: 0;
2179
+ flex-grow: 0; }
2179
2180
 
2180
- .notification-rule-outer-container {
2181
- position: relative;
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; }
2181
+ .react-autoql-db-dragging-placeholder-content {
2182
+ width: 100%;
2183
+ height: 100%;
2184
+ background: #f9f9f9;
2185
+ border-bottom-right-radius: 4px;
2186
+ border-bottom-left-radius: 4px; }
2188
2187
 
2189
- .notification-outer-all-any {
2188
+ .dashboard-tile-placeholder-text {
2189
+ font-size: 15px;
2190
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
2191
+ .dashboard-tile-placeholder-text .play-icon {
2192
+ vertical-align: bottom;
2193
+ line-height: 20px; }
2194
+
2195
+ /* React Grid Layout overrides */
2196
+ .react-grid-item > .react-resizable-handle {
2197
+ z-index: 1;
2190
2198
  position: absolute;
2191
- left: 0;
2192
- top: 50%; }
2199
+ width: 25px;
2200
+ height: 25px;
2201
+ bottom: 0;
2202
+ right: 0; }
2193
2203
 
2194
- .notification-first-group-btn-container {
2195
- display: flex;
2196
- justify-content: space-between; }
2204
+ .react-grid-item > .react-resizable-handle::after {
2205
+ width: 11px !important;
2206
+ height: 11px !important;
2207
+ bottom: 4px;
2208
+ right: 4px;
2209
+ opacity: 0;
2210
+ border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2211
+ border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2212
+ transition: opacity 0.3s ease; }
2197
2213
 
2198
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2199
- border: none; }
2214
+ .react-grid-item:hover > .react-resizable-handle::after {
2215
+ opacity: 1; }
2200
2216
 
2201
- .notification-modal-content .react-autoql-step-content p {
2202
- margin-bottom: 0.5em;
2203
- margin-top: 0.5em;
2204
- padding-left: 8px; }
2217
+ .react-grid-placeholder {
2218
+ background: rgba(0, 0, 0, 0.13) !important; }
2205
2219
 
2206
- .notification-modal-content .step-btn-container {
2207
- text-align: right;
2208
- display: flex;
2209
- min-height: 50px; }
2220
+ /* This fixes the flickering bug in RGL when resizing elements */
2221
+ .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 {
2222
+ color: inherit; }
2223
+ .react-draggable-transparent-selection input::-moz-placeholder {
2224
+ color: inherit; }
2225
+ .react-draggable-transparent-selection input:-ms-input-placeholder {
2226
+ color: inherit; }
2227
+ .react-draggable-transparent-selection span::selection,
2228
+ .react-draggable-transparent-selection div::selection,
2229
+ .react-draggable-transparent-selection a::selection,
2230
+ .react-draggable-transparent-selection input::selection,
2231
+ .react-draggable-transparent-selection text::selection,
2232
+ .react-draggable-transparent-selection input::placeholder {
2233
+ color: inherit; }
2210
2234
 
2211
- .expression-valid-checkmark.react-autoql-icon svg {
2212
- color: var(--react-autoql-success-color); }
2235
+ .dashboard-tile-response-container .layout-pane-primary {
2236
+ overflow: hidden; }
2213
2237
 
2214
- .expression-invalid-message-container {
2215
- max-width: 75%;
2216
- float: left;
2217
- text-align: left !important;
2238
+ .splitter-layout,
2239
+ .layout-pane,
2240
+ .dashboard-tile-split-pane-container,
2241
+ .react-autoql-dashboard-drilldown-original {
2218
2242
  display: flex;
2219
- flex-direction: row;
2220
- align-items: left;
2221
- justify-content: left; }
2243
+ align-items: stretch;
2244
+ justify-content: center;
2245
+ width: 100%; }
2246
+
2247
+ .dashboard-tile-response-container .splitter-layout,
2248
+ .dashboard-tile-response-container .layout-pane,
2249
+ .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2250
+ background: inherit; }
2251
+
2252
+ .react-autoql-table-container {
2253
+ height: 100%;
2254
+ max-width: 100%;
2255
+ background-color: inherit; }
2256
+
2257
+ .react-autoql-table {
2258
+ margin-bottom: 0; }
2259
+
2260
+ /* tabulator */
2261
+ .react-autoql-table.tabulator,
2262
+ .react-autoql-table.tabulator .tabulator-row,
2263
+ .react-autoql-table.tabulator .tabulator-header,
2264
+ .react-autoql-table.tabulator .tabulator-headers,
2265
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2266
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2267
+ background-color: inherit; }
2268
+
2269
+ .react-autoql-table-container.supports-drilldown
2270
+ .react-autoql-table.tabulator
2271
+ .tabulator-row.tabulator-unselectable:hover {
2272
+ cursor: pointer !important;
2273
+ background-color: var(--react-autoql-hover-color) !important; }
2274
+
2275
+ .react-autoql-table.tabulator
2276
+ .tabulator-header
2277
+ .tabulator-col.tabulator-sortable:hover {
2278
+ background-color: var(--react-autoql-hover-color) !important; }
2279
+
2280
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2281
+ .react-autoql-table.tabulator .tabulator-cell {
2282
+ border-color: var(--react-autoql-border-color); }
2283
+
2284
+ .react-autoql-table.tabulator .tabulator-header {
2285
+ border-bottom: 2px solid var(--react-autoql-border-color); }
2286
+
2287
+ .react-autoql-table.tabulator {
2288
+ background-color: inherit;
2289
+ height: 100%; }
2290
+
2291
+ .react-autoql-table .tabulator-row {
2292
+ /* user-select: none; This breaks copy/paste */
2293
+ border-bottom: 1px solid var(--react-autoql-border-color); }
2294
+
2295
+ .tabulator-cell:not(:first-child) {
2296
+ border-left: 1px solid !important;
2297
+ border-color: rgba(0, 0, 0, 0.06) !important; }
2298
+
2299
+ .react-autoql-table .tabulator-tableHolder {
2300
+ max-height: calc(100% - 38px) !important;
2301
+ background-color: inherit; }
2302
+
2303
+ .react-autoql-table.tabulator
2304
+ .tabulator-header
2305
+ .tabulator-col
2306
+ .tabulator-col-content {
2307
+ padding: 8px 5px; }
2308
+
2309
+ .react-autoql-table.tabulator
2310
+ .tabulator-header
2311
+ .tabulator-col
2312
+ .tabulator-col-content
2313
+ .tabulator-arrow {
2314
+ opacity: 0;
2315
+ border-left: 4px solid transparent !important;
2316
+ border-right: 4px solid transparent !important;
2317
+ right: 4px;
2318
+ top: calc(50% - 3px); }
2319
+
2320
+ .react-autoql-table.tabulator
2321
+ .tabulator-header
2322
+ .tabulator-col:hover
2323
+ .tabulator-col-content
2324
+ .tabulator-arrow {
2325
+ opacity: 1 !important; }
2326
+
2327
+ .react-autoql-table.tabulator
2328
+ .tabulator-header
2329
+ .tabulator-col.tabulator-sortable[aria-sort='desc']
2330
+ .tabulator-col-content
2331
+ .tabulator-arrow {
2332
+ border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2333
+
2334
+ .react-autoql-table.tabulator
2335
+ .tabulator-header
2336
+ .tabulator-col.tabulator-sortable[aria-sort='asc']
2337
+ .tabulator-col-content
2338
+ .tabulator-arrow,
2339
+ .react-autoql-table.tabulator
2340
+ .tabulator-header
2341
+ .tabulator-col.tabulator-sortable[aria-sort='none']
2342
+ .tabulator-col-content
2343
+ .tabulator-arrow {
2344
+ border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2345
+
2346
+ .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2347
+ display: unset;
2348
+ opacity: 0;
2349
+ background-color: transparent;
2350
+ width: 7px;
2351
+ height: 7px;
2352
+ -webkit-transition: all 0.3s ease;
2353
+ transition: all 0.3s ease; }
2354
+
2355
+ .react-autoql-table.tabulator .tabulator-tableHolder {
2356
+ min-height: calc(100% - 40px) !important;
2357
+ height: calc(100% - 40px) !important;
2358
+ max-height: calc(100% - 40px) !important; }
2359
+
2360
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2361
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2362
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2363
+ background-color: transparent; }
2364
+
2365
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2366
+ background-color: rgba(0, 0, 0, 0.2);
2367
+ border-radius: 7px;
2368
+ border: 0px; }
2369
+
2370
+ .react-autoql-table .tabulator-header-filter input {
2371
+ border: 1px solid var(--react-autoql-border-color);
2372
+ border-radius: 4px;
2373
+ background: transparent;
2374
+ padding: 4px 9px !important;
2375
+ outline: none !important; }
2376
+
2377
+ .react-autoql-table .tabulator-header-filter input:focus {
2378
+ border: 1px solid #28a8e0; }
2379
+
2380
+ /* These are necessary because we are always rendering the
2381
+ filter (just display: none when not used) instead of re-rendering
2382
+ the whole table when the filter button is clicked */
2383
+ .react-autoql-table-container:not(.filtering)
2384
+ .react-autoql-table
2385
+ .tabulator-header-filter {
2386
+ display: none; }
2387
+
2388
+ .react-autoql-table-container:not(.filtering)
2389
+ .react-autoql-table
2390
+ .tabulator-col {
2391
+ height: auto !important; }
2222
2392
 
2223
- .expression-invalid-message {
2224
- color: var(--react-autoql-danger-color);
2225
- display: 'inline-block'; }
2393
+ .tabulator-table .tabulator-row .tabulator-cell {
2394
+ min-height: 38px; }
2226
2395
 
2227
- .react-autoql-step-container a {
2228
- color: var(--react-autoql-accent-color, #26a7df); }
2396
+ /* Center header titles */
2397
+ .react-autoql-table .tabulator-header .tabulator-col {
2398
+ text-align: center !important; }
2229
2399
 
2230
- .frequency-date-select-container {
2231
- margin-top: 10px; }
2400
+ .react-autoql-table .tabulator-header .tabulator-col-title {
2401
+ padding-left: 10px !important;
2402
+ padding-right: 10px !important; }
2232
2403
 
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; }
2404
+ .filter-tag {
2405
+ color: #2ecc40;
2406
+ border: 1px solid;
2407
+ padding: 2px 4px;
2408
+ border-radius: 4px;
2409
+ font-weight: 400;
2410
+ font-size: 10px;
2411
+ margin-right: 5px;
2412
+ vertical-align: top;
2413
+ line-height: 21px; }
2247
2414
 
2248
- .schedule-builder-timezone-section {
2249
- margin: 10px 5px; }
2250
- .schedule-builder-timezone-section .react-autoql-timezone-select {
2251
- display: inline-block;
2252
- width: 300px; }
2415
+ .comparison-value-positive {
2416
+ color: #2ecc40; }
2417
+
2418
+ .comparison-value-negative {
2419
+ color: #e80000; }
2253
2420
 
2254
2421
  .react-autoql-btn {
2255
2422
  border-radius: 4px;
@@ -2295,227 +2462,120 @@ span.react-autoql-icon {
2295
2462
  background-color: var(--react-autoql-danger-color, #ca0b00);
2296
2463
  color: #fff; }
2297
2464
 
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; }
2465
+ .ReactModal__Overlay {
2466
+ background-color: transparent !important;
2467
+ transition: background-color 0.2s ease-in-out;
2468
+ z-index: 9999; }
2321
2469
 
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; }
2470
+ .ReactModal__Overlay--after-open {
2471
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2331
2472
 
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; }
2473
+ .ReactModal__Overlay--before-close {
2474
+ background-color: transparent !important; }
2338
2475
 
2339
- .chat-single-message-container.request {
2476
+ .ReactModal__Content {
2340
2477
  display: flex;
2341
- justify-content: flex-end;
2342
- padding-right: 20px;
2343
- -webkit-animation: scale-up-br 0.6s ease;
2344
- animation: scale-up-br 0.6s ease; }
2345
-
2346
- .chat-single-message-container .chat-message-bubble {
2347
- position: relative;
2348
- padding: 13px;
2349
- border-radius: 10px;
2350
- max-width: calc(100% - 20px);
2351
- word-wrap: break-word;
2352
- font-family: inherit;
2353
- font-size: 14px;
2354
- letter-spacing: 0.04em;
2355
- box-sizing: border-box;
2356
- /* make small margin on bottom because sometimes react
2357
- custom scrollbar cuts off a pixel or 2 at the bottom */
2358
- margin-bottom: 6px; }
2359
-
2360
- .chat-single-message-container .chat-message-bubble.text {
2361
- max-width: 85%; }
2362
-
2363
- .chat-single-message-container .chat-message-bubble.full-width {
2364
- width: calc(100% - 20px) !important;
2365
- min-width: calc(100% - 20px) !important;
2366
- max-width: calc(100% - 20px) !important; }
2367
-
2368
- .chat-single-message-container.response .chat-message-bubble.active {
2369
- border: 1px solid #c3c3c3; }
2370
-
2371
- .chat-single-message-container.response .chat-message-bubble {
2372
- background: var(--react-autoql-background-color-primary);
2478
+ flex-direction: column;
2479
+ transform: scale(0);
2480
+ transition: all 0.2s ease-in-out;
2373
2481
  color: var(--react-autoql-text-color-primary);
2374
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2375
-
2376
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2377
- min-width: 125px; }
2378
-
2379
- .chat-single-message-container.request .chat-message-bubble {
2380
- background: var(--react-autoql-accent-color);
2381
- color: white;
2382
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2383
-
2384
- /* Increase height of message to include table filters,
2385
- so we dont have to redraw the whole table */
2386
- .chat-single-message-container.response.filtering-table {
2387
- max-height: calc(85% + 35px) !important; }
2388
-
2389
- .chat-message-toolbar,
2390
- .chat-message-toolbar.autoql-options-toolbar {
2391
- display: none;
2392
- position: absolute;
2393
- background: inherit;
2394
- top: -31px;
2395
- padding: 5px;
2396
- border-radius: 6px;
2397
- line-height: 28px;
2398
- background: var(--react-autoql-background-color-primary);
2399
- border: 1px solid var(--react-autoql-border-color);
2400
- color: var(--react-autoql-accent-color); }
2401
-
2402
- .chat-message-toolbar.right {
2403
- right: -9px; }
2404
-
2405
- .chat-message-toolbar.left {
2406
- left: -9px; }
2407
-
2408
- .chat-message-bubble:hover .chat-message-toolbar,
2409
- .chat-message-bubble .chat-message-toolbar.active {
2410
- display: block; }
2411
-
2412
- .report-problem-text-area {
2413
- border-radius: 4px;
2414
- border: 1px solid rgba(0, 0, 0, 0.15);
2415
- margin-top: 10px;
2416
- padding: 5px 10px;
2417
- outline: none !important; }
2418
-
2419
- .data-limit-warning-icon {
2420
- color: var(--react-autoql-warning-color) !important;
2421
- position: absolute !important;
2422
- bottom: 2px;
2423
- right: 4px;
2424
- font-size: 20px; }
2425
-
2426
- .condition-info-icon-left-align {
2427
- color: var(--react-autoql-accent-color) !important;
2428
- position: absolute !important;
2429
- bottom: 2px;
2430
- right: 10px;
2431
- font-size: 20px; }
2432
-
2433
- .condition-info-icon {
2434
- color: var(--react-autoql-accent-color) !important;
2435
- position: absolute !important;
2436
- bottom: 2px;
2437
- right: 4px;
2438
- font-size: 20px; }
2439
-
2440
- .more-options-menu,
2441
- .report-problem-menu {
2442
- background: var(--react-autoql-background-color-primary);
2443
- padding: 10px 0; }
2444
- .more-options-menu span.react-autoql-icon svg,
2445
- .report-problem-menu span.react-autoql-icon svg {
2446
- margin-right: 3px; }
2447
-
2448
- .interpretation-icon {
2449
- vertical-align: top;
2450
- height: 26px;
2451
- margin: 0 3px;
2452
- font-size: 18px; }
2453
-
2454
- /* Chart icon styles */
2455
- .chart-icon-svg-0,
2456
- .react-autoql-icon-svg-0 {
2457
- fill: currentColor; }
2458
-
2459
- .hm0 {
2460
- opacity: 0.5;
2461
- fill: currentColor;
2462
- enable-background: new; }
2463
-
2464
- .hm1 {
2465
- fill: currentColor; }
2482
+ border: 1px solid var(--react-autoql-border-color) !important;
2483
+ background: var(--react-autoql-background-color-primary) !important;
2484
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2485
+ padding: 0 !important;
2486
+ margin: auto auto;
2487
+ max-width: 90vw;
2488
+ max-height: calc(100vh - 90px); }
2489
+ .ReactModal__Content input.react-autoql-input,
2490
+ .ReactModal__Content textarea.react-autoql-input,
2491
+ .ReactModal__Content textarea {
2492
+ border-color: var(--react-autoql-border-color);
2493
+ color: var(--react-autoql-text-color-primary);
2494
+ background: var(--react-autoql-background-color-primary, white); }
2495
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2496
+ color: var(--react-autoql-text-color-placeholder); }
2497
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2498
+ color: var(--react-autoql-text-color-placeholder); }
2499
+ .ReactModal__Content input.react-autoql-input::placeholder,
2500
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2501
+ .ReactModal__Content textarea::placeholder {
2502
+ color: var(--react-autoql-text-color-placeholder); }
2466
2503
 
2467
- .hm2 {
2468
- opacity: 0.15;
2469
- fill: currentColor;
2470
- enable-background: new; }
2504
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2505
+ transform: scale(1); }
2471
2506
 
2472
- .hm3 {
2473
- opacity: 0.6;
2474
- fill: currentColor;
2475
- enable-background: new; }
2507
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2508
+ transform: scale(0); }
2476
2509
 
2477
- .hm4 {
2478
- opacity: 0.65;
2479
- fill: currentColor;
2480
- enable-background: new; }
2510
+ .react-autoql-modal-header {
2511
+ position: relative;
2512
+ text-align: center;
2513
+ flex: 0 0 52px;
2514
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2515
+ padding: 14px 60px;
2516
+ font-size: 16px; }
2481
2517
 
2482
- .hm5 {
2483
- fill: currentColor; }
2518
+ .react-autoql-modal-footer {
2519
+ position: relative;
2520
+ flex: 0 0 52px;
2521
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2522
+ text-align: right;
2523
+ padding: 8px 10px; }
2484
2524
 
2485
- .hm6 {
2486
- fill: currentColor; }
2525
+ .react-autoql-modal-body {
2526
+ display: flex;
2527
+ flex-direction: column;
2528
+ padding: 25px;
2529
+ flex: 1;
2530
+ overflow: hidden; }
2531
+ .react-autoql-modal-body h3 {
2532
+ color: var(--react-autoql-text-color-primary); }
2487
2533
 
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%; } }
2534
+ .react-autoql-modal-close-btn {
2535
+ position: absolute !important;
2536
+ top: 10px;
2537
+ right: 18px;
2538
+ font-size: 22px;
2539
+ opacity: 0.6 !important;
2540
+ cursor: pointer; }
2503
2541
 
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%; } }
2542
+ .react-autoql-modal-close-btn:hover {
2543
+ opacity: 1 !important; }
2511
2544
 
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%; } }
2545
+ .autoql-options-toolbar {
2546
+ position: absolute;
2547
+ background: inherit;
2548
+ padding: 5px;
2549
+ border-radius: 6px;
2550
+ line-height: 28px;
2551
+ background: var(--react-autoql-background-color-primary);
2552
+ border: 1px solid var(--react-autoql-border-color); }
2553
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2554
+ display: block; }
2555
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2556
+ color: var(--react-autoql-accent-color); }
2557
+
2558
+ .copy-sql-modal-content {
2559
+ position: relative;
2560
+ height: 60vh; }
2561
+ .copy-sql-modal-content .copy-sql-formatted-text {
2562
+ height: 100%;
2563
+ width: 100%;
2564
+ padding: 10px;
2565
+ resize: none;
2566
+ background: var(--react-autoql-background-color-secondary); }
2567
+ .copy-sql-modal-content .copy-sql-btn {
2568
+ color: var(--react-autoql-text-color);
2569
+ background-color: var(--react-autoql-background-color-primary);
2570
+ position: absolute;
2571
+ top: 3px;
2572
+ right: 0;
2573
+ opacity: 0;
2574
+ transition: opacity 0.3s ease; }
2575
+ .copy-sql-modal-content .sql-copied {
2576
+ color: var(--react-autoql-success-color) !important; }
2577
+ .copy-sql-modal-content:hover .copy-sql-btn {
2578
+ opacity: 1; }
2519
2579
 
2520
2580
  .query-tips-page-container {
2521
2581
  height: 100%;
@@ -2743,443 +2803,523 @@ so we dont have to redraw the whole table */
2743
2803
  .react-autoql-cascader .options-container:not(:last-child) {
2744
2804
  border-right: 1px solid #d3d3d352; }
2745
2805
 
2746
- .react-autoql-condition-locking-input {
2747
- padding: 5px;
2748
- padding-left: 20px;
2749
- margin: 10px;
2750
- height: 32px;
2751
- box-sizing: border-box;
2752
- border-radius: 24px;
2753
- font-size: 12px;
2754
- font-family: inherit;
2755
- letter-spacing: 0.04em;
2756
- outline: none !important;
2757
- width: calc(100% - 60px);
2758
- font-family: inherit;
2759
- /* Default styles outside of data messenger */
2760
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2761
- background: var(--react-autoql-background-color-primary);
2762
- color: #5d5d5d; }
2763
-
2764
- .condition-table {
2765
- min-width: 95%;
2766
- margin: 10px auto; }
2767
-
2768
- .condition-table thead {
2769
- padding-left: 10px; }
2770
-
2771
- .condition-table th {
2772
- text-align: left;
2773
- padding: 4px;
2774
- margin: 0 10px 0 10px;
2775
- font-weight: 800; }
2776
-
2777
- .react-autoql-accept-conditions-button {
2778
- text-align: right;
2779
- margin-bottom: 12px;
2780
- padding-right: 10px;
2781
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2782
- transition: color 0.1s ease; }
2783
- .react-autoql-accept-conditions-button span {
2784
- opacity: 0.8;
2806
+ .chat-single-message-container {
2807
+ transition: background-color 0.2s ease;
2808
+ padding-top: 6px; }
2809
+ .chat-single-message-container:first-of-type {
2810
+ margin-top: 10px; }
2811
+ .chat-single-message-container .query-more-btn {
2812
+ transition: all 0.3s ease;
2813
+ font-size: 22px;
2814
+ padding: 13px;
2815
+ margin-bottom: 6px;
2816
+ height: 42px;
2817
+ opacity: 0;
2818
+ visibility: hidden;
2785
2819
  cursor: pointer; }
2786
- .react-autoql-accept-conditions-button span:hover {
2820
+ .chat-single-message-container .query-more-btn:hover {
2787
2821
  opacity: 1; }
2788
2822
 
2789
- .condition-table tr {
2790
- cursor: pointer; }
2791
- .condition-table tr:hover {
2792
- background: var(--react-autoql-accent-color);
2793
- color: white; }
2823
+ .chat-condition-item-container {
2824
+ position: absolute;
2825
+ background: inherit;
2826
+ bottom: 0px;
2827
+ padding: 5px;
2828
+ border-radius: 6px; }
2794
2829
 
2795
- .condition-table td {
2796
- text-align: left;
2797
- padding: 4px;
2798
- margin: 0 10px 0 10px;
2799
- padding-left: 10px; }
2830
+ .chat-condition-item {
2831
+ background: none !important;
2832
+ border: none;
2833
+ margin-top: -20px !important;
2834
+ padding: 0 !important;
2835
+ font-family: var(--react-autoql-font-family);
2836
+ color: var(--react-autoql-accent-color);
2837
+ text-decoration: underline;
2838
+ cursor: pointer; }
2800
2839
 
2801
- .condition-list {
2802
- padding: 0;
2803
- margin: 0 auto; }
2840
+ .chat-single-message-container.response {
2841
+ display: flex;
2842
+ justify-content: flex-start;
2843
+ padding-left: 20px;
2844
+ -webkit-animation: scale-up-bl 0.6s ease;
2845
+ animation: scale-up-bl 0.6s ease; }
2804
2846
 
2805
- .condition-list-item {
2806
- cursor: pointer;
2807
- padding: 4px;
2808
- margin: 0 10px 0 10px;
2847
+ .chat-single-message-container.request {
2809
2848
  display: flex;
2810
- justify-content: space-between;
2811
- border-radius: 2px;
2812
- padding-left: 10px; }
2813
- .condition-list-item:hover {
2814
- background: var(--react-autoql-accent-color);
2815
- color: white; }
2849
+ justify-content: flex-end;
2850
+ padding-right: 20px;
2851
+ -webkit-animation: scale-up-br 0.6s ease;
2852
+ animation: scale-up-br 0.6s ease; }
2816
2853
 
2817
- .empty-condition-list {
2818
- text-align: center;
2819
- padding: 4px;
2820
- margin: 0 20px 0 20px; }
2854
+ .chat-single-message-container .chat-message-bubble {
2855
+ position: relative;
2856
+ padding: 13px;
2857
+ border-radius: 10px;
2858
+ max-width: calc(100% - 20px);
2859
+ word-wrap: break-word;
2860
+ font-family: inherit;
2861
+ font-size: 14px;
2862
+ letter-spacing: 0.04em;
2863
+ box-sizing: border-box;
2864
+ /* make small margin on bottom because sometimes react
2865
+ custom scrollbar cuts off a pixel or 2 at the bottom */
2866
+ margin-bottom: 6px; }
2821
2867
 
2822
- .autoql-close-button {
2823
- background-color: inherit;
2824
- border: none;
2825
- text-align: left;
2826
- font-size: 20px;
2827
- margin-top: -20px;
2828
- float: none !important;
2829
- color: inherit; }
2868
+ .chat-single-message-container .chat-message-bubble.text {
2869
+ max-width: 85%; }
2830
2870
 
2831
- .react-tiny-popover-container {
2832
- background: var(--react-autoql-background-color-primary); }
2871
+ .chat-single-message-container .chat-message-bubble.full-width {
2872
+ width: calc(100% - 20px) !important;
2873
+ min-width: calc(100% - 20px) !important;
2874
+ max-width: calc(100% - 20px) !important; }
2833
2875
 
2834
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2835
- flex-grow: 1;
2836
- display: inline;
2837
- width: 90%;
2838
- height: 100%; }
2876
+ .chat-single-message-container.response .chat-message-bubble.active {
2877
+ border: 1px solid #c3c3c3; }
2839
2878
 
2840
- .autoql-condition-locking-menu-container
2841
- .react-autosuggest__suggestions-container--open {
2842
- position: absolute;
2843
- overflow-y: scroll !important;
2844
- padding-top: 5px;
2845
- padding-bottom: 5px;
2846
- display: block;
2847
- font-family: inherit;
2848
- font-size: 15px;
2849
- font-weight: normal;
2850
- z-index: 2;
2851
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2852
- text-align: left;
2853
- width: 95%;
2854
- top: 35px;
2855
- border-radius: 4px;
2856
- margin: 10px auto;
2857
- height: auto;
2858
- max-height: 50vh;
2859
- overflow-y: auto; }
2879
+ .chat-single-message-container.response .chat-message-bubble {
2880
+ background: var(--react-autoql-background-color-primary);
2881
+ color: var(--react-autoql-text-color-primary);
2882
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2883
+
2884
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2885
+ min-width: 125px;
2886
+ padding-bottom: 15px; }
2887
+
2888
+ .chat-single-message-container.request .chat-message-bubble {
2889
+ background: var(--react-autoql-accent-color);
2890
+ color: white;
2891
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2860
2892
 
2861
- .autoql-condition-locking-menu-container
2862
- .react-autosuggest__suggestions-container--open {
2863
- background-color: var(--react-autoql-background-color-primary);
2893
+ /* Increase height of message to include table filters,
2894
+ so we dont have to redraw the whole table */
2895
+ .chat-single-message-container.response.filtering-table {
2896
+ max-height: calc(85% + 35px) !important; }
2897
+
2898
+ .chat-message-toolbar,
2899
+ .chat-message-toolbar.autoql-options-toolbar {
2900
+ display: none;
2901
+ position: absolute;
2902
+ background: inherit;
2903
+ top: -31px;
2904
+ padding: 5px;
2905
+ border-radius: 6px;
2906
+ line-height: 28px;
2907
+ background: var(--react-autoql-background-color-primary);
2864
2908
  border: 1px solid var(--react-autoql-border-color);
2865
- color: var(--react-autoql-text-color-primary); }
2909
+ color: var(--react-autoql-accent-color); }
2866
2910
 
2867
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2868
- color: var(--react-autoql-text-color-primary); }
2911
+ .chat-message-toolbar.right {
2912
+ right: -9px; }
2869
2913
 
2870
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2871
- opacity: 0.5; }
2914
+ .chat-message-toolbar.left {
2915
+ left: -9px; }
2872
2916
 
2873
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2874
- opacity: 0.5; }
2917
+ .chat-message-bubble:hover .chat-message-toolbar,
2918
+ .chat-message-bubble .chat-message-toolbar.active {
2919
+ display: block; }
2875
2920
 
2876
- .autoql-condition-locking-menu-container input::placeholder {
2877
- opacity: 0.5; }
2921
+ .report-problem-text-area {
2922
+ border-radius: 4px;
2923
+ border: 1px solid rgba(0, 0, 0, 0.15);
2924
+ margin-top: 10px;
2925
+ padding: 5px 10px;
2926
+ outline: none !important; }
2878
2927
 
2879
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2880
- margin: 0;
2881
- padding: 0;
2882
- list-style-type: none; }
2928
+ .data-limit-warning-icon {
2929
+ color: var(--react-autoql-warning-color) !important;
2930
+ position: absolute !important;
2931
+ bottom: 2px;
2932
+ right: 4px;
2933
+ font-size: 20px; }
2883
2934
 
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; }
2935
+ .condition-info-icon-left-align {
2936
+ color: var(--react-autoql-accent-color) !important;
2937
+ position: absolute !important;
2938
+ bottom: 2px;
2939
+ right: 10px;
2940
+ font-size: 20px; }
2890
2941
 
2891
- .autoql-condition-locking-menu-container
2892
- .react-autosuggest__suggestion--highlighted {
2893
- background-color: rgba(0, 0, 0, 0.1) !important; }
2942
+ .condition-info-icon {
2943
+ color: var(--react-autoql-accent-color) !important;
2944
+ position: absolute !important;
2945
+ bottom: 2px;
2946
+ right: 4px;
2947
+ font-size: 20px; }
2894
2948
 
2895
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2896
- padding: 10px 0 0 10px;
2897
- font-size: 12px;
2898
- color: #777; }
2949
+ .more-options-menu,
2950
+ .report-problem-menu {
2951
+ background: var(--react-autoql-background-color-primary);
2952
+ padding: 10px 0; }
2953
+ .more-options-menu span.react-autoql-icon svg,
2954
+ .report-problem-menu span.react-autoql-icon svg {
2955
+ margin-right: 3px; }
2899
2956
 
2900
- .react-autoql-table-container {
2901
- height: 100%;
2902
- max-width: 100%;
2903
- background-color: inherit; }
2957
+ .interpretation-icon {
2958
+ vertical-align: top;
2959
+ height: 26px;
2960
+ margin: 0 3px;
2961
+ font-size: 18px; }
2904
2962
 
2905
- .react-autoql-table {
2906
- margin-bottom: 0; }
2963
+ /* Chart icon styles */
2964
+ .chart-icon-svg-0,
2965
+ .react-autoql-icon-svg-0 {
2966
+ fill: currentColor; }
2907
2967
 
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; }
2968
+ .hm0 {
2969
+ opacity: 0.5;
2970
+ fill: currentColor;
2971
+ enable-background: new; }
2916
2972
 
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; }
2973
+ .hm1 {
2974
+ fill: currentColor; }
2922
2975
 
2923
- .react-autoql-table.tabulator
2924
- .tabulator-header
2925
- .tabulator-col.tabulator-sortable:hover {
2926
- background-color: var(--react-autoql-hover-color) !important; }
2976
+ .hm2 {
2977
+ opacity: 0.15;
2978
+ fill: currentColor;
2979
+ enable-background: new; }
2927
2980
 
2928
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2929
- .react-autoql-table.tabulator .tabulator-cell {
2930
- border-color: var(--react-autoql-border-color); }
2981
+ .hm3 {
2982
+ opacity: 0.6;
2983
+ fill: currentColor;
2984
+ enable-background: new; }
2931
2985
 
2932
- .react-autoql-table.tabulator .tabulator-header {
2933
- border-bottom: 2px solid var(--react-autoql-border-color); }
2986
+ .hm4 {
2987
+ opacity: 0.65;
2988
+ fill: currentColor;
2989
+ enable-background: new; }
2934
2990
 
2935
- .react-autoql-table.tabulator {
2936
- background-color: inherit;
2937
- height: 100%; }
2991
+ .hm5 {
2992
+ fill: currentColor; }
2938
2993
 
2939
- .react-autoql-table .tabulator-row {
2940
- /* user-select: none; This breaks copy/paste */
2941
- border-bottom: 1px solid var(--react-autoql-border-color); }
2994
+ .hm6 {
2995
+ fill: currentColor; }
2942
2996
 
2943
- .tabulator-cell:not(:first-child) {
2944
- border-left: 1px solid !important;
2945
- border-color: rgba(0, 0, 0, 0.06) !important; }
2997
+ /* animations */
2998
+ @-webkit-keyframes scale-up-br {
2999
+ 0% {
3000
+ transform: scale(0.5);
3001
+ transform-origin: 100% 100%; }
3002
+ 100% {
3003
+ transform: scale(1);
3004
+ transform-origin: 100% 100%; } }
3005
+ @keyframes scale-up-br {
3006
+ 0% {
3007
+ transform: scale(0.5);
3008
+ transform-origin: 100% 100%; }
3009
+ 100% {
3010
+ transform: scale(1);
3011
+ transform-origin: 100% 100%; } }
2946
3012
 
2947
- .react-autoql-table .tabulator-tableHolder {
2948
- max-height: calc(100% - 38px) !important;
2949
- background-color: inherit; }
3013
+ @-webkit-keyframes scale-up-bl {
3014
+ 0% {
3015
+ transform: scale(0.5);
3016
+ transform-origin: 0% 100%; }
3017
+ 100% {
3018
+ transform: scale(1);
3019
+ transform-origin: 0% 100%; } }
2950
3020
 
2951
- .react-autoql-table.tabulator
2952
- .tabulator-header
2953
- .tabulator-col
2954
- .tabulator-col-content {
2955
- padding: 8px 5px; }
3021
+ @keyframes scale-up-bl {
3022
+ 0% {
3023
+ transform: scale(0.5);
3024
+ transform-origin: 0% 100%; }
3025
+ 100% {
3026
+ transform: scale(1);
3027
+ transform-origin: 0% 100%; } }
2956
3028
 
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); }
3029
+ .react-autoql-filter-locking-title-container {
3030
+ display: inline-block;
3031
+ width: 100%;
3032
+ padding-top: 4px;
3033
+ padding-left: 6px; }
3034
+ .react-autoql-filter-locking-title-container h3 {
3035
+ width: 95%;
3036
+ float: left;
3037
+ color: var(--react-autoql-text-color-primary);
3038
+ margin-bottom: 0;
3039
+ display: block;
3040
+ font-size: 1.17em !important;
3041
+ font-weight: bold; }
3042
+ .react-autoql-filter-locking-title-container h3 span {
3043
+ color: var(--react-autoql-accent-color); }
3044
+ .react-autoql-filter-locking-title-container button {
3045
+ width: 5%;
3046
+ float: right; }
3047
+ .react-autoql-filter-locking-title-container button :hover {
3048
+ cursor: pointer;
3049
+ color: var(--react-autoql-hover-color); }
2967
3050
 
2968
- .react-autoql-table.tabulator
2969
- .tabulator-header
2970
- .tabulator-col:hover
2971
- .tabulator-col-content
2972
- .tabulator-arrow {
2973
- opacity: 1 !important; }
3051
+ .react-autoql-filter-locking-empty-list {
3052
+ color: var(--react-autoql-text-color-primary);
3053
+ background-color: var(--react-autoql-background-color-secondary);
3054
+ border-radius: 5px;
3055
+ padding: 2px 6px 2px 6px;
3056
+ margin: 4px 10px 4px 10px;
3057
+ display: inline-block;
3058
+ position: absolute;
3059
+ top: 20px;
3060
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3061
+ z-index: 999999; }
3062
+ .react-autoql-filter-locking-empty-list span {
3063
+ color: var(--react-autoql-accent-color); }
3064
+ .react-autoql-filter-locking-empty-list p {
3065
+ width: 96%;
3066
+ float: right;
3067
+ margin-bottom: 0; }
2974
3068
 
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; }
3069
+ .react-autoql-condition-locking-input {
3070
+ padding: 5px;
3071
+ padding-left: 20px;
3072
+ margin: 8px;
3073
+ height: 32px;
3074
+ box-sizing: border-box;
3075
+ border-radius: 24px;
3076
+ font-size: 12px;
3077
+ font-family: inherit;
3078
+ letter-spacing: 0.04em;
3079
+ outline: none !important;
3080
+ width: calc(100% - 20px);
3081
+ font-family: inherit;
3082
+ /* Default styles outside of data messenger */
3083
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3084
+ background: var(--react-autoql-background-color-secondary);
3085
+ color: var(--react-autoql-text-color-primary); }
3086
+ .react-autoql-condition-locking-input::-moz-placeholder {
3087
+ color: var(--react-autoql-text-color-placeholder) !important; }
3088
+ .react-autoql-condition-locking-input:-ms-input-placeholder {
3089
+ color: var(--react-autoql-text-color-placeholder) !important; }
3090
+ .react-autoql-condition-locking-input::placeholder {
3091
+ color: var(--react-autoql-text-color-placeholder) !important; }
3092
+
3093
+ .react-autoql-condition-locking-input:hover {
3094
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
2981
3095
 
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; }
3096
+ .react-autoql-condition-table {
3097
+ min-width: 95%;
3098
+ margin: 10px auto; }
2993
3099
 
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; }
3100
+ .react-autoql-condition-table thead {
3101
+ padding-left: 10px; }
3002
3102
 
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; }
3103
+ .react-autoql-condition-table th {
3104
+ text-align: left;
3105
+ padding: 4px;
3106
+ margin: 0 10px 0 10px;
3107
+ font-weight: 800; }
3108
+ .react-autoql-condition-table th span {
3109
+ color: var(--react-autoql-accent-color); }
3007
3110
 
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; }
3111
+ .react-autoql-condition-table .react-autoql-condition-table-list-item {
3112
+ text-overflow: ellipsis;
3113
+ white-space: nowrap;
3114
+ overflow: hidden; }
3012
3115
 
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; }
3116
+ .react-autoql-condition-lock-menu-footer {
3117
+ bottom: 0;
3118
+ right: 0; }
3119
+ .react-autoql-condition-lock-menu-footer button {
3120
+ float: right;
3121
+ margin: 6px !important; }
3017
3122
 
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; }
3123
+ .react-autoql-condition-lock-menu-footer {
3124
+ bottom: 0;
3125
+ right: 0; }
3126
+ .react-autoql-condition-lock-menu-footer button {
3127
+ float: right;
3128
+ margin: 6px !important; }
3024
3129
 
3025
- .react-autoql-table .tabulator-header-filter input:focus {
3026
- border: 1px solid #28a8e0; }
3130
+ .react-autoql-accept-conditions-button {
3131
+ text-align: right;
3132
+ margin-bottom: 12px;
3133
+ padding-right: 10px;
3134
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
3135
+ transition: color 0.1s ease; }
3136
+ .react-autoql-accept-conditions-button span {
3137
+ opacity: 0.8;
3138
+ cursor: pointer; }
3139
+ .react-autoql-accept-conditions-button span:hover {
3140
+ opacity: 1; }
3027
3141
 
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; }
3142
+ .react-autoql-condition-table td {
3143
+ text-align: left;
3144
+ padding: 4px;
3145
+ margin: 0 10px 0 10px;
3146
+ padding-left: 10px; }
3035
3147
 
3036
- .react-autoql-table-container:not(.filtering)
3037
- .react-autoql-table
3038
- .tabulator-col {
3039
- height: auto !important; }
3148
+ .react-autoql-condition-list {
3149
+ padding: 0;
3150
+ margin: 0 auto;
3151
+ overflow-y: scroll;
3152
+ min-height: 182px; }
3040
3153
 
3041
- .tabulator-table .tabulator-row .tabulator-cell {
3042
- min-height: 38px; }
3154
+ .react-autoql-condition-list-loading-container {
3155
+ display: flex;
3156
+ height: 180px;
3157
+ width: 100%;
3158
+ padding: 20px;
3159
+ align-items: center;
3160
+ justify-content: center; }
3043
3161
 
3044
- /* Center header titles */
3045
- .react-autoql-table .tabulator-header .tabulator-col {
3046
- text-align: center !important; }
3162
+ .react-autoql-empty-condition-list {
3163
+ text-align: center;
3164
+ padding: 20px;
3165
+ height: 140px; }
3166
+ .react-autoql-empty-condition-list p {
3167
+ margin-top: 20px !important;
3168
+ vertical-align: middle; }
3047
3169
 
3048
- .react-autoql-table .tabulator-header .tabulator-col-title {
3049
- padding-left: 10px !important;
3050
- padding-right: 10px !important; }
3170
+ .autoql-close-button {
3171
+ background-color: inherit;
3172
+ border: none;
3173
+ text-align: left;
3174
+ font-size: 20px;
3175
+ margin-top: -20px;
3176
+ float: none !important;
3177
+ color: inherit; }
3051
3178
 
3052
- .filter-tag {
3053
- color: #2ecc40;
3054
- border: 1px solid;
3055
- padding: 2px 4px;
3179
+ .react-tiny-popover-container {
3180
+ background: var(--react-autoql-background-color-primary); }
3181
+
3182
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
3183
+ flex-grow: 1;
3184
+ display: inline;
3185
+ width: 90%;
3186
+ height: 100%; }
3187
+
3188
+ .autoql-condition-locking-menu-container
3189
+ .react-autosuggest__suggestions-container--open {
3190
+ background-color: var(--react-autoql-background-color-primary);
3191
+ border: 1px solid var(--react-autoql-border-color);
3192
+ color: var(--react-autoql-text-color-primary);
3193
+ position: absolute;
3194
+ top: unset;
3195
+ bottom: unset;
3196
+ overflow-y: scroll !important;
3197
+ padding-top: 5px;
3198
+ padding-bottom: 5px;
3199
+ display: block;
3200
+ font-family: inherit;
3201
+ font-size: 15px;
3202
+ font-weight: normal;
3203
+ z-index: 2;
3204
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3205
+ text-align: left;
3056
3206
  border-radius: 4px;
3057
- font-weight: 400;
3058
- font-size: 10px;
3059
- margin-right: 5px;
3060
- vertical-align: top;
3061
- line-height: 21px; }
3207
+ margin: -8px auto;
3208
+ height: auto;
3209
+ max-height: 80vh;
3210
+ overflow-y: scroll !important;
3211
+ transform: translateX(4%);
3212
+ width: 92% !important; }
3062
3213
 
3063
- .comparison-value-positive {
3064
- color: #2ecc40; }
3214
+ .autoql-condition-locking-menu-list {
3215
+ table-layout: fixed;
3216
+ width: 100%; }
3065
3217
 
3066
- .comparison-value-negative {
3067
- color: #e80000; }
3218
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3219
+ color: var(--react-autoql-text-color-primary); }
3068
3220
 
3069
- .ReactModal__Overlay {
3070
- background-color: transparent !important;
3071
- transition: background-color 0.2s ease-in-out;
3072
- z-index: 9999; }
3221
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
3222
+ opacity: 0.5; }
3073
3223
 
3074
- .ReactModal__Overlay--after-open {
3075
- background-color: rgba(0, 0, 0, 0.25) !important; }
3224
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3225
+ opacity: 0.5; }
3076
3226
 
3077
- .ReactModal__Overlay--before-close {
3078
- background-color: transparent !important; }
3227
+ .autoql-condition-locking-menu-container input::placeholder {
3228
+ opacity: 0.5; }
3079
3229
 
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); }
3230
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3231
+ margin: 0;
3232
+ padding: 0;
3233
+ list-style-type: none; }
3107
3234
 
3108
- .ReactModal__Overlay--after-open .ReactModal__Content {
3109
- transform: scale(1); }
3235
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3236
+ cursor: pointer;
3237
+ padding: 2px;
3238
+ padding-left: 18px;
3239
+ letter-spacing: 0.05em;
3240
+ line-height: 22.5px; }
3110
3241
 
3111
- .ReactModal__Overlay--before-close .ReactModal__Content {
3112
- transform: scale(0); }
3242
+ .autoql-condition-locking-menu-container
3243
+ .react-autosuggest__suggestion--highlighted {
3244
+ background-color: rgba(0, 0, 0, 0.1) !important; }
3113
3245
 
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; }
3246
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3247
+ padding: 10px 0 0 10px;
3248
+ font-size: 12px;
3249
+ color: #777; }
3121
3250
 
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; }
3251
+ .react-autoql-filter-setting-info-card {
3252
+ color: var(--react-autoql-text-color-primary);
3253
+ background-color: var(--react-autoql-background-color-secondary);
3254
+ border-radius: 5px;
3255
+ padding: 2px 6px 2px 6px;
3256
+ margin: 4px 10px 4px 10px;
3257
+ display: inline-block;
3258
+ position: absolute;
3259
+ top: 40px;
3260
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3261
+ z-index: 9999; }
3262
+ .react-autoql-filter-setting-info-card span {
3263
+ color: var(--react-autoql-accent-color); }
3264
+ .react-autoql-filter-setting-info-card p {
3265
+ margin-bottom: 0 !important; }
3266
+ .react-autoql-filter-setting-info-card p span {
3267
+ color: var(--react-autoql-accent-color); }
3128
3268
 
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); }
3269
+ #react-autoql-condition-show-message {
3270
+ visibility: hidden;
3271
+ min-width: 200px;
3272
+ line-height: 1 !important;
3273
+ font-size: 14px !important;
3274
+ background-color: var(--react-autoql-background-color-secondary);
3275
+ text-align: center;
3276
+ border-radius: 4px;
3277
+ padding: 6px;
3278
+ position: fixed;
3279
+ top: 20px;
3280
+ display: block;
3281
+ z-index: 999999999;
3282
+ transform: translateX(85%);
3283
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
3284
+ #react-autoql-condition-show-message span {
3285
+ color: var(--react-autoql-accent-color); }
3137
3286
 
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; }
3287
+ #react-autoql-condition-show-message.show {
3288
+ visibility: visible;
3289
+ -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
3290
+ animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
3291
+
3292
+ @-webkit-keyframes snackbarFadein {
3293
+ from {
3294
+ top: 0;
3295
+ opacity: 0; }
3296
+ to {
3297
+ top: 20px;
3298
+ opacity: 1; } }
3145
3299
 
3146
- .react-autoql-modal-close-btn:hover {
3147
- opacity: 1 !important; }
3300
+ @keyframes snackbarFadein {
3301
+ from {
3302
+ top: 0;
3303
+ opacity: 0; }
3304
+ to {
3305
+ top: 20px;
3306
+ opacity: 1; } }
3148
3307
 
3149
- .autoql-options-toolbar {
3150
- position: absolute;
3151
- background: inherit;
3152
- padding: 5px;
3153
- border-radius: 6px;
3154
- line-height: 28px;
3155
- background: var(--react-autoql-background-color-primary);
3156
- border: 1px solid var(--react-autoql-border-color); }
3157
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
3158
- display: block; }
3159
- .autoql-options-toolbar .react-autoql-toolbar-btn {
3160
- color: var(--react-autoql-accent-color); }
3308
+ @-webkit-keyframes snackbarFadeout {
3309
+ from {
3310
+ top: 20px;
3311
+ opacity: 1; }
3312
+ to {
3313
+ top: 0;
3314
+ opacity: 0; } }
3161
3315
 
3162
- .copy-sql-modal-content {
3163
- position: relative;
3164
- height: 60vh; }
3165
- .copy-sql-modal-content .copy-sql-formatted-text {
3166
- height: 100%;
3167
- width: 100%;
3168
- padding: 10px;
3169
- resize: none;
3170
- background: var(--react-autoql-background-color-secondary); }
3171
- .copy-sql-modal-content .copy-sql-btn {
3172
- color: var(--react-autoql-text-color);
3173
- background-color: var(--react-autoql-background-color-primary);
3174
- position: absolute;
3175
- top: 3px;
3176
- right: 0;
3177
- opacity: 0;
3178
- transition: opacity 0.3s ease; }
3179
- .copy-sql-modal-content .sql-copied {
3180
- color: var(--react-autoql-success-color) !important; }
3181
- .copy-sql-modal-content:hover .copy-sql-btn {
3316
+ @keyframes snackbarFadeout {
3317
+ from {
3318
+ top: 20px;
3182
3319
  opacity: 1; }
3320
+ to {
3321
+ top: 0;
3322
+ opacity: 0; } }
3183
3323
 
3184
3324
  .react-autoql-chart-container {
3185
3325
  position: relative;
@@ -3280,168 +3420,6 @@ the whole table when the filter button is clicked */
3280
3420
  background: var(--react-autoql-background-color-primary);
3281
3421
  padding: 5px; }
3282
3422
 
3283
- .viz-toolbar {
3284
- position: absolute;
3285
- background: inherit;
3286
- padding: 5px;
3287
- border-radius: 6px;
3288
- line-height: 28px;
3289
- border: 1px solid #d3d3d352; }
3290
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3291
- display: block; }
3292
-
3293
- .react-autoql-toolbar-btn {
3294
- height: 28px;
3295
- width: 28px;
3296
- background: none;
3297
- border: none;
3298
- font-size: 16px;
3299
- line-height: 28px;
3300
- vertical-align: top;
3301
- color: var(--react-autoql-accent-color);
3302
- cursor: pointer;
3303
- outline: none !important; }
3304
-
3305
- .react-autoql-toolbar-btn.green {
3306
- color: #2ecc40; }
3307
-
3308
- .react-autoql-toolbar-btn.red {
3309
- color: #e80000; }
3310
-
3311
- .react-autoql-toolbar-btn:hover {
3312
- opacity: 0.7; }
3313
-
3314
- .content {
3315
- margin: 2rem; }
3316
-
3317
- .react-autoql-checkbox-container {
3318
- display: inline-block;
3319
- vertical-align: middle; }
3320
-
3321
- .react-autoql-checkbox {
3322
- display: flex;
3323
- align-items: center;
3324
- position: relative;
3325
- cursor: pointer; }
3326
- .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked,
3327
- .react-autoql-checkbox .react-autoql-checkbox__input:checked {
3328
- border-color: var(--react-autoql-accent-color, #26a7df);
3329
- background: var(--react-autoql-accent-color, #26a7df); }
3330
-
3331
- .react-autoql-checkbox__label {
3332
- flex-shrink: 0;
3333
- padding: 0.5rem 1rem;
3334
- color: #fff;
3335
- cursor: pointer; }
3336
-
3337
- .react-autoql-checkbox__input {
3338
- position: relative;
3339
- flex-shrink: 0;
3340
- width: 20px;
3341
- height: 20px;
3342
- appearance: none;
3343
- -webkit-appearance: none;
3344
- -moz-appearance: none;
3345
- outline: none;
3346
- background: transparent;
3347
- border: 1px solid;
3348
- border-color: var(--react-autoql-accent-color, #26a7df);
3349
- border-radius: 2px;
3350
- cursor: pointer; }
3351
-
3352
- .react-autoql-checkbox__input::before {
3353
- content: ' ';
3354
- position: absolute;
3355
- top: 50%;
3356
- right: 50%;
3357
- bottom: 50%;
3358
- left: 50%;
3359
- transition: all 0.2s;
3360
- background: var(--react-autoql-accent-color, #26a7df); }
3361
-
3362
- .react-autoql-checkbox-tick {
3363
- position: absolute;
3364
- color: white;
3365
- left: 3px;
3366
- line-height: 20px;
3367
- pointer-events: none; }
3368
-
3369
- .react-autoql-checkbox--switch__input::before {
3370
- box-shadow: 0 0 2px 1px #00000030; }
3371
-
3372
- .react-autoql-checkbox__input:checked::before,
3373
- .react-autoql-checkbox__input:indeterminate::before {
3374
- top: 0;
3375
- right: 0;
3376
- bottom: 0;
3377
- left: 0; }
3378
-
3379
- .react-autoql-checkbox__input:indeterminate::before {
3380
- top: 7px;
3381
- bottom: 7px; }
3382
-
3383
- .react-autoql-checkbox__input:disabled {
3384
- border-color: #5a5358;
3385
- cursor: default; }
3386
-
3387
- .react-autoql-checkbox__input:disabled::before {
3388
- background-color: #5a5358; }
3389
-
3390
- .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
3391
- color: gray;
3392
- cursor: default; }
3393
-
3394
- .react-autoql-checkbox--has-error__input {
3395
- border-color: red;
3396
- background-color: rgba(255, 0, 0, 0.2); }
3397
-
3398
- .react-autoql-checkbox--has-error__input::before {
3399
- background-color: red; }
3400
-
3401
- .react-autoql-checkbox--switch__label::after {
3402
- content: 'off';
3403
- margin-left: 0.25rem; }
3404
-
3405
- .react-autoql-checkbox--switch__input {
3406
- width: 36px;
3407
- height: 20px;
3408
- border-radius: 16px;
3409
- background: var(--react-autoql-background-color-tertiary);
3410
- border: 1px solid var(--react-autoql-background-color-tertiary); }
3411
-
3412
- .react-autoql-checkbox--switch__input::before {
3413
- top: 2px;
3414
- right: 18px;
3415
- bottom: 2px;
3416
- left: 2px;
3417
- border-radius: 50%;
3418
- background: #fff; }
3419
-
3420
- .react-autoql-checkbox--switch__input:checked
3421
- + .react-autoql-checkbox--switch__label::after {
3422
- content: 'on'; }
3423
-
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
3423
 
3446
3424
  .react-autoql-input-container {
3447
3425
  position: relative;
@@ -3494,7 +3472,6 @@ the whole table when the filter button is clicked */
3494
3472
  opacity: 1;
3495
3473
  color: var(--react-autoql-accent-color, #26a7df); }
3496
3474
 
3497
-
3498
3475
  .react-autoql-steps-container {
3499
3476
  margin: 10px; }
3500
3477
 
@@ -3548,21 +3525,52 @@ the whole table when the filter button is clicked */
3548
3525
  line-height: 15px;
3549
3526
  padding-top: 2px; }
3550
3527
 
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)); }
3528
+ .react-autoql-step-subtitle {
3529
+ font-size: 13px;
3530
+ padding-top: 6px;
3531
+ padding-bottom: 6px;
3532
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3533
+
3534
+ .react-autoql-step-content {
3535
+ margin: 15px;
3536
+ margin-top: 0; }
3537
+
3538
+ .react-autoql-step-content-container {
3539
+ transition-timing-function: ease;
3540
+ transition-property: height, opacity, margin;
3541
+ transition-duration: 0.5s;
3542
+ opacity: 1; }
3543
+
3544
+ .viz-toolbar {
3545
+ position: absolute;
3546
+ background: inherit;
3547
+ padding: 5px;
3548
+ border-radius: 6px;
3549
+ line-height: 28px;
3550
+ border: 1px solid #d3d3d352; }
3551
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3552
+ display: block; }
3553
+
3554
+ .react-autoql-toolbar-btn {
3555
+ height: 28px;
3556
+ width: 28px;
3557
+ background: none;
3558
+ border: none;
3559
+ font-size: 16px;
3560
+ line-height: 28px;
3561
+ vertical-align: top;
3562
+ color: var(--react-autoql-accent-color);
3563
+ cursor: pointer;
3564
+ outline: none !important; }
3565
+
3566
+ .react-autoql-toolbar-btn.green {
3567
+ color: #2ecc40; }
3556
3568
 
3557
- .react-autoql-step-content {
3558
- margin: 15px;
3559
- margin-top: 0; }
3569
+ .react-autoql-toolbar-btn.red {
3570
+ color: #e80000; }
3560
3571
 
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; }
3572
+ .react-autoql-toolbar-btn:hover {
3573
+ opacity: 0.7; }
3566
3574
 
3567
3575
  .react-autoql-radio-btn-container {
3568
3576
  display: inline-block;
@@ -3635,58 +3643,137 @@ the whole table when the filter button is clicked */
3635
3643
  border-top-right-radius: 4px;
3636
3644
  border-bottom-right-radius: 4px; }
3637
3645
 
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); }
3646
+ .content {
3647
+ margin: 2rem; }
3675
3648
 
3676
- .read-only-rule-term {
3649
+ .react-autoql-checkbox-container {
3677
3650
  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; }
3651
+ vertical-align: middle; }
3686
3652
 
3687
- .expression-term-validation-error {
3688
- padding: 0 10px;
3689
- color: var(--react-autoql-warning-color); }
3653
+ .react-autoql-checkbox {
3654
+ display: flex;
3655
+ align-items: center;
3656
+ position: relative;
3657
+ cursor: pointer; }
3658
+ .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked,
3659
+ .react-autoql-checkbox .react-autoql-checkbox__input:checked {
3660
+ border-color: var(--react-autoql-accent-color, #26a7df);
3661
+ background: var(--react-autoql-accent-color, #26a7df); }
3662
+
3663
+ .react-autoql-checkbox__label {
3664
+ flex-shrink: 0;
3665
+ padding: 0.5rem 1rem;
3666
+ color: #fff;
3667
+ cursor: pointer; }
3668
+
3669
+ .react-autoql-checkbox__input {
3670
+ position: relative;
3671
+ flex-shrink: 0;
3672
+ width: 20px;
3673
+ height: 20px;
3674
+ appearance: none;
3675
+ -webkit-appearance: none;
3676
+ -moz-appearance: none;
3677
+ outline: none;
3678
+ background: transparent;
3679
+ border: 1px solid;
3680
+ border-color: var(--react-autoql-accent-color, #26a7df);
3681
+ border-radius: 2px;
3682
+ cursor: pointer; }
3683
+
3684
+ .react-autoql-checkbox__input::before {
3685
+ content: ' ';
3686
+ position: absolute;
3687
+ top: 50%;
3688
+ right: 50%;
3689
+ bottom: 50%;
3690
+ left: 50%;
3691
+ transition: all 0.2s;
3692
+ background: var(--react-autoql-accent-color, #26a7df); }
3693
+
3694
+ .react-autoql-checkbox-tick {
3695
+ position: absolute;
3696
+ color: white;
3697
+ left: 3px;
3698
+ line-height: 20px;
3699
+ pointer-events: none; }
3700
+
3701
+ .react-autoql-checkbox--switch__input::before {
3702
+ box-shadow: 0 0 2px 1px #00000030; }
3703
+
3704
+ .react-autoql-checkbox__input:checked::before,
3705
+ .react-autoql-checkbox__input:indeterminate::before {
3706
+ top: 0;
3707
+ right: 0;
3708
+ bottom: 0;
3709
+ left: 0; }
3710
+
3711
+ .react-autoql-checkbox__input:indeterminate::before {
3712
+ top: 7px;
3713
+ bottom: 7px; }
3714
+
3715
+ .react-autoql-checkbox__input:disabled {
3716
+ border-color: #5a5358;
3717
+ cursor: default; }
3718
+
3719
+ .react-autoql-checkbox__input:disabled::before {
3720
+ background-color: #5a5358; }
3721
+
3722
+ .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
3723
+ color: gray;
3724
+ cursor: default; }
3725
+
3726
+ .react-autoql-checkbox--has-error__input {
3727
+ border-color: red;
3728
+ background-color: rgba(255, 0, 0, 0.2); }
3729
+
3730
+ .react-autoql-checkbox--has-error__input::before {
3731
+ background-color: red; }
3732
+
3733
+ .react-autoql-checkbox--switch__label::after {
3734
+ content: 'off';
3735
+ margin-left: 0.25rem; }
3736
+
3737
+ .react-autoql-checkbox--switch__input {
3738
+ width: 36px;
3739
+ height: 20px;
3740
+ border-radius: 16px;
3741
+ background: var(--react-autoql-background-color-tertiary);
3742
+ border: 1px solid var(--react-autoql-background-color-tertiary); }
3743
+
3744
+ .react-autoql-checkbox--switch__input::before {
3745
+ top: 2px;
3746
+ right: 18px;
3747
+ bottom: 2px;
3748
+ left: 2px;
3749
+ border-radius: 50%;
3750
+ background: #fff; }
3751
+
3752
+ .react-autoql-checkbox--switch__input:checked
3753
+ + .react-autoql-checkbox--switch__label::after {
3754
+ content: 'on'; }
3755
+
3756
+ .react-autoql-checkbox--switch__input:checked::before {
3757
+ right: 2px;
3758
+ left: 18px;
3759
+ top: 2px;
3760
+ bottom: 2px; }
3761
+
3762
+ .react-autoql-checkbox-label {
3763
+ padding-left: 6px;
3764
+ line-height: 100%; }
3765
+
3766
+ .react-autoql-modal-container
3767
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3768
+ .react-autoql-drawer
3769
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3770
+ border-color: var(--react-autoql-accent-color); }
3771
+
3772
+ .react-autoql-modal-container
3773
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3774
+ .react-autoql-drawer
3775
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3776
+ background: var(--react-autoql-accent-color); }
3690
3777
 
3691
3778
  .notification-read-only-group {
3692
3779
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
@@ -3806,6 +3893,60 @@ the whole table when the filter button is clicked */
3806
3893
  opacity: 1;
3807
3894
  color: var(--react-autoql-accent-color); }
3808
3895
 
3896
+ .react-autoql-notification-rule-container {
3897
+ display: flex; }
3898
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3899
+ display: flex;
3900
+ flex-direction: column;
3901
+ flex: 1;
3902
+ width: 100%; }
3903
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3904
+ display: flex;
3905
+ flex: 1; }
3906
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3907
+ display: flex;
3908
+ padding: 2px 0;
3909
+ border-radius: 4px;
3910
+ transition: all 0.3s ease;
3911
+ flex: 1; }
3912
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3913
+ flex: 0;
3914
+ flex-basis: 33px; }
3915
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3916
+ flex: 1;
3917
+ margin-left: 4px; }
3918
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3919
+ cursor: pointer;
3920
+ opacity: 0.6;
3921
+ padding: 6px; }
3922
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3923
+ opacity: 1; }
3924
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3925
+ display: none; }
3926
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3927
+ margin: 0; }
3928
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3929
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3930
+ + .react-autoql-rule-term-type-selector {
3931
+ color: var(--react-autoql-accent-color, #26a7df);
3932
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3933
+
3934
+ .read-only-rule-term {
3935
+ display: inline-block;
3936
+ border: 1px solid rgba(0, 0, 0, 0.06);
3937
+ background: rgba(0, 0, 0, 0.02);
3938
+ padding: 3px 7px;
3939
+ line-height: 1.5em;
3940
+ margin-right: 5px;
3941
+ margin-bottom: 2px;
3942
+ margin-top: 2px;
3943
+ border-radius: 4px; }
3944
+
3945
+ .expression-term-validation-error {
3946
+ padding: 0 10px;
3947
+ color: var(--react-autoql-warning-color); }
3948
+
3949
+
3809
3950
  .spinner-loader {
3810
3951
  display: inline-block;
3811
3952
  width: 14px;
@@ -3836,6 +3977,7 @@ the whole table when the filter button is clicked */
3836
3977
  100% {
3837
3978
  transform: rotate(360deg); } }
3838
3979
 
3980
+
3839
3981
  .react-autoql-select {
3840
3982
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3841
3983
  border-radius: 4px;
@@ -3874,8 +4016,6 @@ the whole table when the filter button is clicked */
3874
4016
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3875
4017
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3876
4018
 
3877
-
3878
-
3879
4019
  .slack-modal-error-container,
3880
4020
  .slack-modal-empty-list-message {
3881
4021
  display: flex;