react-autoql 6.4.1 → 6.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -294,63 +294,170 @@ span.react-autoql-icon {
294
294
  100% {
295
295
  transform: rotate(360deg); } }
296
296
 
297
+ .react-autoql-month-range-picker {
298
+ font-size: 12px;
299
+ display: inline-flex;
300
+ flex-direction: column; }
301
+ .react-autoql-month-range-picker .react-autoql-month-picker-year {
302
+ box-sizing: inherit;
303
+ display: flex;
304
+ justify-content: space-between;
305
+ align-items: center;
306
+ flex: 0 0 60px; }
307
+ .react-autoql-month-range-picker .year-picker {
308
+ border: 0;
309
+ padding: 10px 30px 10px 10px;
310
+ border-radius: 4px;
311
+ outline: 0;
312
+ background: url("data:image/svg+xml;utf8,<svg width=%279px%27 height=%276px%27 viewBox=%270 0 9 6%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27><g id=%27Artboard%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27 transform=%27translate%28-636.000000, -171.000000%29%27 fill-opacity=%270.368716033%27><g id=%27input%27 transform=%27translate%28172.000000, 37.000000%29%27 fill=%27%230E242F%27 fill-rule=%27nonzero%27><g id=%27Group-9%27 transform=%27translate%28323.000000, 127.000000%29%27><path d=%27M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z%27 id=%27arrow%27></path></g></g></g></svg>") no-repeat;
313
+ background-position: right 8px center;
314
+ cursor: pointer;
315
+ text-align: center;
316
+ color: var(--react-autoql-text-color-primary);
317
+ -webkit-appearance: none;
318
+ -moz-appearance: none;
319
+ appearance: none; }
320
+ .react-autoql-month-range-picker .year-picker:hover {
321
+ background-color: var(--react-autoql-border-color); }
322
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker {
323
+ padding-bottom: 20px;
324
+ padding-left: 5px;
325
+ padding-right: 5px; }
326
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-row {
327
+ display: flex;
328
+ justify-content: center; }
329
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month {
330
+ cursor: pointer;
331
+ margin: 2px 0px;
332
+ padding: 1px 0px;
333
+ border-top: 1px solid var(--react-autoql-background-color-secondary);
334
+ border-bottom: 1px solid var(--react-autoql-background-color-secondary); }
335
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month .month-picker-month-text-wrapper {
336
+ display: flex;
337
+ align-items: center;
338
+ justify-content: center;
339
+ position: relative;
340
+ width: 60px;
341
+ height: 30px;
342
+ border-radius: 100px; }
343
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.preview {
344
+ border-radius: 1px;
345
+ border-top: 1px solid var(--react-autoql-accent-color);
346
+ border-bottom: 1px solid var(--react-autoql-accent-color); }
347
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.preview.preview-start {
348
+ border-left: 1px solid var(--react-autoql-accent-color);
349
+ margin-left: -1px;
350
+ border-bottom-left-radius: 100px;
351
+ border-top-left-radius: 100px; }
352
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.preview.preview-start.selection-start {
353
+ padding-left: 1px;
354
+ margin-left: -2px; }
355
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.preview.preview-end {
356
+ border-right: 1px solid var(--react-autoql-accent-color);
357
+ margin-right: -1px;
358
+ border-bottom-right-radius: 100px;
359
+ border-top-right-radius: 100px; }
360
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.preview.preview-end.selection-end {
361
+ padding-right: 1px;
362
+ margin-right: -2px; }
363
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.active .month-picker-month-text-wrapper .month-picker-month-text {
364
+ display: flex;
365
+ justify-content: center;
366
+ align-items: center;
367
+ width: 100%;
368
+ height: 100%;
369
+ border-radius: 100px; }
370
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.active:hover .month-picker-month-text-wrapper .month-picker-month-text {
371
+ background: #ffffff2b; }
372
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.active .month-picker-month-text-wrapper {
373
+ background-color: var(--react-autoql-accent-color);
374
+ color: var(--react-autoql-text-color-accent);
375
+ border-radius: 1px; }
376
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.active.selection-start .month-picker-month-text-wrapper {
377
+ border-top-left-radius: 100px;
378
+ border-bottom-left-radius: 100px; }
379
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.active.selection-end .month-picker-month-text-wrapper {
380
+ border-top-right-radius: 100px;
381
+ border-bottom-right-radius: 100px; }
382
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.current-month .month-picker-month-text-wrapper .month-picker-month-text:after {
383
+ content: '';
384
+ position: absolute;
385
+ bottom: 3px;
386
+ left: 50%;
387
+ transform: translate(-50%, 0);
388
+ width: 24px;
389
+ height: 2px;
390
+ border-radius: 2px;
391
+ background: var(--react-autoql-accent-color); }
392
+ .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.current-month.active .month-picker-month-text-wrapper .month-picker-month-text:after {
393
+ background: var(--react-autoql-text-color-accent); }
394
+
395
+
297
396
  .react-autoql-date-picker .rdrCalendarWrapper,
298
- .react-autoql-date-picker .rdrDateRangeWrapper {
397
+ .react-autoql-date-picker .rdrDateRangeWrapper,
398
+ .react-autoql-date-picker .react-autoql-month-range-picker {
299
399
  background: var(--react-autoql-background-color-secondary);
300
400
  color: var(--react-autoql-text-color-primary); }
301
401
  .react-autoql-date-picker .rdrCalendarWrapper .rdrDateDisplayWrapper,
302
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper {
402
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper,
403
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrDateDisplayWrapper {
303
404
  background: var(--react-autoql-background-color-primary); }
304
405
  .react-autoql-date-picker .rdrCalendarWrapper .rdrDateDisplayWrapper .rdrDateDisplay,
305
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper .rdrDateDisplay {
406
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper .rdrDateDisplay,
407
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrDateDisplayWrapper .rdrDateDisplay {
306
408
  color: var(--react-autoql-accent-color) !important; }
307
409
  .react-autoql-date-picker .rdrCalendarWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem,
308
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem {
410
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem,
411
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem {
309
412
  background: var(--react-autoql-background-color-secondary); }
310
413
  .react-autoql-date-picker .rdrCalendarWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem input,
311
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem input {
414
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem input,
415
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem input {
312
416
  color: var(--react-autoql-text-color-primary); }
313
- .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton,
314
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton {
315
- background-color: var(--react-autoql-border-color);
316
- color: var(--react-autoql-text-color-primary);
317
- opacity: 0.8; }
318
- .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton:hover,
319
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton:hover {
320
- opacity: 0.5; }
321
- .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton.rdrPprevButton i,
322
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton.rdrPprevButton i {
323
- border-color: transparent var(--react-autoql-text-color-primary) transparent transparent; }
324
- .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton.rdrNextButton i,
325
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton.rdrNextButton i {
326
- border-color: transparent transparent transparent var(--react-autoql-text-color-primary); }
327
417
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper select,
328
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper select {
418
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper select,
419
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonthAndYearWrapper select {
329
420
  color: var(--react-autoql-text-color-primary); }
330
421
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper select:hover,
331
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper select:hover {
422
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper select:hover,
423
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonthAndYearWrapper select:hover {
332
424
  background-color: var(--react-autoql-border-color); }
425
+ .react-autoql-date-picker .rdrCalendarWrapper .rdrDayDisabled,
426
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrDayDisabled,
427
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrDayDisabled {
428
+ background-color: var(--react-autoql-hover-color);
429
+ pointer-events: none;
430
+ cursor: not-allowed;
431
+ opacity: 0.3; }
333
432
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrWeekDay,
334
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrWeekDay {
433
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrWeekDay,
434
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrWeekDay {
335
435
  color: var(--react-autoql-text-color-placeholder); }
336
- .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
337
- .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
338
- .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
339
- .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span,
340
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
341
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
342
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
343
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
436
+ .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrInRange ~ .rdrDayNumber span,
437
+ .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrStartEdge ~ .rdrDayNumber span,
438
+ .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrEndEdge ~ .rdrDayNumber span,
439
+ .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrSelected ~ .rdrDayNumber span,
440
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrInRange ~ .rdrDayNumber span,
441
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrStartEdge ~ .rdrDayNumber span,
442
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrEndEdge ~ .rdrDayNumber span,
443
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrSelected ~ .rdrDayNumber span,
444
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrInRange ~ .rdrDayNumber span,
445
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrStartEdge ~ .rdrDayNumber span,
446
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrEndEdge ~ .rdrDayNumber span,
447
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDay:not(.rdrDayPassive):not(.rdrDayDisabled) .rdrSelected ~ .rdrDayNumber span {
344
448
  color: var(--react-autoql-text-color-accent); }
345
449
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayPassive .rdrDayNumber span,
346
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayPassive .rdrDayNumber span {
450
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayPassive .rdrDayNumber span,
451
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDayPassive .rdrDayNumber span {
347
452
  color: var(--react-autoql-text-color-placeholder);
348
453
  opacity: 0.6; }
349
454
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayNumber span,
350
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayNumber span {
455
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayNumber span,
456
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDayNumber span {
351
457
  color: var(--react-autoql-text-color-primary); }
352
458
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayToday .rdrDayNumber span:after,
353
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday .rdrDayNumber span:after {
459
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday .rdrDayNumber span:after,
460
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDayToday .rdrDayNumber span:after {
354
461
  background: var(--react-autoql-accent-color); }
355
462
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,
356
463
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,
@@ -359,7 +466,11 @@ span.react-autoql-icon {
359
466
  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,
360
467
  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,
361
468
  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,
362
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {
469
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after,
470
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,
471
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,
472
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,
473
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {
363
474
  background: var(--react-autoql-text-color-accent); }
364
475
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrSelected,
365
476
  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrInRange,
@@ -368,9 +479,27 @@ span.react-autoql-icon {
368
479
  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrSelected,
369
480
  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrInRange,
370
481
  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrStartEdge,
371
- .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrEndEdge {
482
+ .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrEndEdge,
483
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrSelected,
484
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrInRange,
485
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrStartEdge,
486
+ .react-autoql-date-picker .react-autoql-month-range-picker .rdrMonths .rdrEndEdge {
372
487
  background: var(--react-autoql-accent-color); }
373
488
 
489
+ .react-autoql-date-picker .rdrNextPrevButton {
490
+ background-color: var(--react-autoql-border-color);
491
+ color: var(--react-autoql-text-color-primary);
492
+ opacity: 0.8; }
493
+ .react-autoql-date-picker .rdrNextPrevButton:hover {
494
+ opacity: 0.5; }
495
+ .react-autoql-date-picker .rdrNextPrevButton:disabled {
496
+ opacity: 0.5 !important;
497
+ cursor: not-allowed; }
498
+ .react-autoql-date-picker .rdrNextPrevButton.rdrPprevButton i {
499
+ border-color: transparent var(--react-autoql-text-color-primary) transparent transparent; }
500
+ .react-autoql-date-picker .rdrNextPrevButton.rdrNextButton i {
501
+ border-color: transparent transparent transparent var(--react-autoql-text-color-primary); }
502
+
374
503
  .react-autoql-table-container {
375
504
  flex: 1;
376
505
  width: 100% !important;
@@ -451,7 +580,10 @@ span.react-autoql-icon {
451
580
 
452
581
  .react-autoql-table.tabulator {
453
582
  background-color: inherit;
583
+ font-size: 12px;
454
584
  flex: 1; }
585
+ .react-autoql-table.tabulator.table-condensed .tabulator-tableHolder .tabulator-table .tabulator-row {
586
+ min-height: 24px; }
455
587
 
456
588
  .react-autoql-table .tabulator-row {
457
589
  /* user-select: none; This breaks copy/paste */
@@ -480,11 +612,10 @@ span.react-autoql-icon {
480
612
  .react-autoql-table-container.filtering .react-autoql-table .tabulator-col {
481
613
  height: 72px !important; }
482
614
  .react-autoql-table-container.filtering.infinite .tabulator-col.DATE_STRING .tabulator-header-filter,
483
- .react-autoql-table-container.filtering.infinite .tabulator-col.DATE .tabulator-header-filter,
484
- .react-autoql-table-container.filtering.infinite .tabulator-col.DRILLDOWN .tabulator-header-filter {
485
- display: none !important; }
615
+ .react-autoql-table-container.filtering .tabulator-col.DRILLDOWN .tabulator-header-filter {
616
+ display: none; }
486
617
  .react-autoql-table-container.filtering.limited .tabulator-col .tabulator-header-filter,
487
- .react-autoql-table-container.filtering.infinite .tabulator-col:not(.DATE_STRING):not(.DATE) .tabulator-header-filter {
618
+ .react-autoql-table-container.filtering.infinite .tabulator-col:not(.DATE_STRING) .tabulator-header-filter {
488
619
  display: inline; }
489
620
  .react-autoql-table-container.filtering .react-autoql-table .tabulator-tableHolder {
490
621
  min-height: calc(100% - 74px) !important;
@@ -561,13 +692,16 @@ span.react-autoql-icon {
561
692
  border-radius: 4px;
562
693
  background: transparent;
563
694
  padding: 4px 9px !important;
564
- outline: none !important; }
695
+ outline: none !important;
696
+ text-overflow: ellipsis; }
565
697
 
566
698
  .react-autoql-table .tabulator-header-filter input:focus {
567
699
  border: 1px solid #28a8e0; }
568
700
 
569
701
  .tabulator-table .tabulator-row .tabulator-cell {
570
- min-height: 32px; }
702
+ min-height: 20px;
703
+ height: 28px;
704
+ line-height: 20px; }
571
705
 
572
706
  /* Center header titles */
573
707
  .react-autoql-table .tabulator-header .tabulator-col {
@@ -626,6 +760,13 @@ g.legendOrdinal tspan {
626
760
  .legend-title-border:hover {
627
761
  stroke: var(--react-autoql-accent-color) !important; }
628
762
 
763
+ .axis-scaler-border {
764
+ cursor: pointer;
765
+ stroke: transparent;
766
+ opacity: 0.5; }
767
+ .axis-scaler-border:hover {
768
+ stroke: transparent !important; }
769
+
629
770
  .react-autoql-axis-selector-arrow {
630
771
  opacity: 1 !important; }
631
772
 
@@ -1016,6 +1157,7 @@ g.legendOrdinal .legendTitle tspan {
1016
1157
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
1017
1158
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
1018
1159
 
1160
+
1019
1161
  @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
1020
1162
  .react-autoql-response-content-container {
1021
1163
  position: relative;
@@ -1128,16 +1270,23 @@ g.legendOrdinal .legendTitle tspan {
1128
1270
 
1129
1271
  .query-output-footer {
1130
1272
  display: flex;
1131
- justify-content: space-between;
1132
1273
  align-items: flex-end;
1133
1274
  max-height: 150px;
1134
1275
  width: 100%;
1135
1276
  margin-top: 10px; }
1136
1277
  .query-output-footer.no-margin {
1137
1278
  margin: 0; }
1279
+ .query-output-footer.top {
1280
+ justify-content: center; }
1281
+ .query-output-footer.bottom {
1282
+ justify-content: space-between; }
1138
1283
 
1139
1284
  .query-output-table-row-count {
1140
- padding-top: 10px; }
1285
+ width: 100%;
1286
+ padding-top: 3px;
1287
+ font-size: 13px;
1288
+ opacity: 0.6;
1289
+ text-align: center; }
1141
1290
 
1142
1291
  .dashboard-data-limit-warning-icon {
1143
1292
  color: var(--react-autoql-warning-color) !important;
@@ -1311,7 +1460,6 @@ g.legendOrdinal .legendTitle tspan {
1311
1460
  text-decoration: underline;
1312
1461
  cursor: pointer; }
1313
1462
 
1314
-
1315
1463
  .viz-toolbar {
1316
1464
  display: inline-block;
1317
1465
  background: inherit;
@@ -2108,38 +2256,35 @@ g.legendOrdinal .legendTitle tspan {
2108
2256
  .react-autoql-notification-message-input {
2109
2257
  width: 100%; }
2110
2258
 
2111
- .react-autoql-notification-list-item:nth-of-type(0) {
2112
- animation-delay: 0s; }
2113
-
2114
2259
  .react-autoql-notification-list-item:nth-of-type(1) {
2115
- animation-delay: 0.1s; }
2260
+ animation-delay: 0s; }
2116
2261
 
2117
2262
  .react-autoql-notification-list-item:nth-of-type(2) {
2118
- animation-delay: 0.2s; }
2263
+ animation-delay: 0.1s; }
2119
2264
 
2120
2265
  .react-autoql-notification-list-item:nth-of-type(3) {
2121
- animation-delay: 0.3s; }
2266
+ animation-delay: 0.2s; }
2122
2267
 
2123
2268
  .react-autoql-notification-list-item:nth-of-type(4) {
2124
- animation-delay: 0.4s; }
2269
+ animation-delay: 0.3s; }
2125
2270
 
2126
2271
  .react-autoql-notification-list-item:nth-of-type(5) {
2127
- animation-delay: 0.5s; }
2272
+ animation-delay: 0.4s; }
2128
2273
 
2129
2274
  .react-autoql-notification-list-item:nth-of-type(6) {
2130
- animation-delay: 0.6s; }
2275
+ animation-delay: 0.5s; }
2131
2276
 
2132
2277
  .react-autoql-notification-list-item:nth-of-type(7) {
2133
- animation-delay: 0.7s; }
2278
+ animation-delay: 0.6s; }
2134
2279
 
2135
2280
  .react-autoql-notification-list-item:nth-of-type(8) {
2136
- animation-delay: 0.8s; }
2281
+ animation-delay: 0.7s; }
2137
2282
 
2138
2283
  .react-autoql-notification-list-item:nth-of-type(9) {
2139
- animation-delay: 0.9s; }
2284
+ animation-delay: 0.8s; }
2140
2285
 
2141
2286
  .react-autoql-notification-list-item:nth-of-type(10) {
2142
- animation-delay: 1s; }
2287
+ animation-delay: 0.9s; }
2143
2288
 
2144
2289
  .react-autoql-notification-settings {
2145
2290
  background-color: var(--react-autoql-background-color-primary);
@@ -2406,12 +2551,24 @@ g.legendOrdinal .legendTitle tspan {
2406
2551
  .report-problem-menu span.react-autoql-icon svg {
2407
2552
  margin-right: 3px; }
2408
2553
 
2409
- .report-problem-text-area {
2554
+ .report-problem-modal-body h3 {
2555
+ margin-top: 0;
2556
+ margin-bottom: 5px; }
2557
+
2558
+ .report-problem-modal-body .report-problem-radio-group {
2559
+ display: block;
2560
+ margin-bottom: 30px; }
2561
+
2562
+ .report-problem-modal-body .report-problem-text-area {
2563
+ width: 100%;
2564
+ min-height: 80px;
2410
2565
  border-radius: 4px;
2411
2566
  border: 1px solid rgba(0, 0, 0, 0.15);
2412
- margin-top: 10px;
2567
+ margin-top: 15px;
2413
2568
  padding: 5px 10px;
2414
2569
  outline: none !important; }
2570
+ .report-problem-modal-body .report-problem-text-area:focus, .report-problem-modal-body .report-problem-text-area:hover {
2571
+ border-color: var(--react-autoql-accent-color); }
2415
2572
 
2416
2573
  .copy-sql-modal-content {
2417
2574
  position: relative;
@@ -2443,7 +2600,7 @@ g.legendOrdinal .legendTitle tspan {
2443
2600
  font-weight: 600;
2444
2601
  color: var(--react-autoql-accent-color); }
2445
2602
  .chat-single-message-container:not(.no-max-height) {
2446
- max-height: 85%; }
2603
+ max-height: 81%; }
2447
2604
  .chat-single-message-container:first-of-type {
2448
2605
  margin-top: 10px; }
2449
2606
  .chat-single-message-container .query-more-btn {
@@ -2467,6 +2624,7 @@ g.legendOrdinal .legendTitle tspan {
2467
2624
  border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent; }
2468
2625
  .chat-single-message-container.response {
2469
2626
  display: flex;
2627
+ min-height: 0;
2470
2628
  justify-content: flex-start;
2471
2629
  padding-left: 20px;
2472
2630
  animation: scale-up-bl 0.5s ease; }
@@ -2475,8 +2633,7 @@ g.legendOrdinal .legendTitle tspan {
2475
2633
  color: var(--react-autoql-text-color-primary);
2476
2634
  box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
2477
2635
  .chat-single-message-container.response .chat-message-bubble:not(.text) {
2478
- min-width: 125px;
2479
- padding-bottom: 15px; }
2636
+ min-width: 125px; }
2480
2637
  .chat-single-message-container.request {
2481
2638
  display: flex;
2482
2639
  justify-content: flex-end;
@@ -2521,16 +2678,24 @@ g.legendOrdinal .legendTitle tspan {
2521
2678
  margin-left: -5px; }
2522
2679
  .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.right {
2523
2680
  margin-right: -5px; }
2524
- .chat-single-message-container .chat-message-bubble .react-autoql-toolbar:not(.active) {
2525
- pointer-events: none;
2526
- visibility: hidden;
2527
- opacity: 0; }
2681
+ .chat-single-message-container .chat-message-bubble .react-autoql-toolbar {
2682
+ white-space: nowrap; }
2683
+ .chat-single-message-container .chat-message-bubble .react-autoql-toolbar:not(.active) {
2684
+ pointer-events: none;
2685
+ visibility: hidden;
2686
+ opacity: 0; }
2528
2687
  .chat-single-message-container .chat-message-bubble:hover .react-autoql-toolbar,
2529
2688
  .chat-single-message-container .chat-message-bubble .react-autoql-toolbar.active {
2530
2689
  pointer-events: auto;
2531
2690
  visibility: visible;
2532
2691
  opacity: 1; }
2533
2692
 
2693
+ .chat-message-rt-container {
2694
+ padding: 0 20px 15px 20px;
2695
+ animation: scale-up-bl 0.5s ease; }
2696
+ .chat-message-rt-container .react-autoql-reverse-translation {
2697
+ padding-top: 0; }
2698
+
2534
2699
  /* animations */
2535
2700
  @keyframes scale-up-br {
2536
2701
  0% {
@@ -2575,61 +2740,6 @@ g.legendOrdinal .legendTitle tspan {
2575
2740
  height: 60px;
2576
2741
  animation: fadeIn 0.3s; }
2577
2742
 
2578
- .react-autoql-cascader {
2579
- position: relative;
2580
- white-space: nowrap;
2581
- overflow: hidden;
2582
- min-width: 300px; }
2583
- .react-autoql-cascader .options-container {
2584
- transition: max-width 0.3s ease;
2585
- display: inline-block;
2586
- vertical-align: top;
2587
- padding: 0 10px;
2588
- margin: 10px 0;
2589
- width: 100%;
2590
- max-width: calc(100% - 20px);
2591
- white-space: pre-wrap; }
2592
- .react-autoql-cascader .options-container.hidden {
2593
- max-width: 0; }
2594
- .react-autoql-cascader .options-container.hidden span {
2595
- white-space: nowrap; }
2596
- .react-autoql-cascader .options-container.hidden .option {
2597
- opacity: 0;
2598
- pointer-events: none; }
2599
- .react-autoql-cascader .options-container .options-title {
2600
- padding: 4px;
2601
- padding-left: 10px;
2602
- font-weight: 600; }
2603
- .react-autoql-cascader .options-container .cascader-back-arrow {
2604
- position: absolute;
2605
- cursor: pointer;
2606
- top: 15px;
2607
- left: 0; }
2608
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2609
- opacity: 0.8; }
2610
- .react-autoql-cascader .options-container .option {
2611
- cursor: pointer;
2612
- padding: 4px;
2613
- display: flex;
2614
- justify-content: space-between;
2615
- border-radius: 2px;
2616
- padding-left: 10px;
2617
- transition: color 0.1s ease, background-color 0.2s ease; }
2618
- .react-autoql-cascader .options-container .option .option-arrow {
2619
- opacity: 0.7; }
2620
- .react-autoql-cascader .options-container .option .option-execute-icon {
2621
- opacity: 0;
2622
- color: var(--react-autoql-text-color-accent);
2623
- font-size: 16px;
2624
- vertical-align: middle; }
2625
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2626
- background-color: var(--react-autoql-accent-color, #26a7df);
2627
- color: var(--react-autoql-text-color-accent); }
2628
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2629
- opacity: 1; }
2630
- .react-autoql-cascader .options-container:not(:last-child) {
2631
- border-right: 1px solid #d3d3d352; }
2632
-
2633
2743
  .react-autoql-infinite-scroll-container {
2634
2744
  height: 100%;
2635
2745
  overflow: hidden; }
@@ -2839,6 +2949,8 @@ g.legendOrdinal .legendTitle tspan {
2839
2949
  flex-direction: column;
2840
2950
  flex-wrap: nowrap; }
2841
2951
  .react-autoql-card.collapsed .react-autoql-card-content {
2952
+ visibility: hidden;
2953
+ position: absolute;
2842
2954
  pointer-events: none;
2843
2955
  opacity: 0; }
2844
2956
  .react-autoql-card .react-autoql-card-title {
@@ -2949,22 +3061,10 @@ g.legendOrdinal .legendTitle tspan {
2949
3061
  border: 2px solid var(--border-color);
2950
3062
  color: var(--react-autoql-text-color);
2951
3063
  box-shadow: var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)) 0px 8px 24px; }
2952
- .data-explorer-page-container .data-preview-tooltip.place-bottom::before {
2953
- border-bottom-color: var(--border-color) !important; }
2954
- .data-explorer-page-container .data-preview-tooltip.place-bottom::after {
2955
- border-bottom-color: var(--bg-color) !important; }
2956
- .data-explorer-page-container .data-preview-tooltip.place-top::before {
2957
- border-top-color: var(--border-color) !important; }
2958
- .data-explorer-page-container .data-preview-tooltip.place-top::after {
2959
- border-top-color: var(--bg-color) !important; }
2960
- .data-explorer-page-container .data-preview-tooltip.place-right::before {
2961
- border-right-color: var(--border-color) !important; }
2962
- .data-explorer-page-container .data-preview-tooltip.place-right::after {
2963
- border-right-color: var(--bg-color) !important; }
2964
- .data-explorer-page-container .data-preview-tooltip.place-left::before {
2965
- border-left-color: var(--border-color) !important; }
2966
- .data-explorer-page-container .data-preview-tooltip.place-left::after {
2967
- border-left-color: var(--bg-color) !important; }
3064
+ .data-explorer-page-container .data-preview-tooltip.place-bottom::after, .data-explorer-page-container .data-preview-tooltip.place-top::after, .data-explorer-page-container .data-preview-tooltip.place-left::after, .data-explorer-page-container .data-preview-tooltip.place-right::after {
3065
+ border-right: 2px solid var(--react-autoql-border-color);
3066
+ border-top: 2px solid var(--react-autoql-border-color);
3067
+ background: var(--bg-color); }
2968
3068
  .data-explorer-page-container .data-preview-tooltip p {
2969
3069
  margin-bottom: 0; }
2970
3070
  .data-explorer-page-container .data-preview-tooltip .data-explorer-tooltip-section:not(:last-child) {
@@ -2991,6 +3091,17 @@ g.legendOrdinal .legendTitle tspan {
2991
3091
  flex: 1 1;
2992
3092
  min-height: 0;
2993
3093
  color: var(--react-autoql-text-color-primary); }
3094
+ .data-explorer-page-container .data-explorer-section,
3095
+ .data-explorer-page-container .data-explorer-intro-message {
3096
+ opacity: 0;
3097
+ transform: translateY(100%);
3098
+ animation: slideUp 0.6s cubic-bezier(0.26, 0.26, 0, 1);
3099
+ animation-fill-mode: forwards;
3100
+ animation-delay: 0s; }
3101
+ .data-explorer-page-container .data-explorer-section:nth-of-type(1) {
3102
+ animation-delay: 0s; }
3103
+ .data-explorer-page-container .data-explorer-section:nth-of-type(2) {
3104
+ animation-delay: 0.2s; }
2994
3105
  .data-explorer-page-container .data-explorer-intro-message {
2995
3106
  color: var(--react-autoql-text-color-primary);
2996
3107
  text-align: center;
@@ -3017,20 +3128,6 @@ g.legendOrdinal .legendTitle tspan {
3017
3128
  text-align: left; }
3018
3129
  .data-explorer-page-container .data-explorer-topic-icon {
3019
3130
  margin-right: 5px; }
3020
- .data-explorer-page-container .exploring-title {
3021
- display: flex;
3022
- flex-direction: row;
3023
- justify-content: space-between;
3024
- flex-wrap: nowrap;
3025
- align-items: flex-end;
3026
- font-size: 16px;
3027
- margin-bottom: 10px;
3028
- padding: 0px 30px; }
3029
- .data-explorer-page-container .exploring-title .clear-explorer-content-btn {
3030
- cursor: pointer;
3031
- font-size: 14px; }
3032
- .data-explorer-page-container .exploring-title .clear-explorer-content-btn:hover {
3033
- color: var(--react-autoql-accent-color); }
3034
3131
  .data-explorer-page-container .data-explorer-result-container {
3035
3132
  color: var(--react-autoql-text-color-primary);
3036
3133
  flex: 1;
@@ -3055,6 +3152,7 @@ g.legendOrdinal .legendTitle tspan {
3055
3152
  display: flex;
3056
3153
  flex-direction: column;
3057
3154
  flex-wrap: nowrap;
3155
+ flex: 0 1 100vh;
3058
3156
  height: 100%;
3059
3157
  padding-left: 8px; }
3060
3158
  .data-explorer-page-container .data-preview-scroll-component {
@@ -3066,6 +3164,8 @@ g.legendOrdinal .legendTitle tspan {
3066
3164
  display: flex;
3067
3165
  justify-content: center;
3068
3166
  align-items: center; }
3167
+ .data-explorer-page-container .data-explorer-card-placeholder.data-preview {
3168
+ height: 165px; }
3069
3169
  .data-explorer-page-container .query-suggestion-list-scroll-component {
3070
3170
  color: var(--react-autoql-text-color-primary);
3071
3171
  flex: 1; }
@@ -3106,6 +3206,20 @@ g.legendOrdinal .legendTitle tspan {
3106
3206
  .data-explorer-page-container .chat-bar-clear-btn.visible {
3107
3207
  visibility: visible; }
3108
3208
 
3209
+ @keyframes slideDown {
3210
+ 0% {
3211
+ transform: translateY(-100%); }
3212
+ 100% {
3213
+ transform: translateY(0%); } }
3214
+
3215
+ @keyframes slideUp {
3216
+ 0% {
3217
+ transform: translateY(100%);
3218
+ opacity: 0; }
3219
+ 100% {
3220
+ transform: translateY(0%);
3221
+ opacity: 1; } }
3222
+
3109
3223
  .filter-lock-menu {
3110
3224
  z-index: 99999 !important;
3111
3225
  top: -4px !important;
@@ -3858,12 +3972,6 @@ g.legendOrdinal .legendTitle tspan {
3858
3972
  100% {
3859
3973
  opacity: 1; } }
3860
3974
 
3861
- @keyframes slideDown {
3862
- 0% {
3863
- transform: translateY(-100%); }
3864
- 100% {
3865
- transform: translateY(0%); } }
3866
-
3867
3975
  @keyframes snackbarFadeout {
3868
3976
  from {
3869
3977
  top: 60px;
@@ -3969,6 +4077,14 @@ g.legendOrdinal .legendTitle tspan {
3969
4077
  margin-top: -6px;
3970
4078
  opacity: 0.9; }
3971
4079
 
4080
+ .react-autoql-dashboard-tile-inner-div .react-autoql-table,
4081
+ .react-autoql-dashboard-tile-inner-div .query-output-table-row-count {
4082
+ color: var(--react-autoql-text-color-primary);
4083
+ font-size: 11px; }
4084
+
4085
+ .react-autoql-dashboard-tile-inner-div .query-output-table-row-count {
4086
+ padding: 0; }
4087
+
3972
4088
  .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
3973
4089
  height: calc(100% - 47px);
3974
4090
  width: 100%;
@@ -3979,14 +4095,10 @@ g.legendOrdinal .legendTitle tspan {
3979
4095
  color: var(--react-autoql-border-color);
3980
4096
  opacity: 0.3;
3981
4097
  pointer-events: none; }
3982
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
3983
- color: var(--react-autoql-text-color-primary);
3984
- font-size: 11px; }
3985
4098
  .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-response-content-container.table .query-output-footer {
3986
4099
  min-height: 33px; }
3987
-
3988
- .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
3989
- padding: 0; }
4100
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-response-content-container.table .query-output-footer.top {
4101
+ min-height: unset; }
3990
4102
 
3991
4103
  .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper.editing .dashboard-tile-toolbars-container {
3992
4104
  padding: 13px; }
@@ -4001,6 +4113,9 @@ g.legendOrdinal .legendTitle tspan {
4001
4113
  .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper.editing .react-autoql-toolbar-btn.active {
4002
4114
  color: var(--react-autoql-accent-color); }
4003
4115
 
4116
+ .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
4117
+ padding: 0; }
4118
+
4004
4119
  /* Safetynet styles specific to dashboard tiles */
4005
4120
  .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper.editing {
4006
4121
  height: 100%;
@@ -4021,14 +4136,12 @@ g.legendOrdinal .legendTitle tspan {
4021
4136
  width: 100%;
4022
4137
  background: inherit;
4023
4138
  cursor: default; }
4024
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
4025
- padding: 15px 20px 0px 20px; }
4026
4139
  .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
4027
- padding: 7px;
4140
+ padding: 8px 15px 20px 15px;
4028
4141
  align-items: center; }
4029
4142
 
4030
4143
  .dashboard-tile-response-wrapper.editing .dashboard-tile-response-container .react-autoql-response-content-container {
4031
- padding: 7px 12px 20px 18px;
4144
+ padding: 7px 12px 32px 18px;
4032
4145
  align-items: center; }
4033
4146
 
4034
4147
  .dashboard-tile-title-container {