react-autoql 3.4.7 → 3.4.8

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.
@@ -142,1094 +142,1083 @@
142
142
  left: 30px;
143
143
  top: 15px; }
144
144
 
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); }
145
+ .react-autoql-dashboard-container {
146
+ background: var(--react-autoql-background-color-secondary);
147
+ height: 100%;
148
+ width: 100%;
149
+ overflow: hidden; }
160
150
 
161
- .autoql-condition-locking-menu-container
162
- .react-autosuggest__suggestions-container--open {
163
- transform: translateX(8%);
164
- width: 90% !important; }
151
+ .react-autoql-dashboard-container.edit-mode {
152
+ padding-bottom: 200px; }
165
153
 
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; }
154
+ .dashboard-drilldown-modal .ReactModal__Content {
155
+ top: unset !important;
156
+ margin-top: 20px !important;
157
+ max-height: 93vh !important; }
170
158
 
171
- .react-autoql-drawer {
172
- font-family: var(--react-autoql-font-family), sans-serif;
173
- line-height: 22px; }
159
+ .dashboard-drilldown-modal .react-autoql-modal-body {
160
+ padding: 0; }
174
161
 
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; }
162
+ .dashboard-drilldown-modal .react-autoql-table {
163
+ opacity: 0.9;
164
+ font-size: 11px; }
180
165
 
181
- .react-autoql-drawer .react-autoql-drawer-content-container {
166
+ .dashboard-drilldown-modal .splitter-layout {
167
+ height: calc(100% - 55px); }
168
+
169
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
170
+ padding: 20px;
171
+ padding-bottom: 10px; }
172
+
173
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
174
+ text-align: right;
182
175
  width: 100%;
183
- height: 100%;
184
- display: flex;
185
- background: var(--react-autoql-background-color-secondary);
176
+ padding-right: 20px; }
177
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
178
+ position: absolute;
179
+ bottom: 5px;
180
+ width: 100px;
181
+ right: 0; }
182
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
183
+ padding-top: 10px;
184
+ margin-bottom: -8px; }
185
+
186
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
187
+ padding: 20px;
188
+ padding-top: 10px;
186
189
  overflow: hidden;
187
- border-radius: 4px;
188
- flex-direction: column;
189
- justify-content: stretch; }
190
+ height: 100%; }
190
191
 
191
- .react-autoql-drawer .chat-header-container {
192
- display: flex;
193
- justify-content: space-between;
194
- width: 100%;
195
- height: 60px;
196
- background: var(--react-autoql-accent-color);
197
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
198
- flex-grow: 0;
199
- flex-shrink: 0;
200
- z-index: 1; }
192
+ .empty-dashboard-message-container {
193
+ font-family: var(--react-autoql-font-family);
194
+ color: var(--react-autoql-text-color-primary);
195
+ letter-spacing: 0.02em;
196
+ text-align: center;
197
+ padding: 100px;
198
+ height: 100%;
199
+ width: 100%; }
201
200
 
202
- .react-autoql-drawer .react-autoql-header-right-container {
201
+ .empty-dashboard-new-tile-btn {
202
+ color: var(--react-autoql-accent-color);
203
+ font-weight: bold;
204
+ cursor: pointer; }
205
+
206
+ .react-autoql-response-content-container:not(.html-content) {
207
+ position: relative;
203
208
  display: flex;
204
- justify-content: right;
205
- width: 100px; }
209
+ flex-direction: column;
210
+ justify-content: center;
211
+ align-items: center;
212
+ background-color: inherit;
213
+ font-size: 14px;
214
+ height: 100%;
215
+ width: 100%;
216
+ overflow: hidden;
217
+ color: var(--react-autoql-text-color-primary); }
206
218
 
207
- .react-autoql-drawer .react-autoql-header-center-container {
219
+ .react-autoql-response-content-container.html-content {
208
220
  position: relative;
209
- color: #fff;
210
- line-height: 60px;
211
- font-size: 18px;
212
- letter-spacing: 0.05em;
213
- font-weight: 600;
221
+ background-color: inherit;
222
+ text-align: left;
223
+ font-size: 14px;
224
+ height: 100%;
225
+ width: 100%;
214
226
  overflow: hidden;
215
- text-overflow: ellipsis;
216
- white-space: nowrap; }
227
+ color: var(--react-autoql-text-color-primary); }
228
+ .react-autoql-response-content-container.html-content table th {
229
+ border-bottom: 2px solid var(--react-autoql-border-color); }
230
+ .react-autoql-response-content-container.html-content table tr:not(:last-child) {
231
+ border-bottom: 1px solid var(--react-autoql-border-color); }
232
+ .react-autoql-response-content-container.html-content table td:not(:last-child) {
233
+ border-right: 1px solid var(--react-autoql-border-color); }
234
+ .react-autoql-response-content-container.html-content table th,
235
+ .react-autoql-response-content-container.html-content table td {
236
+ padding: 5px 10px; }
237
+ .react-autoql-response-content-container.html-content * {
238
+ font-size: inherit; }
239
+ .react-autoql-response-content-container.html-content sup,
240
+ .react-autoql-response-content-container.html-content sub {
241
+ font-size: 10px; }
242
+ .react-autoql-response-content-container.html-content > *:first-child {
243
+ margin-top: 0 !important; }
244
+ .react-autoql-response-content-container.html-content > *:last-child {
245
+ margin-bottom: 0 !important; }
246
+ .react-autoql-response-content-container.html-content caption {
247
+ display: table-caption;
248
+ text-align: -webkit-center;
249
+ padding-top: unset;
250
+ padding-bottom: unset;
251
+ color: unset;
252
+ text-align: unset;
253
+ caption-side: unset; }
217
254
 
218
- .react-autoql-drawer .header-title {
219
- -webkit-animation: fadeIn 0.3s;
220
- animation: fadeIn 0.3s; }
255
+ .react-autoql-response-content-container.table {
256
+ max-height: 100vh !important;
257
+ overflow-y: scroll;
258
+ scrollbar-width: none; }
221
259
 
222
- .react-autoql-drawer .react-autoql-header-left-container {
223
- width: 100px; }
260
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
261
+ width: 0;
262
+ height: 0; }
224
263
 
225
- .react-autoql-drawer .react-autoql-drawer-header-btn {
226
- line-height: 1em;
227
- font-weight: normal;
228
- float: none;
229
- opacity: 1; }
230
- .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
231
- width: 30px;
232
- height: 30px;
233
- padding-top: 3px; }
234
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all {
235
- position: absolute;
236
- right: 10px;
237
- -webkit-animation: fadeIn 0.3s;
238
- animation: fadeIn 0.3s; }
239
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
240
- width: 28px;
241
- height: 28px;
242
- padding-top: 7px;
243
- box-sizing: border-box; }
264
+ .react-autoql-suggestion-btn {
265
+ padding: 6px 14px;
266
+ background: transparent;
267
+ font-family: inherit;
268
+ font-size: 12px;
269
+ margin-bottom: 5px;
270
+ outline: none !important;
271
+ cursor: pointer;
272
+ letter-spacing: 0.05em;
273
+ transition: all 0.1s ease;
274
+ border: 1px solid rgba(0, 0, 0, 0.15);
275
+ border-radius: 5px;
276
+ color: inherit; }
244
277
 
245
- .react-autoql-drawer .chat-message-container {
246
- scroll-behavior: smooth !important;
247
- max-height: calc(100% - 140px);
248
- overflow-y: auto;
249
- overflow-x: hidden;
250
- flex: 1; }
251
- .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
252
- overflow-x: hidden !important;
253
- margin-bottom: 0 !important; }
278
+ .react-autoql-suggestion-btn:hover {
279
+ border-color: transparent;
280
+ color: white;
281
+ background: var(--react-autoql-accent-color); }
254
282
 
255
- .react-autoql-drawer .chat-bar-container {
256
- position: relative;
257
- padding: 10px;
258
- padding-top: 30px; }
283
+ .react-autoql-help-link-btn {
284
+ padding: 6px 14px;
285
+ background: transparent;
286
+ border-radius: 5px;
287
+ font-family: inherit;
288
+ font-size: 12px;
289
+ margin-top: 5px;
290
+ outline: none !important;
291
+ cursor: pointer;
292
+ letter-spacing: 0.05em;
293
+ transition: all 0.1s ease;
294
+ border-color: #e2e2e26e;
295
+ color: inherit; }
259
296
 
260
- .react-autoql-drawer .chat-drawer-chat-bar {
261
- flex-shrink: 0;
262
- flex-grow: 0;
263
- height: 60px;
264
- -webkit-animation: fadeIn 0.3s;
265
- animation: fadeIn 0.3s; }
297
+ .react-autoql-help-link-btn:hover {
298
+ opacity: 0.7; }
266
299
 
267
- .react-autoql-drawer .watermark {
268
- color: var(--react-autoql-text-color-primary);
269
- text-align: center;
270
- opacity: 0.2;
271
- top: 6px;
272
- width: calc(100% - 10px);
273
- font-size: 13px; }
300
+ .react-autoql-help-link-icon {
301
+ width: 15px;
302
+ height: 15px;
303
+ margin-bottom: -3px;
304
+ margin-right: 3px; }
274
305
 
275
- .react-autoql-drawer .condition-list-container {
276
- position: absolute;
277
- border: 1px solid var(--react-autoql-text-color-primary);
278
- border-radius: 100rem;
279
- background-color: transparent;
280
- color: var(--react-autoql-text-color-primary);
281
- padding: 0 5px 0 5px;
282
- transition: background-color 250ms ease, box-shadow 250ms ease;
283
- z-index: 9999999;
284
- width: -webkit-fit-content;
285
- width: -moz-fit-content;
286
- width: fit-content;
287
- height: -webkit-fit-content;
288
- height: -moz-fit-content;
289
- height: fit-content; }
290
-
291
- .condition-list-display {
292
- display: none;
293
- background-color: var(--react-autoql-background-color-primary);
294
- border-radius: 4px;
295
- padding: 5px;
296
- width: -webkit-fit-content;
297
- width: -moz-fit-content;
298
- width: fit-content;
299
- height: -webkit-fit-content;
300
- height: -moz-fit-content;
301
- height: fit-content;
302
- padding: 10px;
303
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
306
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
307
+ color: var(--react-autoql-success-color); }
304
308
 
305
- .react-autoql-drawer .react-autoql-drawer:focus {
306
- outline: none; }
309
+ .react-autoql-suggestion-message {
310
+ height: 100%;
311
+ width: 100%;
312
+ word-break: break-word; }
307
313
 
308
- .react-autoql-drawer .chat-header-container button {
309
- background: transparent;
310
- border: none;
311
- color: white;
312
- margin: 10px;
313
- margin-right: 0;
314
- font-size: 20px;
314
+ .react-autoql-suggestions-select {
315
+ position: relative;
316
+ display: inline-block;
317
+ height: 30px;
318
+ background: none;
319
+ outline: none !important;
320
+ border: 1px solid;
321
+ font-family: inherit;
322
+ letter-spacing: 0.05em;
323
+ color: #28a8e0;
315
324
  cursor: pointer;
316
- outline: none !important; }
325
+ font-size: inherit; }
317
326
 
318
- .react-autoql-drawer .chat-header-container button:hover {
319
- opacity: 0.7; }
327
+ .no-columns-error-message {
328
+ position: absolute;
329
+ height: 100%;
330
+ width: 100%;
331
+ display: flex;
332
+ justify-content: center;
333
+ flex-direction: column;
334
+ text-align: center;
335
+ padding: 20px;
336
+ font-size: 13px; }
337
+ .no-columns-error-message .warning-icon {
338
+ font-size: 22px;
339
+ display: block;
340
+ margin-bottom: -13px;
341
+ text-align: center; }
342
+ .no-columns-error-message .eye-icon {
343
+ vertical-align: bottom;
344
+ line-height: 18px; }
320
345
 
321
- .react-autoql-drawer .chat-header-container button svg {
322
- width: 35px;
323
- height: 35px; }
346
+ /* query validation */
347
+ .react-autoql-query-validation-selector-container {
348
+ display: inline-block;
349
+ position: relative; }
324
350
 
325
- .topics-container {
326
- margin: 5px 0; }
351
+ .react-autoql-select-popup-container.query-validation-select {
352
+ padding: 5px 0;
353
+ letter-spacing: 0.03em;
354
+ font-family: var(--react-autoql-font-family), sans-serif; }
355
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
356
+ height: unset;
357
+ font-size: 14px;
358
+ line-height: 24px;
359
+ padding: 0 15px; }
360
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
361
+ color: #d84830; }
327
362
 
328
- .intro-qi-link {
329
- cursor: pointer;
330
- color: var(--react-autoql-accent-color); }
363
+ .react-autoql-query-validation-query {
364
+ text-align: center; }
331
365
 
332
- /* custom scrollbar */
333
- .react-autoql-drawer .chat-message-container > div:last-child {
334
- opacity: 0;
335
- transition: opacity 200ms ease; }
366
+ .react-autoql-query-validation-execute-btn {
367
+ height: 38px;
368
+ background: none;
369
+ border-radius: 4px;
370
+ margin-top: 24px;
371
+ width: 100%;
372
+ color: inherit;
373
+ cursor: pointer;
374
+ outline: none !important;
375
+ border-color: #e2e2e26e;
376
+ transition: all 0.2s ease; }
336
377
 
337
- .react-autoql-drawer .chat-message-container:hover > div:last-child {
338
- opacity: 1; }
378
+ .react-autoql-query-validation-execute-btn:hover {
379
+ border-color: #28a8e0; }
339
380
 
340
- /* rc-drawer */
341
- .react-autoql-drawer .drawer-content {
342
- background: white;
343
- border-radius: 4px;
344
- overflow: visible;
345
- opacity: 1;
346
- transition: opacity 0.3s ease; }
381
+ .react-autoql-execute-query-icon {
382
+ font-size: 16px;
383
+ vertical-align: middle !important;
384
+ padding-right: 3px !important; }
385
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
386
+ height: 19px;
387
+ width: 19px;
388
+ margin-top: 3px;
389
+ margin-right: 4px;
390
+ vertical-align: top;
391
+ fill: var(--react-autoql-accent-color); }
347
392
 
348
- .react-autoql-drawer.closed .drawer-content {
349
- opacity: 0; }
393
+ .react-autoql-query-validation-select {
394
+ position: relative;
395
+ display: inline-block;
396
+ height: 2em;
397
+ background: none;
398
+ outline: none !important;
399
+ border: none;
400
+ letter-spacing: 0.05em;
401
+ font-family: inherit;
402
+ font-size: inherit;
403
+ margin: 0;
404
+ padding: 0;
405
+ border-radius: 0;
406
+ border-bottom: 1px dashed;
407
+ color: var(--react-autoql-accent-color); }
350
408
 
351
- .react-autoql-drawer .drawer-handle {
352
- transition: opacity 0.5s ease;
353
- overflow: hidden;
354
- width: 50px;
355
- height: 50px;
356
- border-radius: 50px !important;
357
- font-size: 22px; }
358
- .react-autoql-drawer .drawer-handle.default-logo {
359
- background-color: var(--react-autoql-accent-color, #26a7df);
360
- color: #fff; }
361
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
362
- position: absolute;
363
- vertical-align: top;
364
- top: 11px;
365
- left: 12px; }
366
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
367
- position: absolute;
368
- width: 26px;
369
- height: 26px; }
409
+ .react-autoql-query-validation-delete-button {
410
+ position: relative;
411
+ cursor: pointer;
412
+ margin-bottom: -2px; }
370
413
 
371
- .react-autoql-drawer.drawer-right .drawer-handle {
372
- left: -70px !important; }
414
+ .react-autoql-chart-tooltip {
415
+ font-family: var(--react-autoql-font-family), sans-serif;
416
+ letter-spacing: 0.04em;
417
+ line-height: 22px;
418
+ font-size: 13px;
419
+ padding: 7px 15px;
420
+ transition: all 0.2s ease !important;
421
+ text-align: left !important;
422
+ opacity: 1 !important;
423
+ z-index: 99999 !important;
424
+ /* necessary to show up on top of rc drawer */ }
373
425
 
374
- .react-autoql-drawer.drawer-left .drawer-handle {
375
- right: -60px !important; }
426
+ .single-value-response {
427
+ color: inherit;
428
+ cursor: unset; }
429
+ .single-value-response:hover {
430
+ color: inherit; }
376
431
 
377
- .react-autoql-drawer.drawer-top .drawer-handle {
378
- bottom: -60px !important; }
432
+ .single-value-response.with-drilldown:hover {
433
+ color: inherit;
434
+ text-decoration: underline;
435
+ font-weight: 600;
436
+ cursor: pointer; }
379
437
 
380
- .react-autoql-drawer.drawer-bottom .drawer-handle {
381
- top: -60px !important; }
438
+ .react-autoql-query-validation-container {
439
+ width: 100%; }
382
440
 
383
- .react-autoql-drawer .drawer-handle.hide {
384
- opacity: 0;
385
- visibility: hidden; }
441
+ .react-autoql-query-validation-description {
442
+ margin-bottom: 14px; }
386
443
 
387
- .react-autoql-drawer .drawer-handle-icon,
388
- .react-autoql-drawer .drawer-handle-icon::before,
389
- .react-autoql-drawer .drawer-handle-icon::after {
390
- background: var(--react-autoql-text-color-primary); }
444
+ .context-menu {
445
+ background: var(--react-autoql-background-color-primary);
446
+ /* height: 100px; */
447
+ width: 150px;
448
+ padding: 10px 0; }
391
449
 
392
- .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
393
- .react-autoql-drawer .drawer-top .drawer-content-wrapper {
394
- left: 0; }
450
+ .context-menu-list {
451
+ list-style-type: none;
452
+ width: 100%;
453
+ margin: 0;
454
+ padding: 0; }
395
455
 
396
- .react-autoql-drawer .drawer-content-wrapper {
397
- background: transparent; }
456
+ .context-menu-list li {
457
+ color: var(--react-autoql-text-color-primary);
458
+ width: 100%;
459
+ height: 35px;
460
+ line-height: 35px;
461
+ padding: 0 20px;
462
+ cursor: pointer; }
398
463
 
399
- .react-autoql-drawer.drawer-right .drawer-content-wrapper,
400
- .react-autoql-drawer.drawer-left .drawer-content-wrapper {
401
- max-width: calc(100vw - 45px) !important;
402
- min-width: 400px !important; }
464
+ .context-menu-list li:hover {
465
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
403
466
 
404
- .react-autoql-drawer.drawer-top .drawer-content-wrapper,
405
- .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
406
- max-height: calc(100vh - 45px) !important;
407
- min-height: 400px !important; }
467
+ .react-autoql-icon {
468
+ position: relative;
469
+ opacity: 1; }
470
+ .react-autoql-icon.warning {
471
+ color: var(--react-autoql-warning-color) !important; }
472
+ .react-autoql-icon.danger {
473
+ color: var(--react-autoql-danger-color) !important; }
408
474
 
409
- .react-autoql-drawer-resize-handle {
410
- position: absolute;
411
- background: transparent; }
412
- .react-autoql-drawer-resize-handle.right {
413
- top: 0;
414
- left: -5px;
415
- width: 5px;
416
- height: 100vh;
417
- cursor: ew-resize; }
418
- .react-autoql-drawer-resize-handle.left {
419
- top: 0;
420
- right: -5px;
421
- width: 5px;
422
- height: 100vh;
423
- cursor: ew-resize; }
424
- .react-autoql-drawer-resize-handle.top {
425
- bottom: -5px;
426
- left: 0;
427
- height: 5px;
428
- width: 100vw;
429
- cursor: ns-resize; }
430
- .react-autoql-drawer-resize-handle.bottom {
431
- top: -5px;
432
- left: 0;
433
- height: 5px;
434
- width: 100vw;
435
- cursor: ns-resize; }
475
+ span.react-autoql-icon {
476
+ vertical-align: unset;
477
+ text-align: left;
478
+ margin: 0;
479
+ padding: 0;
480
+ float: none !important;
481
+ color: inherit; }
482
+ span.react-autoql-icon svg {
483
+ float: none !important;
484
+ color: inherit;
485
+ vertical-align: unset;
486
+ text-align: left;
487
+ margin: 0;
488
+ padding: 0;
489
+ opacity: 1;
490
+ height: 1em;
491
+ margin-bottom: -0.1em; }
436
492
 
437
- .react-autoql-drawer .response-loading-container {
493
+ .slack-logo {
494
+ display: inline-block;
495
+ height: 100%;
496
+ margin-bottom: 3px; }
497
+ .slack-logo img {
498
+ vertical-align: middle;
499
+ height: 1em;
500
+ width: 1em; }
501
+
502
+ .react-autoql-badge {
438
503
  position: absolute;
439
- bottom: 45px;
440
- left: 20px; }
504
+ background: var(--react-autoql-warning-color);
505
+ border: 1px solid var(--react-autoql-background-color-primary);
506
+ width: 0.5em;
507
+ height: 0.5em;
508
+ top: -0.1em;
509
+ right: -0.25em;
510
+ border-radius: 50%;
511
+ box-sizing: content-box; }
441
512
 
442
- /* Tooltips */
443
- .react-autoql-drawer-tooltip {
444
- font-family: var(--react-autoql-font-family), sans-serif;
445
- letter-spacing: 0.04em;
446
- padding: 7px 15px;
447
- transition: none;
448
- opacity: 1 !important;
449
- z-index: 99999 !important;
450
- /* necessary to show up on top of rc drawer */ }
513
+ .chat-voice-record-button {
514
+ width: 40px;
515
+ height: 40px;
516
+ border-radius: 24px;
517
+ margin: 10px;
518
+ margin-left: 0;
519
+ font-size: 18px;
520
+ line-height: 24px;
521
+ outline: none !important;
522
+ position: relative;
523
+ cursor: pointer;
524
+ overflow: hidden;
525
+ background: var(--react-autoql-accent-color);
526
+ color: white;
527
+ border: none;
528
+ flex-shrink: 0;
529
+ flex-grow: 0; }
451
530
 
452
- .interpretation-tooltip {
453
- font-family: var(--react-autoql-font-family), sans-serif;
454
- font-size: 12px;
455
- text-align: left;
531
+ .chat-voice-record-button:hover {
532
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
533
+
534
+ .chat-voice-record-button.listening {
535
+ background: #ff471a; }
536
+
537
+ .chat-voice-record-icon {
538
+ vertical-align: top; }
539
+
540
+ .react-autoql-tooltip {
541
+ font-family: inherit;
456
542
  letter-spacing: 0.04em;
457
543
  padding: 7px 15px;
458
- max-width: 400px;
459
544
  opacity: 1 !important;
460
- transition: none;
461
- z-index: 99999 !important;
462
- /* necessary to show up on top of rc drawer */ }
463
-
464
- .react-autoql-condition-lock-menu {
465
- color: var(--react-autoql-text-color-primary);
466
- background: var(--react-autoql-background-color-primary); }
467
-
468
- .react-tiny-popover-container {
469
- z-index: 9999;
470
- border: 1px solid #ababab52;
471
- border-radius: 4px;
472
- box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
473
- transition: opacity 0.2s ease 0s !important; }
545
+ z-index: 99999 !important; }
474
546
 
475
- .clear-messages-confirm-popover {
476
- color: var(--react-autoql-text-color-primary);
477
- background: var(--react-autoql-background-color-primary);
478
- text-align: right;
479
- padding: 18px;
480
- width: 266px; }
547
+ @-webkit-keyframes slide {
548
+ 0% {
549
+ transform: translateX(-100%); }
550
+ 100% {
551
+ transform: translateX(100%); } }
481
552
 
482
- .react-autoql-confirm-text {
483
- text-align: center; }
553
+ @keyframes slide {
554
+ 0% {
555
+ transform: translateX(-100%); }
556
+ 100% {
557
+ transform: translateX(100%); } }
484
558
 
485
- .react-autoql-menu-text {
486
- text-align: center; }
487
- .react-autoql-menu-text:hover {
488
- color: var(--react-autoql-accent-color);
489
- cursor: pointer; }
559
+ @-webkit-keyframes move {
560
+ 0% {
561
+ left: 0;
562
+ opacity: 0; }
563
+ 5% {
564
+ opacity: 0; }
565
+ 48% {
566
+ opacity: 0.2; }
567
+ 80% {
568
+ opacity: 0; }
569
+ 100% {
570
+ left: 82%; } }
490
571
 
491
- .react-autoql-confirm-icon {
492
- color: #faad14 !important;
493
- vertical-align: middle;
494
- margin-right: 5px !important;
495
- margin-bottom: 3px; }
572
+ @keyframes move {
573
+ 0% {
574
+ left: 0;
575
+ opacity: 0; }
576
+ 5% {
577
+ opacity: 0; }
578
+ 48% {
579
+ opacity: 0.2; }
580
+ 80% {
581
+ opacity: 0; }
582
+ 100% {
583
+ left: 82%; } }
496
584
 
497
- .data-messenger-tab-container {
498
- position: absolute;
499
- background: transparent;
585
+ .loading-container-centered {
586
+ height: 100%;
587
+ width: 100%;
500
588
  display: flex;
589
+ flex-direction: column;
501
590
  justify-content: center;
502
- align-items: center;
503
- pointer-events: none; }
504
- .data-messenger-tab-container.right {
505
- height: 100vh;
506
- width: 60px;
507
- left: -60px; }
508
- .data-messenger-tab-container.left {
509
- height: 100vh;
510
- width: 60px;
511
- right: -60px; }
512
- .data-messenger-tab-container.top {
513
- width: 100vw;
514
- height: 60px;
515
- bottom: -60px; }
516
- .data-messenger-tab-container.bottom {
517
- width: 100vw;
518
- height: 60px;
519
- top: -60px; }
591
+ align-items: center; }
520
592
 
521
- /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
522
- .page-switcher-shadow-container {
593
+ .response-loading {
594
+ display: inline-block;
595
+ position: relative;
596
+ width: 64px;
597
+ height: 64px; }
598
+
599
+ .response-loading div {
523
600
  position: absolute;
524
- background: transparent;
525
- overflow: hidden; }
601
+ top: 27px;
602
+ width: 11px;
603
+ height: 11px;
604
+ border-radius: 50%;
605
+ background: #e2e2e2;
606
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
607
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
526
608
 
527
- .page-switcher-shadow-container.right {
528
- top: 80px;
529
- width: 60px; }
609
+ .response-loading div:nth-child(1) {
610
+ left: 6px;
611
+ -webkit-animation: response-loading1 0.6s infinite;
612
+ animation: response-loading1 0.6s infinite; }
530
613
 
531
- .page-switcher-shadow-container.left {
532
- top: 80px;
533
- width: 60px; }
614
+ .response-loading div:nth-child(2) {
615
+ left: 6px;
616
+ -webkit-animation: response-loading2 0.6s infinite;
617
+ animation: response-loading2 0.6s infinite; }
534
618
 
535
- /* Container holding the tabs */
536
- .page-switcher-container {
537
- box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
538
- overflow: hidden;
539
- box-sizing: border-box;
540
- display: flex;
541
- pointer-events: all; }
542
- .page-switcher-container .tab {
543
- position: relative;
544
- z-index: 1;
545
- background: var(--react-autoql-accent-color);
546
- color: #fff;
547
- opacity: 1;
548
- font-size: 22px;
549
- text-align: center;
550
- transform: translate(0, 0);
551
- cursor: pointer;
552
- transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
553
- transition-duration: 0.2s; }
554
- .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
555
- height: 22px;
556
- width: 23px; }
557
- .page-switcher-container.right {
558
- border-top-left-radius: 5px;
559
- border-bottom-left-radius: 5px;
560
- margin-top: 20px;
561
- margin-left: 20px;
562
- margin-bottom: 20px;
563
- flex-direction: column; }
564
- .page-switcher-container.right .tab {
565
- box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
566
- .page-switcher-container.left {
567
- border-top-right-radius: 5px;
568
- border-bottom-right-radius: 5px;
569
- margin-top: 20px;
570
- margin-right: 20px;
571
- margin-bottom: 20px;
572
- margin-left: -5px;
573
- flex-direction: column; }
574
- .page-switcher-container.left .tab {
575
- box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
576
- .page-switcher-container.top {
577
- border-bottom-right-radius: 5px;
578
- border-bottom-left-radius: 5px;
579
- margin-right: 20px;
580
- margin-left: 20px;
581
- margin-bottom: 20px;
582
- flex-direction: row;
583
- height: 40px; }
584
- .page-switcher-container.top .tab {
585
- box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
586
- .page-switcher-container.bottom {
587
- border-top-left-radius: 5px;
588
- border-top-right-radius: 5px;
589
- margin-top: 20px;
590
- margin-left: 20px;
591
- margin-right: 20px;
592
- flex-direction: row;
593
- height: 40px; }
594
- .page-switcher-container.bottom .tab {
595
- box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
619
+ .response-loading div:nth-child(3) {
620
+ left: 26px;
621
+ -webkit-animation: response-loading2 0.6s infinite;
622
+ animation: response-loading2 0.6s infinite; }
596
623
 
597
- /* Individual Tabs */
598
- .page-switcher-container .tab {
599
- display: flex;
600
- justify-content: center;
601
- align-items: center; }
624
+ .response-loading div:nth-child(4) {
625
+ left: 45px;
626
+ -webkit-animation: response-loading3 0.6s infinite;
627
+ animation: response-loading3 0.6s infinite; }
602
628
 
603
- .data-messenger-notification-btn {
604
- display: flex;
605
- flex-direction: column;
606
- justify-content: flex-start;
607
- line-height: inherit; }
629
+ #condition-lock-snackbar-success {
630
+ visibility: hidden;
631
+ min-width: 200px;
632
+ line-height: 1 !important;
633
+ font-size: 14px !important;
634
+ background-color: var(--react-autoql-background-color-secondary);
635
+ color: var(--react-autoql-success-color);
636
+ text-align: center;
637
+ border-radius: 4px;
638
+ padding: 6px;
639
+ position: fixed;
640
+ display: block;
641
+ z-index: 999999999;
642
+ transform: translateX(-10%);
643
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
608
644
 
609
- .page-switcher-container.right .tab,
610
- .page-switcher-container.left .tab {
611
- height: 65px; }
645
+ .autoql-condition-locking-menu-container
646
+ .react-autosuggest__suggestions-container--open {
647
+ transform: translateX(8%);
648
+ width: 90% !important; }
612
649
 
613
- .page-switcher-container.top .tab,
614
- .page-switcher-container.bottom .tab {
615
- width: 65px; }
650
+ #condition-lock-snackbar-success.show {
651
+ visibility: visible;
652
+ -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
653
+ animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
616
654
 
617
- .page-switcher-container.bottom .tab {
618
- background: var(--react-autoql-background-color-secondary);
619
- color: var(--react-autoql-text-color-primary); }
655
+ .react-autoql-drawer {
656
+ font-family: var(--react-autoql-font-family), sans-serif;
657
+ line-height: 22px; }
620
658
 
621
- .page-switcher-container .tab.active {
659
+ .react-autoql-drawer.disable-selection {
660
+ -webkit-user-select: none;
661
+ -moz-user-select: none;
662
+ -ms-user-select: none;
663
+ user-select: none; }
664
+
665
+ .react-autoql-drawer .react-autoql-drawer-content-container {
666
+ width: 100%;
667
+ height: 100%;
668
+ display: flex;
622
669
  background: var(--react-autoql-background-color-secondary);
623
- color: var(--react-autoql-text-color-primary);
624
- box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
625
- font-weight: bold;
626
- position: relative;
627
- z-index: 2; }
670
+ overflow: hidden;
671
+ border-radius: 4px;
672
+ flex-direction: column;
673
+ justify-content: stretch; }
628
674
 
629
- .page-switcher-container.bottom .tab.active {
675
+ .react-autoql-drawer .chat-header-container {
676
+ display: flex;
677
+ justify-content: space-between;
678
+ width: 100%;
679
+ height: 60px;
630
680
  background: var(--react-autoql-accent-color);
631
- color: #fff;
632
- font-weight: bold; }
681
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
682
+ flex-grow: 0;
683
+ flex-shrink: 0;
684
+ z-index: 1; }
633
685
 
634
- /* animations */
635
- @-webkit-keyframes response-loading1 {
636
- 0% {
637
- transform: scale(0); }
638
- 100% {
639
- transform: scale(1); } }
640
- @keyframes response-loading1 {
641
- 0% {
642
- transform: scale(0); }
643
- 100% {
644
- transform: scale(1); } }
686
+ .react-autoql-drawer .react-autoql-header-right-container {
687
+ display: flex;
688
+ justify-content: right;
689
+ width: 100px; }
645
690
 
646
- @-webkit-keyframes response-loading3 {
647
- 0% {
648
- transform: scale(1); }
649
- 100% {
650
- transform: scale(0); } }
691
+ .react-autoql-drawer .react-autoql-header-center-container {
692
+ position: relative;
693
+ color: #fff;
694
+ line-height: 60px;
695
+ font-size: 18px;
696
+ letter-spacing: 0.05em;
697
+ font-weight: 600;
698
+ overflow: hidden;
699
+ text-overflow: ellipsis;
700
+ white-space: nowrap; }
651
701
 
652
- @keyframes response-loading3 {
653
- 0% {
654
- transform: scale(1); }
655
- 100% {
656
- transform: scale(0); } }
702
+ .react-autoql-drawer .header-title {
703
+ -webkit-animation: fadeIn 0.3s;
704
+ animation: fadeIn 0.3s; }
657
705
 
658
- @-webkit-keyframes response-loading2 {
659
- 0% {
660
- transform: translate(0, 0); }
661
- 100% {
662
- transform: translate(19px, 0); } }
706
+ .react-autoql-drawer .react-autoql-header-left-container {
707
+ width: 100px; }
663
708
 
664
- @keyframes response-loading2 {
665
- 0% {
666
- transform: translate(0, 0); }
667
- 100% {
668
- transform: translate(19px, 0); } }
709
+ .react-autoql-drawer .react-autoql-drawer-header-btn {
710
+ line-height: 1em;
711
+ font-weight: normal;
712
+ float: none;
713
+ opacity: 1; }
714
+ .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
715
+ width: 30px;
716
+ height: 30px;
717
+ padding-top: 3px; }
718
+ .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all {
719
+ position: absolute;
720
+ right: 10px;
721
+ -webkit-animation: fadeIn 0.3s;
722
+ animation: fadeIn 0.3s; }
723
+ .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
724
+ width: 28px;
725
+ height: 28px;
726
+ padding-top: 7px;
727
+ box-sizing: border-box; }
669
728
 
670
- @-webkit-keyframes scale-up-center {
671
- 0% {
672
- transform: scale(0); }
673
- 100% {
674
- transform: scale(1); } }
729
+ .react-autoql-drawer .chat-message-container {
730
+ scroll-behavior: smooth !important;
731
+ max-height: calc(100% - 140px);
732
+ overflow-y: auto;
733
+ overflow-x: hidden;
734
+ flex: 1; }
735
+ .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
736
+ overflow-x: hidden !important;
737
+ margin-bottom: 0 !important; }
675
738
 
676
- @keyframes scale-up-center {
677
- 0% {
678
- transform: scale(0); }
679
- 100% {
680
- transform: scale(1); } }
739
+ .react-autoql-drawer .chat-bar-container {
740
+ position: relative;
741
+ padding: 10px;
742
+ padding-top: 30px; }
681
743
 
682
- @-webkit-keyframes fadeIn {
683
- 0% {
684
- opacity: 0; }
685
- 100% {
686
- opacity: 1; } }
744
+ .react-autoql-drawer .chat-drawer-chat-bar {
745
+ flex-shrink: 0;
746
+ flex-grow: 0;
747
+ height: 60px;
748
+ -webkit-animation: fadeIn 0.3s;
749
+ animation: fadeIn 0.3s; }
687
750
 
688
- @keyframes fadeIn {
689
- 0% {
690
- opacity: 0; }
691
- 100% {
692
- opacity: 1; } }
751
+ .react-autoql-drawer .watermark {
752
+ color: var(--react-autoql-text-color-primary);
753
+ text-align: center;
754
+ opacity: 0.2;
755
+ top: 6px;
756
+ width: calc(100% - 10px);
757
+ font-size: 13px; }
693
758
 
694
- @-webkit-keyframes slideDown {
695
- 0% {
696
- transform: translateY(-100%); }
697
- 100% {
698
- transform: translateY(0%); } }
759
+ .react-autoql-drawer .condition-list-container {
760
+ position: absolute;
761
+ border: 1px solid var(--react-autoql-text-color-primary);
762
+ border-radius: 100rem;
763
+ background-color: transparent;
764
+ color: var(--react-autoql-text-color-primary);
765
+ padding: 0 5px 0 5px;
766
+ transition: background-color 250ms ease, box-shadow 250ms ease;
767
+ z-index: 9999999;
768
+ width: -webkit-fit-content;
769
+ width: -moz-fit-content;
770
+ width: fit-content;
771
+ height: -webkit-fit-content;
772
+ height: -moz-fit-content;
773
+ height: fit-content; }
699
774
 
700
- @keyframes slideDown {
701
- 0% {
702
- transform: translateY(-100%); }
703
- 100% {
704
- transform: translateY(0%); } }
775
+ .condition-list-display {
776
+ display: none;
777
+ background-color: var(--react-autoql-background-color-primary);
778
+ border-radius: 4px;
779
+ padding: 5px;
780
+ width: -webkit-fit-content;
781
+ width: -moz-fit-content;
782
+ width: fit-content;
783
+ height: -webkit-fit-content;
784
+ height: -moz-fit-content;
785
+ height: fit-content;
786
+ padding: 10px;
787
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
705
788
 
706
- @-webkit-keyframes snackbarFadein {
707
- from {
708
- top: 30px;
709
- opacity: 0; }
710
- to {
711
- top: 60px;
712
- opacity: 1; } }
789
+ .react-autoql-drawer .react-autoql-drawer:focus {
790
+ outline: none; }
713
791
 
714
- @keyframes snackbarFadein {
715
- from {
716
- top: 30px;
717
- opacity: 0; }
718
- to {
719
- top: 60px;
720
- opacity: 1; } }
792
+ .react-autoql-drawer .chat-header-container button {
793
+ background: transparent;
794
+ border: none;
795
+ color: white;
796
+ margin: 10px;
797
+ margin-right: 0;
798
+ font-size: 20px;
799
+ cursor: pointer;
800
+ outline: none !important; }
721
801
 
722
- @-webkit-keyframes snackbarFadeout {
723
- from {
724
- top: 60px;
725
- opacity: 1; }
726
- to {
727
- top: 30px;
728
- opacity: 0; } }
802
+ .react-autoql-drawer .chat-header-container button:hover {
803
+ opacity: 0.7; }
729
804
 
730
- @keyframes snackbarFadeout {
731
- from {
732
- top: 60px;
733
- opacity: 1; }
734
- to {
735
- top: 30px;
736
- opacity: 0; } }
805
+ .react-autoql-drawer .chat-header-container button svg {
806
+ width: 35px;
807
+ height: 35px; }
737
808
 
738
- .chat-voice-record-button {
739
- width: 40px;
740
- height: 40px;
741
- border-radius: 24px;
742
- margin: 10px;
743
- margin-left: 0;
744
- font-size: 18px;
745
- line-height: 24px;
746
- outline: none !important;
747
- position: relative;
748
- cursor: pointer;
749
- overflow: hidden;
750
- background: var(--react-autoql-accent-color);
751
- color: white;
752
- border: none;
753
- flex-shrink: 0;
754
- flex-grow: 0; }
809
+ .topics-container {
810
+ margin: 5px 0; }
755
811
 
756
- .chat-voice-record-button:hover {
757
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
812
+ .intro-qi-link {
813
+ cursor: pointer;
814
+ color: var(--react-autoql-accent-color); }
758
815
 
759
- .chat-voice-record-button.listening {
760
- background: #ff471a; }
816
+ /* custom scrollbar */
817
+ .react-autoql-drawer .chat-message-container > div:last-child {
818
+ opacity: 0;
819
+ transition: opacity 200ms ease; }
761
820
 
762
- .chat-voice-record-icon {
763
- vertical-align: top; }
821
+ .react-autoql-drawer .chat-message-container:hover > div:last-child {
822
+ opacity: 1; }
764
823
 
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; }
824
+ /* rc-drawer */
825
+ .react-autoql-drawer .drawer-content {
826
+ background: white;
827
+ border-radius: 4px;
828
+ overflow: visible;
829
+ opacity: 1;
830
+ transition: opacity 0.3s ease; }
771
831
 
772
- @-webkit-keyframes slide {
773
- 0% {
774
- transform: translateX(-100%); }
775
- 100% {
776
- transform: translateX(100%); } }
832
+ .react-autoql-drawer.closed .drawer-content {
833
+ opacity: 0; }
777
834
 
778
- @keyframes slide {
779
- 0% {
780
- transform: translateX(-100%); }
781
- 100% {
782
- transform: translateX(100%); } }
835
+ .react-autoql-drawer .drawer-handle {
836
+ transition: opacity 0.5s ease;
837
+ overflow: hidden;
838
+ width: 50px;
839
+ height: 50px;
840
+ border-radius: 50px !important;
841
+ font-size: 22px; }
842
+ .react-autoql-drawer .drawer-handle.default-logo {
843
+ background-color: var(--react-autoql-accent-color, #26a7df);
844
+ color: #fff; }
845
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
846
+ position: absolute;
847
+ vertical-align: top;
848
+ top: 11px;
849
+ left: 12px; }
850
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
851
+ position: absolute;
852
+ width: 26px;
853
+ height: 26px; }
783
854
 
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%; } }
855
+ .react-autoql-drawer.drawer-right .drawer-handle {
856
+ left: -70px !important; }
796
857
 
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%; } }
858
+ .react-autoql-drawer.drawer-left .drawer-handle {
859
+ right: -60px !important; }
809
860
 
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; }
861
+ .react-autoql-drawer.drawer-top .drawer-handle {
862
+ bottom: -60px !important; }
817
863
 
818
- .response-loading {
819
- display: inline-block;
820
- position: relative;
821
- width: 64px;
822
- height: 64px; }
864
+ .react-autoql-drawer.drawer-bottom .drawer-handle {
865
+ top: -60px !important; }
823
866
 
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); }
867
+ .react-autoql-drawer .drawer-handle.hide {
868
+ opacity: 0;
869
+ visibility: hidden; }
833
870
 
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; }
871
+ .react-autoql-drawer .drawer-handle-icon,
872
+ .react-autoql-drawer .drawer-handle-icon::before,
873
+ .react-autoql-drawer .drawer-handle-icon::after {
874
+ background: var(--react-autoql-text-color-primary); }
838
875
 
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; }
876
+ .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
877
+ .react-autoql-drawer .drawer-top .drawer-content-wrapper {
878
+ left: 0; }
843
879
 
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; }
880
+ .react-autoql-drawer .drawer-content-wrapper {
881
+ background: transparent; }
848
882
 
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; }
883
+ .react-autoql-drawer.drawer-right .drawer-content-wrapper,
884
+ .react-autoql-drawer.drawer-left .drawer-content-wrapper {
885
+ max-width: calc(100vw - 45px) !important;
886
+ min-width: 400px !important; }
853
887
 
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); }
888
+ .react-autoql-drawer.drawer-top .drawer-content-wrapper,
889
+ .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
890
+ max-height: calc(100vh - 45px) !important;
891
+ min-height: 400px !important; }
866
892
 
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; }
893
+ .react-autoql-drawer-resize-handle {
894
+ position: absolute;
895
+ background: transparent; }
896
+ .react-autoql-drawer-resize-handle.right {
897
+ top: 0;
898
+ left: -5px;
899
+ width: 5px;
900
+ height: 100vh;
901
+ cursor: ew-resize; }
902
+ .react-autoql-drawer-resize-handle.left {
903
+ top: 0;
904
+ right: -5px;
905
+ width: 5px;
906
+ height: 100vh;
907
+ cursor: ew-resize; }
908
+ .react-autoql-drawer-resize-handle.top {
909
+ bottom: -5px;
910
+ left: 0;
911
+ height: 5px;
912
+ width: 100vw;
913
+ cursor: ns-resize; }
914
+ .react-autoql-drawer-resize-handle.bottom {
915
+ top: -5px;
916
+ left: 0;
917
+ height: 5px;
918
+ width: 100vw;
919
+ cursor: ns-resize; }
902
920
 
903
- .react-autoql-response-content-container.table {
904
- max-height: 100vh !important;
905
- overflow-y: scroll;
906
- scrollbar-width: none; }
921
+ .react-autoql-drawer .response-loading-container {
922
+ position: absolute;
923
+ bottom: 45px;
924
+ left: 20px; }
907
925
 
908
- .react-autoql-response-content-container.table::-webkit-scrollbar {
909
- width: 0;
910
- height: 0; }
926
+ /* Tooltips */
927
+ .react-autoql-drawer-tooltip {
928
+ font-family: var(--react-autoql-font-family), sans-serif;
929
+ letter-spacing: 0.04em;
930
+ line-height: 0.9em;
931
+ padding: 7px 15px;
932
+ transition: none;
933
+ opacity: 1 !important;
934
+ z-index: 99999 !important;
935
+ /* necessary to show up on top of rc drawer */ }
911
936
 
912
- .react-autoql-suggestion-btn {
913
- padding: 6px 14px;
914
- background: transparent;
915
- font-family: inherit;
937
+ .interpretation-tooltip {
938
+ font-family: var(--react-autoql-font-family), sans-serif;
916
939
  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; }
925
-
926
- .react-autoql-suggestion-btn:hover {
927
- border-color: transparent;
928
- color: white;
929
- background: var(--react-autoql-accent-color); }
940
+ text-align: left;
941
+ letter-spacing: 0.04em;
942
+ padding: 7px 15px;
943
+ max-width: 400px;
944
+ opacity: 1 !important;
945
+ transition: none;
946
+ z-index: 99999 !important;
947
+ /* necessary to show up on top of rc drawer */ }
930
948
 
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; }
949
+ .react-autoql-condition-lock-menu {
950
+ color: var(--react-autoql-text-color-primary);
951
+ background: var(--react-autoql-background-color-primary); }
944
952
 
945
- .react-autoql-help-link-btn:hover {
946
- opacity: 0.7; }
953
+ .react-tiny-popover-container {
954
+ z-index: 9999;
955
+ border: 1px solid #ababab52;
956
+ border-radius: 4px;
957
+ box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
958
+ transition: opacity 0.2s ease 0s !important; }
947
959
 
948
- .react-autoql-help-link-icon {
949
- width: 15px;
950
- height: 15px;
951
- margin-bottom: -3px;
952
- margin-right: 3px; }
960
+ .clear-messages-confirm-popover {
961
+ color: var(--react-autoql-text-color-primary);
962
+ background: var(--react-autoql-background-color-primary);
963
+ text-align: right;
964
+ padding: 18px;
965
+ width: 266px; }
953
966
 
954
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
955
- color: var(--react-autoql-success-color); }
967
+ .react-autoql-confirm-text {
968
+ text-align: center; }
956
969
 
957
- .react-autoql-suggestion-message {
958
- height: 100%;
959
- width: 100%;
960
- word-break: break-word; }
970
+ .react-autoql-menu-text {
971
+ text-align: center; }
972
+ .react-autoql-menu-text:hover {
973
+ color: var(--react-autoql-accent-color);
974
+ cursor: pointer; }
961
975
 
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; }
976
+ .react-autoql-confirm-icon {
977
+ color: #faad14 !important;
978
+ vertical-align: middle;
979
+ margin-right: 5px !important;
980
+ margin-bottom: 3px; }
974
981
 
975
- .no-columns-error-message {
982
+ .data-messenger-tab-container {
976
983
  position: absolute;
977
- height: 100%;
978
- width: 100%;
984
+ background: transparent;
979
985
  display: flex;
980
986
  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); }
987
+ align-items: center;
988
+ pointer-events: none; }
989
+ .data-messenger-tab-container.right {
990
+ height: 100vh;
991
+ width: 60px;
992
+ left: -60px; }
993
+ .data-messenger-tab-container.left {
994
+ height: 100vh;
995
+ width: 60px;
996
+ right: -60px; }
997
+ .data-messenger-tab-container.top {
998
+ width: 100vw;
999
+ height: 60px;
1000
+ bottom: -60px; }
1001
+ .data-messenger-tab-container.bottom {
1002
+ width: 100vw;
1003
+ height: 60px;
1004
+ top: -60px; }
1040
1005
 
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); }
1006
+ /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
1007
+ .page-switcher-shadow-container {
1008
+ position: absolute;
1009
+ background: transparent;
1010
+ overflow: hidden; }
1056
1011
 
1057
- .react-autoql-query-validation-delete-button {
1058
- position: relative;
1059
- cursor: pointer;
1060
- margin-bottom: -2px; }
1012
+ .page-switcher-shadow-container.right {
1013
+ top: 80px;
1014
+ width: 60px; }
1061
1015
 
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 */ }
1016
+ .page-switcher-shadow-container.left {
1017
+ top: 80px;
1018
+ width: 60px; }
1073
1019
 
1074
- .single-value-response {
1075
- color: inherit;
1076
- cursor: unset; }
1077
- .single-value-response:hover {
1078
- color: inherit; }
1020
+ /* Container holding the tabs */
1021
+ .page-switcher-container {
1022
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
1023
+ overflow: hidden;
1024
+ box-sizing: border-box;
1025
+ display: flex;
1026
+ pointer-events: all; }
1027
+ .page-switcher-container .tab {
1028
+ position: relative;
1029
+ z-index: 1;
1030
+ background: var(--react-autoql-accent-color);
1031
+ color: #fff;
1032
+ opacity: 1;
1033
+ font-size: 22px;
1034
+ text-align: center;
1035
+ transform: translate(0, 0);
1036
+ cursor: pointer;
1037
+ transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
1038
+ transition-duration: 0.2s; }
1039
+ .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
1040
+ height: 22px;
1041
+ width: 23px; }
1042
+ .page-switcher-container.right {
1043
+ border-top-left-radius: 5px;
1044
+ border-bottom-left-radius: 5px;
1045
+ margin-top: 20px;
1046
+ margin-left: 20px;
1047
+ margin-bottom: 20px;
1048
+ flex-direction: column; }
1049
+ .page-switcher-container.right .tab {
1050
+ box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
1051
+ .page-switcher-container.left {
1052
+ border-top-right-radius: 5px;
1053
+ border-bottom-right-radius: 5px;
1054
+ margin-top: 20px;
1055
+ margin-right: 20px;
1056
+ margin-bottom: 20px;
1057
+ margin-left: -5px;
1058
+ flex-direction: column; }
1059
+ .page-switcher-container.left .tab {
1060
+ box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
1061
+ .page-switcher-container.top {
1062
+ border-bottom-right-radius: 5px;
1063
+ border-bottom-left-radius: 5px;
1064
+ margin-right: 20px;
1065
+ margin-left: 20px;
1066
+ margin-bottom: 20px;
1067
+ flex-direction: row;
1068
+ height: 40px; }
1069
+ .page-switcher-container.top .tab {
1070
+ box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
1071
+ .page-switcher-container.bottom {
1072
+ border-top-left-radius: 5px;
1073
+ border-top-right-radius: 5px;
1074
+ margin-top: 20px;
1075
+ margin-left: 20px;
1076
+ margin-right: 20px;
1077
+ flex-direction: row;
1078
+ height: 40px; }
1079
+ .page-switcher-container.bottom .tab {
1080
+ box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
1079
1081
 
1080
- .single-value-response.with-drilldown:hover {
1081
- color: inherit;
1082
- text-decoration: underline;
1083
- font-weight: 600;
1084
- cursor: pointer; }
1082
+ /* Individual Tabs */
1083
+ .page-switcher-container .tab {
1084
+ display: flex;
1085
+ justify-content: center;
1086
+ align-items: center; }
1085
1087
 
1086
- .react-autoql-query-validation-container {
1087
- width: 100%; }
1088
+ .data-messenger-notification-btn {
1089
+ display: flex;
1090
+ flex-direction: column;
1091
+ justify-content: flex-start;
1092
+ line-height: inherit; }
1088
1093
 
1089
- .react-autoql-query-validation-description {
1090
- margin-bottom: 14px; }
1094
+ .page-switcher-container.right .tab,
1095
+ .page-switcher-container.left .tab {
1096
+ height: 65px; }
1091
1097
 
1092
- .context-menu {
1093
- background: var(--react-autoql-background-color-primary);
1094
- /* height: 100px; */
1095
- width: 150px;
1096
- padding: 10px 0; }
1098
+ .page-switcher-container.top .tab,
1099
+ .page-switcher-container.bottom .tab {
1100
+ width: 65px; }
1097
1101
 
1098
- .context-menu-list {
1099
- list-style-type: none;
1100
- width: 100%;
1101
- margin: 0;
1102
- padding: 0; }
1102
+ .page-switcher-container.bottom .tab {
1103
+ background: var(--react-autoql-background-color-secondary);
1104
+ color: var(--react-autoql-text-color-primary); }
1103
1105
 
1104
- .context-menu-list li {
1106
+ .page-switcher-container .tab.active {
1107
+ background: var(--react-autoql-background-color-secondary);
1105
1108
  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 {
1109
+ box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
1110
+ font-weight: bold;
1116
1111
  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; }
1112
+ z-index: 2; }
1140
1113
 
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; }
1114
+ .page-switcher-container.bottom .tab.active {
1115
+ background: var(--react-autoql-accent-color);
1116
+ color: #fff;
1117
+ font-weight: bold; }
1149
1118
 
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; }
1119
+ /* animations */
1120
+ @-webkit-keyframes response-loading1 {
1121
+ 0% {
1122
+ transform: scale(0); }
1123
+ 100% {
1124
+ transform: scale(1); } }
1125
+ @keyframes response-loading1 {
1126
+ 0% {
1127
+ transform: scale(0); }
1128
+ 100% {
1129
+ transform: scale(1); } }
1160
1130
 
1161
- .react-autoql-dashboard-container {
1162
- background: var(--react-autoql-background-color-secondary);
1163
- height: 100%;
1164
- width: 100%;
1165
- overflow: hidden; }
1131
+ @-webkit-keyframes response-loading3 {
1132
+ 0% {
1133
+ transform: scale(1); }
1134
+ 100% {
1135
+ transform: scale(0); } }
1166
1136
 
1167
- .react-autoql-dashboard-container.edit-mode {
1168
- padding-bottom: 200px; }
1137
+ @keyframes response-loading3 {
1138
+ 0% {
1139
+ transform: scale(1); }
1140
+ 100% {
1141
+ transform: scale(0); } }
1169
1142
 
1170
- .dashboard-drilldown-modal .ReactModal__Content {
1171
- top: unset !important;
1172
- margin-top: 20px !important;
1173
- max-height: 93vh !important; }
1143
+ @-webkit-keyframes response-loading2 {
1144
+ 0% {
1145
+ transform: translate(0, 0); }
1146
+ 100% {
1147
+ transform: translate(19px, 0); } }
1174
1148
 
1175
- .dashboard-drilldown-modal .react-autoql-modal-body {
1176
- padding: 0; }
1149
+ @keyframes response-loading2 {
1150
+ 0% {
1151
+ transform: translate(0, 0); }
1152
+ 100% {
1153
+ transform: translate(19px, 0); } }
1177
1154
 
1178
- .dashboard-drilldown-modal .react-autoql-table {
1179
- opacity: 0.9;
1180
- font-size: 11px; }
1155
+ @-webkit-keyframes scale-up-center {
1156
+ 0% {
1157
+ transform: scale(0); }
1158
+ 100% {
1159
+ transform: scale(1); } }
1181
1160
 
1182
- .dashboard-drilldown-modal .splitter-layout {
1183
- height: calc(100% - 55px); }
1161
+ @keyframes scale-up-center {
1162
+ 0% {
1163
+ transform: scale(0); }
1164
+ 100% {
1165
+ transform: scale(1); } }
1184
1166
 
1185
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1186
- padding: 20px;
1187
- padding-bottom: 10px; }
1167
+ @-webkit-keyframes fadeIn {
1168
+ 0% {
1169
+ opacity: 0; }
1170
+ 100% {
1171
+ opacity: 1; } }
1188
1172
 
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; }
1173
+ @keyframes fadeIn {
1174
+ 0% {
1175
+ opacity: 0; }
1176
+ 100% {
1177
+ opacity: 1; } }
1201
1178
 
1202
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1203
- padding: 20px;
1204
- padding-top: 10px;
1205
- overflow: hidden;
1206
- height: 100%; }
1179
+ @-webkit-keyframes slideDown {
1180
+ 0% {
1181
+ transform: translateY(-100%); }
1182
+ 100% {
1183
+ transform: translateY(0%); } }
1207
1184
 
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%; }
1185
+ @keyframes slideDown {
1186
+ 0% {
1187
+ transform: translateY(-100%); }
1188
+ 100% {
1189
+ transform: translateY(0%); } }
1216
1190
 
1217
- .empty-dashboard-new-tile-btn {
1218
- color: var(--react-autoql-accent-color);
1219
- font-weight: bold;
1220
- cursor: pointer; }
1191
+ @-webkit-keyframes snackbarFadein {
1192
+ from {
1193
+ top: 30px;
1194
+ opacity: 0; }
1195
+ to {
1196
+ top: 60px;
1197
+ opacity: 1; } }
1221
1198
 
1222
- .notification-rule-outer-container {
1223
- position: relative;
1224
- border: 1px solid transparent;
1225
- border-radius: 4px;
1226
- padding-bottom: 5px; }
1199
+ @keyframes snackbarFadein {
1200
+ from {
1201
+ top: 30px;
1202
+ opacity: 0; }
1203
+ to {
1204
+ top: 60px;
1205
+ opacity: 1; } }
1227
1206
 
1228
- .expression-error-message {
1229
- padding-left: 5px; }
1207
+ @-webkit-keyframes snackbarFadeout {
1208
+ from {
1209
+ top: 60px;
1210
+ opacity: 1; }
1211
+ to {
1212
+ top: 30px;
1213
+ opacity: 0; } }
1230
1214
 
1231
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1232
- border: none; }
1215
+ @keyframes snackbarFadeout {
1216
+ from {
1217
+ top: 60px;
1218
+ opacity: 1; }
1219
+ to {
1220
+ top: 30px;
1221
+ opacity: 0; } }
1233
1222
 
1234
1223
  .react-autoql-dashboard .react-grid-item {
1235
1224
  background: var(--react-autoql-background-color-primary, #fff);
@@ -1727,99 +1716,6 @@ span.react-autoql-icon {
1727
1716
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
1728
1717
  background: inherit; }
1729
1718
 
1730
- .react-autoql-notification-settings {
1731
- background-color: var(--react-autoql-background-color-secondary);
1732
- color: var(--react-autoql-text-color-primary);
1733
- padding-top: 20px;
1734
- height: 100%; }
1735
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1736
- margin: 20px;
1737
- margin-top: 10px;
1738
- border-radius: 4px;
1739
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1740
- background-color: var(--react-autoql-background-color-primary);
1741
- overflow: hidden; }
1742
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1743
- height: 55px;
1744
- line-height: 55px;
1745
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1746
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1747
- margin-right: 10px;
1748
- cursor: pointer; }
1749
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1750
- padding-right: 20px;
1751
- font-size: 17px;
1752
- opacity: 1;
1753
- cursor: pointer;
1754
- color: var(--react-autoql-accent-color); }
1755
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1756
- background: rgba(0, 0, 0, 0.01); }
1757
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1758
- opacity: 0;
1759
- margin-right: 20px;
1760
- font-size: 16px;
1761
- transition: all 0.2s ease;
1762
- color: var(--react-autoql-text-color-primary);
1763
- cursor: pointer; }
1764
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1765
- color: var(--react-autoql-accent-color);
1766
- opacity: 1 !important; }
1767
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1768
- opacity: 0.5; }
1769
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1770
- display: flex;
1771
- justify-content: space-between;
1772
- height: 56px;
1773
- padding-left: 25px;
1774
- padding-right: 8px;
1775
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1776
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1777
- margin-bottom: 4px;
1778
- margin-right: 8px; }
1779
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1780
- margin-bottom: 4px;
1781
- margin-right: 8px;
1782
- opacity: 0.5;
1783
- pointer-events: none; }
1784
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1785
- display: flex;
1786
- justify-content: space-between;
1787
- align-items: center;
1788
- padding: 5px 20px;
1789
- padding-bottom: 0;
1790
- color: var(--react-autoql-text-color-primary); }
1791
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1792
- display: inline-block;
1793
- height: 35px;
1794
- width: 35px;
1795
- border-radius: 20px;
1796
- background: var(--react-autoql-accent-color, #26a7df);
1797
- color: white;
1798
- line-height: 38px;
1799
- text-align: center;
1800
- font-size: 20px;
1801
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1802
- transition: all 0.2s ease;
1803
- margin-right: 5px;
1804
- cursor: pointer; }
1805
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1806
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1807
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1808
- white-space: nowrap;
1809
- overflow: hidden;
1810
- text-overflow: ellipsis;
1811
- padding-right: 10px; }
1812
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1813
- opacity: 0.5; }
1814
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1815
- vertical-align: middle;
1816
- margin-bottom: 4px;
1817
- height: 18px; }
1818
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1819
- display: flex;
1820
- align-items: center;
1821
- margin-top: -25px; }
1822
-
1823
1719
  .react-autoql-notifications-button-container {
1824
1720
  position: relative;
1825
1721
  display: inline-block;
@@ -1853,103 +1749,135 @@ span.react-autoql-icon {
1853
1749
  left: 0.5em;
1854
1750
  top: -2px; }
1855
1751
 
1856
- .notification-list-loading-container {
1857
- text-align: center;
1858
- padding-top: 100px;
1859
- color: var(--react-autoql-text-color-primary);
1860
- height: 100%;
1861
- overflow: hidden;
1862
- background: var(--react-autoql-background-color-secondary); }
1863
-
1864
- .empty-notifications-message {
1865
- color: var(--react-autoql-text-color-primary);
1866
- text-align: center;
1867
- margin-top: 75px; }
1868
- .empty-notifications-message div {
1869
- opacity: 0.6; }
1870
- .empty-notifications-message .empty-notifications-title {
1871
- font-size: 16px;
1872
- font-weight: bold;
1873
- margin-bottom: 5px; }
1874
- .empty-notifications-message .empty-notifications-img {
1875
- width: 250px;
1876
- height: 250px; }
1877
-
1878
- .react-autoql-notification-list-container {
1879
- height: 100%;
1880
- padding: 20px;
1881
- overflow-y: auto;
1882
- background: var(--react-autoql-background-color-secondary); }
1883
-
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; }
1895
-
1896
- .react-autoql-notification-display-name-input {
1897
- width: 100%; }
1898
-
1899
- .react-autoql-notification-message-input {
1900
- width: 100%; }
1901
-
1902
- .react-autoql-notification-list-item:nth-of-type(0) {
1903
- -webkit-animation-delay: 0s;
1904
- animation-delay: 0s; }
1905
-
1906
- .react-autoql-notification-list-item:nth-of-type(1) {
1907
- -webkit-animation-delay: 0.1s;
1908
- animation-delay: 0.1s; }
1909
-
1910
- .react-autoql-notification-list-item:nth-of-type(2) {
1911
- -webkit-animation-delay: 0.2s;
1912
- animation-delay: 0.2s; }
1913
-
1914
- .react-autoql-notification-list-item:nth-of-type(3) {
1915
- -webkit-animation-delay: 0.3s;
1916
- animation-delay: 0.3s; }
1752
+ .notification-rule-outer-container {
1753
+ position: relative;
1754
+ border: 1px solid transparent;
1755
+ border-radius: 4px;
1756
+ padding-bottom: 5px; }
1917
1757
 
1918
- .react-autoql-notification-list-item:nth-of-type(4) {
1919
- -webkit-animation-delay: 0.4s;
1920
- animation-delay: 0.4s; }
1758
+ .expression-error-message {
1759
+ padding-left: 5px; }
1921
1760
 
1922
- .react-autoql-notification-list-item:nth-of-type(5) {
1923
- -webkit-animation-delay: 0.5s;
1924
- animation-delay: 0.5s; }
1761
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1762
+ border: none; }
1925
1763
 
1926
- .react-autoql-notification-list-item:nth-of-type(6) {
1927
- -webkit-animation-delay: 0.6s;
1928
- animation-delay: 0.6s; }
1764
+ .notification-modal-content .react-autoql-step-content p {
1765
+ margin-bottom: 0.5em;
1766
+ margin-top: 0.5em;
1767
+ padding-left: 8px; }
1929
1768
 
1930
- .react-autoql-notification-list-item:nth-of-type(7) {
1931
- -webkit-animation-delay: 0.7s;
1932
- animation-delay: 0.7s; }
1769
+ .notification-modal-content .step-btn-container {
1770
+ text-align: right;
1771
+ display: flex;
1772
+ min-height: 50px; }
1933
1773
 
1934
- .react-autoql-notification-list-item:nth-of-type(8) {
1935
- -webkit-animation-delay: 0.8s;
1936
- animation-delay: 0.8s; }
1774
+ .expression-valid-checkmark.react-autoql-icon svg {
1775
+ color: var(--react-autoql-success-color); }
1937
1776
 
1938
- .react-autoql-notification-list-item:nth-of-type(9) {
1939
- -webkit-animation-delay: 0.9s;
1940
- animation-delay: 0.9s; }
1777
+ .expression-invalid-message-container {
1778
+ max-width: 75%;
1779
+ float: left;
1780
+ text-align: left !important;
1781
+ display: flex;
1782
+ flex-direction: row;
1783
+ align-items: left;
1784
+ justify-content: left; }
1941
1785
 
1942
- .react-autoql-notification-list-item:nth-of-type(10) {
1943
- -webkit-animation-delay: 1s;
1944
- animation-delay: 1s; }
1786
+ .expression-invalid-message {
1787
+ color: var(--react-autoql-danger-color);
1788
+ display: 'inline-block'; }
1945
1789
 
1946
- @-webkit-keyframes slideIn {
1947
- 0% {
1948
- opacity: 0;
1949
- top: 500px; }
1950
- 100% {
1951
- opacity: 1;
1952
- top: 0; } }
1790
+ .react-autoql-notification-settings {
1791
+ background-color: var(--react-autoql-background-color-secondary);
1792
+ color: var(--react-autoql-text-color-primary);
1793
+ padding-top: 20px;
1794
+ height: 100%; }
1795
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1796
+ margin: 20px;
1797
+ margin-top: 10px;
1798
+ border-radius: 4px;
1799
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1800
+ background-color: var(--react-autoql-background-color-primary);
1801
+ overflow: hidden; }
1802
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1803
+ height: 55px;
1804
+ line-height: 55px;
1805
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1806
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1807
+ margin-right: 10px;
1808
+ cursor: pointer; }
1809
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1810
+ padding-right: 20px;
1811
+ font-size: 17px;
1812
+ opacity: 1;
1813
+ cursor: pointer;
1814
+ color: var(--react-autoql-accent-color); }
1815
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1816
+ background: rgba(0, 0, 0, 0.01); }
1817
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1818
+ opacity: 0;
1819
+ margin-right: 20px;
1820
+ font-size: 16px;
1821
+ transition: all 0.2s ease;
1822
+ color: var(--react-autoql-text-color-primary);
1823
+ cursor: pointer; }
1824
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1825
+ color: var(--react-autoql-accent-color);
1826
+ opacity: 1 !important; }
1827
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1828
+ opacity: 0.5; }
1829
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1830
+ display: flex;
1831
+ justify-content: space-between;
1832
+ height: 56px;
1833
+ padding-left: 25px;
1834
+ padding-right: 8px;
1835
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1836
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1837
+ margin-bottom: 4px;
1838
+ margin-right: 8px; }
1839
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1840
+ margin-bottom: 4px;
1841
+ margin-right: 8px;
1842
+ opacity: 0.5;
1843
+ pointer-events: none; }
1844
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1845
+ display: flex;
1846
+ justify-content: space-between;
1847
+ align-items: center;
1848
+ padding: 5px 20px;
1849
+ padding-bottom: 0;
1850
+ color: var(--react-autoql-text-color-primary); }
1851
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1852
+ display: inline-block;
1853
+ height: 35px;
1854
+ width: 35px;
1855
+ border-radius: 20px;
1856
+ background: var(--react-autoql-accent-color, #26a7df);
1857
+ color: white;
1858
+ line-height: 38px;
1859
+ text-align: center;
1860
+ font-size: 20px;
1861
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1862
+ transition: all 0.2s ease;
1863
+ margin-right: 5px;
1864
+ cursor: pointer; }
1865
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1866
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1867
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1868
+ white-space: nowrap;
1869
+ overflow: hidden;
1870
+ text-overflow: ellipsis;
1871
+ padding-right: 10px; }
1872
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1873
+ opacity: 0.5; }
1874
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1875
+ vertical-align: middle;
1876
+ height: 18px; }
1877
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1878
+ display: flex;
1879
+ align-items: center;
1880
+ margin-top: -25px; }
1953
1881
 
1954
1882
  .react-autoql-notification-list-item {
1955
1883
  display: flex;
@@ -2168,6 +2096,33 @@ span.react-autoql-icon {
2168
2096
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2169
2097
  margin-bottom: -1px; }
2170
2098
 
2099
+ .react-autoql-step-container a {
2100
+ color: var(--react-autoql-accent-color, #26a7df); }
2101
+
2102
+ .frequency-date-select-container {
2103
+ margin-top: 10px; }
2104
+
2105
+ .notification-frequency-step {
2106
+ display: flex; }
2107
+ .notification-frequency-step .frequency-category-select {
2108
+ position: relative;
2109
+ padding-top: 9px; }
2110
+ .notification-frequency-step .notification-frequency-select {
2111
+ margin-left: 8px; }
2112
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
2113
+ line-height: 33px; }
2114
+ .notification-frequency-step .frequency-repeat-follow-text {
2115
+ line-height: 32px;
2116
+ vertical-align: top; }
2117
+ .notification-frequency-step .frequency-settings-container {
2118
+ flex: 0 1 400px; }
2119
+
2120
+ .schedule-builder-timezone-section {
2121
+ margin: 10px 5px; }
2122
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
2123
+ display: inline-block;
2124
+ width: 300px; }
2125
+
2171
2126
  .notification-rule-add-btn-outer,
2172
2127
  .notification-rule-validate-btn-outer {
2173
2128
  text-align: center;
@@ -2198,58 +2153,183 @@ span.react-autoql-icon {
2198
2153
  .data-alerts-container.read-only .react-autoql-notification-group-container {
2199
2154
  border: none; }
2200
2155
 
2201
- .notification-modal-content .react-autoql-step-content p {
2202
- margin-bottom: 0.5em;
2203
- margin-top: 0.5em;
2204
- padding-left: 8px; }
2156
+ .notification-list-loading-container {
2157
+ text-align: center;
2158
+ padding-top: 100px;
2159
+ color: var(--react-autoql-text-color-primary);
2160
+ height: 100%;
2161
+ overflow: hidden;
2162
+ background: var(--react-autoql-background-color-secondary); }
2205
2163
 
2206
- .notification-modal-content .step-btn-container {
2164
+ .empty-notifications-message {
2165
+ color: var(--react-autoql-text-color-primary);
2166
+ text-align: center;
2167
+ margin-top: 75px; }
2168
+ .empty-notifications-message div {
2169
+ opacity: 0.6; }
2170
+ .empty-notifications-message .empty-notifications-title {
2171
+ font-size: 16px;
2172
+ font-weight: bold;
2173
+ margin-bottom: 5px; }
2174
+ .empty-notifications-message .empty-notifications-img {
2175
+ width: 250px;
2176
+ height: 250px; }
2177
+
2178
+ .react-autoql-notification-list-container {
2179
+ height: 100%;
2180
+ padding: 20px;
2181
+ overflow-y: auto;
2182
+ background: var(--react-autoql-background-color-secondary); }
2183
+
2184
+ .react-autoql-notification-dismiss-all {
2207
2185
  text-align: right;
2208
- display: flex;
2209
- min-height: 50px; }
2186
+ margin-bottom: 12px;
2187
+ padding-right: 10px;
2188
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2189
+ transition: color 0.1s ease; }
2190
+ .react-autoql-notification-dismiss-all span {
2191
+ opacity: 0.8;
2192
+ cursor: pointer; }
2193
+ .react-autoql-notification-dismiss-all span:hover {
2194
+ opacity: 1; }
2210
2195
 
2211
- .expression-valid-checkmark.react-autoql-icon svg {
2212
- color: var(--react-autoql-success-color); }
2196
+ .react-autoql-notification-display-name-input {
2197
+ width: 100%; }
2213
2198
 
2214
- .expression-invalid-message-container {
2215
- max-width: 75%;
2216
- float: left;
2217
- text-align: left !important;
2199
+ .react-autoql-notification-message-input {
2200
+ width: 100%; }
2201
+
2202
+ .react-autoql-notification-list-item:nth-of-type(0) {
2203
+ -webkit-animation-delay: 0s;
2204
+ animation-delay: 0s; }
2205
+
2206
+ .react-autoql-notification-list-item:nth-of-type(1) {
2207
+ -webkit-animation-delay: 0.1s;
2208
+ animation-delay: 0.1s; }
2209
+
2210
+ .react-autoql-notification-list-item:nth-of-type(2) {
2211
+ -webkit-animation-delay: 0.2s;
2212
+ animation-delay: 0.2s; }
2213
+
2214
+ .react-autoql-notification-list-item:nth-of-type(3) {
2215
+ -webkit-animation-delay: 0.3s;
2216
+ animation-delay: 0.3s; }
2217
+
2218
+ .react-autoql-notification-list-item:nth-of-type(4) {
2219
+ -webkit-animation-delay: 0.4s;
2220
+ animation-delay: 0.4s; }
2221
+
2222
+ .react-autoql-notification-list-item:nth-of-type(5) {
2223
+ -webkit-animation-delay: 0.5s;
2224
+ animation-delay: 0.5s; }
2225
+
2226
+ .react-autoql-notification-list-item:nth-of-type(6) {
2227
+ -webkit-animation-delay: 0.6s;
2228
+ animation-delay: 0.6s; }
2229
+
2230
+ .react-autoql-notification-list-item:nth-of-type(7) {
2231
+ -webkit-animation-delay: 0.7s;
2232
+ animation-delay: 0.7s; }
2233
+
2234
+ .react-autoql-notification-list-item:nth-of-type(8) {
2235
+ -webkit-animation-delay: 0.8s;
2236
+ animation-delay: 0.8s; }
2237
+
2238
+ .react-autoql-notification-list-item:nth-of-type(9) {
2239
+ -webkit-animation-delay: 0.9s;
2240
+ animation-delay: 0.9s; }
2241
+
2242
+ .react-autoql-notification-list-item:nth-of-type(10) {
2243
+ -webkit-animation-delay: 1s;
2244
+ animation-delay: 1s; }
2245
+
2246
+ @-webkit-keyframes slideIn {
2247
+ 0% {
2248
+ opacity: 0;
2249
+ top: 500px; }
2250
+ 100% {
2251
+ opacity: 1;
2252
+ top: 0; } }
2253
+
2254
+ .ReactModal__Overlay {
2255
+ background-color: transparent !important;
2256
+ transition: background-color 0.2s ease-in-out;
2257
+ z-index: 9999; }
2258
+
2259
+ .ReactModal__Overlay--after-open {
2260
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2261
+
2262
+ .ReactModal__Overlay--before-close {
2263
+ background-color: transparent !important; }
2264
+
2265
+ .ReactModal__Content {
2218
2266
  display: flex;
2219
- flex-direction: row;
2220
- align-items: left;
2221
- justify-content: left; }
2267
+ flex-direction: column;
2268
+ transform: scale(0);
2269
+ transition: all 0.2s ease-in-out;
2270
+ color: var(--react-autoql-text-color-primary);
2271
+ border: 1px solid var(--react-autoql-border-color) !important;
2272
+ background: var(--react-autoql-background-color-primary) !important;
2273
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2274
+ padding: 0 !important;
2275
+ margin: auto auto;
2276
+ max-width: 90vw;
2277
+ max-height: calc(100vh - 90px); }
2278
+ .ReactModal__Content input.react-autoql-input,
2279
+ .ReactModal__Content textarea.react-autoql-input,
2280
+ .ReactModal__Content textarea {
2281
+ border-color: var(--react-autoql-border-color);
2282
+ color: var(--react-autoql-text-color-primary);
2283
+ background: var(--react-autoql-background-color-primary, white); }
2284
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2285
+ color: var(--react-autoql-text-color-placeholder); }
2286
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2287
+ color: var(--react-autoql-text-color-placeholder); }
2288
+ .ReactModal__Content input.react-autoql-input::placeholder,
2289
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2290
+ .ReactModal__Content textarea::placeholder {
2291
+ color: var(--react-autoql-text-color-placeholder); }
2222
2292
 
2223
- .expression-invalid-message {
2224
- color: var(--react-autoql-danger-color);
2225
- display: 'inline-block'; }
2293
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2294
+ transform: scale(1); }
2295
+
2296
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2297
+ transform: scale(0); }
2298
+
2299
+ .react-autoql-modal-header {
2300
+ position: relative;
2301
+ text-align: center;
2302
+ flex: 0 0 52px;
2303
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2304
+ padding: 14px 60px;
2305
+ font-size: 16px; }
2226
2306
 
2227
- .react-autoql-step-container a {
2228
- color: var(--react-autoql-accent-color, #26a7df); }
2307
+ .react-autoql-modal-footer {
2308
+ position: relative;
2309
+ flex: 0 0 52px;
2310
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2311
+ text-align: right;
2312
+ padding: 8px 10px; }
2229
2313
 
2230
- .frequency-date-select-container {
2231
- margin-top: 10px; }
2314
+ .react-autoql-modal-body {
2315
+ display: flex;
2316
+ flex-direction: column;
2317
+ padding: 25px;
2318
+ flex: 1;
2319
+ overflow: hidden; }
2320
+ .react-autoql-modal-body h3 {
2321
+ color: var(--react-autoql-text-color-primary); }
2232
2322
 
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; }
2323
+ .react-autoql-modal-close-btn {
2324
+ position: absolute !important;
2325
+ top: 10px;
2326
+ right: 18px;
2327
+ font-size: 22px;
2328
+ opacity: 0.6 !important;
2329
+ cursor: pointer; }
2247
2330
 
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; }
2331
+ .react-autoql-modal-close-btn:hover {
2332
+ opacity: 1 !important; }
2253
2333
 
2254
2334
  .react-autoql-btn {
2255
2335
  border-radius: 4px;
@@ -2295,227 +2375,209 @@ span.react-autoql-icon {
2295
2375
  background-color: var(--react-autoql-danger-color, #ca0b00);
2296
2376
  color: #fff; }
2297
2377
 
2298
- .chat-single-message-container {
2299
- transition: background-color 0.2s ease;
2300
- padding-top: 6px; }
2301
- .chat-single-message-container:first-of-type {
2302
- margin-top: 10px; }
2303
- .chat-single-message-container .query-more-btn {
2304
- transition: all 0.3s ease;
2305
- font-size: 22px;
2306
- padding: 13px;
2307
- margin-bottom: 6px;
2308
- height: 42px;
2309
- opacity: 0;
2310
- visibility: hidden;
2311
- cursor: pointer; }
2312
- .chat-single-message-container .query-more-btn:hover {
2313
- opacity: 1; }
2314
-
2315
- .chat-condition-item-container {
2316
- position: absolute;
2317
- background: inherit;
2318
- bottom: 0px;
2319
- padding: 5px;
2320
- border-radius: 6px; }
2321
-
2322
- .chat-condition-item {
2323
- background: none !important;
2324
- border: none;
2325
- margin-top: -20px !important;
2326
- padding: 0 !important;
2327
- font-family: var(--react-autoql-font-family);
2328
- color: var(--react-autoql-accent-color);
2329
- text-decoration: underline;
2330
- cursor: pointer; }
2378
+ .react-autoql-table-container {
2379
+ height: 100%;
2380
+ max-width: 100%;
2381
+ background-color: inherit; }
2331
2382
 
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; }
2383
+ .react-autoql-table {
2384
+ margin-bottom: 0; }
2338
2385
 
2339
- .chat-single-message-container.request {
2340
- display: flex;
2341
- justify-content: flex-end;
2342
- padding-right: 20px;
2343
- -webkit-animation: scale-up-br 0.6s ease;
2344
- animation: scale-up-br 0.6s ease; }
2386
+ /* tabulator */
2387
+ .react-autoql-table.tabulator,
2388
+ .react-autoql-table.tabulator .tabulator-row,
2389
+ .react-autoql-table.tabulator .tabulator-header,
2390
+ .react-autoql-table.tabulator .tabulator-headers,
2391
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2392
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2393
+ background-color: inherit; }
2345
2394
 
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; }
2395
+ .react-autoql-table-container.supports-drilldown
2396
+ .react-autoql-table.tabulator
2397
+ .tabulator-row.tabulator-unselectable:hover {
2398
+ cursor: pointer !important;
2399
+ background-color: var(--react-autoql-hover-color) !important; }
2359
2400
 
2360
- .chat-single-message-container .chat-message-bubble.text {
2361
- max-width: 85%; }
2401
+ .react-autoql-table.tabulator
2402
+ .tabulator-header
2403
+ .tabulator-col.tabulator-sortable:hover {
2404
+ background-color: var(--react-autoql-hover-color) !important; }
2362
2405
 
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; }
2406
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2407
+ .react-autoql-table.tabulator .tabulator-cell {
2408
+ border-color: var(--react-autoql-border-color); }
2367
2409
 
2368
- .chat-single-message-container.response .chat-message-bubble.active {
2369
- border: 1px solid #c3c3c3; }
2410
+ .react-autoql-table.tabulator .tabulator-header {
2411
+ border-bottom: 2px solid var(--react-autoql-border-color); }
2370
2412
 
2371
- .chat-single-message-container.response .chat-message-bubble {
2372
- background: var(--react-autoql-background-color-primary);
2373
- color: var(--react-autoql-text-color-primary);
2374
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2413
+ .react-autoql-table.tabulator {
2414
+ background-color: inherit;
2415
+ height: 100%; }
2375
2416
 
2376
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2377
- min-width: 125px; }
2417
+ .react-autoql-table .tabulator-row {
2418
+ /* user-select: none; This breaks copy/paste */
2419
+ border-bottom: 1px solid var(--react-autoql-border-color); }
2378
2420
 
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); }
2421
+ .tabulator-cell:not(:first-child) {
2422
+ border-left: 1px solid !important;
2423
+ border-color: rgba(0, 0, 0, 0.06) !important; }
2383
2424
 
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; }
2425
+ .react-autoql-table .tabulator-tableHolder {
2426
+ max-height: calc(100% - 38px) !important;
2427
+ background-color: inherit; }
2388
2428
 
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); }
2429
+ .react-autoql-table.tabulator
2430
+ .tabulator-header
2431
+ .tabulator-col
2432
+ .tabulator-col-content {
2433
+ padding: 8px 5px; }
2401
2434
 
2402
- .chat-message-toolbar.right {
2403
- right: -9px; }
2435
+ .react-autoql-table.tabulator
2436
+ .tabulator-header
2437
+ .tabulator-col
2438
+ .tabulator-col-content
2439
+ .tabulator-arrow {
2440
+ opacity: 0;
2441
+ border-left: 4px solid transparent !important;
2442
+ border-right: 4px solid transparent !important;
2443
+ right: 4px;
2444
+ top: calc(50% - 3px); }
2404
2445
 
2405
- .chat-message-toolbar.left {
2406
- left: -9px; }
2446
+ .react-autoql-table.tabulator
2447
+ .tabulator-header
2448
+ .tabulator-col:hover
2449
+ .tabulator-col-content
2450
+ .tabulator-arrow {
2451
+ opacity: 1 !important; }
2407
2452
 
2408
- .chat-message-bubble:hover .chat-message-toolbar,
2409
- .chat-message-bubble .chat-message-toolbar.active {
2410
- display: block; }
2453
+ .react-autoql-table.tabulator
2454
+ .tabulator-header
2455
+ .tabulator-col.tabulator-sortable[aria-sort='desc']
2456
+ .tabulator-col-content
2457
+ .tabulator-arrow {
2458
+ border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2411
2459
 
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; }
2460
+ .react-autoql-table.tabulator
2461
+ .tabulator-header
2462
+ .tabulator-col.tabulator-sortable[aria-sort='asc']
2463
+ .tabulator-col-content
2464
+ .tabulator-arrow,
2465
+ .react-autoql-table.tabulator
2466
+ .tabulator-header
2467
+ .tabulator-col.tabulator-sortable[aria-sort='none']
2468
+ .tabulator-col-content
2469
+ .tabulator-arrow {
2470
+ border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2418
2471
 
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; }
2472
+ .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2473
+ display: unset;
2474
+ opacity: 0;
2475
+ background-color: transparent;
2476
+ width: 7px;
2477
+ height: 7px;
2478
+ -webkit-transition: all 0.3s ease;
2479
+ transition: all 0.3s ease; }
2425
2480
 
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; }
2481
+ .react-autoql-table.tabulator .tabulator-tableHolder {
2482
+ min-height: calc(100% - 40px) !important;
2483
+ height: calc(100% - 40px) !important;
2484
+ max-height: calc(100% - 40px) !important; }
2432
2485
 
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; }
2486
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2487
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2488
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2489
+ background-color: transparent; }
2439
2490
 
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; }
2491
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2492
+ background-color: rgba(0, 0, 0, 0.2);
2493
+ border-radius: 7px;
2494
+ border: 0px; }
2447
2495
 
2448
- .interpretation-icon {
2449
- vertical-align: top;
2450
- height: 26px;
2451
- margin: 0 3px;
2452
- font-size: 18px; }
2496
+ .react-autoql-table .tabulator-header-filter input {
2497
+ border: 1px solid var(--react-autoql-border-color);
2498
+ border-radius: 4px;
2499
+ background: transparent;
2500
+ padding: 4px 9px !important;
2501
+ outline: none !important; }
2453
2502
 
2454
- /* Chart icon styles */
2455
- .chart-icon-svg-0,
2456
- .react-autoql-icon-svg-0 {
2457
- fill: currentColor; }
2503
+ .react-autoql-table .tabulator-header-filter input:focus {
2504
+ border: 1px solid #28a8e0; }
2458
2505
 
2459
- .hm0 {
2460
- opacity: 0.5;
2461
- fill: currentColor;
2462
- enable-background: new; }
2506
+ /* These are necessary because we are always rendering the
2507
+ filter (just display: none when not used) instead of re-rendering
2508
+ the whole table when the filter button is clicked */
2509
+ .react-autoql-table-container:not(.filtering)
2510
+ .react-autoql-table
2511
+ .tabulator-header-filter {
2512
+ display: none; }
2463
2513
 
2464
- .hm1 {
2465
- fill: currentColor; }
2514
+ .react-autoql-table-container:not(.filtering)
2515
+ .react-autoql-table
2516
+ .tabulator-col {
2517
+ height: auto !important; }
2466
2518
 
2467
- .hm2 {
2468
- opacity: 0.15;
2469
- fill: currentColor;
2470
- enable-background: new; }
2519
+ .tabulator-table .tabulator-row .tabulator-cell {
2520
+ min-height: 38px; }
2471
2521
 
2472
- .hm3 {
2473
- opacity: 0.6;
2474
- fill: currentColor;
2475
- enable-background: new; }
2522
+ /* Center header titles */
2523
+ .react-autoql-table .tabulator-header .tabulator-col {
2524
+ text-align: center !important; }
2476
2525
 
2477
- .hm4 {
2478
- opacity: 0.65;
2479
- fill: currentColor;
2480
- enable-background: new; }
2526
+ .react-autoql-table .tabulator-header .tabulator-col-title {
2527
+ padding-left: 10px !important;
2528
+ padding-right: 10px !important; }
2481
2529
 
2482
- .hm5 {
2483
- fill: currentColor; }
2530
+ .filter-tag {
2531
+ color: #2ecc40;
2532
+ border: 1px solid;
2533
+ padding: 2px 4px;
2534
+ border-radius: 4px;
2535
+ font-weight: 400;
2536
+ font-size: 10px;
2537
+ margin-right: 5px;
2538
+ vertical-align: top;
2539
+ line-height: 21px; }
2484
2540
 
2485
- .hm6 {
2486
- fill: currentColor; }
2541
+ .comparison-value-positive {
2542
+ color: #2ecc40; }
2487
2543
 
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%; } }
2544
+ .comparison-value-negative {
2545
+ color: #e80000; }
2503
2546
 
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%; } }
2547
+ .autoql-options-toolbar {
2548
+ position: absolute;
2549
+ background: inherit;
2550
+ padding: 5px;
2551
+ border-radius: 6px;
2552
+ line-height: 28px;
2553
+ background: var(--react-autoql-background-color-primary);
2554
+ border: 1px solid var(--react-autoql-border-color); }
2555
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2556
+ display: block; }
2557
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2558
+ color: var(--react-autoql-accent-color); }
2511
2559
 
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%; } }
2560
+ .copy-sql-modal-content {
2561
+ position: relative;
2562
+ height: 60vh; }
2563
+ .copy-sql-modal-content .copy-sql-formatted-text {
2564
+ height: 100%;
2565
+ width: 100%;
2566
+ padding: 10px;
2567
+ resize: none;
2568
+ background: var(--react-autoql-background-color-secondary); }
2569
+ .copy-sql-modal-content .copy-sql-btn {
2570
+ color: var(--react-autoql-text-color);
2571
+ background-color: var(--react-autoql-background-color-primary);
2572
+ position: absolute;
2573
+ top: 3px;
2574
+ right: 0;
2575
+ opacity: 0;
2576
+ transition: opacity 0.3s ease; }
2577
+ .copy-sql-modal-content .sql-copied {
2578
+ color: var(--react-autoql-success-color) !important; }
2579
+ .copy-sql-modal-content:hover .copy-sql-btn {
2580
+ opacity: 1; }
2519
2581
 
2520
2582
  .query-tips-page-container {
2521
2583
  height: 100%;
@@ -2689,497 +2751,435 @@ so we dont have to redraw the whole table */
2689
2751
  100% {
2690
2752
  opacity: 1; } }
2691
2753
 
2692
- .react-autoql-cascader {
2693
- position: relative;
2694
- white-space: nowrap;
2695
- overflow: hidden;
2696
- min-width: 300px; }
2697
- .react-autoql-cascader .options-container {
2698
- transition: max-width 0.3s ease;
2699
- display: inline-block;
2700
- vertical-align: top;
2701
- padding: 0 10px;
2702
- margin: 10px 0;
2703
- width: 100%;
2704
- max-width: calc(100% - 20px);
2705
- white-space: pre-wrap; }
2706
- .react-autoql-cascader .options-container.hidden {
2707
- max-width: 0; }
2708
- .react-autoql-cascader .options-container.hidden span {
2709
- white-space: nowrap; }
2710
- .react-autoql-cascader .options-container.hidden .option {
2711
- opacity: 0;
2712
- pointer-events: none; }
2713
- .react-autoql-cascader .options-container .options-title {
2714
- padding: 4px;
2715
- padding-left: 10px;
2716
- font-weight: 600; }
2717
- .react-autoql-cascader .options-container .cascader-back-arrow {
2718
- position: absolute;
2719
- cursor: pointer;
2720
- top: 15px;
2721
- left: 0; }
2722
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2723
- opacity: 0.8; }
2724
- .react-autoql-cascader .options-container .option {
2725
- cursor: pointer;
2726
- padding: 4px;
2727
- display: flex;
2728
- justify-content: space-between;
2729
- border-radius: 2px;
2730
- padding-left: 10px; }
2731
- .react-autoql-cascader .options-container .option .option-arrow {
2732
- opacity: 0.7; }
2733
- .react-autoql-cascader .options-container .option .option-execute-icon {
2734
- opacity: 0;
2735
- color: #fff;
2736
- font-size: 16px;
2737
- vertical-align: middle; }
2738
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2739
- background-color: var(--react-autoql-accent-color, #26a7df);
2740
- color: #fff; }
2741
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2742
- opacity: 1; }
2743
- .react-autoql-cascader .options-container:not(:last-child) {
2744
- border-right: 1px solid #d3d3d352; }
2745
-
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;
2754
+ .chat-single-message-container {
2755
+ transition: background-color 0.2s ease;
2756
+ padding-top: 6px; }
2757
+ .chat-single-message-container:first-of-type {
2758
+ margin-top: 10px; }
2759
+ .chat-single-message-container .query-more-btn {
2760
+ transition: all 0.3s ease;
2761
+ font-size: 22px;
2762
+ padding: 13px;
2763
+ margin-bottom: 6px;
2764
+ height: 42px;
2765
+ opacity: 0;
2766
+ visibility: hidden;
2785
2767
  cursor: pointer; }
2786
- .react-autoql-accept-conditions-button span:hover {
2768
+ .chat-single-message-container .query-more-btn:hover {
2787
2769
  opacity: 1; }
2788
2770
 
2789
- .condition-table tr {
2790
- cursor: pointer; }
2791
- .condition-table tr:hover {
2792
- background: var(--react-autoql-accent-color);
2793
- color: white; }
2794
-
2795
- .condition-table td {
2796
- text-align: left;
2797
- padding: 4px;
2798
- margin: 0 10px 0 10px;
2799
- padding-left: 10px; }
2800
-
2801
- .condition-list {
2802
- padding: 0;
2803
- margin: 0 auto; }
2804
-
2805
- .condition-list-item {
2806
- cursor: pointer;
2807
- padding: 4px;
2808
- margin: 0 10px 0 10px;
2809
- 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; }
2816
-
2817
- .empty-condition-list {
2818
- text-align: center;
2819
- padding: 4px;
2820
- margin: 0 20px 0 20px; }
2771
+ .chat-condition-item-container {
2772
+ position: absolute;
2773
+ background: inherit;
2774
+ bottom: 0px;
2775
+ padding: 5px;
2776
+ border-radius: 6px; }
2821
2777
 
2822
- .autoql-close-button {
2823
- background-color: inherit;
2778
+ .chat-condition-item {
2779
+ background: none !important;
2824
2780
  border: none;
2825
- text-align: left;
2826
- font-size: 20px;
2827
- margin-top: -20px;
2828
- float: none !important;
2829
- color: inherit; }
2781
+ margin-top: -20px !important;
2782
+ padding: 0 !important;
2783
+ font-family: var(--react-autoql-font-family);
2784
+ color: var(--react-autoql-accent-color);
2785
+ text-decoration: underline;
2786
+ cursor: pointer; }
2830
2787
 
2831
- .react-tiny-popover-container {
2832
- background: var(--react-autoql-background-color-primary); }
2788
+ .chat-single-message-container.response {
2789
+ display: flex;
2790
+ justify-content: flex-start;
2791
+ padding-left: 20px;
2792
+ -webkit-animation: scale-up-bl 0.6s ease;
2793
+ animation: scale-up-bl 0.6s ease; }
2833
2794
 
2834
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2835
- flex-grow: 1;
2836
- display: inline;
2837
- width: 90%;
2838
- height: 100%; }
2795
+ .chat-single-message-container.request {
2796
+ display: flex;
2797
+ justify-content: flex-end;
2798
+ padding-right: 20px;
2799
+ -webkit-animation: scale-up-br 0.6s ease;
2800
+ animation: scale-up-br 0.6s ease; }
2839
2801
 
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;
2802
+ .chat-single-message-container .chat-message-bubble {
2803
+ position: relative;
2804
+ padding: 13px;
2805
+ border-radius: 10px;
2806
+ max-width: calc(100% - 20px);
2807
+ word-wrap: break-word;
2847
2808
  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; }
2860
-
2861
- .autoql-condition-locking-menu-container
2862
- .react-autosuggest__suggestions-container--open {
2863
- background-color: var(--react-autoql-background-color-primary);
2864
- border: 1px solid var(--react-autoql-border-color);
2865
- color: var(--react-autoql-text-color-primary); }
2866
-
2867
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2868
- color: var(--react-autoql-text-color-primary); }
2809
+ font-size: 14px;
2810
+ letter-spacing: 0.04em;
2811
+ box-sizing: border-box;
2812
+ /* make small margin on bottom because sometimes react
2813
+ custom scrollbar cuts off a pixel or 2 at the bottom */
2814
+ margin-bottom: 6px; }
2869
2815
 
2870
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2871
- opacity: 0.5; }
2816
+ .chat-single-message-container .chat-message-bubble.text {
2817
+ max-width: 85%; }
2872
2818
 
2873
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2874
- opacity: 0.5; }
2819
+ .chat-single-message-container .chat-message-bubble.full-width {
2820
+ width: calc(100% - 20px) !important;
2821
+ min-width: calc(100% - 20px) !important;
2822
+ max-width: calc(100% - 20px) !important; }
2875
2823
 
2876
- .autoql-condition-locking-menu-container input::placeholder {
2877
- opacity: 0.5; }
2824
+ .chat-single-message-container.response .chat-message-bubble.active {
2825
+ border: 1px solid #c3c3c3; }
2878
2826
 
2879
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2880
- margin: 0;
2881
- padding: 0;
2882
- list-style-type: none; }
2827
+ .chat-single-message-container.response .chat-message-bubble {
2828
+ background: var(--react-autoql-background-color-primary);
2829
+ color: var(--react-autoql-text-color-primary);
2830
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2883
2831
 
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; }
2832
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2833
+ min-width: 125px; }
2890
2834
 
2891
- .autoql-condition-locking-menu-container
2892
- .react-autosuggest__suggestion--highlighted {
2893
- background-color: rgba(0, 0, 0, 0.1) !important; }
2835
+ .chat-single-message-container.request .chat-message-bubble {
2836
+ background: var(--react-autoql-accent-color);
2837
+ color: white;
2838
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2894
2839
 
2895
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2896
- padding: 10px 0 0 10px;
2897
- font-size: 12px;
2898
- color: #777; }
2840
+ /* Increase height of message to include table filters,
2841
+ so we dont have to redraw the whole table */
2842
+ .chat-single-message-container.response.filtering-table {
2843
+ max-height: calc(85% + 35px) !important; }
2899
2844
 
2900
- .react-autoql-table-container {
2901
- height: 100%;
2902
- max-width: 100%;
2903
- background-color: inherit; }
2845
+ .chat-message-toolbar,
2846
+ .chat-message-toolbar.autoql-options-toolbar {
2847
+ display: none;
2848
+ position: absolute;
2849
+ background: inherit;
2850
+ top: -31px;
2851
+ padding: 5px;
2852
+ border-radius: 6px;
2853
+ line-height: 28px;
2854
+ background: var(--react-autoql-background-color-primary);
2855
+ border: 1px solid var(--react-autoql-border-color);
2856
+ color: var(--react-autoql-accent-color); }
2904
2857
 
2905
- .react-autoql-table {
2906
- margin-bottom: 0; }
2858
+ .chat-message-toolbar.right {
2859
+ right: -9px; }
2907
2860
 
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; }
2861
+ .chat-message-toolbar.left {
2862
+ left: -9px; }
2916
2863
 
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; }
2864
+ .chat-message-bubble:hover .chat-message-toolbar,
2865
+ .chat-message-bubble .chat-message-toolbar.active {
2866
+ display: block; }
2922
2867
 
2923
- .react-autoql-table.tabulator
2924
- .tabulator-header
2925
- .tabulator-col.tabulator-sortable:hover {
2926
- background-color: var(--react-autoql-hover-color) !important; }
2868
+ .report-problem-text-area {
2869
+ border-radius: 4px;
2870
+ border: 1px solid rgba(0, 0, 0, 0.15);
2871
+ margin-top: 10px;
2872
+ padding: 5px 10px;
2873
+ outline: none !important; }
2927
2874
 
2928
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2929
- .react-autoql-table.tabulator .tabulator-cell {
2930
- border-color: var(--react-autoql-border-color); }
2875
+ .data-limit-warning-icon {
2876
+ color: var(--react-autoql-warning-color) !important;
2877
+ position: absolute !important;
2878
+ bottom: 2px;
2879
+ right: 4px;
2880
+ font-size: 20px; }
2931
2881
 
2932
- .react-autoql-table.tabulator .tabulator-header {
2933
- border-bottom: 2px solid var(--react-autoql-border-color); }
2882
+ .condition-info-icon-left-align {
2883
+ color: var(--react-autoql-accent-color) !important;
2884
+ position: absolute !important;
2885
+ bottom: 2px;
2886
+ right: 10px;
2887
+ font-size: 20px; }
2934
2888
 
2935
- .react-autoql-table.tabulator {
2936
- background-color: inherit;
2937
- height: 100%; }
2889
+ .condition-info-icon {
2890
+ color: var(--react-autoql-accent-color) !important;
2891
+ position: absolute !important;
2892
+ bottom: 2px;
2893
+ right: 4px;
2894
+ font-size: 20px; }
2938
2895
 
2939
- .react-autoql-table .tabulator-row {
2940
- /* user-select: none; This breaks copy/paste */
2941
- border-bottom: 1px solid var(--react-autoql-border-color); }
2896
+ .more-options-menu,
2897
+ .report-problem-menu {
2898
+ background: var(--react-autoql-background-color-primary);
2899
+ padding: 10px 0; }
2900
+ .more-options-menu span.react-autoql-icon svg,
2901
+ .report-problem-menu span.react-autoql-icon svg {
2902
+ margin-right: 3px; }
2942
2903
 
2943
- .tabulator-cell:not(:first-child) {
2944
- border-left: 1px solid !important;
2945
- border-color: rgba(0, 0, 0, 0.06) !important; }
2904
+ .interpretation-icon {
2905
+ vertical-align: top;
2906
+ height: 26px;
2907
+ margin: 0 3px;
2908
+ font-size: 18px; }
2946
2909
 
2947
- .react-autoql-table .tabulator-tableHolder {
2948
- max-height: calc(100% - 38px) !important;
2949
- background-color: inherit; }
2910
+ /* Chart icon styles */
2911
+ .chart-icon-svg-0,
2912
+ .react-autoql-icon-svg-0 {
2913
+ fill: currentColor; }
2950
2914
 
2951
- .react-autoql-table.tabulator
2952
- .tabulator-header
2953
- .tabulator-col
2954
- .tabulator-col-content {
2955
- padding: 8px 5px; }
2915
+ .hm0 {
2916
+ opacity: 0.5;
2917
+ fill: currentColor;
2918
+ enable-background: new; }
2956
2919
 
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); }
2920
+ .hm1 {
2921
+ fill: currentColor; }
2967
2922
 
2968
- .react-autoql-table.tabulator
2969
- .tabulator-header
2970
- .tabulator-col:hover
2971
- .tabulator-col-content
2972
- .tabulator-arrow {
2973
- opacity: 1 !important; }
2923
+ .hm2 {
2924
+ opacity: 0.15;
2925
+ fill: currentColor;
2926
+ enable-background: new; }
2974
2927
 
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; }
2928
+ .hm3 {
2929
+ opacity: 0.6;
2930
+ fill: currentColor;
2931
+ enable-background: new; }
2981
2932
 
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; }
2933
+ .hm4 {
2934
+ opacity: 0.65;
2935
+ fill: currentColor;
2936
+ enable-background: new; }
2993
2937
 
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; }
2938
+ .hm5 {
2939
+ fill: currentColor; }
3002
2940
 
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; }
2941
+ .hm6 {
2942
+ fill: currentColor; }
3007
2943
 
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; }
2944
+ /* animations */
2945
+ @-webkit-keyframes scale-up-br {
2946
+ 0% {
2947
+ transform: scale(0.5);
2948
+ transform-origin: 100% 100%; }
2949
+ 100% {
2950
+ transform: scale(1);
2951
+ transform-origin: 100% 100%; } }
2952
+ @keyframes scale-up-br {
2953
+ 0% {
2954
+ transform: scale(0.5);
2955
+ transform-origin: 100% 100%; }
2956
+ 100% {
2957
+ transform: scale(1);
2958
+ transform-origin: 100% 100%; } }
3012
2959
 
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; }
2960
+ @-webkit-keyframes scale-up-bl {
2961
+ 0% {
2962
+ transform: scale(0.5);
2963
+ transform-origin: 0% 100%; }
2964
+ 100% {
2965
+ transform: scale(1);
2966
+ transform-origin: 0% 100%; } }
3017
2967
 
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; }
2968
+ @keyframes scale-up-bl {
2969
+ 0% {
2970
+ transform: scale(0.5);
2971
+ transform-origin: 0% 100%; }
2972
+ 100% {
2973
+ transform: scale(1);
2974
+ transform-origin: 0% 100%; } }
3024
2975
 
3025
- .react-autoql-table .tabulator-header-filter input:focus {
3026
- border: 1px solid #28a8e0; }
2976
+ .react-autoql-cascader {
2977
+ position: relative;
2978
+ white-space: nowrap;
2979
+ overflow: hidden;
2980
+ min-width: 300px; }
2981
+ .react-autoql-cascader .options-container {
2982
+ transition: max-width 0.3s ease;
2983
+ display: inline-block;
2984
+ vertical-align: top;
2985
+ padding: 0 10px;
2986
+ margin: 10px 0;
2987
+ width: 100%;
2988
+ max-width: calc(100% - 20px);
2989
+ white-space: pre-wrap; }
2990
+ .react-autoql-cascader .options-container.hidden {
2991
+ max-width: 0; }
2992
+ .react-autoql-cascader .options-container.hidden span {
2993
+ white-space: nowrap; }
2994
+ .react-autoql-cascader .options-container.hidden .option {
2995
+ opacity: 0;
2996
+ pointer-events: none; }
2997
+ .react-autoql-cascader .options-container .options-title {
2998
+ padding: 4px;
2999
+ padding-left: 10px;
3000
+ font-weight: 600; }
3001
+ .react-autoql-cascader .options-container .cascader-back-arrow {
3002
+ position: absolute;
3003
+ cursor: pointer;
3004
+ top: 15px;
3005
+ left: 0; }
3006
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
3007
+ opacity: 0.8; }
3008
+ .react-autoql-cascader .options-container .option {
3009
+ cursor: pointer;
3010
+ padding: 4px;
3011
+ display: flex;
3012
+ justify-content: space-between;
3013
+ border-radius: 2px;
3014
+ padding-left: 10px; }
3015
+ .react-autoql-cascader .options-container .option .option-arrow {
3016
+ opacity: 0.7; }
3017
+ .react-autoql-cascader .options-container .option .option-execute-icon {
3018
+ opacity: 0;
3019
+ color: #fff;
3020
+ font-size: 16px;
3021
+ vertical-align: middle; }
3022
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
3023
+ background-color: var(--react-autoql-accent-color, #26a7df);
3024
+ color: #fff; }
3025
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
3026
+ opacity: 1; }
3027
+ .react-autoql-cascader .options-container:not(:last-child) {
3028
+ border-right: 1px solid #d3d3d352; }
3027
3029
 
3028
- /* These are necessary because we are always rendering the
3029
- filter (just display: none when not used) instead of re-rendering
3030
- the whole table when the filter button is clicked */
3031
- .react-autoql-table-container:not(.filtering)
3032
- .react-autoql-table
3033
- .tabulator-header-filter {
3034
- display: none; }
3030
+ .react-autoql-condition-locking-input {
3031
+ padding: 5px;
3032
+ padding-left: 20px;
3033
+ margin: 10px;
3034
+ height: 32px;
3035
+ box-sizing: border-box;
3036
+ border-radius: 24px;
3037
+ font-size: 12px;
3038
+ font-family: inherit;
3039
+ letter-spacing: 0.04em;
3040
+ outline: none !important;
3041
+ width: calc(100% - 60px);
3042
+ font-family: inherit;
3043
+ /* Default styles outside of data messenger */
3044
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3045
+ background: var(--react-autoql-background-color-primary);
3046
+ color: #5d5d5d; }
3035
3047
 
3036
- .react-autoql-table-container:not(.filtering)
3037
- .react-autoql-table
3038
- .tabulator-col {
3039
- height: auto !important; }
3048
+ .condition-table {
3049
+ min-width: 95%;
3050
+ margin: 10px auto; }
3040
3051
 
3041
- .tabulator-table .tabulator-row .tabulator-cell {
3042
- min-height: 38px; }
3052
+ .condition-table thead {
3053
+ padding-left: 10px; }
3043
3054
 
3044
- /* Center header titles */
3045
- .react-autoql-table .tabulator-header .tabulator-col {
3046
- text-align: center !important; }
3055
+ .condition-table th {
3056
+ text-align: left;
3057
+ padding: 4px;
3058
+ margin: 0 10px 0 10px;
3059
+ font-weight: 800; }
3047
3060
 
3048
- .react-autoql-table .tabulator-header .tabulator-col-title {
3049
- padding-left: 10px !important;
3050
- padding-right: 10px !important; }
3061
+ .react-autoql-accept-conditions-button {
3062
+ text-align: right;
3063
+ margin-bottom: 12px;
3064
+ padding-right: 10px;
3065
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
3066
+ transition: color 0.1s ease; }
3067
+ .react-autoql-accept-conditions-button span {
3068
+ opacity: 0.8;
3069
+ cursor: pointer; }
3070
+ .react-autoql-accept-conditions-button span:hover {
3071
+ opacity: 1; }
3051
3072
 
3052
- .filter-tag {
3053
- color: #2ecc40;
3054
- border: 1px solid;
3055
- padding: 2px 4px;
3056
- border-radius: 4px;
3057
- font-weight: 400;
3058
- font-size: 10px;
3059
- margin-right: 5px;
3060
- vertical-align: top;
3061
- line-height: 21px; }
3073
+ .condition-table tr {
3074
+ cursor: pointer; }
3075
+ .condition-table tr:hover {
3076
+ background: var(--react-autoql-accent-color);
3077
+ color: white; }
3078
+
3079
+ .condition-table td {
3080
+ text-align: left;
3081
+ padding: 4px;
3082
+ margin: 0 10px 0 10px;
3083
+ padding-left: 10px; }
3062
3084
 
3063
- .comparison-value-positive {
3064
- color: #2ecc40; }
3085
+ .condition-list {
3086
+ padding: 0;
3087
+ margin: 0 auto; }
3065
3088
 
3066
- .comparison-value-negative {
3067
- color: #e80000; }
3089
+ .condition-list-item {
3090
+ cursor: pointer;
3091
+ padding: 4px;
3092
+ margin: 0 10px 0 10px;
3093
+ display: flex;
3094
+ justify-content: space-between;
3095
+ border-radius: 2px;
3096
+ padding-left: 10px; }
3097
+ .condition-list-item:hover {
3098
+ background: var(--react-autoql-accent-color);
3099
+ color: white; }
3068
3100
 
3069
- .ReactModal__Overlay {
3070
- background-color: transparent !important;
3071
- transition: background-color 0.2s ease-in-out;
3072
- z-index: 9999; }
3101
+ .empty-condition-list {
3102
+ text-align: center;
3103
+ padding: 4px;
3104
+ margin: 0 20px 0 20px; }
3073
3105
 
3074
- .ReactModal__Overlay--after-open {
3075
- background-color: rgba(0, 0, 0, 0.25) !important; }
3106
+ .autoql-close-button {
3107
+ background-color: inherit;
3108
+ border: none;
3109
+ text-align: left;
3110
+ font-size: 20px;
3111
+ margin-top: -20px;
3112
+ float: none !important;
3113
+ color: inherit; }
3076
3114
 
3077
- .ReactModal__Overlay--before-close {
3078
- background-color: transparent !important; }
3115
+ .react-tiny-popover-container {
3116
+ background: var(--react-autoql-background-color-primary); }
3079
3117
 
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); }
3118
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
3119
+ flex-grow: 1;
3120
+ display: inline;
3121
+ width: 90%;
3122
+ height: 100%; }
3107
3123
 
3108
- .ReactModal__Overlay--after-open .ReactModal__Content {
3109
- transform: scale(1); }
3124
+ .autoql-condition-locking-menu-container
3125
+ .react-autosuggest__suggestions-container--open {
3126
+ position: absolute;
3127
+ overflow-y: scroll !important;
3128
+ padding-top: 5px;
3129
+ padding-bottom: 5px;
3130
+ display: block;
3131
+ font-family: inherit;
3132
+ font-size: 15px;
3133
+ font-weight: normal;
3134
+ z-index: 2;
3135
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3136
+ text-align: left;
3137
+ width: 95%;
3138
+ top: 35px;
3139
+ border-radius: 4px;
3140
+ margin: 10px auto;
3141
+ height: auto;
3142
+ max-height: 50vh;
3143
+ overflow-y: auto; }
3110
3144
 
3111
- .ReactModal__Overlay--before-close .ReactModal__Content {
3112
- transform: scale(0); }
3145
+ .autoql-condition-locking-menu-container
3146
+ .react-autosuggest__suggestions-container--open {
3147
+ background-color: var(--react-autoql-background-color-primary);
3148
+ border: 1px solid var(--react-autoql-border-color);
3149
+ color: var(--react-autoql-text-color-primary); }
3113
3150
 
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; }
3151
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3152
+ color: var(--react-autoql-text-color-primary); }
3121
3153
 
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; }
3154
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
3155
+ opacity: 0.5; }
3128
3156
 
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); }
3157
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3158
+ opacity: 0.5; }
3137
3159
 
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; }
3160
+ .autoql-condition-locking-menu-container input::placeholder {
3161
+ opacity: 0.5; }
3145
3162
 
3146
- .react-autoql-modal-close-btn:hover {
3147
- opacity: 1 !important; }
3163
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3164
+ margin: 0;
3165
+ padding: 0;
3166
+ list-style-type: none; }
3148
3167
 
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); }
3168
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3169
+ cursor: pointer;
3170
+ padding: 2px;
3171
+ padding-left: 18px;
3172
+ letter-spacing: 0.05em;
3173
+ line-height: 22.5px; }
3161
3174
 
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 {
3182
- opacity: 1; }
3175
+ .autoql-condition-locking-menu-container
3176
+ .react-autosuggest__suggestion--highlighted {
3177
+ background-color: rgba(0, 0, 0, 0.1) !important; }
3178
+
3179
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3180
+ padding: 10px 0 0 10px;
3181
+ font-size: 12px;
3182
+ color: #777; }
3183
3183
 
3184
3184
  .react-autoql-chart-container {
3185
3185
  position: relative;
@@ -3276,9 +3276,79 @@ the whole table when the filter button is clicked */
3276
3276
  .axis-selector-container .axis-selector-content li:hover {
3277
3277
  background: rgba(0, 0, 0, 0.05); }
3278
3278
 
3279
- .axis-selector-apply-btn {
3280
- background: var(--react-autoql-background-color-primary);
3281
- padding: 5px; }
3279
+ .axis-selector-apply-btn {
3280
+ background: var(--react-autoql-background-color-primary);
3281
+ padding: 5px; }
3282
+
3283
+
3284
+ .react-autoql-steps-container {
3285
+ margin: 10px; }
3286
+
3287
+ .react-autoql-step-container {
3288
+ position: relative;
3289
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3290
+ margin-left: 12px;
3291
+ padding-left: 20px;
3292
+ padding-bottom: 5px;
3293
+ transition: all 0.5s ease; }
3294
+ .react-autoql-step-container.complete {
3295
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3296
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3297
+ border-color: var(--react-autoql-accent-color, #26a7df);
3298
+ background: var(--react-autoql-accent-color, #26a7df);
3299
+ color: #fff; }
3300
+ .react-autoql-step-container.error {
3301
+ border-color: var(--react-autoql-warning-color); }
3302
+ .react-autoql-step-container.error .react-autoql-step-dot {
3303
+ border-color: var(--react-autoql-warning-color);
3304
+ background: var(--react-autoql-warning-color);
3305
+ color: white; }
3306
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3307
+ pointer-events: none;
3308
+ height: 10px;
3309
+ opacity: 0;
3310
+ margin: 0; }
3311
+
3312
+ .react-autoql-step-dot {
3313
+ position: absolute;
3314
+ top: 0;
3315
+ left: -10px;
3316
+ height: 20px;
3317
+ width: 20px;
3318
+ border-radius: 15px;
3319
+ background: var(--react-autoql-background-color-primary, #fff);
3320
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3321
+ transition: all 0.5s ease;
3322
+ font-size: 10.5px;
3323
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3324
+ text-align: center; }
3325
+
3326
+ .react-autoql-step-title-container:hover {
3327
+ cursor: pointer;
3328
+ transition: color 0.2s ease;
3329
+ color: var(--react-autoql-accent-color, #26a7df); }
3330
+
3331
+ .react-autoql-step-title {
3332
+ font-weight: 500;
3333
+ font-size: 15px;
3334
+ line-height: 15px;
3335
+ padding-top: 2px; }
3336
+
3337
+ .react-autoql-step-subtitle {
3338
+ font-size: 13px;
3339
+ padding-top: 6px;
3340
+ padding-bottom: 6px;
3341
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3342
+
3343
+ .react-autoql-step-content {
3344
+ margin: 15px;
3345
+ margin-top: 0; }
3346
+
3347
+ .react-autoql-step-content-container {
3348
+ transition-timing-function: ease;
3349
+ transition-property: height, opacity, margin;
3350
+ transition-duration: 0.5s;
3351
+ opacity: 1; }
3282
3352
 
3283
3353
  .viz-toolbar {
3284
3354
  position: absolute;
@@ -3494,76 +3564,6 @@ the whole table when the filter button is clicked */
3494
3564
  opacity: 1;
3495
3565
  color: var(--react-autoql-accent-color, #26a7df); }
3496
3566
 
3497
-
3498
- .react-autoql-steps-container {
3499
- margin: 10px; }
3500
-
3501
- .react-autoql-step-container {
3502
- position: relative;
3503
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3504
- margin-left: 12px;
3505
- padding-left: 20px;
3506
- padding-bottom: 5px;
3507
- transition: all 0.5s ease; }
3508
- .react-autoql-step-container.complete {
3509
- border-color: var(--react-autoql-accent-color, #26a7df); }
3510
- .react-autoql-step-container.complete .react-autoql-step-dot {
3511
- border-color: var(--react-autoql-accent-color, #26a7df);
3512
- background: var(--react-autoql-accent-color, #26a7df);
3513
- color: #fff; }
3514
- .react-autoql-step-container.error {
3515
- border-color: var(--react-autoql-warning-color); }
3516
- .react-autoql-step-container.error .react-autoql-step-dot {
3517
- border-color: var(--react-autoql-warning-color);
3518
- background: var(--react-autoql-warning-color);
3519
- color: white; }
3520
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3521
- pointer-events: none;
3522
- height: 10px;
3523
- opacity: 0;
3524
- margin: 0; }
3525
-
3526
- .react-autoql-step-dot {
3527
- position: absolute;
3528
- top: 0;
3529
- left: -10px;
3530
- height: 20px;
3531
- width: 20px;
3532
- border-radius: 15px;
3533
- background: var(--react-autoql-background-color-primary, #fff);
3534
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3535
- transition: all 0.5s ease;
3536
- font-size: 10.5px;
3537
- color: var(--react-autoql-text-color-placeholder, lightgray);
3538
- text-align: center; }
3539
-
3540
- .react-autoql-step-title-container:hover {
3541
- cursor: pointer;
3542
- transition: color 0.2s ease;
3543
- color: var(--react-autoql-accent-color, #26a7df); }
3544
-
3545
- .react-autoql-step-title {
3546
- font-weight: 500;
3547
- font-size: 15px;
3548
- line-height: 15px;
3549
- padding-top: 2px; }
3550
-
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)); }
3556
-
3557
- .react-autoql-step-content {
3558
- margin: 15px;
3559
- margin-top: 0; }
3560
-
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; }
3566
-
3567
3567
  .react-autoql-radio-btn-container {
3568
3568
  display: inline-block;
3569
3569
  border-radius: 4px; }
@@ -3629,182 +3629,65 @@ the whole table when the filter button is clicked */
3629
3629
  z-index: 2; }
3630
3630
  .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3631
3631
  border-top-left-radius: 4px;
3632
- border-bottom-left-radius: 4px;
3633
- margin-left: 0; }
3634
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3635
- border-top-right-radius: 4px;
3636
- border-bottom-right-radius: 4px; }
3637
-
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); }
3675
-
3676
- .read-only-rule-term {
3677
- display: inline-block;
3678
- border: 1px solid rgba(0, 0, 0, 0.06);
3679
- background: rgba(0, 0, 0, 0.02);
3680
- padding: 3px 7px;
3681
- line-height: 1.5em;
3682
- margin-right: 5px;
3683
- margin-bottom: 2px;
3684
- margin-top: 2px;
3685
- border-radius: 4px; }
3686
-
3687
- .expression-term-validation-error {
3688
- padding: 0 10px;
3689
- color: var(--react-autoql-warning-color); }
3690
-
3691
- .notification-read-only-group {
3692
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3693
- border-radius: 4px;
3694
- padding: 10px; }
3695
-
3696
- .notification-rule-add-group-btn {
3697
- display: inline-block;
3698
- height: 35px;
3699
- width: 35px;
3700
- border-radius: 20px;
3701
- background: var(--react-autoql-accent-color, #26a7df);
3702
- color: #fff;
3703
- line-height: 38px;
3704
- text-align: center;
3705
- font-size: 20px;
3706
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3707
- transition: all 0.2s ease;
3708
- margin-right: 5px;
3709
- cursor: pointer; }
3710
- .notification-rule-add-group-btn:hover {
3711
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
3712
-
3713
- .notification-group-wrapper {
3714
- position: relative;
3715
- margin-right: 0px;
3716
- margin-top: 20px;
3717
- margin-bottom: 10px; }
3718
- .notification-group-wrapper:first-of-type {
3719
- margin-top: 0; }
3720
- .notification-group-wrapper:last-of-type {
3721
- margin-bottom: 0; }
3722
- .notification-group-wrapper .notification-and-or-break {
3723
- position: absolute;
3724
- color: rgba(0, 0, 0, 0.4);
3725
- left: -35px;
3726
- border-left: 1px dashed var(--react-autoql-border-color, rgba(0, 0, 0, 0.15)); }
3727
- .notification-group-wrapper .notification-and-or-text {
3728
- width: 41px;
3729
- z-index: 999999;
3730
- position: absolute;
3731
- left: -21px;
3732
- top: -5px;
3733
- padding: 4px;
3734
- border-radius: 4px;
3735
- text-align: center;
3736
- font-size: 12px; }
3737
- .notification-group-wrapper .react-autoql-notification-group-container {
3738
- position: relative;
3739
- padding: 20px;
3740
- padding-top: 55px;
3741
- padding-bottom: 20px;
3742
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3743
- border-radius: 4px; }
3744
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn,
3745
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3746
- position: absolute;
3747
- height: 21px;
3748
- width: 21px;
3749
- border-radius: 10px;
3750
- border: 1px solid;
3751
- line-height: 22px;
3752
- text-align: center;
3753
- background: var(--react-autoql-background-color-primary, white);
3754
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.2));
3755
- transition: all 0.3s ease;
3756
- cursor: pointer; }
3757
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn span.react-autoql-icon svg,
3758
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn span.react-autoql-icon svg {
3759
- width: 15px;
3760
- height: 15px; }
3761
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn:hover,
3762
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn:hover {
3763
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6)); }
3764
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn {
3765
- bottom: -11px;
3766
- left: calc(50% - 10px); }
3767
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3768
- top: -10px;
3769
- right: -10px; }
3770
- .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-and-or-select {
3771
- display: block;
3772
- position: absolute;
3773
- margin: 0 auto;
3774
- padding: 0 10px;
3775
- background: inherit;
3776
- top: 16px;
3777
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.5)); }
3778
- .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container {
3779
- display: flex;
3780
- margin-top: 5px;
3781
- width: calc(100% - 25px); }
3782
- .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container .notification-rule-add-btn {
3783
- flex: 1;
3784
- text-align: center;
3785
- border-style: dashed;
3786
- height: 42px;
3787
- line-height: 29px;
3788
- margin-right: 0 !important;
3789
- background: inherit;
3790
- overflow: hidden; }
3791
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn {
3792
- display: inline-block;
3793
- height: 20px;
3794
- width: 20px;
3795
- border-radius: 20px;
3796
- margin-left: 5px;
3797
- line-height: 20px;
3798
- text-align: center;
3799
- font-size: 14px;
3800
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.2));
3801
- opacity: 0.5;
3802
- border: 1px solid;
3803
- transition: all 0.2s ease;
3804
- cursor: pointer; }
3805
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn:hover {
3806
- opacity: 1;
3807
- color: var(--react-autoql-accent-color); }
3632
+ border-bottom-left-radius: 4px;
3633
+ margin-left: 0; }
3634
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3635
+ border-top-right-radius: 4px;
3636
+ border-bottom-right-radius: 4px; }
3637
+
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); }
3675
+
3676
+ .read-only-rule-term {
3677
+ display: inline-block;
3678
+ border: 1px solid rgba(0, 0, 0, 0.06);
3679
+ background: rgba(0, 0, 0, 0.02);
3680
+ padding: 3px 7px;
3681
+ line-height: 1.5em;
3682
+ margin-right: 5px;
3683
+ margin-bottom: 2px;
3684
+ margin-top: 2px;
3685
+ border-radius: 4px; }
3686
+
3687
+ .expression-term-validation-error {
3688
+ padding: 0 10px;
3689
+ color: var(--react-autoql-warning-color); }
3690
+
3808
3691
 
3809
3692
  .spinner-loader {
3810
3693
  display: inline-block;
@@ -3836,46 +3719,6 @@ the whole table when the filter button is clicked */
3836
3719
  100% {
3837
3720
  transform: rotate(360deg); } }
3838
3721
 
3839
- .react-autoql-select {
3840
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3841
- border-radius: 4px;
3842
- background: var(--react-autoql-background-color-primary, white);
3843
- display: inline-block;
3844
- font-size: 13px;
3845
- line-height: 32px;
3846
- height: 34px;
3847
- margin: 0 3px;
3848
- padding: 0 11px;
3849
- color: var(--react-autoql-accent-color, #26a7df);
3850
- transition: all 0.2s ease;
3851
- cursor: pointer; }
3852
- .react-autoql-select:hover {
3853
- border-color: var(--react-autoql-accent-color, #26a7df); }
3854
-
3855
- .react-autoql-select-popup-container {
3856
- background: var(--react-autoql-background-color-primary, white);
3857
- padding: 10px 0;
3858
- max-height: 300px;
3859
- overflow-y: auto; }
3860
- .react-autoql-select-popup-container .react-autoql-select-option.active {
3861
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3862
- .react-autoql-select-popup-container .react-autoql-select-popup {
3863
- list-style-type: none;
3864
- width: 100%;
3865
- margin: 0;
3866
- padding: 0; }
3867
- .react-autoql-select-popup-container .react-autoql-select-popup li {
3868
- color: var(--react-autoql-text-color-primary);
3869
- width: 100%;
3870
- height: 35px;
3871
- line-height: 35px;
3872
- padding: 0 20px;
3873
- cursor: pointer; }
3874
- .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3875
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3876
-
3877
-
3878
-
3879
3722
  .slack-modal-error-container,
3880
3723
  .slack-modal-empty-list-message {
3881
3724
  display: flex;
@@ -4021,6 +3864,163 @@ the whole table when the filter button is clicked */
4021
3864
  .slack-channel-list-container .connect-channel-btn button {
4022
3865
  width: 200px; }
4023
3866
 
3867
+ .notification-read-only-group {
3868
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3869
+ border-radius: 4px;
3870
+ padding: 10px; }
3871
+
3872
+ .notification-rule-add-group-btn {
3873
+ display: inline-block;
3874
+ height: 35px;
3875
+ width: 35px;
3876
+ border-radius: 20px;
3877
+ background: var(--react-autoql-accent-color, #26a7df);
3878
+ color: #fff;
3879
+ line-height: 38px;
3880
+ text-align: center;
3881
+ font-size: 20px;
3882
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3883
+ transition: all 0.2s ease;
3884
+ margin-right: 5px;
3885
+ cursor: pointer; }
3886
+ .notification-rule-add-group-btn:hover {
3887
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
3888
+
3889
+ .notification-group-wrapper {
3890
+ position: relative;
3891
+ margin-right: 0px;
3892
+ margin-top: 20px;
3893
+ margin-bottom: 10px; }
3894
+ .notification-group-wrapper:first-of-type {
3895
+ margin-top: 0; }
3896
+ .notification-group-wrapper:last-of-type {
3897
+ margin-bottom: 0; }
3898
+ .notification-group-wrapper .notification-and-or-break {
3899
+ position: absolute;
3900
+ color: rgba(0, 0, 0, 0.4);
3901
+ left: -35px;
3902
+ border-left: 1px dashed var(--react-autoql-border-color, rgba(0, 0, 0, 0.15)); }
3903
+ .notification-group-wrapper .notification-and-or-text {
3904
+ width: 41px;
3905
+ z-index: 999999;
3906
+ position: absolute;
3907
+ left: -21px;
3908
+ top: -5px;
3909
+ padding: 4px;
3910
+ border-radius: 4px;
3911
+ text-align: center;
3912
+ font-size: 12px; }
3913
+ .notification-group-wrapper .react-autoql-notification-group-container {
3914
+ position: relative;
3915
+ padding: 20px;
3916
+ padding-top: 55px;
3917
+ padding-bottom: 20px;
3918
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3919
+ border-radius: 4px; }
3920
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn,
3921
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3922
+ position: absolute;
3923
+ height: 21px;
3924
+ width: 21px;
3925
+ border-radius: 10px;
3926
+ border: 1px solid;
3927
+ line-height: 22px;
3928
+ text-align: center;
3929
+ background: var(--react-autoql-background-color-primary, white);
3930
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.2));
3931
+ transition: all 0.3s ease;
3932
+ cursor: pointer; }
3933
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn span.react-autoql-icon svg,
3934
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn span.react-autoql-icon svg {
3935
+ width: 15px;
3936
+ height: 15px; }
3937
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn:hover,
3938
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn:hover {
3939
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6)); }
3940
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn {
3941
+ bottom: -11px;
3942
+ left: calc(50% - 10px); }
3943
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3944
+ top: -10px;
3945
+ right: -10px; }
3946
+ .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-and-or-select {
3947
+ display: block;
3948
+ position: absolute;
3949
+ margin: 0 auto;
3950
+ padding: 0 10px;
3951
+ background: inherit;
3952
+ top: 16px;
3953
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.5)); }
3954
+ .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container {
3955
+ display: flex;
3956
+ margin-top: 5px;
3957
+ width: calc(100% - 25px); }
3958
+ .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container .notification-rule-add-btn {
3959
+ flex: 1;
3960
+ text-align: center;
3961
+ border-style: dashed;
3962
+ height: 42px;
3963
+ line-height: 29px;
3964
+ margin-right: 0 !important;
3965
+ background: inherit;
3966
+ overflow: hidden; }
3967
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn {
3968
+ display: inline-block;
3969
+ height: 20px;
3970
+ width: 20px;
3971
+ border-radius: 20px;
3972
+ margin-left: 5px;
3973
+ line-height: 20px;
3974
+ text-align: center;
3975
+ font-size: 14px;
3976
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.2));
3977
+ opacity: 0.5;
3978
+ border: 1px solid;
3979
+ transition: all 0.2s ease;
3980
+ cursor: pointer; }
3981
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn:hover {
3982
+ opacity: 1;
3983
+ color: var(--react-autoql-accent-color); }
3984
+
3985
+
3986
+ .react-autoql-select {
3987
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3988
+ border-radius: 4px;
3989
+ background: var(--react-autoql-background-color-primary, white);
3990
+ display: inline-block;
3991
+ font-size: 13px;
3992
+ line-height: 32px;
3993
+ height: 34px;
3994
+ margin: 0 3px;
3995
+ padding: 0 11px;
3996
+ color: var(--react-autoql-accent-color, #26a7df);
3997
+ transition: all 0.2s ease;
3998
+ cursor: pointer; }
3999
+ .react-autoql-select:hover {
4000
+ border-color: var(--react-autoql-accent-color, #26a7df); }
4001
+
4002
+ .react-autoql-select-popup-container {
4003
+ background: var(--react-autoql-background-color-primary, white);
4004
+ padding: 10px 0;
4005
+ max-height: 300px;
4006
+ overflow-y: auto; }
4007
+ .react-autoql-select-popup-container .react-autoql-select-option.active {
4008
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4009
+ .react-autoql-select-popup-container .react-autoql-select-popup {
4010
+ list-style-type: none;
4011
+ width: 100%;
4012
+ margin: 0;
4013
+ padding: 0; }
4014
+ .react-autoql-select-popup-container .react-autoql-select-popup li {
4015
+ color: var(--react-autoql-text-color-primary);
4016
+ width: 100%;
4017
+ height: 35px;
4018
+ line-height: 35px;
4019
+ padding: 0 20px;
4020
+ cursor: pointer; }
4021
+ .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4022
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4023
+
4024
4024
  .react-autoql-list-item {
4025
4025
  padding: 0 20px;
4026
4026
  display: flex;